/* ============================================================
   Painel novo — camada de LAYOUT do protótipo "Livro da pousada"
   ============================================================
   Esta folha NÃO redefine cor nem tipografia: os tokens continuam
   sendo os do index.html (--txt, --acento, --sup, --e4, --t-sm...),
   que a Fase 1 já trocou para Barro & Oliva.

   O protótipo usava outros nomes (--tinta, --limao, --salvia). Não
   foram adotados: o JS do sistema escreve markup com `var(--e4)`,
   `var(--acento)` e `var(--txt-2)` cravados em style inline, e usa
   as classes .campo/.btn/.secao/.nota em centenas de lugares.
   Renomear quebraria tudo isso sem mudar um pixel do resultado.
   Aqui entram só as FORMAS novas: a casca de 4 destinos, a lateral
   fixa no desktop, os blocos de raio grande, a gaveta.

   Equivalência, para quem for comparar com o protótipo:
     --tinta   → --txt        --limao  → --acento
     --tinta-2 → --txt-2      --salvia → --ok / --bg-ok
     --tinta-3 → --txt-3      --lilas  → --barro / --barro-2
     --fundo   → --sup        --cinza  → --sup-2
     --sup     → --branco     --cinza-2→ --linha
   ============================================================ */

:root {
  /* raios do protótipo — maiores que os do painel antigo, é o que dá
     a silhueta RentEase. Convivem com --r1/--r2/--r3 do sistema. */
  --r-pilula: 999px;
  --r-bloco: 28px;
  --r-medio: 20px;
  --r-peq: 14px;
  --saida: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------- ícone ----------------
   O painel antigo estilizava ícone por seletor descendente
   (`.nav__b svg`), que não alcança o markup novo. Aqui o estilo é da
   CLASSE, como no protótipo: sem `fill:none` o SVG vem preenchido de
   preto e vira uma mancha no lugar do traço. */
svg.ic {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------- casca ---------------- */

.casca {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
}

.principal {
  min-width: 0;
  /* O <meta viewport> tem `viewport-fit=cover`: o conteúdo desenha POR
     BAIXO da status bar e do indicador de gesto. Quem reservava esse
     espaço era o cabeçalho `.topo` do painel antigo, que esta casca
     não usa — por isso o título batia no relógio do iPhone.
     Topo: 16px + a altura real da status bar (0 em desktop).
     Base: a barra flutuante mede 76px e fica 12px acima da safe area,
     então 76 + 12 + 16 de respiro = 104, mais a safe area. */
  padding:
    calc(var(--e4) + env(safe-area-inset-top, 0px))
    var(--e4)
    calc(104px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  .casca { grid-template-columns: 248px 1fr; }
  /* no desktop não há barra flutuante nem notch, mas o padding-top
     continua somando a safe area para o caso de janela em tablet. */
  .principal { padding: calc(var(--e6) + env(safe-area-inset-top, 0px)) var(--e6) var(--e6); }
}

/* ---------------- lateral (só desktop) ---------------- */

.lateral { display: none; }

@media (min-width: 1024px) {
  .lateral {
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100svh;
    /* mesma razão do .principal: com viewport-fit=cover a lateral
       encosta no topo físico da tela, e em tablet com notch o logo
       cairia por baixo dele. */
    padding:
      calc(var(--e5) + env(safe-area-inset-top, 0px))
      var(--e3)
      calc(var(--e5) + env(safe-area-inset-bottom, 0px));
    background: var(--escuro);
  }
  .lateral__marca { padding: 0 var(--e3) var(--e6); }
  .lateral__marca img { width: 132px; height: auto; display: block; }
  .lateral nav { display: flex; flex-direction: column; gap: var(--e1); }
  .lateral__eu {
    margin-top: auto; display: flex; align-items: center; gap: var(--e3);
    padding: var(--e3); border-radius: var(--r-medio);
    background: var(--escuro-2);
  }
  .lateral__eu b { display: block; font: 500 var(--t-sm)/1.2 var(--f); color: var(--escuro-txt); }
  .lateral__eu > div > span { font-size: var(--t-xs); color: var(--escuro-txt-2); }
}

/* inicial de quem está logado. Oliva e não mostarda: a mostarda é cor de
   ação, e um avatar não é clicável aqui. */
.avatar {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ok); color: var(--bg-ok);
  font: 500 var(--t-sm)/1 var(--f);
}

/* Fase 31: hóspede na lista de contatos. As 7 variantes de .pill já
   estavam em uso antes desta fase (e duas delas, --chega e --falta, já
   são visualmente idênticas) — criar uma 8ª agravaria o problema. O
   avatar é o slot livre e o mais forte: é a primeira coisa que o olho
   encontra. Anel mostarda via box-shadow duplo (branco por dentro, acento
   fraco por fora) — não mexe no box model, o grid de 44px da .pessoa
   continua igual. */
.avatar--hospede {
  box-shadow: 0 0 0 2px var(--branco), 0 0 0 4px var(--acento-fraco);
}

/* item de navegação — serve à lateral e à barra de baixo */
.nav-b {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 48px; padding: 0 var(--e3);
  border: 0; border-radius: var(--r-pilula); background: none;
  color: var(--escuro-txt-2); text-decoration: none; cursor: pointer;
  font: 500 var(--t-sm)/1 var(--f); text-align: left;
  transition: background var(--dur-rapida) var(--ease-util),
              color var(--dur-rapida) var(--ease-util);
}
.nav-b:hover { background: var(--escuro-2); color: var(--escuro-txt); }
/* ativo: pílula MOSTARDA sólida com texto escuro — a mostarda preenche,
   nunca escreve (ver o comentário do --acento no index.html). */
.nav-b[aria-current="page"] { background: var(--acento); color: var(--acento-txt); }
.nav-b[aria-current="page"] .ic { color: var(--acento-txt); }
.nav-b:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------------- barra de baixo (celular) ----------------
   A barra flutua POR CIMA do conteúdo (é esse o desenho). O padding
   de base do .principal garante chegar ao fim da lista, mas quem
   chega a uma linha por teclado ou por link âncora cairia com ela
   metade escondida atrás da barra. `scroll-margin-bottom` reserva a
   altura da barra nesse cálculo: o navegador rola um pouco mais e a
   linha para inteira acima dela. */
@media (max-width: 1023px) {
  .est, .pessoa, .item--ir, .item-dia, .bloco {
    scroll-margin-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
}

.barra-nav {
  position: fixed; z-index: var(--z-fab);
  left: var(--e3); right: var(--e3);
  bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e1); padding: var(--e2);
  background: var(--escuro);
  border: 1px solid var(--escuro-2);
  border-radius: var(--r-pilula);
  box-shadow: var(--sombra-3);
  max-width: 30rem; margin: 0 auto;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .barra-nav {
    background: rgba(43, 40, 34, 0.86);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
}
@media (min-width: 1024px) { .barra-nav { display: none; } }

/* na barra o item é vertical: bolha do ícone em cima, rótulo embaixo */
.barra-nav .nav-b {
  flex-direction: column; justify-content: center; gap: 3px;
  padding: var(--e2) var(--e1); min-height: 0;
  font-size: var(--t-xs); text-align: center;
}
.barra-nav .nav-b[aria-current="page"] { background: none; color: var(--escuro-txt); }
.barra-nav .bolha {
  display: grid; place-items: center;
  width: 44px; height: 28px; border-radius: var(--r-pilula);
  transition: background var(--dur-rapida) var(--ease-util),
              color var(--dur-rapida) var(--ease-util);
}
.barra-nav .nav-b[aria-current="page"] .bolha { background: var(--acento); color: var(--acento-txt); }
.barra-nav .nav-b__t {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* em tela estreita o rótulo inteiro tem de caber: reticência em item de
   navegação esconde justamente a palavra que diz para onde se vai. */
@media (max-width: 430px) {
  .barra-nav { padding: var(--e2) var(--e1); }
  .barra-nav .nav-b { padding: var(--e2) 2px; }
  .barra-nav .nav-b__t { font-size: 0.6875rem; letter-spacing: -0.01em; }
}

/* ---------------- cabeçalho de tela ---------------- */

/* No celular o título (34px) e a ação principal (44px de alvo) não
   cabem lado a lado em 390px — ficavam sobrepostos. Empilha: título em
   cima, ação abaixo ocupando a largura toda, que também é o alvo de
   toque mais fácil de acertar com o polegar. A partir de 640px há
   espaço para os dois na mesma linha. */
.cab-tela {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--e3); margin-bottom: var(--e5);
}
.cab-tela > .btn { justify-content: center; }
@media (min-width: 640px) {
  .cab-tela {
    flex-direction: row; align-items: flex-start; justify-content: space-between;
    gap: var(--e4);
  }
  .cab-tela > .btn { flex: none; }
}
.cab-tela__t {
  font: 300 34px/1.1 var(--f); letter-spacing: -0.02em;
  color: var(--txt); margin: 0;
}
.cab-tela__s { font-size: var(--t-sm); color: var(--txt-2); margin: var(--e2) 0 0; }
@media (min-width: 1024px) { .cab-tela__t { font-size: 52px; } }

/* ---------------- blocos ---------------- */

.bloco {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-bloco);
  padding: var(--e5);
}
.bloco + .bloco { margin-top: var(--e4); }

/* separação é contorno de 1px ou cor de fundo, nunca sombra: sombra fica
   para o que flutua de verdade (barra, gaveta). */
.lista-bloco { background: var(--branco); border-radius: var(--r-bloco); overflow: hidden; }
.lista-bloco > * + * { border-top: 1px solid var(--linha); }

/* ============================================================
   ESTADIAS — correção de rumo (2026-09-30).
   ============================================================
   A primeira versão desta tela reaproveitou o layout do sistema
   antigo (tabela virada cartão, `<details>` de filtro) e ficou "cor
   nova em cima do sistema antigo", não o protótipo que o dono
   aprovou. Esta seção reconstrói a lista e a ficha no formato do
   protótipo de verdade — linha com bloco de data à esquerda, chips de
   filtro em pílula, ficha com `dl` de fatos e linha do tempo com data
   à esquerda — usando os TOKENS do sistema (--txt, --acento...), não
   os nomes do protótipo (mesma regra da Fase A).
   ============================================================ */

/* ---------------- tira das 3 cabanas ---------------- */
.tira-cabanas {
  display: flex; gap: var(--e3); overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--e4)) var(--e5); padding: 0 var(--e4) var(--e1);
  scrollbar-width: none;
}
.tira-cabanas::-webkit-scrollbar { display: none; }
.cabana-cartao {
  position: relative; flex: none; width: 78%; max-width: 320px; aspect-ratio: 4/5;
  border-radius: var(--r-bloco); overflow: hidden; scroll-snap-align: start;
  background: var(--sup-2); border: 0; padding: 0; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* sem foto real (acervo próprio ainda incompleto — ver a nota de política
   de fotos do guia): o cartão vira um bloco de cor sólida na família
   oliva/barro, girando pelas 3 cabanas, em vez de simular uma imagem. */
.cabana-cartao::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(28,28,28,.55));
}
.cabana-cartao--1 { background: var(--ok); }
.cabana-cartao--2 { background: var(--barro); }
.cabana-cartao--3 { background: var(--escuro-2); }
.cabana-cartao__estado {
  position: relative; z-index: 1; align-self: flex-start;
  display: flex; align-items: center; gap: 6px;
  margin: var(--e3) var(--e3) 0; padding: 5px 12px;
  border-radius: var(--r-pilula); background: rgba(255,255,255,.92);
  font: 500 var(--t-xs)/1 var(--f); color: var(--txt);
}
.cabana-cartao__estado i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cabana-cartao__rodape {
  position: relative; z-index: 1; margin-top: auto;
  padding: var(--e4) var(--e3) var(--e3);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e2);
  color: #fff;
}
.cabana-cartao__rodape b { display: block; font: 500 var(--t-md)/1.2 var(--f); }
.cabana-cartao__rodape span { display: block; font-size: var(--t-xs); opacity: .88; }

/* ---------------- chips de filtro (pílula, como o protótipo) ---------------- */
.chips-filtro {
  display: flex; gap: var(--e2); overflow-x: auto; padding: 2px 2px var(--e2);
  margin: 0 0 var(--e4); scrollbar-width: none;
}
.chips-filtro::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1px solid var(--linha); border-radius: var(--r-pilula);
  background: var(--branco); padding: 0 var(--e4); min-height: 40px;
  font: 500 var(--t-sm)/1 var(--f); color: var(--txt-2); cursor: pointer;
  transition: background var(--dur-rapida) var(--ease-util), color var(--dur-rapida) var(--ease-util),
              border-color var(--dur-rapida) var(--ease-util);
}
.chip[aria-pressed="true"] { background: var(--txt); border-color: var(--txt); color: var(--branco); }
.chip:focus-visible { outline: 2px solid var(--acento-tin); outline-offset: 2px; }

/* ---------------- linha de estadia: bloco de data + nome + valor ---------------- */
.est {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 4px var(--e3);
  align-items: center; width: 100%; border: 0; background: none; text-align: left;
  padding: var(--e3) var(--e2); cursor: pointer; border-radius: var(--r-medio);
}
.est + .est { border-top: 1px solid var(--linha); }
.est:hover { background: var(--sup); }
.est:focus-visible { outline: 2px solid var(--acento-tin); outline-offset: -2px; }
.est__data { text-align: center; line-height: 1.1; }
.est__data b { display: block; font: 300 22px/1 var(--f-num); }
.est__data span { display: block; font-size: 11px; color: var(--txt-2); text-transform: uppercase; letter-spacing: .04em; }
/* `> span`, não `span`: descendente pegava TAMBÉM os .pill/.tag-origem
   dentro do wrapper de selos — cada um virava um bloco esticado até a
   largura da linha inteira em vez de pílula compacta lado a lado. */
.est__q { min-width: 0; }
.est__q > b { display: block; font-weight: 500; }
.est__q > span { display: block; font-size: var(--t-xs); color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est__q .selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; white-space: normal; overflow: visible; }
.est__v { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.est__v b { font: 500 var(--t-sm)/1 var(--f-num); font-variant-numeric: tabular-nums; }

/* ---------------- ficha: lista de fatos (dl) ----------------
   NÃO reusa `.dados` — essa classe já é uma TABELA inteira (Visão
   Geral, financeiro). Nome novo, `.fatos`, para o par pergunta/valor
   simples que o protótipo desenha como `dl` dentro da gaveta. */
.fatos { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r-medio); padding: 0 var(--e4); margin: 0 0 var(--e3); }
.fatos > div { display: flex; justify-content: space-between; gap: var(--e3); padding: var(--e3) 0; border-top: 1px solid var(--linha); font-size: var(--t-sm); }
.fatos > div:first-child { border-top: 0; }
.fatos dt { color: var(--txt-2); margin: 0; }
.fatos dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------- linha do tempo (histórico) ---------------- */
.conversa { margin: 0; padding: 0; list-style: none; }
.conversa li { position: relative; padding: 0 0 var(--e4) 0; }
.conversa li + li { margin-top: 0; }
.conversa__q { font-size: var(--t-xs); color: var(--txt-3); display: block; margin-bottom: 2px; }
.conversa__t { font-size: var(--t-sm); }

/* ---------------- extrato de valores (Fase D) ----------------
   GAP PRÉ-EXISTENTE: .ext-linha/.parcela/.seg são geradas por
   estadia-form.js (renderExtrato/blocoParcela/montarShell) mas nunca
   tiveram CSS em lugar nenhum do projeto — nem aqui, nem no painel
   antigo, nem em produção (conferido em namontanha-gestao.pages.dev
   ao vivo: zero ocorrência). Renderizavam sem estilo desde que a Fase
   19 introduziu o financeiro. Corrigido aqui porque a Fase D é onde
   isto foi notado; o painel antigo continua com o mesmo vazio — não
   é escopo desta fase mexer em index.html. */
.extrato {
  background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r-medio);
  padding: var(--e4);
}
.ext-linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); padding: var(--e2) 0;
  border-bottom: 1px dashed var(--linha);
  font-size: var(--t-sm);
}
.ext-linha__k { color: var(--txt); }
.ext-linha__sub { display: block; font-size: var(--t-xs); color: var(--txt-2); }
.ext-linha__v { font: 500 var(--t-sm)/1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ext-linha--desc .ext-linha__v { color: var(--acento-tin); }
.ext-linha--total {
  border-bottom: 0; border-top: 1px solid var(--linha);
  margin-top: var(--e2); padding-top: var(--e3);
}
.ext-linha--total .ext-linha__k { font-weight: 600; }
.ext-linha--total .ext-linha__v { font: 300 28px/1 var(--f-num); letter-spacing: -0.02em; }

/* ---------------- pagamento parcelado ---------------- */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--sup-2); border-radius: var(--r-pilula);
}
.seg button {
  border: 0; background: none; cursor: pointer; font: 500 var(--t-sm)/1 var(--f);
  padding: var(--e2) var(--e4); border-radius: var(--r-pilula); color: var(--txt-2);
  transition: background var(--dur-rapida) var(--ease-util), color var(--dur-rapida) var(--ease-util);
}
.seg button[aria-pressed="true"] { background: var(--branco); color: var(--txt); box-shadow: var(--sombra-1); }
.seg button:focus-visible { outline: 2px solid var(--acento-tin); outline-offset: 2px; }

.parcela {
  border: 1px solid var(--linha); border-radius: var(--r-medio);
  padding: var(--e4); margin-top: var(--e3);
}
.parcela__topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3);
}
.parcela__t { font-weight: 500; }
.parcela__quando { font-size: var(--t-xs); color: var(--txt-2); }
.parcela__valor { font: 500 var(--t-md)/1 var(--f-num); font-variant-numeric: tabular-nums; }
.parcela__campo input { width: 9ch; }

/* tarifas.js/cardapio.js/usuarios.js ainda escrevem o próprio botão
   "‹ Configurações" — herdado do bottom sheet do painel antigo, que
   não existe nesta casca (o handler de data-voltar-config vivia só em
   app.js, nunca portado). "‹ Mais" do índice já cumpre a mesma
   função; o botão de dentro do módulo fica redundante e morto (clicar
   nele não faz nada aqui). Escondido em vez de removido do JS — não é
   escopo desta fase tocar nesses três arquivos por um botão a menos. */
[data-mais] [data-voltar-config] { display: none; }

/* ---------------- linha de pessoa (Pessoas: Contatos/Hóspedes) ----------------
   Substitui o `.item` genérico (texto corrido, sem rosto) por uma
   linha com avatar — igual ao protótipo, que usa isso para toda
   pessoa (contato, hóspede, vendedor). Mesma cor de avatar da lateral
   (oliva — Fase A), tamanho maior por estar numa lista, não num rodapé. */
.pessoa {
  display: grid; grid-template-columns: 44px 1fr auto; gap: var(--e3);
  align-items: center; width: 100%; text-align: left; border: 0; background: none;
  padding: var(--e3) var(--e2); border-radius: var(--r-medio); cursor: pointer;
  font: inherit; color: inherit;
}
.pessoa + .pessoa { border-top: 1px solid var(--linha); }
.pessoa:hover { background: var(--sup); }
.pessoa:focus-visible { outline: 2px solid var(--acento-tin); outline-offset: -2px; }
.pessoa .avatar { width: 44px; height: 44px; font-size: var(--t-md); }
.pessoa__nome { min-width: 0; }
.pessoa__nome b { font-weight: 500; }
.pessoa__v { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--t-sm); }

/* ---------------- CRM: lista densa (redesign 2026-10-12) ----------------
   Linha de tabela para a tela de Contatos — desktop primeiro, por decisão
   do dono: esta tela é usada só no computador, em volume (87 contatos em
   7 dias). Coexiste com .pessoa (continua servindo Hóspedes). */
.crm-tabela { background: var(--branco); border-radius: var(--r-medio); overflow: hidden; }
.crm-linha {
  display: grid;
  grid-template-columns: 40px minmax(180px, 1.3fr) minmax(160px, 1.6fr) auto auto auto;
  align-items: center; gap: var(--e3);
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--e2) var(--e3); min-height: 56px;
  background: none; border: 0;
}
.crm-linha + .crm-linha { border-top: 1px solid var(--linha); }
.crm-linha:hover, .crm-linha:focus-visible { background: var(--sup); }
.crm-linha:focus-visible { outline: 2px solid var(--acento-tin); outline-offset: -2px; }
.crm-linha .avatar { width: 36px; height: 36px; font-size: var(--t-sm); }

.crm-linha__id { min-width: 0; display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.crm-linha__id b { font-weight: 500; white-space: nowrap; }
/* número em fonte tabular — o dono se identifica pelo telefone ao
   responder no WhatsApp, por isso ele fica sempre visível, não escondido
   atrás de um clique (DESIGN.md: tabular-nums em toda coluna numérica). */
.crm-linha__tel {
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-sm); color: var(--txt-2); white-space: nowrap;
}

.crm-linha__msg {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-sm);
}

.crm-linha__quando { font-size: var(--t-xs); color: var(--txt-3); white-space: nowrap; min-width: 96px; text-align: right; }

/* ações: só aparecem no hover/foco da linha — com dezenas de linhas na
   tela, 3 ícones sempre visíveis por linha vira ruído antes de ser útil
   (ui-ux-pro-max: hover-vs-tap — mas o alvo de toque/clique continua
   presente no DOM o tempo todo, só a OPACIDADE muda, nunca o display:
   teclado e leitor de tela sempre alcançam). */
.crm-linha__acoes { display: flex; align-items: center; gap: var(--e2); opacity: 0; transition: opacity var(--dur-rapida) var(--ease-util); }
.crm-linha:hover .crm-linha__acoes,
.crm-linha:focus-within .crm-linha__acoes { opacity: 1; }
.crm-linha__acao { white-space: nowrap; }
.crm-linha__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-full);
  color: var(--txt-2); flex: none;
}
.crm-linha__icone:hover { background: var(--sup-2); color: var(--txt); }
.crm-linha__icone--descarte:hover { background: var(--bg-perigo); color: var(--perigo); }
.crm-linha__icone:focus-visible { outline: 2px solid var(--acento-tin); outline-offset: 1px; }

/* ---------------- trilha curta (coluna de funil na lista) ---------------- */
.crm-trilha { display: inline-flex; align-items: center; gap: var(--e2); white-space: nowrap; }
.crm-trilha__pontos { display: inline-flex; align-items: center; flex: none; }
.crm-trilha__p { width: 8px; height: 8px; border-radius: 50%; background: var(--linha); flex: none; }
.crm-trilha__p--feito { background: var(--ok); }
.crm-trilha__p--atual { background: var(--acento); width: 10px; height: 10px; box-shadow: 0 0 0 3px var(--acento-fraco); }
.crm-trilha__p--futuro { background: var(--linha); }
.crm-trilha__l { width: 16px; height: 2px; background: var(--linha); flex: none; }
/* Ajuste pós-teste (2026-10-12): rótulo do estágio escrito ao lado das
   bolinhas — cor/posição sozinhas não diziam qual etapa era a 1ª leitura
   exigia abrir a ficha. */
.crm-trilha__rotulo { font-size: var(--t-xs); color: var(--txt-2); font-weight: 500; }

/* ---------------- trilha completa (9 degraus, na ficha) ---------------- */
.crm-trilha-v { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm-trilha-v__item {
  display: flex; align-items: center; gap: var(--e3);
  padding: 6px 0; font-size: var(--t-sm); color: var(--txt-3);
  position: relative;
}
.crm-trilha-v__item:not(:last-child)::after {
  content: ''; position: absolute; left: 5px; top: 22px; bottom: -6px;
  width: 2px; background: var(--linha);
}
.crm-trilha-v__item--feito:not(:last-child)::after { background: var(--ok); }
.crm-trilha-v__p { width: 12px; height: 12px; border-radius: 50%; background: var(--linha); flex: none; z-index: 1; }
.crm-trilha-v__item--feito { color: var(--txt); }
.crm-trilha-v__item--feito .crm-trilha-v__p { background: var(--ok); }
.crm-trilha-v__item--atual { color: var(--txt); font-weight: 500; }
.crm-trilha-v__item--atual .crm-trilha-v__p { background: var(--acento); box-shadow: 0 0 0 3px var(--acento-fraco); }

/* ---------------- alternador Lista/Quadro ---------------- */
.crm-topo-abas { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.abas--vista { margin-left: auto; }

/* ---------------- barra de período única (redesign 2026-10-14) ----------------
   Substitui os dois controles que existiam antes (um calendário que só
   movia o funil, abas que só moviam a lista) por UM: as 4 abas rápidas
   (Hoje/Semana/Mês/Tudo) ficam lado a lado com o calendário, que vira a
   opção de data arbitrária. Os dois escrevem no mesmo estado e disparam
   o mesmo carregar() — cartões e lista sempre mostram o mesmo recorte. */
.crm-periodo-barra {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin-bottom: var(--e4);
}
/* sem margin-bottom próprio: a barra já tem o espaçamento abaixo dela. */
.abas--chegou { flex-wrap: wrap; margin-bottom: 0; border-bottom: 0; }
.crm-periodo-barra .periodo-cal { margin-bottom: 0; }

/* ---------------- kanban (redesign 2026-10-12) ----------------
   Desktop apenas (ver breakpoint no fim do arquivo). Cada coluna rola por
   conta própria: "Chegou" sozinha já chega a 80+ cartões no uso real,
   então a coluna precisa de altura fixa + scroll, não a página inteira. */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: var(--e3); align-items: start; }
.kanban-col {
  background: var(--sup); border-radius: var(--r-medio);
  display: flex; flex-direction: column; max-height: calc(100vh - 340px); min-height: 200px;
}
.kanban-col--sobre { outline: 2px dashed var(--acento-tin); outline-offset: -2px; }
.kanban-col__t {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e3); font-weight: 500; font-size: var(--t-sm);
  border-bottom: 1px solid var(--linha); flex: none;
}
.kanban-col__n {
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  background: var(--sup-2); color: var(--txt-2);
  border-radius: var(--r-full); padding: 1px 8px; font-size: var(--t-xs);
}
.kanban-col__corpo { overflow-y: auto; padding: var(--e2); display: flex; flex-direction: column; gap: var(--e2); flex: 1; }
.kanban-col__vazio { text-align: center; padding: var(--e4) var(--e2); margin: 0; }

.kanban-card {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-peq);
  padding: var(--e3); cursor: grab; display: flex; flex-direction: column; gap: 4px;
}
.kanban-card:hover { border-color: var(--acento-tin); }
.kanban-card:focus-visible { outline: 2px solid var(--acento-tin); outline-offset: 1px; }
.kanban-card--arrastando { opacity: 0.4; }
.kanban-card__nome { font-weight: 500; }
.kanban-card__tel { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: var(--t-xs); color: var(--txt-2); }
.kanban-card__msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card__quando { font-size: var(--t-xs); }
.kanban-card__mover { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); margin-top: 4px; }
.kanban-card__mover select { font-size: var(--t-xs); padding: 2px 4px; max-width: 120px; }

/* Kanban é uma ferramenta de desktop por decisão do dono — abaixo de
   1024px a visão não é oferecida (o alternador continua existindo, mas
   a tela nesse tamanho é usada por quem está no celular, onde a lista
   já é a interação certa). */
@media (max-width: 1023px) {
  .abas--vista { display: none; }
}

/* ---------------- toast de desfazer (descartar rápido) ---------------- */
.crm-toast {
  position: fixed; left: 50%; bottom: var(--e6); transform: translateX(-50%);
  z-index: var(--z-popover);
  display: flex; align-items: center; gap: var(--e3);
  background: var(--escuro); color: var(--escuro-txt);
  padding: var(--e3) var(--e4); border-radius: var(--r-pilula);
  box-shadow: var(--sombra-3); font-size: var(--t-sm);
}
.crm-toast .btn--texto { color: var(--acento); }
.crm-toast .btn--texto:hover { background: rgba(255,255,255,0.1); }

/* ---------------- Início: pílula de ocupação + coluna lateral ----------------
   Correção de rumo (2026-10-02): a primeira versão de Início cortou a
   metade visual mais marcante do protótipo achando que duplicaria
   Visão Geral. O dono pediu de volta — o dado É o mesmo (mesma RPC
   metricas_ocupacao, mesmo comissaoPendentePorVendedor exposto por
   visao-geral.js), só aparece em dois lugares: aqui como resumo do
   dia, em Visão Geral como relatório completo. */
/* Dimensionada para o celular PRIMEIRO: é a peça mais importante da
   tela de abertura e, no tamanho antigo (medidor de 68px, número de
   32px), ficava pequena demais na mão. O medidor dobra para 108px e o
   número vai a 44px; a pílula inteira (menos o "+") vira link para a
   Visão geral, que é onde mora o relatório completo de ocupação. */
.ocup {
  display: flex; align-items: center; gap: var(--e2);
  background: var(--ok); border-radius: var(--r-bloco);
  padding: var(--e3); margin-bottom: var(--e5);
}
.ocup__stat {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e2); margin: calc(-1 * var(--e2));
  border-radius: var(--r-medio); text-decoration: none; color: inherit;
  transition: background var(--dur-rapida) var(--ease-util);
}
.ocup__stat:hover { background: rgba(255,255,255,.07); }
.ocup__stat:focus-visible { outline: 2px solid var(--bg-ok); outline-offset: 2px; }
.ocup__stat:active { background: rgba(255,255,255,.12); }

.ocup__medidor {
  flex: none; position: relative; width: 108px; height: 108px;
  border-radius: 50%; background: var(--bg-ok); display: grid; place-items: center;
}
.ocup__medidor svg { position: absolute; inset: 0; transform: rotate(-90deg); }
/* stroke-width em unidades do viewBox (120): 10 = 8,3% do diâmetro,
   mesma proporção visual do anel antigo. */
.ocup__medidor circle { fill: none; stroke-width: 10; }
/* trilho translúcido sobre fundo claro (--bg-ok), não branco — branco
   some sobre cor clara, a mesma regra já usada na pílula de ocupação
   que o DESIGN.md documenta. */
.ocup__trilho { stroke: rgba(69,74,56,.22); }
/* --escuro, não --ok: numa taxa baixa o arco é um traço curto, e
   oliva sobre oliva-claro (4.6:1) ficava apagado justo quando mais
   importa enxergar. Carvão dá 7.4:1 contra o trilho. Mostarda daria
   1.1 — a regra do DESIGN.md de que ela preenche, nunca risca. */
.ocup__valor { stroke: var(--escuro); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--saida); }
.ocup__pct { font: 600 20px/1 var(--f-num); color: var(--escuro); position: relative; }

.ocup__txt { flex: 1; min-width: 0; color: var(--bg-ok); }
.ocup__n { display: block; font: 300 44px/1 var(--f-num); letter-spacing: -.02em; }
.ocup__n small { font-size: 20px; opacity: .8; }
.ocup__l { display: block; font-size: var(--t-sm); margin-top: var(--e1); opacity: .92; }
/* A seta anuncia que a pílula leva a algum lugar. No celular ela come
   22px da largura e o rótulo ("noites em outubro" precisa de 111px,
   sobravam 100) quebrava em duas linhas — some abaixo de 480px, onde
   o bloco inteiro já é obviamente tocável. */
.ocup__seta { display: none; flex: none; color: var(--bg-ok); opacity: .6; }
@media (min-width: 480px) { .ocup__seta { display: block; } }

/* O número cresce mais ainda onde há largura sobrando. */
@media (min-width: 640px) {
  .ocup__medidor { width: 120px; height: 120px; }
  .ocup__pct { font-size: 22px; }
  .ocup__n { font-size: 52px; }
  .ocup__n small { font-size: 24px; }
}
.mais {
  flex: none; width: 64px; height: 64px; border-radius: 50%; border: 0;
  background: var(--acento); color: var(--acento-txt);
  display: grid; place-items: center; cursor: pointer;
  transition: transform var(--dur-rapida) var(--saida);
}
.mais .ic { width: 26px; height: 26px; stroke-width: 2; }
.mais:hover { transform: scale(1.05); }
.mais:active { transform: scale(.96); }
.mais:focus-visible { outline: 2px solid var(--bg-ok); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ocup__valor { transition-duration: .01ms; }
  .mais, .ocup__stat { transition-duration: .01ms; }
}

/* layout principal + coluna lateral — empilha no celular, 2 colunas a
   partir de 1024px (mesmo corte da lateral de navegação). */
/* No celular as duas colunas viram uma pilha só: 32px de separação
   deixava um vão largo demais entre o livro do dia e o resumo do mês.
   No desktop o gap separa COLUNAS lado a lado, onde 32px é certo. */
.inicio-grade { display: grid; gap: var(--e5); align-items: start; }
@media (min-width: 1024px) { .inicio-grade { grid-template-columns: 1fr 340px; gap: var(--e6); } }
/* A última seção da lista não precisa da margem que separa uma seção
   da seguinte — não há seguinte dentro desta coluna, e ela somava ao
   `gap` da grade (24 + 32 = 56px de vão medido no celular). */
#inicio-corpo .secao:last-child { margin-bottom: 0; }

/* `gap` já separa os blocos aqui; o `.bloco + .bloco { margin-top }`
   da folha base somava por cima e dobrava o espaço entre os cartões
   do trilho (ficava um vão grande no celular, onde eles empilham). */
.trilho { display: flex; flex-direction: column; gap: var(--e4); }
.trilho .bloco + .bloco { margin-top: 0; }
.trilho .bloco h3 { font: 500 var(--t-md)/1.3 var(--f); margin: 0; }
.trilho .bloco__sub { font-size: var(--t-xs); color: var(--txt-2); margin: 2px 0 var(--e3); }
/* min-width:0 no filho flex: sem ele um item flex não encolhe além do
   seu conteúdo (regra padrão do flexbox), e .barra__trilho — SEM
   largura própria definida na classe base — ficava largo o bastante
   pra estourar o cartão de 340px e vazar como tira solta na página. */
.trilho .barra { display: flex; align-items: center; gap: var(--e2); padding: 6px 0; }
.trilho .barra__nome { flex: 0 0 56px; }
.trilho .barra__trilho { flex: 1; min-width: 0; }
.trilho .barra__v { flex: 0 0 auto; text-align: right; }

/* comissões a pagar, por vendedor */
.comis { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e2); }
.comis li { display: flex; justify-content: space-between; gap: var(--e2); font-size: var(--t-sm); }
.comis li b { font-variant-numeric: tabular-nums; }
.comis__emdia { color: var(--txt-2); }

/* ---------------- controles nativos ----------------
   Caixa de seleção e campo de data vinham com o azul padrão do
   navegador — cor que não existe nesta paleta. `accent-color` pinta
   o preenchimento do controle nativo sem reconstruí-lo, então teclado
   e leitor de tela continuam funcionando como o sistema espera.
   Alvo de 20px: o rótulo ao lado também é clicável (está dentro do
   <label>), então a área de toque real passa dos 44px exigidos. */
#app input[type="checkbox"],
#app input[type="radio"] {
  accent-color: var(--acento-tin);
  width: 20px; height: 20px; cursor: pointer;
}
#app input[type="date"] { accent-color: var(--acento-tin); }

/* ---------------- cabeçalho de Pessoas (.pagina, do painel antigo) ----------------
   crm.js escreve o próprio cabeçalho com `.pagina`, componente do painel
   antigo: `position: sticky; top: var(--topo-h)` — grudado ABAIXO de um
   cabeçalho de 48px que só existe lá. Nesta casca não há esse cabeçalho,
   então ele grudava no vazio e flutuava por cima da lista; o
   `flex-wrap` ainda jogava o botão "Novo contato" sozinho numa linha
   inteira enquanto o título ficava espremido ao lado.
   Aqui ele vira cabeçalho normal, empilhado no celular e lado a lado a
   partir de 640px — a mesma regra do `.cab-tela` das outras telas, para
   as quatro telas abrirem do mesmo jeito. Escopo `#app`: o painel antigo
   continua com o comportamento dele. */
#app .pagina {
  position: static; z-index: auto;
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--e3); flex-wrap: nowrap;
  margin: 0 0 var(--e5); padding: 0;
  background: none; border-bottom: 0;
}
#app .pagina > .btn { justify-content: center; }
@media (min-width: 640px) {
  #app .pagina {
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: var(--e4);
  }
  #app .pagina > .btn { flex: none; }
}

/* ---------------- abas (Pessoas/Visão Geral): pílula, não sublinhado ----------------
   .abas/.aba são do painel ANTIGO (index.html) — sublinhado fino, no
   espírito de aba de navegador. O protótipo usa chip de pílula, cor
   cheia quando ativo (mesma gramática do .chip em Estadias). Só dentro
   da casca nova (`#app`), para não mudar o painel que ainda está no
   ar em produção. */
#app .abas { border-bottom: 0; gap: var(--e2); flex-wrap: wrap; }
#app .aba {
  border: 1px solid var(--linha); border-radius: var(--r-pilula);
  padding: 0 var(--e4); min-height: 40px; margin-bottom: 0;
  background: var(--branco);
}
#app .aba[aria-selected="true"] {
  background: var(--txt); border-color: var(--txt); color: var(--branco);
}
#app .aba:hover { border-color: var(--txt-3); }

/* ---------------- índice de "Mais" (correção de rumo, 2026-09-30) ----------------
   Primeira versão usava .item com borda em caixa — "card" genérico,
   igual à Estadias que o dono apontou como "parecido com o antigo".
   O protótipo usa linha FLAT (filete entre linhas, sem caixa própria)
   com um círculo de ícone à esquerda — mesma gramática de .pessoa
   (Fase E) e .est (Fase C/correção), aplicada aqui a item de menu. */
.mais-grade { display: grid; gap: var(--e6); }
@media (min-width: 900px) { .mais-grade { grid-template-columns: 1fr 1fr; } }
.grupo__t {
  font: 500 var(--t-sm)/1 var(--f); color: var(--txt-2);
  margin: 0 var(--e2) var(--e2); display: flex; align-items: center; gap: var(--e2);
}
.grupo .lista { display: flex; flex-direction: column; }
.item--ir {
  display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 64px;
  text-align: left; border: 0; background: none; padding: var(--e3) var(--e2);
  font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-medio);
  transition: background var(--dur-rapida) var(--ease-util);
}
.item--ir + .item--ir { border-top: 1px solid var(--linha); }
.item--ir:hover { background: var(--sup); }
.item--ir:focus-visible { outline: 2px solid var(--acento-tin); outline-offset: -2px; }
.item__ic {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--sup-2); color: var(--txt-2);
}
.item--ir .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item--ir .txt > b { font-weight: 500; }
.item--ir .txt > span { font-size: var(--t-xs); color: var(--txt-2); }

/* ---------------- estado vazio ---------------- */

.vazio-novo {
  display: grid; place-items: center; gap: var(--e3);
  padding: var(--e7) var(--e4); text-align: center;
  color: var(--txt-2);
}
.vazio-novo b { font: 500 var(--t-md)/1.3 var(--f); color: var(--txt); }
.vazio-novo p { margin: 0; font-size: var(--t-sm); max-width: 34ch; }

/* ---------------- seletor de período por calendário (fase 32) ----------------
   Porta a lógica do calendário de intervalo da Vitrine, com os tokens do
   PAINEL — a Vitrine usa --madeira, que não existe aqui. Recolhido por
   padrão: em 390px um calendário sempre aberto come ~300px antes do
   primeiro dado da tela. */
.periodo-cal { position: relative; margin-bottom: var(--e4); }
.periodo-cal__gatilho {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 40px; padding: 0 var(--e4);
  border: 1px solid var(--linha); border-radius: var(--r-pilula);
  background: var(--branco); font: 500 var(--t-sm)/1 var(--f); color: var(--txt);
  cursor: pointer;
}
.periodo-cal__gatilho:hover { background: var(--sup); }
.periodo-cal__painel {
  position: absolute; z-index: var(--z-popover, 50);
  top: calc(100% + var(--e2)); left: 0;
  width: min(320px, calc(100vw - var(--e6)));
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r-medio); box-shadow: var(--sombra-2);
  padding: var(--e4);
}
.periodo-cal__topo {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--e3); font: 500 var(--t-sm)/1 var(--f);
}
.periodo-cal__nav {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--linha); border-radius: 50%;
  background: var(--branco); cursor: pointer; font-size: var(--t-md);
}
.periodo-cal__nav:hover { background: var(--sup); }
.periodo-cal__grade {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.periodo-cal__dia {
  aspect-ratio: 1; max-height: 2.4rem;
  border: none; background: none; border-radius: var(--r1);
  font: 400 var(--t-sm)/1 var(--f); color: var(--txt); cursor: pointer;
}
.periodo-cal__dia:hover { background: var(--sup); }
.periodo-cal__dia--vazio { cursor: default; }
.periodo-cal__dia--ini,
.periodo-cal__dia--fim {
  background: var(--acento); color: var(--acento-txt); font-weight: 600;
}
.periodo-cal__dia--intervalo { background: var(--acento-fraco); }
.periodo-cal [data-cal-mes-todo] { margin-top: var(--e3); width: 100%; justify-content: center; }

/* ---------------- movimento ---------------- */

@media (prefers-reduced-motion: reduce) {
  .nav-b, .barra-nav .bolha { transition-duration: 0.01ms; }
}