/* ============================================================
   Cabeça's Garage — App (frame mobile) · estilos
   ============================================================ */

/* ---------- Splash de boas-vindas (logo após escolher a cabeça) ---------- */

/* Comportamento de app nativo: sem arrasto lateral, sem zoom, só rola na vertical */
html, body { overflow-x: hidden; overscroll-behavior: none; }
.app-body { touch-action: pan-y; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }

.app-body {
  background: #cdbf9e;
  background-image: radial-gradient(circle at 30% 8%, #e7d8b4, #c3b491 70%, #b3a483);
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 12px;
}

.phone {
  width: 400px; max-width: 100%; height: 860px; max-height: 94vh;
  background: var(--c-bg); border-radius: 34px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.35), 0 0 0 9px #241a10, 0 0 0 11px #3a2c1c;
  display: flex; flex-direction: column; position: relative;
}
.phone__notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 22px; background: #241a10; border-radius: 0 0 14px 14px; z-index: 50;
}

/* ---------- Topbar (vintage: vermelho tijolo + faixa dourada, como a ferradura da logo) ---------- */
.topbar {
  background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-d) 100%);
  color: #f6ead2; padding: 26px 18px 14px;
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  border-bottom: 3px solid var(--c-gold);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}
.topbar__back { background: rgba(255,255,255,.16); border:none; color:#fff;
  width:34px; height:34px; border-radius:9px; font-size:20px; line-height:1; }
.topbar__title { font-size: 18px; font-weight: 700; flex: 1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__title small { display:block; font-size:11.5px; font-weight:400; opacity:.8; overflow:hidden; text-overflow:ellipsis; }
.topbar__act { background: rgba(255,255,255,.16); border:none; color:#fff;
  width:36px; height:36px; border-radius:10px; font-size:17px; }
.topbar__avatar {
  width:38px; height:38px; border-radius:50%; background:var(--c-gold); color:#1d2a35;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
  border:2px solid rgba(255,255,255,.5); cursor:pointer;
}
.topbar--gold { background: linear-gradient(135deg,#9e7d2e,#c8a24a); }


/* ---------- Screen ---------- */
.screen { flex: 1; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; overscroll-behavior: contain; padding: 16px 16px 26px;
  /* textura sutil de papel envelhecido */
  background-color: var(--c-bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(157,47,34,.05), transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(95,138,125,.06), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(193,149,74,.06), transparent 55%);
}
.screen::-webkit-scrollbar { width: 0; }
/* CRM embutido em tela cheia (aba Admin → bloco de área) */
.screen--crm { padding: 0; overflow: hidden; display: flex; }
.crm-frame { flex: 1; width: 100%; border: 0; display: block; }
/* Blocos de gestão do Painel da Diretoria (mesmo modelo do CRM) */
.adm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; padding: 15px 14px;
  cursor: pointer; font: inherit; color: var(--c-ink); }
.adm-tile:active { transform: scale(.98); }
.adm-tile__ico { font-size: 24px; line-height: 1; }
.adm-tile__lbl { font-weight: 700; font-size: 13.5px; }
/* Sem recuo lateral: os 2px deixavam todo título de seção desalinhado dos cards,
   que não têm margem horizontal. Aparecia em app e portal, em toda tela com seção. */
.sec-title::after { content: ""; flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--c-gold), transparent); opacity: .7; }

/* Respiro padrão de TODO card e banner — evita blocos colados ("encavalando").
   Margens verticais colapsam, então telas que já espaçam via .sec-title não mudam. */
.card, .banner { margin-bottom: 12px; }
/* Dentro de grids o espaçamento é pelo gap — zera a margem para não duplicar */
.grid2 > .card, .grid3 > .card, .scards > .card, .qa > .card,
.grid2 > .banner, .grid3 > .banner, .scards > .banner { margin-bottom: 0; }

/* ---------- Tabbar (7 abas: cabem todas) ---------- */
.tabbar {
  display: flex; background: var(--c-surface); border-top: 1px solid var(--c-line);
  flex-shrink: 0; padding: 6px 2px 10px;
}
.tab {
  flex: 1 1 0; min-width: 0; border: none; background: none; padding: 6px 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--c-ink-soft); font-size: 8.8px; font-weight: 600; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden;
}
.tab__ico { font-size: 17px; line-height: 1; padding: 3px 9px; border-radius: 999px; transition: background .15s; }
.tab--active { color: var(--c-primary); font-weight: 800; }
.tab--active .tab__ico { background: var(--c-primary-l); transform: translateY(-1px); }
/* Aba Admin (diretoria) — acento distinto */
.tab--admin { color: var(--c-gold-d); }
.tab--admin.tab--active { color: var(--c-gold-d); }
.tab--admin.tab--active .tab__ico { background: var(--c-gold-l); }

/* ---------- Carteirinha ---------- */
/* Paleta Fusca Itamar Série Ouro 1996 */
                                                                 /* Branco Geada (sólida) */
 /* Prata Lunar (metálica) */
             /* Azul Saturno VW L3085 (Fusca Itamar) */
 /* Verde Amazonas VW (clássico) */
               /* Preto Mystic (perolizada) */
/* cartões claros: foto, brilho e marca d'água adaptados */
/* imagem de fundo (asset do clube — montagem 2x2, um quadrante por modalidade) + véu na cor */
/* imagem vintage mais presente → protege a legibilidade do texto */
   /* Branco Geada = cor sólida, sem brilho */

/* ---------- Mini cards / listas ---------- */

/* ---------- Banner rotativo de patrocinadores ---------- */
.sponsors { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-s); }
.sponsors__track { display: flex; transition: transform .5s ease; }
.sponsors__slide { min-width: 100%; display: flex; align-items: center; gap: 13px; padding: 16px 16px 24px; color: #fff; cursor: pointer; }
.sponsors__logo { width: 46px; height: 46px; border-radius: 11px; background: rgba(255,255,255,.92); color: #1d2a35;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.sponsors__info { flex: 1; min-width: 0; }
.sponsors__info b { font-size: 15px; display: block; }
.sponsors__info span { font-size: 12px; opacity: .92; }
.sponsors__cta { font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.2); padding: 6px 11px; border-radius: 999px; white-space: nowrap; }
.sponsors__dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.sponsors__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); display: block; transition: background .2s; }
.sponsors__dots i.on { background: #fff; }

/* ---------- Cards de opção (ex.: Carros × Galpão no registrar manutenção) ---------- */
.opt-card { display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  padding:22px 12px; background:var(--c-surface-2); border:1px solid var(--c-line); border-radius:15px;
  cursor:pointer; transition:transform .1s, background .1s; }
.opt-card:active { transform:scale(.97); }
.opt-card:hover { background:var(--c-primary-l); }
.opt-card__ico { font-size:34px; line-height:1; }
.opt-card b { font-size:16px; }
.opt-card span { font-size:11.5px; color:var(--c-ink-soft); line-height:1.25; }

/* ---------- Status cards (painel da tela inicial) ---------- */
.scard:active { transform:scale(.98); }

/* ---------- Quick actions ---------- */

/* ---------- Progress ---------- */

/* ---------- Car photo ---------- */
/* Botão de trocar a capa, no canto de cima da própria imagem — onde a pessoa
   olha quando quer mudar a foto, em vez de escondido no formulário de edição. */
.car-cover__btn:active { background:rgba(0,0,0,.75); }
/* ⭐ promove a foto da galeria a capa (o × ao lado remove) */
.pg__capa:active { background:rgba(0,0,0,.75); }

/* ---------- Lista de mensagens / chat ---------- */
.chat-list { display:flex; flex-direction:column; }
.msg { max-width:78%; padding:9px 12px; border-radius:14px; font-size:13.5px; margin-bottom:8px; }
.msg--in  { background:var(--c-surface); border:1px solid var(--c-line); align-self:flex-start; border-bottom-left-radius:4px; }
.msg--out { background:var(--c-primary); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msg small { display:block; font-size:10.5px; opacity:.7; margin-bottom:2px; font-weight:700; }

.chat-input { display:flex; gap:8px; padding-top:10px; position:sticky; bottom:0; background:var(--c-bg); }
.chat-input input { flex:1; }

/* ---------- Banner / aviso ---------- */
.banner--success { background:var(--c-success-l); color:#1d5a3a; }

/* ---------- GPS check-in ---------- */

/* ---------- Step list (placa preta) ---------- */
.step::before { content:''; position:absolute; left:-22px; top:4px; bottom:-4px; width:2px; background:var(--c-line); }
.step:last-child::before { display:none; }
.step--done .step__n { background:var(--c-success); }

/* ---------- Loja ---------- */
.shop-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.prod__img { height:110px; border-radius:12px 12px 0 0; }
.prod__body { padding:10px 12px 12px; }
.prod__body b { font-size:13.5px; display:block; }
.prod__price { color:var(--c-primary); font-weight:800; font-size:15px; margin-top:4px; }
.prod__old { text-decoration:line-through; color:var(--c-ink-soft); font-size:12px; font-weight:600; margin-left:6px; }

/* ---------- Stars ---------- */
.stars { color:var(--c-gold); font-size:13px; letter-spacing:1px; }

/* ---------- Avatar list ---------- */
.avatar { width:44px; height:44px; border-radius:50%; background:var(--c-primary-l); color:var(--c-primary-d);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0; }

/* ---------- Assistente FAB ---------- */
.fab-help {
  position: absolute; right: 14px; bottom: 84px; width: 54px; height: 54px;
  border-radius: 50%; border: 3px solid #fff; background: var(--c-surface); padding: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.28); z-index: 60; overflow: hidden; cursor: pointer;
}
.fab-help svg { width: 100%; height: 100%; display: block; }
.fab-help img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fab-help::after {
  content: '?'; position: absolute; right: -2px; top: -2px; width: 18px; height: 18px;
  background: var(--c-gold); color: #1d2a35; border-radius: 50%; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}


/* linha rótulo/valor (usada em joias, depósito etc.) */

/* mini chart bars */
.bars { display:flex; align-items:flex-end; gap:8px; height:90px; }
.bars .bar { flex:1; background:var(--c-primary-l); border-radius:6px 6px 0 0; position:relative; }
.bars .bar > i { position:absolute; bottom:0; left:0; right:0; background:var(--c-primary); border-radius:6px 6px 0 0; }

/* Tela cheia: em qualquer celular (até 520px) e sempre que instalado como app (standalone) */
@media (max-width:520px), (display-mode: standalone), (display-mode: fullscreen){
  .app-body { padding:0; }
  .phone { width:100%; height:100vh; height:100dvh; max-height:none; border-radius:0; box-shadow:none; }
  .phone__notch { display:none; }
  /* áreas seguras (notch/gesto) de iPhone e Android */
  .topbar { padding-top: calc(26px + env(safe-area-inset-top, 0px)); }
  .tabbar { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
/* iPhone INSTALADO (standalone): folga mínima garantida mesmo se env() falhar
   (classe .ios-pwa posta no <html> pelo app.js via navigator.standalone) */
.ios-pwa .topbar { padding-top: max(calc(26px + env(safe-area-inset-top, 0px)), 58px); }
.ios-pwa .app-body .modal__head { padding-top: max(calc(26px + env(safe-area-inset-top, 0px)), 58px); }
.ios-pwa .tabbar { padding-bottom: max(calc(10px + env(safe-area-inset-bottom, 0px)), 26px); }

/* ===== No app, todo modal abre como tela cheia (padrão Minha CNH) ===== */
.app-body .modal-back {
  background: transparent; padding: 0;
  align-items: center; justify-content: center;
}
.app-body .modal {
  width: 400px; max-width: 100%; height: 860px; max-height: 94vh;
  border-radius: 34px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 70px rgba(0,0,0,.32), 0 0 0 9px #1d2a35, 0 0 0 11px #2c3d49;
  animation: sheetUp .22s ease;
}
@keyframes sheetUp { from { transform: translateY(14px); opacity: .5; } }
.app-body .modal__head {
  background: var(--c-primary); color: #fff;
  padding: 26px 18px 14px; border-bottom: none;
  justify-content: flex-start; gap: 12px; flex-shrink: 0;
}
.app-body .modal__head h3 { order: 2; flex: 1; font-size: 18px; font-weight: 700; color: #fff; }
.app-body .modal__x {
  order: 1; background: rgba(255,255,255,.16); color: #fff;
  width: 34px; height: 34px; border-radius: 9px; font-size: 0; flex-shrink: 0;
}
.app-body .modal__x::before { content: '‹'; font-size: 22px; line-height: 1; }
.app-body .modal__body { padding: 18px; overflow: auto; flex: 1; -webkit-overflow-scrolling: touch; }

@media (max-width:520px), (display-mode: standalone), (display-mode: fullscreen){
  .app-body .modal { width:100%; height:100vh; height:100dvh; max-height:none; border-radius:0; box-shadow:none; }
  .app-body .modal__head { padding-top: calc(26px + env(safe-area-inset-top, 0px)); }
}

/* ===== Convite "Adicionar à tela inicial" (PWA) ===== */
.a2hs {
  position: absolute; left: 10px; right: 10px; bottom: 68px; z-index: 210; /* acima do chip ‹ Hub (200) */
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; animation: sheetUp .25s ease;
}
.a2hs__logo { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.a2hs__txt { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; }
.a2hs__txt b { display: block; font-size: 13.5px; }
.a2hs__acoes { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

/* ===== Abas do Mercado (Explorar · Meus anúncios · Propostas) ===== */
.mtab.is-on { background: var(--c-surface); color: var(--c-primary-d); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.mtab.is-on .mtab__b { background: var(--c-primary-d); }

/* ============================================================
   Gate de acesso — telas de senha e MFA (Microsoft Authenticator)
   A caixa é uma coluna: cabeçalho e botão de ação ficam presos,
   só o miolo rola. Antes o conteúdo crescia e empurrava o botão
   "Ativar MFA e entrar" para fora da tela do celular.
   ============================================================ */
/* No app, `.app-body .modal` é uma folha de altura fixa (860px, do tamanho do
   "celular"). Aqui a caixa precisa encolher até o conteúdo — senão sobra um vazio
   enorme embaixo — e crescer no máximo até 92vh, quando o miolo passa a rolar.
   `.modal.gate-box` empata em especificidade com `.app-body .modal` e vence por vir
   depois no arquivo; usar `.modal.gate-box` (e não `.app-body …`) mantém a regra
   valendo também no portal, que carrega este mesmo CSS sem a classe `app-body`. */
.modal.gate-box {
  display: flex; flex-direction: column; padding: 0;
  width: 100%; max-width: 520px; height: auto; max-height: 92vh;
  border-radius: 18px 18px 0 0; overflow: hidden;
}

/* ---- QR do Authenticator: moldura branca com cantos dourados (visor vintage) ---- */

/* ---- Blocos "abre e fecha" (chave manual, passo a passo) ---- */

/* ---- Chave secreta: quebra só entre os grupos de 4, nunca no meio de um ---- */

/* ---- Passo a passo numerado ---- */

/* ---- Campo do código de 6 dígitos ---- */
/* `.input` fixa -webkit-text-fill-color no tom da tinta (por causa do autofill do iOS);
   sem repetir aqui, o "000000" de exemplo sai preto e parece um código já preenchido. */

/* Folha enxuta do desbloqueio por biometria: é a tela mais vista do app, e a que
   menos precisa explicar. Cabeçalho e miolo mais baixos que os das demais folhas. */

/* ---- Segunda etapa por biometria (app): Face ID / digital do próprio aparelho ---- */
/* Enquanto o aparelho lê a face/digital */
/* Espera curta enquanto o navegador diz se há leitor biométrico */

/* Quadro do mapa dentro do app: iframe do embed clássico (sem chave) com um atalho
   fixo no rodapé para abrir o Google Maps completo, onde os lugares vêm marcados. */
.mapa-quadro__abrir:active { background: var(--c-surface-2); }

/* Atalho para abrir o Google Maps de verdade (endereço da garagem, postos, abastecer).
   O app não embute mapa: o embed antigo não marca resultado de busca e a Embed API
   cobraria chave. O Maps nativo faz as duas coisas melhor, no lugar certo. */
.mapa-abrir { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 14px 15px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow-s); color: inherit; text-decoration: none; cursor: pointer; }
.mapa-abrir:active { transform: scale(.995); }
.mapa-abrir__ico { font-size: 26px; line-height: 1; flex-shrink: 0; }
.mapa-abrir__txt { flex: 1; min-width: 0; }
.mapa-abrir__txt b { display: block; font-size: 14.5px; }
.mapa-abrir__txt span { display: block; font-size: 12.5px; color: var(--c-ink-soft); margin-top: 2px; }

/* Link em texto dentro de um bloco */

/* ---- Enquadramento da folha de acesso NO APP: sobe de baixo, ocupa a largura ---- */
.app-body .modal.gate-box {
  display: flex; flex-direction: column; padding: 0;
  width: 100%; max-width: 520px; height: auto; max-height: 92vh;
  border-radius: 18px 18px 0 0; overflow: hidden;
}

/* Multi-seleção do app (serviços de um contato): etiqueta grande, para dedo.
   O portal desenha a mesma escolha em pastilhas menores, na folha dele. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--c-line); background: var(--c-surface-2); color: var(--c-ink);
  width: auto;
}
.chip--on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.chip--on span { opacity: .75; font-size: 11px; }
.chip:active { transform: translateY(1px); }
/* Fileira que rola em vez de quebrar. Os cinco recortes do evolutivo em
   linhas empilhadas comiam meia tela antes do gráfico aparecer; numa fileira
   só, a pessoa arrasta. -8px/8px sangra até a borda do cartão, senão o item
   cortado parece o último da lista. */
.chips--rolo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -8px; padding: 2px 8px; }
.chips--rolo::-webkit-scrollbar { display: none; }
.chips--rolo > .chip { flex: 0 0 auto; }

/* ---- CALENDÁRIO DE EVENTOS -------------------------------------------
   Sete colunas de largura igual. Em 375px não cabe nome de evento dentro do
   dia: o quadrado leva o número e até três bolinhas coloridas, e o toque abre
   o dia embaixo. O portal, que tem largura, escreve o título na célula. */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow { text-align: center; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--c-ink-soft); padding: 2px 0 3px; }
.cal__dow.is-fds { color: var(--c-gold-d); }
.cal__d {
  font: inherit; width: auto; aspect-ratio: 1 / 1; min-height: 38px; padding: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); color: var(--c-ink); cursor: pointer;
}
.cal__d > span { font-size: 12.5px; font-weight: 700; line-height: 1; }
/* Faixa das bolinhas com altura fixa: sem ela, o dia com evento fica mais alto
   que o vizinho e a semana inteira desalinha. */
.cal__d > em { display: flex; gap: 2px; height: 5px; align-items: center; }
.cal__d > em > i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.cal__d.is-fora { visibility: hidden; }
.cal__d.is-fds > span { color: var(--c-gold-d); }
.cal__d.is-passado { opacity: .55; }
.cal__d.is-hoje { border-color: var(--c-primary); border-width: 2px; }
.cal__d.is-hoje > span { color: var(--c-primary); }
.cal__d.is-ocupado { background: var(--c-primary-l); border-color: #e7c5b6; }
.cal__d.is-sel { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.cal__d:active { transform: translateY(1px); }
.cal__lp { background: var(--c-gold) !important; border-radius: 1px !important; }

.cal__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cal__leg { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--c-ink-soft); }
.cal__pt { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; border: 1px solid var(--c-line); background: var(--c-surface); vertical-align: middle; }
.cal__pt.is-ocupado { background: var(--c-primary-l); border-color: #e7c5b6; }
.cal__dia { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-line); }

/* ---- FOLHA DE ESCOLHA DO CANAL DE CONVITE ----------------------------
   Linha alta, para dedo. O canal sem convidado fica visível e apagado em vez
   de sumir: sumir esconderia o motivo ("ninguém tem e-mail cadastrado"), que
   é justamente a informação que resolve. O portal desenha o dele na folha
   própria, com a linha menor. */
.canais { display: flex; flex-direction: column; gap: 6px; }
.canal {
  font: inherit; width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 11px; padding: 13px 12px;
  border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); color: var(--c-ink);
}
.canal:active { transform: translateY(1px); }
.canal.is-off { opacity: .5; }
.canal.is-off:active { transform: none; }
.canal__ico { font-size: 21px; line-height: 1; }
.canal__txt { flex: 1; min-width: 0; }
.canal__txt > b { display: block; font-size: 14px; }
.canal__txt > span { display: block; font-size: 12px; color: var(--c-ink-soft); }

/* ---- MARCAÇÕES E SUA LEGENDA ----------------------------------------
   Um <span> por ícone, para o title responder pelo ícone certo. O espaço
   entre eles vem da margem, não de um espaço em branco no texto — que não
   daria alvo separado ao toque nem ao ponteiro. */
.marc-ico { margin-right: 3px; }
.marc-ico:last-child { margin-right: 0; }

/* No celular NÃO existe passar o mouse: aqui a legenda não é conforto, é a
   única forma de descobrir o que cada desenho quer dizer. */
.marc-legenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px;
  /* Antes da lista, não depois: com 91 lançamentos a legenda existia e ninguém
     achava. O lugar dela é onde o leitor encontra os ícones pela primeira vez. */
  margin: 0 0 8px; padding: 10px 12px;
  border: 1px solid var(--c-line); border-radius: var(--radius-s);
  background: var(--c-surface-2); font-size: 12px; color: var(--c-ink-soft);
}
.marc-legenda > b { width: 100%; color: var(--c-ink); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.marc-legenda span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.marc-legenda i { font-style: normal; font-size: 14px; }

/* ---- A CONTA DO PATRIMÔNIO -------------------------------------------
   Dois cartões com números diferentes e sem a relação entre eles era o que
   confundia. Empilhada com os sinais entre as parcelas, a conta se lê de
   cima para baixo e dispensa legenda. */
.patr-conta { display: flex; flex-direction: column; gap: 6px; }
.patr-parcela {
  padding: 11px 13px; border-radius: var(--radius-s);
  border: 1px solid var(--c-line); background: var(--c-surface);
}
.patr-parcela > span { display: block; font-size: 11.5px; color: var(--c-ink-soft); }
.patr-parcela > b { display: block; font-size: 20px; line-height: 1.2; margin-top: 1px; }
.patr-parcela > em { display: block; font-style: normal; font-size: 11.5px; color: var(--c-ink-soft); margin-top: 2px; }
/* A última parcela é o resultado: é a resposta da pergunta, e se destaca. */
.patr-parcela:last-child { background: var(--c-primary-l); border-color: #e7c5b6; }
.patr-parcela:last-child > b { color: var(--c-primary); font-size: 22px; }
.patr-op { text-align: center; font-size: 16px; font-weight: 800; color: var(--c-ink-soft); line-height: 1; }

/* ---- LEGENDA DO EVOLUTIVO --------------------------------------------
   Lista fina, não pastilhas. Com 11 séries, o chip grande empilhado comia
   meia tela — e o valor de cada uma caía numa posição diferente, o que é
   justamente o que impede comparar. Em linha, os valores alinham à direita. */
.evo-leg { margin-top: 10px; }
.evo-leg__i {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: baseline; gap: 8px; padding: 5px 0; font-size: 12.5px;
  border-bottom: 1px solid var(--c-line);
}
.evo-leg__i:last-child { border-bottom: none; }
.evo-leg__i > i { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
.evo-leg__i > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evo-leg__i > b { white-space: nowrap; }
.evo-leg__i > em { font-style: normal; font-size: 11px; color: var(--c-ink-soft); min-width: 30px; text-align: right; }
.evo-leg__i[onclick] { cursor: pointer; }
.evo-leg__i[onclick]:active { background: var(--c-primary-l); }

/* Referências de preço de um carro (tela Valor da garagem).
   Eram quatro caixas de estatística; carro sem anúncio anotado ficava com três
   travessões ocupando meia tela. Linha a linha, o que falta some do caminho. */
.ref-linhas{ margin-top:10px; border-top:1px solid var(--c-line); }
.ref-linha{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:7px 0; border-bottom:1px solid var(--c-line); font-size:13px; }
.ref-linha span{ color:var(--c-ink-soft); }
.ref-linha em{ font-style:normal; opacity:.75; font-size:11px; }
.ref-linha b{ font-size:14px; }
.ref-linha--vazia b{ color:var(--c-ink-soft); font-weight:500; font-size:12px; }
.ref-faixa{ display:flex; align-items:center; gap:6px; padding:6px 0 2px;
  font-size:12px; color:var(--c-ink-soft); }
.ref-faixa i{ font-style:normal; font-size:10px; opacity:.7; }
.ref-faixa span{ flex:1; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--c-line), var(--c-primary)); }
.ref-nota{ padding:6px 0; border-bottom:1px solid var(--c-line);
  font-size:11.5px; line-height:1.4; color:var(--c-ink-soft); }

/* Onde a pesquisa de mercado foi feita. Fica junto do valor porque o número
   sem a fonte é chute de aparência confiável. */
.pesq-fontes{ margin-top:10px; padding-top:8px; border-top:1px solid var(--c-line);
  font-size:11.5px; line-height:1.55; }
.pesq-fontes .muted{ color:var(--c-ink-soft); }

/* A faixa de preço de um carro: mais barato · média · mais caro.
   Três números em linha porque a leitura é de comparação — empilhados,
   viram três fatos soltos. */
.faixa{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:10px; }
.faixa-cel{ text-align:center; padding:8px 4px; border-radius:10px;
  background:var(--c-surface-2); }
.faixa-cel b{ display:block; font-size:14px; line-height:1.25; }
.faixa-cel span{ display:block; font-size:10.5px; color:var(--c-ink-soft); margin-top:2px; }
.faixa-cel--forte{ background:var(--c-primary-l); }
.faixa-cel--forte b{ color:var(--c-primary); }

/* Pago x vale hoje, na tela Conferir preços. Uma linha só: o que custou, a
   variação com seta, e quanto isso dá em dinheiro. */
.faixa-var{ display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--c-line); font-size:12px; }
.faixa-var span{ color:var(--c-ink-soft); }
.faixa-var b{ font-size:14px; }
.faixa-var em{ font-style:normal; color:var(--c-ink-soft); }
.faixa-var--sobe{ color:var(--c-success); }
.faixa-var--desce{ color:var(--c-danger); }

/* Evolução do preço de um carro. Escala sem zero na base de propósito: 3% num
   eixo que vai a zero vira reta, e a linha existe para mostrar o movimento. */
.evo-mini { background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:14px; padding:12px 12px 8px; margin-bottom:8px; }
.evo-mini svg { display:block; width:100%; height:120px; overflow:visible; }
.evo-mini__area { fill:var(--c-primary-l); }
.evo-mini__linha { fill:none; stroke:var(--c-primary); stroke-width:2px;
  stroke-linejoin:round; stroke-linecap:round; }
.evo-mini__pt { fill:var(--c-surface); stroke:var(--c-primary); stroke-width:2px; }
.evo-mini__eixo { display:flex; justify-content:space-between; gap:10px;
  margin-top:8px; font-size:11px; color:var(--c-ink-soft); }

/* Barra de andamento da rodada de preço. Fina e sem número dentro: o "fonte 3
   de 10" está logo abaixo em texto, e repetir o número dentro da barra só
   competiria com ele. */
.rodada-barra { height:6px; border-radius:999px; background:var(--c-line); overflow:hidden; }
.rodada-barra > i { display:block; height:100%; background:var(--c-primary); transition:width .2s ease; }