/* ============================================================
   Elleve — design system ESCURO. Paleta 100% via tokens.

   ESTE É O ÚNICO :root DO ARQUIVO (consolidado em 2026-07-29).
   Antes eram dois: o original de 2026-07-08 (teal-carvão + terracota) e um segundo,
   "UI v2 monocromática", empilhado no fim do arquivo — que vencia por vir depois. O doc
   descrevia o primeiro e o app renderizava o segundo. Agora há um lugar só.

   >>> É AQUI que se troca a paleta e a fonte. Dois avisos pra quem for fazer isso:

   1) Trocar --st-livre NÃO muda a legenda nem o dia livre do calendário. É de propósito
      (docs/002 §1): dia livre é CINZA NEUTRO pra os dias ocupados saltarem. Quem pinta é
      `.dot-st.st-livre` (var(--line-2)) e `.mc-cell.st-livre` (rgba branca). O verde
      --st-livre fica só pra folga/disponibilidade. Não "conserte" isso sem decidir antes.

   2) Ainda existem ~100 literais de cor fora daqui. Os que são cópia exata de um token
      (achar por busca, trocar por var()): #57B894 = --st-livre · #C2634A = --st-locada ·
      #D9A441 = --st-reservada · #0d0d0d = --inset · #3a3a3a = --line-2 · #fff ×12 =
      --accent-hi. E o app.css inteiro (9 literais, zero var()) ainda está na paleta velha.
   ============================================================ */

:root, [data-bs-theme="dark"] {
  /* Superfícies (fundo -> elevado) */
  --ground: #090909;
  --panel: #121212;
  --panel-2: #1a1a1a;
  --inset: #0d0d0d;
  --line: #292929;
  --line-2: #3a3a3a;

  /* Texto. ATENÇÃO: --ink-faint #777 REPROVA WCAG AA nas 4 superfícies (3,89:1 a 4,45:1,
     medido em 2026-07-29) e é o token de ~20 componentes, todos em 10-12px. Subir junto
     com a paleta nova — o valor anterior (#8A968F) era AA e o comentário ficou pra trás. */
  --ink: #f4f4f2;
  --ink-dim: #ababab;
  --ink-faint: #777;

  /* Marca / acento — monocromático: cor aparece só em ação e status. */
  --accent: #f1f1ef;
  --accent-hi: #fff;
  --accent-press: #d8d8d5;

  /* Status (os 5 derivados + bloqueada, que ainda não é modelada).
     Cada status tem DUAS cores e as duas são trocáveis:
       --st-X      = a cor cheia (pílula, pontinho, faixa da linha)
       --st-X-ink  = o texto sobre o TINT dessa cor (célula do calendário, alerta)
     O tint do fundo NÃO é um terceiro token: sai de `color-mix` sobre o --st-X, então trocar a
     cor cheia arrasta o tint junto. Antes disso os tints eram `rgba(194,99,74,.26)` com os canais
     copiados à mão — trocar o token pintava o selo e deixava o calendário na cor velha (medido em
     2026-08-01 trocando --st-locada por verde: o selo virou, a célula não).
     O -ink continua sendo escolha humana, não fórmula: é ele que garante contraste sobre o tint,
     e derivar por mistura reprovaria a WCAG em alguns matizes. Ao trocar a paleta, RE-MEDIR. */
  --st-livre: #57B894;
  --st-livre-ink: #bfe6d4;
  --st-locada: #C2634A;
  --st-locada-ink: #f2c8bc;
  --st-encaixe: #9b78dc;
  --st-encaixe-ink: #dccbf5;
  --st-reservada: #D9A441;
  --st-reservada-ink: #f0d69b;
  --st-manut: #4E8FB5;
  --st-manut-ink: #bcd8ea;
  --st-bloq: #6B7280;

  /* Perigo (zona de exclusão, alerta de erro, botão de recusa). HOJE é o mesmo terracota de
     --st-locada, mas por herança da paleta v1, não porque "alugada" e "perigo" sejam a mesma
     ideia. Token próprio pra que trocar a cor de "alugada" não repinte a zona de perigo. */
  --danger: #C2634A;
  --danger-ink: #f2c8bc;

  /* Texto escuro sobre superfície CLARA (pílula de status de fundo claro). */
  --ink-inverse: #10201d;

  /* Fontes — trocar aqui E no <link> do Google Fonts em Components/App.razor.
     Ao trocar, RE-MEDIR: dois pesos fora da escala 400/500/600/700 só existem porque a Fraunces é
     variável — `font-weight: 560` no .page-title e `580` no .elleve-wordmark b, mais os dois
     `font-variation-settings: "opsz" 144`. Numa fonte estática isso arredonda sozinho ou vira
     no-op silencioso. Deixei os dois como estão de propósito: são os elementos mais visíveis do
     app e mexer agora seria mudar duas vezes — a hora de escolher o peso é com a fonte nova na mão.
     Os outros dois avulsos (650) já foram normalizados pra 600. */
  --serif: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r: 12px;
  --r-sm: 8px;

  /* --- Bridge Bootstrap. NÃO APAGUE: sem isto, .card/.table/.form-control/.alert/.badge
     voltam ao default escuro do Bootstrap em TODAS as telas. --- */
  --bs-body-bg: var(--ground);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--ink-dim);
  --bs-tertiary-color: var(--ink-faint);
  --bs-emphasis-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);
  --bs-primary: var(--accent);
  /* TODO paleta nova: estes dois são literais da paleta velha (terracota) enquanto
     --bs-primary já deriva de --accent. Mexer agora mudaria todo rgba(var(--bs-primary-rgb))
     do Bootstrap, o que é mudança visual — fica pra decidir junto da paleta. */
  --bs-primary-rgb: 194, 99, 74;
  --bs-link-color: var(--accent-hi);
  --bs-link-color-rgb: 210, 116, 90;
  --bs-link-hover-color: var(--accent);
  --bs-card-bg: var(--panel);
  --bs-card-border-color: var(--line);
  --bs-secondary-bg: var(--panel-2);
  --bs-tertiary-bg: var(--inset);
  --bs-heading-color: var(--ink);
}

html, body { background: var(--ground); }

body {
  font-family: var(--sans);
  color: var(--ink);
  margin: 0;
}

a { color: var(--accent-hi); text-decoration: none; }
a:hover { color: var(--accent); }

.page-title {
  font-family: var(--serif);
  font-weight: 560;
  font-variation-settings: "opsz" 144;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: 0.2px;
  color: var(--ink);
  margin: 0;
}
.page-sub { color: var(--ink-dim); margin: 8px 0 0; font-size: 15px; }

h1, h2, h3, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ink); }

/* ---------- App shell ---------- */
.cs-toggle-input, .cs-backdrop, .cs-menu { display: none; }

.elleve-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }

.elleve-sidebar {
  background: #0d0d0d;
  border-right: 1px solid var(--line);
  padding: 28px 16px 20px;
  display: flex; flex-direction: column; gap: 28px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.cs-head { display: flex; align-items: center; gap: 12px; padding: 4px 6px; }
.cs-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.cs-logo:hover { text-decoration: none; }
.cs-emblem {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: var(--r-sm);
  background: #2b2b2b; box-shadow: none;
}
.cs-emblem svg { width: 22px; height: 22px; }
.elleve-wordmark { line-height: 1; }
.elleve-wordmark b {
  font-family: var(--serif); font-weight: 580; font-variation-settings: "opsz" 144;
  font-size: 27px; letter-spacing: 0.3px; color: var(--ink); display: block;
}
.elleve-wordmark span {
  display: block; font-size: 8.5px; letter-spacing: 1.8px; color: var(--ink-faint);
  margin-top: 3px; text-transform: uppercase;
}

.elleve-main { min-width: 0; display: flex; flex-direction: column; }
.elleve-topbar { display: none; }
.elleve-content { flex: 1; padding: 32px 36px 40px; }
.elleve-container { max-width: 1460px; margin: 0 auto; }

/* ---------- Nav ---------- */
.cs-nav { display: flex; flex-direction: column; gap: 5px; }
.elleve-nav-item {
  display: flex; align-items: center; gap: 11px;
  border-radius: var(--r-sm);
  color: var(--ink-dim); font-weight: 500;
}
.elleve-nav-item:hover { background: var(--panel-2); color: var(--ink); }
.elleve-nav-item .ico { display: inline-flex; }
.elleve-nav-item .ico svg { width: 17px; height: 17px; opacity: 0.85; }
.elleve-nav-item.active { color: var(--ink); }
.elleve-nav-item.active .ico svg { opacity: 1; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: var(--r-sm); min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary { border: none; }
.btn-outline-secondary { border-color: var(--line-2); color: var(--ink-dim); }
.btn-outline-secondary:hover { background: var(--panel-2); border-color: var(--line-2); color: var(--ink); }
.btn-outline-danger { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--accent-hi); }
.btn-outline-danger:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-link { color: var(--ink-dim); }
.btn-link:hover { color: var(--ink); }
.elleve-add-btn { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  background: var(--inset); border: 1px solid var(--line-2); color: var(--ink); border-radius: var(--r-sm);
  min-height: 40px;
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control:focus, .form-select:focus {
  background: var(--inset); color: var(--ink);
  /* O halo de foco ficou terracota enquanto a borda virou branca na UI v2 — herança da paleta v1,
     não decisão. Tokenizado como está pra não mudar cor agora; revisar com a paleta nova. */
  border-color: var(--accent); box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--danger) 18%, transparent);
}
.form-check-input { background-color: var(--inset); border-color: var(--line-2); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-label { color: var(--ink-dim); font-size: 13px; }

/* ---------- Cards / tables ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); color: var(--ink); margin: 0; font-size: 14px; }
.table > thead { color: var(--ink-faint); }
.table > thead th { font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; border-color: var(--line); padding: 12px 14px; }
.table > tbody > tr { border-color: var(--line); }
.table > tbody > tr:hover > * { background: var(--panel-2); }
.table > :not(caption) > * > * { border-bottom-color: var(--line); padding: 12px 14px; }
.table-responsive { border-radius: var(--r); }

/* Tabela → lista empilhada no mobile (cada linha vira "Rótulo: valor"). Aplicar `elleve-stack-sm` na <table>. */
@media (max-width: 680px) {
  .elleve-stack-sm thead { display: none; }
  /* `td` sai desta lista: duas linhas abaixo ele vira `display: flex`, então o `block` daqui era
     letra morta. `width: 100%` continua valendo pros três. */
  .elleve-stack-sm tbody, .elleve-stack-sm tr { display: block; }
  .elleve-stack-sm tbody, .elleve-stack-sm tr, .elleve-stack-sm td { width: 100%; }
  .elleve-stack-sm tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .elleve-stack-sm tr:last-child { border-bottom: 0; }
  .elleve-stack-sm td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0; border: 0; text-align: right; }
  .elleve-stack-sm td::before { content: attr(data-label); color: var(--ink-dim); font-size: 12px; font-weight: 500; text-align: left; flex: 0 0 auto; }
  .elleve-stack-sm td.cell-title { justify-content: flex-start; font-size: 15px; font-weight: 600; padding-bottom: 8px; }
  .elleve-stack-sm td.cell-title::before { content: none; }
}
.cell-title a { color: var(--ink); font-weight: 600; }
.cell-title a:hover { color: var(--accent-hi); }
.text-muted { color: var(--ink-dim) !important; }
.alert-warning { background: color-mix(in srgb, var(--st-reservada) 12%, transparent); border-color: color-mix(in srgb, var(--st-reservada) 30%, transparent); color: var(--st-reservada-ink); }
.alert-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger-ink); }
.alert-success { background: color-mix(in srgb, var(--st-livre) 12%, transparent); border-color: color-mix(in srgb, var(--st-livre) 30%, transparent); color: var(--st-livre-ink); }
.alert-flash { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.alert-flash .flash-close {
  background: none; border: none; color: inherit; font-size: 17px; line-height: 1;
  padding: 4px 8px; cursor: pointer; border-radius: var(--r-sm); opacity: 0.75;
}
.alert-flash .flash-close:hover { opacity: 1; }
.badge.text-bg-secondary { background: var(--panel-2) !important; color: var(--ink-dim); }

/* ---------- Status chips + dots ---------- */
.elleve-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.dot, .dot-st { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot-green { background: var(--st-livre); }
.dot-gray { background: var(--st-bloq); }
.dot-st.st-livre { background: var(--line-2); }
.dot-st.st-reservada { background: var(--st-reservada); }
.dot-st.st-locada { background: var(--st-locada); }
.dot-st.st-manutencao { background: var(--st-manut); }
.dot-st.st-encaixe { background: var(--st-encaixe); }

/* Avatar / thumb (lista de poltronas) */
.elleve-cell-client { display: inline-flex; align-items: center; gap: 10px; }
.elleve-avatar {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 600; font-size: 12px;
  background: var(--panel-2); color: var(--ink-dim);
}
.elleve-thumb { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; border: 1px solid var(--line); }


/* ---------- Visão: cards ---------- */
.visao-legenda { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--ink-dim); }
.visao-legenda span { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- Card da Disponibilidade (reescrito 2026-07-29) ----------
   O card responde "essa poltrona está livre quando?", então quem manda é o CALENDÁRIO.
   Antes era o contrário: a foto tinha 240px garantidos e o calendário ficava com o resto —
   em janela de 660px isso dava célula de 1,7px. E o calendário era ancorado no rodapé por
   um `margin: auto auto 0` dentro de um card de altura fixa (320px), o que produzia um
   buraco de até 140px entre o texto e ele.
   Agora: célula FIXA de 32px (o calendário dita a largura mínima do card), altura do card
   AUTOMÁTICA (sem sobra pra distribuir) e tudo alinhado na mesma margem esquerda.
   O piso da coluna = 7×32 + 6×4 (calendário) + 32 (padding) + 2 (borda) = 282 → 288px. */
.visao-grid {
  display: grid;
  /* O teto de 336px mora no CARD (logo abaixo), não na trilha. Parece detalhe e não é:
     `auto-fill` conta quantas colunas cabem usando o MÁXIMO da minmax quando ele é definido.
     Com `minmax(288px, 336px)` a conta virava de 336 em 336 e, num monitor de 1366 (grade de
     1019px), dava (1019+16)÷352 = 2,94 → 2 colunas, deixando 331px vazios quando três cabiam
     folgadas. Custou a 3ª coluna justamente na largura de notebook mais comum.
     Com a trilha em `1fr` a conta usa o piso de 288 e volta a dar 3 colunas; o teto no card
     garante que ele nunca passe de 336 = 304 do calendário + 32 de padding, então a borda
     direita do calendário casa com a do cabeçalho em qualquer largura (desalinho 0).
     min() evita estouro em telas estreitas: abaixo de 288px a coluna passa a ser 100%. */
  grid-template-columns: repeat(auto-fill, minmax(min(288px, 100%), 1fr));
  gap: 16px;
}
.visao-card {
  display: flex; flex-direction: column; gap: 12px;
  /* 336 = 304 (7 células de 40px + 6 gaps de 4px) + 32 de padding. Quando a trilha é mais
     estreita que isso o card a preenche e o calendário acompanha; quando é mais larga, o card
     para aqui e sobra folga ENTRE os cards — 33,7px em 1440 contra os 16px do gap. É o preço
     de contar as colunas pelo piso, e é o que devolve a 3ª coluna em 1360/1366. */
  max-width: 336px;
  padding: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s;
}
/* box-shadow no lugar de translateY: transform cria stacking context e prendia o tooltip
   do dia dentro do card, deixando-o atrás do card vizinho. */
.visao-card:hover { border-color: var(--line-2); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.visao-card.vc-foco { outline: 2px solid var(--ink); outline-offset: 2px; }

.vc-head { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.vc-thumb {
  position: relative; width: 72px; height: 96px; /* 3:4, a proporção das fotos reais */
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--inset); overflow: hidden; flex: 0 0 auto;
}
/* contain = a poltrona inteira sempre aparece, adaptando a QUALQUER proporção (não corta). */
.vc-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.vc-thumb .vc-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-faint); font-size: 10px; text-align: center; }
.vc-ident { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vc-specs { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--ink-dim); font-size: 12px; min-width: 0; }
/* Renderiza SEMPRE (mesmo livre) pra todos os cards da linha terem a mesma altura. */
.vc-datas { display: flex; align-items: baseline; gap: 8px; margin: 0; min-height: 20px; font-size: 12px; }
.vc-datas span { color: var(--ink-faint); }
.vc-datas strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.vc-badge {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; white-space: nowrap;
  /* Texto escuro é o default (a pílula de "livre" tem fundo claro). Os status de fundo escuro
     sobrescrevem pra #fff logo abaixo — esses #fff continuam literais de propósito: com a paleta
     nova, se algum status virar cor clara, o branco reprova contraste e precisa ser reavaliado
     à mão. Não dá pra derivar por fórmula sem medir. */
  padding: 4px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--ink-inverse);
}
.vc-badge .d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vc-badge.st-livre { background: var(--st-livre); }
.vc-badge.st-locada { background: var(--st-locada); color: #fff; }
.vc-badge.st-reservada { background: var(--st-reservada); }
.vc-badge.st-manutencao { background: var(--st-manut); color: #fff; }
.vc-badge.st-encaixe { background: var(--st-encaixe); color: #fff; }
.vc-name { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-name:hover { color: var(--accent-hi); }
/* .vc-meta continua servindo o DETALHE anual (Poltronas/Detalhe.razor) — o card usa .vc-specs. */
.vc-meta { display: flex; gap: 14px; color: var(--ink-dim); font-size: 12.5px; margin: 3px 0 12px; }
.vc-meta b { color: var(--ink); font-weight: 600; }

/* ---------- Mini-calendário (card + visão anual) ----------
   O tamanho da célula e o gap são tokens LOCAIS: o card sobrescreve pra 32/4 (grid de 4px), e o
   detalhe anual herda o 3px de sempre — assim mexer no card não desloca a outra tela. */
.mini-cal { --mc-gap: 3px; margin-top: 6px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.cal-head b { font-size: 12.5px; color: var(--ink); }
/* O fallback do var() é obrigatório: o detalhe anual monta o calendário SEM o wrapper .mini-cal,
   então herdaria gap indefinido (= sem gap) e a célula cresceria de 28 pra 30,6px. */
.mc-head, .mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--mc-gap, 3px); }
.mc-head { font-size: 10px; color: var(--ink-faint); text-align: center; margin-bottom: 3px; }
.mc-cell { aspect-ratio: 1; border-radius: 5px; display: grid; place-items: center; font-size: 11px; color: var(--ink-dim); background: var(--inset); font-variant-numeric: tabular-nums; }
.mc-cell[data-tooltip] { position: relative; cursor: help; }
.mc-cell[data-tooltip]:hover::after, .mc-cell[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%);
  z-index: 20; width: max-content; max-width: 220px; padding: 7px 9px; border: 1px solid var(--line-2);
  border-radius: 6px; background: #050505; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  font-size: 11px; line-height: 1.35; text-align: left; pointer-events: none;
}
.mc-cell.mc-blank { background: transparent; }
.mc-cell.st-livre { background: rgba(255,255,255,0.045); color: var(--ink-dim); }
.mc-cell.st-reservada { background: color-mix(in srgb, var(--st-reservada) 22%, transparent); color: var(--st-reservada-ink); }
.mc-cell.st-locada { background: color-mix(in srgb, var(--st-locada) 26%, transparent); color: var(--st-locada-ink); }
.mc-cell.st-manutencao { background: color-mix(in srgb, var(--st-manut) 24%, transparent); color: var(--st-manut-ink); }
.mc-cell.st-encaixe { background: color-mix(in srgb, var(--st-encaixe) 30%, transparent); color: var(--st-encaixe-ink); }
.mc-cell.hoje { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ---------- Visão anual (detalhe) ---------- */
/* Cabeçalho: foto num card 3:4 pequeno/médio (altura fixa) — não empurra o calendário pra baixo. */
.poltrona-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
/* Saíram daqui em 2026-08-01 duas regras inertes, medidas antes de remover:
   `.pt-side .visao-legenda` (base e override) era SELETOR MORTO — a legenda de status mora em
   `.vc-info`, no bloco da esquerda, nunca dentro do .pt-side.
   `@media (max-width: 620px) { .pt-side { align-items: flex-start; width: 100% } }` não movia
   pixel nenhum: `align-items` só desloca filho MAIS ESTREITO que o bloco, e nessa faixa os botões
   já são o filho mais largo e o painel de seleção é `width: min(300px, 100%)` = 100%. Com isso o
   breakpoint 620px deixa de existir no arquivo — era usado só por esta regra. */
.pt-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.vc-topo { display: flex; align-items: center; gap: 16px; min-width: 0; flex-wrap: wrap; }
.vc-foto { flex: 0 0 auto; width: 150px; height: 200px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--inset); object-fit: contain; object-position: center; }
.vc-foto-vazia { display: grid; place-items: center; color: var(--ink-faint); font-size: 12px; }
.vc-info { min-width: 0; }
.ano-nav { display: inline-flex; align-items: center; gap: 6px; }
/* Piso de 260px na coluna do mês, o mesmo raciocínio do card: a conta sai do CONTEÚDO essencial,
   não de um número redondo. 7 células × 32px + 6 gaps × 3px + 16 de padding + 2 de borda = 260.
   Com o piso antigo de 220px a célula caía pra ~25px, e mesmo na largura cheia dava 31px —
   medido em 2026-07-30, um pixel abaixo do piso de 32px que o card da Disponibilidade já usa.
   O padding do painel foi de 12 pra 8 porque é ele que paga esse pixel: em 1440 a coluna mede
   261,25px, e com padding 12 a célula fecha em 31,0. Mantém as 4 colunas de meses. */
.ano-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ano-mes { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; }
/* Seleção de período no calendário (clicar dia início/fim) para criar um aluguel */
.mc-cell.mc-click { cursor: pointer; }
.mc-cell.mc-sel { outline: 2px solid var(--ink); outline-offset: -2px; }
/* Legenda na faixa abaixo do nome da poltrona (não no canto). */
.vc-legenda { margin-top: 10px; }
/* Resumo da seleção: card compacto no espaço vazio do cabeçalho (não vira linha nova). */
.cal-selecao { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 10px 12px; width: min(300px, 100%); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); font-size: 12.5px; color: var(--ink-dim); text-align: left; }
.cal-selecao .cs-linha { display: flex; align-items: center; gap: 6px; }
.cal-selecao .cs-linha strong { color: var(--ink); }
.cal-selecao .cs-cal { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ink-dim); }
.cal-selecao .cs-sub { color: var(--ink-faint); font-size: 11.5px; }
/* BUG DE COR CONHECIDO, preservado de propósito: o encaixe usa a tinta de MANUTENÇÃO (azul) em vez
   da própria (roxo). Tokenizado como está pra esta passada ser delta zero — a correção é trocar por
   var(--st-encaixe-ink) e entra junto com a paleta nova, que é quando cor pode mudar. */
.cal-selecao .cs-encaixe { color: var(--st-manut-ink); }
.cal-selecao .cs-erro { color: var(--danger-ink); }
.cal-selecao .cs-acoes { display: flex; gap: 6px; margin-top: 4px; }
.cal-selecao .cs-acoes .btn { flex: 1; white-space: nowrap; }
.am-titulo { font-family: var(--serif); font-weight: 600; font-size: 17px; margin-bottom: 8px; text-transform: capitalize; color: var(--ink); }

/* Rodapé "Clientes por mês" (abas) */
.poltrona-agenda { margin-top: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.pa-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.pa-head h2 { font-family: var(--serif); font-size: 18px; margin: 0 0 2px; color: var(--ink); }
.pa-head span { color: var(--ink-dim); font-size: 12.5px; }
.pa-ano { flex: 0 0 auto; }
.pa-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pa-tab { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--inset); color: var(--ink-dim); font-size: 12px; cursor: pointer; }
.pa-tab:hover { border-color: var(--line-2); color: var(--ink); }
.pa-tab.active { background: var(--panel-2); border-color: var(--line-2); color: var(--ink); font-weight: 600; }
/* Desktop: meses viram ABAS (aba ativa "colada" no conteúdo). Mobile fica com os quadradinhos acima. */
@media (min-width: 681px) {
  .pa-tabs { gap: 2px; padding-bottom: 0; align-items: flex-end; }
  .pa-tab { min-height: 36px; padding: 8px 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; margin-bottom: -1px; }
  .pa-tab:hover { background: var(--inset); border-color: transparent; color: var(--ink); }
  .pa-tab.active { background: var(--panel-2); border-color: var(--line); border-bottom: 1px solid var(--panel-2); color: var(--ink); }
}
.pa-badge { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--line-2); color: var(--ink); font-size: 10px; font-weight: 700; }
.pa-empty { color: var(--ink-faint); font-size: 13px; margin: 4px 0 0; }
.pa-list { display: grid; gap: 8px; }
/* PISO DE 160px NA COLUNA DO NOME. O track de datas é `auto`, ou seja, dimensionado pelo
   conteúdo, e track `auto` ganha de `minmax(0, 1fr)`: medido em 2026-07-30, as datas ficavam
   com os MESMOS 283,7px em 1440 e em 660, e o nome do cliente era a única coluna que cedia —
   caía pra 108px e cortava, quebrando o telefone no meio dos dígitos. Com o piso, quem cede
   passa a ser a coluna de datas, que tem flex-wrap e empilha os chips sem perder informação. */
.pa-item { display: grid; grid-template-columns: 116px minmax(160px, 1fr) auto auto; align-items: center; gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--inset); }
.pa-cancelar { background: none; border: 1px solid var(--line-2); color: var(--ink-dim); font-size: 12px; padding: 5px 11px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; }
.pa-cancelar:hover { border-color: var(--st-locada); color: var(--st-locada); }
.pa-contato2 { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-dim); margin-left: 4px; }

/* ── Contratos: gerar, filtros ── */
.ct-filtros { flex-wrap: wrap; gap: 12px; }
/* Os dois campos precisam PODER quebrar e encolher. Sem `flex-wrap` no bloco e `min-width: 0` nos
   filhos, o par "De/Até" mantinha a largura natural (409px) dentro de uma barra de 339px e o campo
   "Até" saía para fora do cartão — medido em 443px de viewport: 85px de vazamento.
   `flex: 1 1 150px` deixa os dois lado a lado quando cabe e empilhados quando não cabe. */
.ct-filtro-datas { display: flex; gap: 12px; flex-wrap: wrap; min-width: 0; }
.ct-filtro-datas label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-dim); flex: 1 1 150px; min-width: 0; }
.ct-filtro-datas input { width: auto; min-width: 0; flex: 1 1 auto; }


/* Situação do contrato: rascunho até o PDF sair. */
.ct-selo {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: .74rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.ct-selo-rascunho { background: color-mix(in srgb, var(--st-reservada) 16%, transparent); color: var(--st-reservada); }
.ct-selo-pronto { background: color-mix(in srgb, var(--st-livre) 16%, transparent); color: var(--st-livre); }

/* ── Editor de .docx (ONLYOFFICE) em tela cheia ──
   O editor encosta nas bordas do conteúdo e desce até o fim da janela. Pra isso a página do editor
   desliga o padding e o limite de largura do container (via :has, sem precisar de JS) e a cadeia
   inteira vira flex — assim o iframe herda a altura que sobra em vez de um valor chutado. */
.elleve-content:has(.doc-page) { padding: 0; display: flex; flex-direction: column; }
.elleve-content:has(.doc-page) > .elleve-container {
    max-width: none; margin: 0; flex: 1; display: flex; flex-direction: column; min-height: 0;
}
.doc-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Barra fina de ações. Deliberadamente enxuta: nome do arquivo, salvar e imprimir já existem
   DENTRO do ONLYOFFICE — repetir aqui só roubava altura do documento. */
.doc-bar {
    position: relative; z-index: 10; flex: 0 0 auto;
    display: flex; align-items: center; gap: 14px;
    padding: 0 16px; height: 46px;
    background: var(--panel); border-bottom: 1px solid var(--line);
}
/* Virou <button> (sai gravando antes de navegar), então precisa do reset — e de 24px de altura
   mínima pra ser um alvo de clique honesto. A barra tem 46px fixos, isso não a estica. */
.doc-bar-voltar {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    color: var(--ink-dim); text-decoration: none; font-size: 13px;
    background: none; border: 0; padding: 0; font-family: inherit; min-height: 24px; cursor: pointer;
}
.doc-bar-voltar:hover:not(:disabled) { color: var(--ink); }
.doc-bar-voltar:disabled { cursor: default; opacity: .7; }
/* É o <h1> da página (o FocusOnNavigate procura h1). margin: 0 mantém a barra em 46px. */
.doc-bar-nome {
    font-weight: 600; font-size: 14px; color: var(--ink); margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.doc-bar-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.doc-bar-aviso { font-size: 12px; color: var(--ink-dim); }

.doc-editor-full { flex: 1; min-height: 340px; background: var(--ground); }
.doc-editor-full > iframe, .doc-editor-full > div { width: 100%; height: 100%; border: 0; display: block; }

/* Abaixo de 900px o .elleve-shell vira display:block e a cadeia de altura em flex morre no meio:
   sem uma altura DEFINIDA, o editor cai no min-height e o documento vira uma faixa de 150px.
   A altura tem que ir no .elleve-main (que ali é bloco comum) — pôr no .elleve-content não adianta,
   porque ele é item flex com flex-basis:0, e flex-basis ganha do height. */
@media (max-width: 900px) {
    .elleve-main:has(.doc-page) { height: 100dvh; }
    .elleve-content:has(.doc-page) { min-height: 0; }
}

/* Campos automáticos: painel que FLUTUA por cima do editor. Se empurrasse o documento pra baixo,
   ela perderia altura justamente na hora de montar o modelo. */
.doc-campos-drop { position: relative; }
.doc-campos-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
    width: 340px; max-height: min(70vh, 560px); overflow-y: auto;
    background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r);
    padding: 10px; display: flex; flex-direction: column; gap: 4px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}
.doc-campos-dica { font-size: 11.5px; color: var(--ink-dim); margin: 0 0 6px; line-height: 1.35; }
.doc-copiado { color: var(--st-livre); }
.doc-copiado code { color: inherit; background: none; padding: 0; }
.doc-campo {
    display: flex; flex-direction: column; align-items: flex-start;
    background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 5px 9px; cursor: pointer; text-align: left; line-height: 1.3; width: 100%;
}
.doc-campo:hover { border-color: var(--line-2); }
/* Selecionável de propósito: se a cópia falhar no navegador dela, o aviso manda copiar
   à mão — e isso só é possível se der pra marcar o texto da etiqueta. */
.doc-campo code { font-size: 12px; color: var(--st-reservada); background: none; padding: 0; user-select: text; }
.doc-campo span { font-size: 11px; color: var(--ink-dim); }
.doc-campo-copiado { border-color: var(--st-livre); }

@media (max-width: 700px) {
    .doc-bar { gap: 10px; padding: 0 12px; }
    .doc-bar-nome { display: none; } /* o ONLYOFFICE já mostra o nome do documento */
    .doc-campos-menu { width: min(340px, calc(100vw - 32px)); }
}



/* ── Lembretes / Afazeres (abas por dia) ── */
.lb-tabs { margin-bottom: 16px; }
.lb-tab-atraso.active { color: var(--st-locada); }
.lb-badge-atraso { background: var(--st-locada) !important; color: #fff !important; }
.lb-hoje-pill { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; background: var(--accent); color: var(--ground, #101a19); border-radius: 999px; padding: 1px 7px; margin-left: 5px; }

.lb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
/* Altura fica AQUI, no bloco que contém as duas listas — não em cada uma.
   Antes, "a fazer" e "concluídos" tinham `max-height: calc(100vh - 260px)` cada: com as duas abertas
   somavam quase o dobro da tela e a PÁGINA passava a rolar junto com a lista (rolagem dupla). Medido
   com 26 poltronas num dia cheio: 1191px de página numa viewport de 720. Agora elas repartem o espaço.
   ⚠️ `min-height: 0` nos filhos é obrigatório: sem ele o item flex não encolhe abaixo do conteúdo e a
   rolagem interna nunca acontece. */
.lb-conteudo { min-width: 0; display: flex; flex-direction: column; max-height: calc(100vh - 224px); }
.lb-vazio-full { color: var(--ink-faint); font-size: 13px; padding: 20px 4px; margin: 0; }
.lb-lista { display: flex; flex-direction: column; gap: 6px; }
.lb-lista-scroll { flex: 1 1 auto; min-height: 96px; overflow-y: auto; padding-right: 4px; }

/* Piso de 140px no nome pelo mesmo motivo do .pa-item: o último track é `auto` e não cede. */
.lb-row { width: 100%; text-align: left; display: grid; grid-template-columns: 74px 52px minmax(140px, 1fr) auto; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-sm); padding: 10px 14px; cursor: pointer; }
.lb-row:hover { border-color: var(--line-2); }
.lb-row.sel { box-shadow: 0 0 0 1px var(--accent); border-color: var(--accent); }
.lb-row-tipo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.lb-row-hora { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-row-cli { min-width: 0; display: flex; flex-direction: column; }
.lb-row-cli strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row-pol { font-size: 12px; color: var(--ink-dim); }
.lb-row-urg { font-size: 12px; white-space: nowrap; text-align: right; }
/* urgência: vermelho (atraso) · laranja (atenção) · neutro (normal/futuro) */
.lb-u-atraso { border-left-color: var(--st-locada); }
.lb-u-atraso .lb-row-tipo, .lb-u-atraso .lb-row-hora, .lb-u-atraso .lb-row-urg { color: var(--st-locada); }
.lb-u-atencao { border-left-color: var(--st-reservada); }
.lb-u-atencao .lb-row-tipo, .lb-u-atencao .lb-row-hora, .lb-u-atencao .lb-row-urg { color: var(--st-reservada); }
.lb-u-normal { border-left-color: var(--line-2); }
.lb-u-normal .lb-row-tipo { color: var(--ink-dim); }

.lb-concl-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: 13px; padding: 12px 4px 8px; margin-top: 12px; cursor: pointer; }
.lb-chev { display: inline-block; transition: transform .12s ease; }
.lb-chev.open { transform: rotate(90deg); }
.lb-concl-count { color: var(--ink-faint); }
.lb-row-done { grid-template-columns: 74px 52px minmax(0, 1fr) auto; background: var(--inset); border-left-color: var(--line); opacity: .75; cursor: default; }
.lb-row-done .lb-row-tipo, .lb-row-done .lb-row-hora { color: var(--ink-faint); }
.lb-row-done .lb-row-cli strong { text-decoration: line-through; color: var(--ink-dim); }
.lb-desfazer { background: none; border: 1px solid var(--line-2); color: var(--ink-dim); font-size: 12px; padding: 4px 11px; border-radius: var(--r-sm); cursor: pointer; }
.lb-desfazer:hover { border-color: var(--accent); color: var(--accent-hi); }

/* max-height + overflow próprio, igual ao .al-ficha. Sem isso o painel sticky cresce sem limite:
   medido em 2026-07-30 injetando conteúdo alto, ele foi a 1303px numa viewport de 900 — o sticky
   deixa de segurar e as duas colunas passam a rolar em ritmos diferentes. */
.lb-detalhe { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.lb-det-title { font-size: 15px; margin: 0 0 12px; }
.lb-det-vazio { color: var(--ink-faint); font-size: 13px; margin: 0; }
.lb-det-body { display: flex; flex-direction: column; gap: 12px; }
.lb-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.lb-tag-entrega { color: var(--st-livre); }
.lb-tag-retirada { color: var(--accent-hi); }
.lb-det-quando { font-size: 13px; color: var(--ink-dim); margin-left: 8px; }
.lb-det-sec { display: flex; flex-direction: column; gap: 3px; }
.lb-det-nome { font-size: 16px; }
.lb-det-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.lb-det-line { font-size: 13px; }
.lb-feito { margin-top: 8px; width: 100%; background: transparent; border: 1px solid var(--line-2); color: var(--ink-dim); font-size: 13px; padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer; }
.lb-feito:hover { border-color: var(--st-livre); color: var(--st-livre); }
@media (max-width: 900px) {
  .lb-layout { grid-template-columns: 1fr; }
  /* Em coluna única a ficha não é mais painel lateral: solta o teto de altura junto com o sticky,
     senão ela ganha uma barra de rolagem interna no meio da página. */
  .lb-detalhe { position: static; max-height: none; overflow-y: visible; }
  /* Mesma razão para as listas: empilhadas, elas devem crescer e deixar a PÁGINA rolar. Mantendo o teto
     aqui, o celular ganharia uma caixinha rolável dentro de uma página que também rola — duas rolagens
     concorrentes no mesmo gesto de dedo. */
  .lb-conteudo { max-height: none; display: block; }
  .lb-lista-scroll { min-height: 0; overflow-y: visible; padding-right: 0; }
  .lb-row { grid-template-columns: 64px 46px minmax(120px, 1fr) auto; gap: 8px; padding: 9px 10px; }
}
.pa-status { flex: 0 0 auto; }
.pa-cli { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pa-nome { color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.pa-nome:hover { color: var(--accent-hi); text-decoration: underline; }
.pa-wpp { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.pa-wpp .ap-wpp { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.pa-wpp .ap-wpp:hover { color: #57d38a; }
.pa-ic { width: 14px; height: 14px; flex: 0 0 auto; }
.pa-ic-wpp { color: #25d366; }
.pa-datas { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pa-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-dim); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-chip .pa-ic { opacity: .7; }
.pa-quando { display: inline-flex; align-items: center; gap: 4px; }
.pa-chip-hora { color: var(--ink-faint); font-size: 11px; }
.pa-chip-seta { color: var(--ink-faint); padding: 0 1px; }
.pa-chip-manut { color: var(--st-manut-ink); }
.dot-st.st-finalizada { background: var(--line-2); }
/* Empilha em 700px, não em 620px. Entre 620 e 700 as três colunas ainda cabiam no papel, mas o
   chip de datas é `white-space: nowrap` e não encolhe além de ~230px, então o que sobrava pro
   nome era menos que o piso de 160px. 700px já é breakpoint declarado neste arquivo — não
   inventa mais um. */
@media (max-width: 700px) {
  .pa-item { grid-template-columns: 1fr; align-items: start; gap: 8px; }
  .pa-datas { justify-content: flex-start; }
}

/* O Gantt e o painel da Agenda saíram em 2026-07-29 junto com a tela (descontinuada no commit
   af97ec5, quando ela deixou o menu). Sobrou daquele bloco só o link de WhatsApp, que é usado por
   telas vivas via Components/Shared/WhatsAppLink.razor. */
.ap-wpp { color: var(--st-livre); }

/* ---------- Foco de teclado ---------- */
.btn:focus-visible, .elleve-nav-item:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.vc-name:focus-visible, .cs-logo:focus-visible, .cell-title a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none;
}

/* ---------- Linha de tabela clicável ---------- */
.row-link { cursor: pointer; }

/* ---------- Diálogo de confirmação (substitui o confirm() nativo) ---------- */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: grid; place-items: center; padding: 16px;
}
.confirm-panel {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 24px; max-width: 420px; width: 100%;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.confirm-panel .confirm-msg { color: var(--ink); font-size: 14px; margin: 0 0 20px; }
.confirm-panel .confirm-actions { display: flex; justify-content: flex-end; gap: 12px; }

/* ---------- Utilidades ---------- */

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 3px solid var(--ground); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Responsivo ---------- */
/* Tablet: 2 cards por linha na Dashboard. */
/* As duas overrides de `.visao-grid` que moravam aqui (repeat(2,1fr) em 1180px e 1fr em 640px)
   saíram: cravavam o número de colunas com `1fr`, o que anulava o teto de 336px do card e
   trazia de volta o vão à direita do calendário — medido em 40,5px @820 mesmo depois do teto.
   O `auto-fill` da regra base já resolve as três faixas sozinho, e sem inventar breakpoint. */
/* O bloco `@media (max-width: 900px)` que morava aqui era o shell mobile da PRIMEIRA geração — a
   barra lateral virava uma faixa horizontal. Ele estava morto desde a UI v2: o bloco de mesma
   largura lá embaixo transforma a lateral em gaveta off-canvas e sobrescrevia position, height,
   flex-direction, align-items, flex-wrap e padding. Só sobrava o `grid-template-columns: 1fr`,
   irrelevante depois que a v2 põe `display: block` no shell. Removido em 2026-08-01. */

/* Listagens administrativas */
.list-toolbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.list-toolbar strong, .list-toolbar span { display: block; }.list-toolbar strong { font-size: 13px; }.list-toolbar > div > span, .toolbar-count { color: var(--ink-dim); font-size: 12px; margin-top: 2px; }
.toolbar-search { width: min(480px, 100%); position: relative; }.toolbar-search > span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); z-index: 1; }.toolbar-search .form-control { padding-left: 36px; }
.not-informed { color: var(--ink-faint); font-size: 12px; }
.card > .table-responsive { border-radius: inherit; }
.table > thead th { padding-top: 15px; padding-bottom: 15px; }
.table > :not(caption) > * > * { padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 640px) { .list-toolbar { align-items: stretch; flex-direction: column; }.list-toolbar > .btn { width: 100%; } }

/* Abaixo de 700px cada campo de data ocupa a linha inteira. Não é estética: o seletor de data é o
   calendário NATIVO do navegador, desenhado fora do DOM (nenhum CSS daqui o alcança), e ele abre
   alinhado à borda ESQUERDA do input. Com os dois campos lado a lado, o "Até" nasce perto da margem
   direita e o calendário — que tem ~300px — não tem para onde abrir senão para fora da tela.
   Ocupando a linha toda, o campo começa na esquerda e o calendário cabe. */
@media (max-width: 700px) {
  .ct-filtro-datas label { flex: 1 1 100%; }
}

/* Cadastro de poltrona */
.armchair-form-page { width: 100%; }
.armchair-form-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 16px; }
.armchair-fields, .armchair-photo-panel { min-height: 430px; }
.armchair-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.armchair-active-box { display: flex; align-items: flex-start; gap: 11px; margin-top: 24px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--inset); }
.armchair-active-box .form-check-input { margin-top: 3px; flex: 0 0 auto; }
.armchair-active-box strong, .armchair-active-box span { display: block; }.armchair-active-box strong { color: var(--ink); font-size: 13px; }.armchair-active-box span { color: var(--ink-dim); font-size: 12px; margin-top: 3px; }
.armchair-photo-panel { display: flex; flex-direction: column; }
.armchair-photo-drop { position: relative; flex: 1; min-height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--inset); color: var(--ink-dim); cursor: pointer; overflow: hidden; }
.armchair-photo-drop:hover { border-color: var(--ink-dim); background: #111; }
.armchair-photo-drop img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.photo-empty-icon { font-size: 42px; color: var(--ink-faint); }.armchair-photo-drop strong { color: var(--ink); }.armchair-photo-drop > span:last-child { font-size: 12px; }
.photo-change { position: absolute; right: 12px; bottom: 12px; padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,.8); color: #fff; font-size: 11px; }
.photo-file-name { min-height: 20px; margin-top: 8px; color: var(--ink-faint); font-size: 11px; text-align: center; }
.armchair-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.danger-zone { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-top: 28px; padding: 16px; border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); border-radius: var(--r); background: color-mix(in srgb, var(--danger) 3.5%, transparent); }
.danger-zone strong, .danger-zone span { display: block; }.danger-zone strong { font-size: 13px; }.danger-zone span { color: var(--ink-dim); font-size: 11px; margin-top: 3px; }.danger-zone .alert { grid-column: 1 / -1; margin: 0; }
@media (max-width: 900px) { .armchair-form-grid { grid-template-columns: 1fr; }.armchair-fields, .armchair-photo-panel { min-height: 0; }.armchair-photo-drop { min-height: 300px; } }
@media (max-width: 540px) { .armchair-field-row { grid-template-columns: 1fr; }.armchair-form-actions { flex-direction: column-reverse; }.armchair-form-actions .btn { width: 100%; }.danger-zone { grid-template-columns: 1fr; }.danger-zone .btn { width: 100%; } }

/* Cadastro de cliente */
.customer-form-page { width: 100%; }
.customer-form-grid { display: grid; grid-template-columns: minmax(330px, .75fr) minmax(0, 1.25fr); gap: 16px; }
.customer-contact-panel, .customer-address-panel { min-height: 430px; }
.field-help { display: block; margin-top: 6px; color: var(--ink-faint); font-size: 11px; }
/* A largura de cada campo sai da NECESSIDADE dele, não da posição no grid.
   Antes: `1fr 110px 1fr 1fr` com posicionamento explícito, e o track fixo de 110px caía na
   CIDADE (texto livre) enquanto Estado, que aceita 2 caracteres, ficava com 162px e o CEP com
   287px. Medido em 2026-07-30 nos dois formulários (cliente e aluguel), que compartilham este CSS.
   Agora: 12 trilhas e colocação AUTOMÁTICA na ordem do DOM — a ordem visual não pode divergir da
   ordem de tabulação, que é o risco de posicionar coluna a coluna à mão.
   Linha 1: CEP(3) Estado(2) Rua(7) · Linha 2: Número(2) Bairro(5) Cidade(5) · Linha 3: Complemento. */
.address-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.address-cep { grid-column: span 3; }
.address-state { grid-column: span 2; }
.address-street { grid-column: span 7; }
.address-number { grid-column: span 2; }
.address-bairro { grid-column: span 5; }
.address-cidade { grid-column: span 5; }
.address-complement { grid-column: 1 / -1; }
.legacy-address { display: grid; gap: 3px; margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--inset); }
.legacy-address strong { font-size: 11px; }.legacy-address span { color: var(--ink-dim); font-size: 12px; }.legacy-address small { color: var(--ink-faint); font-size: 10px; }
.customer-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
@media (max-width: 1050px) { .customer-form-grid { grid-template-columns: 1fr; }.customer-contact-panel, .customer-address-panel { min-height: 0; } }
/* Estreito: 6 trilhas. CEP(4)+Estado(2) · Rua(6) · Número(2)+Bairro(4) · Cidade(6) · Complemento(6).
   Continua na ordem do DOM, pelos mesmos motivos de foco. */
@media (max-width: 640px) {
  .address-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .address-cep { grid-column: span 4; }
  .address-state { grid-column: span 2; }
  .address-street { grid-column: 1 / -1; }
  .address-number { grid-column: span 2; }
  .address-bairro { grid-column: span 4; }
  .address-cidade { grid-column: 1 / -1; }
  .address-complement { grid-column: 1 / -1; }
  .customer-form-actions { flex-direction: column-reverse; }
  .customer-form-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .visao-card { transition: none; }
}

/* ============================================================
   UI v2 — base monocromática operacional
   A estrutura permanece neutra; cor aparece somente em ação e status.
   Os tokens deste bloco subiram para o :root único no topo do arquivo (2026-07-29), e em
   2026-08-01 os seletores que ele redeclarava foram FUNDIDOS nas regras da seção correspondente
   lá em cima — cada seletor mora num lugar só. O que sobrou aqui é o que só existe na v2.
   ============================================================ */

.cs-nav-label { padding: 4px 12px 2px; color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cs-nav-divider { height: 1px; margin: 12px 8px 8px; background: var(--line); }
.elleve-nav-item { min-height: 44px; padding: 10px 12px; font-size: 14px; }
.elleve-nav-item.active { background: rgba(255,255,255,.08); box-shadow: inset 2px 0 #fff; }
.elleve-nav-item.active .ico svg { color: #fff; }
.cs-support {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center;
  margin-top: auto; padding: 12px; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink-dim); font-size: 13px;
}
.cs-support:hover { color: var(--ink); background: var(--panel); }
.cs-support-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--ink-dim); border-radius: 50%; }
.cs-support small, .cs-support strong { display: block; }
.cs-support strong { color: var(--ink); font-size: 12px; margin-top: 2px; }
/* O nome é o caminho para trocar a senha: herda a cor e só sublinha ao passar o mouse. */
.cs-support strong a { color: inherit; text-decoration: none; }
.cs-support strong a:hover, .cs-support strong a:focus-visible { text-decoration: underline; }
.mobile-brand { display: none; font-family: var(--serif); font-size: 22px; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-heading h2 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.section-heading p { color: var(--ink-dim); font-size: 13px; margin: 0; }
.btn-primary { background: var(--ink); color: #101010; box-shadow: none; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: #fff; color: #000; }
.btn-primary:disabled, .btn-primary.disabled { background: #3a3a3a; border-color: #3a3a3a; color: #929292; opacity: 1; }


.state-panel { min-height: 240px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink-dim); }
.state-spinner { width: 18px; height: 18px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .elleve-shell { display: block; }
  .elleve-sidebar { position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); height: 100dvh; display: flex; flex-direction: column; align-items: stretch; transform: translateX(-105%); transition: transform .2s ease; z-index: 100; }
  .cs-nav { flex-direction: column; flex-wrap: nowrap; }
  .elleve-topbar { height: 58px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--ground); position: sticky; top: 0; z-index: 50; }
  .cs-menu, .mobile-brand { display: inline-flex; }
  .cs-menu { cursor: pointer; font-size: 22px; }
  .cs-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.62); opacity: 0; pointer-events: none; z-index: 90; transition: opacity .2s; }
  .cs-toggle-input:checked ~ .elleve-shell .elleve-sidebar { transform: translateX(0); }
  .cs-toggle-input:checked ~ .elleve-shell .cs-backdrop { opacity: 1; pointer-events: auto; }
  .elleve-content { padding: 24px 18px 32px; }
}
@media (max-width: 640px) {
  .page-header { align-items: stretch; flex-direction: column; }
  .page-header .btn { width: 100%; }
}

/* O card em si foi reescrito no bloco principal (procure "Card da Disponibilidade").
   Aqui ficam os detalhes que a segunda geração ajustou e que continuam valendo. */
.vc-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.vc-add { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 7px; background: var(--ink); color: #111; font-size: 19px; line-height: 1; }
.vc-add:hover { background: #fff; color: #000; }
/* Calendário do card: ocupa a largura do card e a célula ESTICA entre 32 e 40px.
   Os dois limites têm motivo: 32 é o piso de legibilidade e de alvo de clique (e é o que define
   o mínimo da coluna da grade — 7×32 + 6×4 + 32 de padding + 2 de borda = 282, arredondado
   pra 288); 40 é o teto pra célula não virar um botão gigante em card largo.
   Antes o calendário tinha teto de 168px e `margin: auto`, então a sobra de largura virava
   espaço vazio centralizado — era isso que o desgrudava do nome e da foto. */
.vc-cal { --mc-gap: 4px; width: 100%; max-width: 304px; margin: 0; }
.vc-cal .mc-head, .vc-cal .mc-grid { grid-template-columns: repeat(7, minmax(32px, 1fr)); }
.vc-cal .mc-cell { font-size: 12px; }
.vc-cal-head { margin: 0 0 8px; }
.vc-cal-head b { font-size: 12px; text-transform: capitalize; }
.vc-cal-head button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--inset); color: var(--ink-dim); }
.vc-cal-head button:hover { border-color: var(--line-2); color: var(--ink); }
.mc-cell.is-selected { outline: 2px solid #fff; outline-offset: -2px; color: #fff; font-weight: 700; }

/* Comando principal: a disponibilidade faz parte da visão, não de outra tela. */
.availability-command { display: grid; grid-template-columns: minmax(250px, .65fr) minmax(520px, 1.35fr); gap: 24px; align-items: end; margin-bottom: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.command-copy { display: grid; gap: 10px; }
.command-copy h2 { font-family: var(--sans); font-size: 15px; font-weight: 700; margin: 0; }
.search-mode { display: inline-flex; width: fit-content; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--inset); }
.search-mode button { min-height: 30px; padding: 4px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--ink-dim); font-size: 11px; }
.search-mode button.active { background: var(--panel-2); color: var(--ink); }
.command-fields { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 10px; align-items: end; }
.command-fields.command-days { grid-template-columns: minmax(180px, 1fr) auto auto; }
.command-fields .btn { white-space: nowrap; }
.vc-period { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 27px; margin: 2px 0 7px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--inset); overflow: hidden; }
.vc-period span { color: var(--ink-faint); font-size: 9px; }.vc-period strong { color: var(--ink); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1120px) { .availability-command { grid-template-columns: 1fr; }.command-fields { grid-template-columns: 1fr 1fr auto auto; } }
@media (max-width: 700px) { .command-fields, .command-fields.command-days { grid-template-columns: 1fr 1fr; }.command-fields .btn { width: 100%; }.availability-command { padding: 16px; } }
@media (max-width: 460px) { .command-fields, .command-fields.command-days { grid-template-columns: 1fr; } }

/* ============================================================
   Aba Aluguéis (Components/Pages/Locacoes/Index.razor)
   Reusa o esqueleto dos Lembretes (.lb-layout / .lb-lista / .lb-detalhe / .lb-det-*) e os chips de
   período (.pa-chip) — aqui ficam só as diferenças da linha de aluguel.

   ATENÇÃO: as classes .al-s-st-* são montadas DINAMICAMENTE no razor (al-s-@sit.Classe), então uma
   varredura de "CSS morto" por grep não vai encontrá-las. Mesmo caso do .lb-u-* dos Lembretes.
   ============================================================ */
.al-filtros { margin-bottom: 16px; }
.al-lista { max-height: calc(100vh - 320px); overflow-y: auto; padding-right: 4px; }

/* Flex-wrap em vez de grid de 4 colunas fixas, de propósito: num grid, as 3 colunas `auto`
   (selo, período, contrato) têm largura garantida e o NOME DO CLIENTE fica com a sobra — foi medido
   em 85px numa lista de 448px, ou seja o dado mais importante da linha era o mais espremido. É o
   mesmo vício que quebrava o card da Disponibilidade. Aqui o nome tem base de 140px e quem quebra
   pra segunda linha é o período e o contrato, quando não couber. */
.al-row {
  width: 100%; text-align: left;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 12px;
  background: var(--panel); border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--r-sm); padding: 12px 16px; cursor: pointer;
}
/* min-width uniforme no selo: ele é a PRIMEIRA coluna e é left-aligned, então a largura variável
   do rótulo ("Finalizado" 81px vs "Em andamento" 106px, medido) empurrava o nome do cliente pra
   um x diferente em cada linha — 25px de espalhamento nas 7 linhas reais. 108px cobre o rótulo
   mais largo. (As colunas alinhadas à DIREITA, como .al-meta e .pa-datas, já casavam pela direita:
   medir a borda esquerda delas não diz nada.) */
.al-row > .vc-badge { flex: 0 0 auto; min-width: 108px; justify-content: center; }
.al-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; }
.al-row:hover { border-color: var(--line-2); }
.al-row.sel { box-shadow: 0 0 0 1px var(--accent); border-color: var(--accent); }

/* A faixa de 3px é o que deixa a situação legível varrendo a lista de cima a baixo, sem ler texto. */
.al-s-st-locada { border-left-color: var(--st-locada); }
.al-s-st-reservada { border-left-color: var(--st-reservada); }
.al-s-st-manutencao { border-left-color: var(--st-manut); }
.al-s-st-encaixe { border-left-color: var(--st-encaixe); }
.al-s-st-finalizada { border-left-color: var(--line-2); }

.al-cli { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; }
.al-cli strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-cli span { font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-chip { flex: 0 0 auto; }
/* Tique de entregue/recolhido DENTRO do chip, ao lado da data a que se refere — não vira coluna nova. */
.al-feito { color: var(--st-livre); margin-right: 4px; }
/* min-width = largura do rótulo mais largo ("Sem contrato", 75,9px medidos). Os três rótulos
   têm larguras diferentes (75,9 / 66,9 / 56,1) e o grupo é alinhado à direita, então eles
   casavam pela direita mas COMEÇAVAM em 3 x diferentes — e isso empurrava o chip de datas
   para 3 posições. Reservar a largura do maior põe rótulo e chip em coluna. */
.al-doc { font-size: 12px; white-space: nowrap; text-align: right; color: var(--ink-faint); min-width: 80px; }
.al-doc-pdfgerado { color: var(--st-livre); }
.al-doc-rascunho { color: var(--st-reservada); }
.al-sub { color: var(--ink-dim); }

.al-acoes, .al-acoes-doc { display: flex; flex-wrap: wrap; gap: 8px; }
.al-acoes { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.al-acoes-doc { margin-top: 4px; }

.al-paginacao { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; color: var(--ink-dim); font-size: 13px; }

/* A ficha tem mais conteúdo que o painel dos Lembretes (medido: 686px numa tela de 900), e um painel
   `sticky` mais alto que a tela deixa as ações do rodapé fora do campo de visão — com a lista curta a
   página quase não rola, então "Editar" e "Cancelar" ficavam escondidos. Rola por dentro.
   Escopado no .al-ficha de propósito: o .lb-detalhe é compartilhado com os Lembretes, que têm o mesmo
   risco latente mas não foram medidos nesta rodada. */
.al-ficha { max-height: calc(100vh - 32px); overflow-y: auto; }

/* Faltava a variante cinza do selo: Finalizado e Cancelado usam o mesmo tom neutro do .dot-st. */
.vc-badge.st-finalizada { background: var(--line-2); color: var(--ink); }

@media (max-width: 900px) {
  /* A lista e a ficha param de rolar por conta própria e voltam a rolar com a página — o painel desce
     pra baixo dela (herdado do .lb-layout), e duas áreas de rolagem numa tela estreita é armadilha. */
  .al-lista { max-height: none; overflow-y: visible; padding-right: 0; }
  .al-ficha { max-height: none; overflow-y: visible; }
}
@media (max-width: 680px) {
  /* No celular o período e o contrato vão pra linha de baixo alinhados à esquerda, em vez de
     empurrados pra direita — ler de cima a baixo fica mais fácil que caçar nas pontas. */
  .al-meta { margin-left: 0; width: 100%; }
  .al-doc { text-align: left; }
}