/* =====================================================================
   Ruptura Extrato — folha de estilo
   Tokens herdados do app de sugestao de VB (trade_fv), acrescidos do
   verde do Extrato (#6ECC64), que marca tudo que e do produto.
   ===================================================================== */

:root {
  /* indigo — a base da empresa */
  --primary-950:#1E1F5C; --primary-900:#2A2C7A; --primary-800:#373A9E;
  --primary-700:#4648B8; --primary-600:#5558D4; --primary-500:#6366F1;
  --primary-400:#7B83E8; --primary-300:#A5A8F3; --primary-200:#C7C9F7;
  --primary-100:#E8E9FC; --primary-50:#F4F4FE;

  /* verde — a cor do Extrato */
  --extrato:#6ECC64;
  --extrato-700:#3E8F38; --extrato-600:#4FA946; --extrato-500:#6ECC64;
  --extrato-300:#A8E2A1; --extrato-100:#E4F6E2; --extrato-50:#F2FBF1;

  /* escala do desconto: do verde ao ambar, conforme a vantagem cresce */
  --d5:#8FD98A; --d10:#4FA946; --d15:#2D7A3E; --d25:#E0952A; --d50:#D2691E;

  --success:#3FB868; --warning:#F5A623; --error:#E5484D; --info:#5558D4;
  --success-bg:#E2F8EB; --warning-bg:#FFF4E0; --error-bg:#FEECEC;

  --bg-page:#F7F8FA; --bg-card:#FFFFFF; --bg-sidebar:#1A1D2E;
  --border-light:#EEEEF3; --border-default:#DDDFE6; --border-strong:#BEC2D0;

  --gray-950:#0F1119; --gray-900:#1A1D2E; --gray-800:#2D3148;
  --gray-700:#454A66; --gray-600:#5E6484; --gray-500:#7A80A0;
  --gray-400:#9CA1B8; --gray-300:#BEC2D0; --gray-200:#DDDFE6;
  --gray-100:#EEEEF3; --gray-50:#F7F8FA;

  --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:16px; --radius-2xl:20px; --radius-full:9999px;

  --shadow-xs:0 1px 2px rgba(15,17,25,.04);
  --shadow-sm:0 1px 3px rgba(15,17,25,.06), 0 1px 2px rgba(15,17,25,.04);
  --shadow-md:0 4px 6px rgba(15,17,25,.06), 0 2px 4px rgba(15,17,25,.04);
  --shadow-lg:0 10px 15px rgba(15,17,25,.06), 0 4px 6px rgba(15,17,25,.04);
  --shadow-xl:0 20px 25px rgba(15,17,25,.08), 0 8px 10px rgba(15,17,25,.04);

  --transition-fast:150ms ease;
  --transition-base:200ms ease;
  --transition-slow:300ms ease;

  --topbar-h:80px;
  --logo-ease:url("img/ease.png");
  --ic-carro:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l1.5-4.5A2 2 0 0 1 8.4 5h7.2a2 2 0 0 1 1.9 1.5L19 11v6a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H8v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-6z'/%3E%3C/svg%3E");
  --painel-w:392px;
  /* Fonte unica do sistema Ease Labs (ui-reference/ease-labs-ui-system.html),
     carregada nos mesmos pesos que ele declara — 300 inclusive, que e o peso
     leve do par 700/300 usado no header. */
  --font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*, *::before, *::after { box-sizing:border-box }
/* Instalado, o app nao pode ter o elastico de rolagem do navegador: puxar a
   tela para baixo e balancar a pagina inteira denuncia que ali dentro tem um
   site. O mapa e as listas tratam a propria rolagem. */
html, body { overscroll-behavior:none }

/* O atributo `hidden` do HTML so funciona pela regra [hidden]{display:none} do
   navegador — e QUALQUER regra de autor com `display` a sobrepoe. Como `.login`
   e `.layout` declaram display, `elemento.hidden = true` nao escondia nada: a
   tela de login ficava por cima do app, com position:fixed e z-index:100, e o
   login parecia nao levar a lugar nenhum. Esta guarda vale para todo o app. */
[hidden] { display:none !important }

html, body {
  margin:0; height:100%;
  /* trava o inflamento automatico de texto do Android/iOS: ele aumenta a
     LETRA sem mexer no espacamento em px, e e assim que um icone posicionado
     por padding acaba colidindo com o texto ao lado */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  font-family:var(--font-family);
  background:var(--bg-page); color:var(--gray-900);
  -webkit-font-smoothing:antialiased;
}
body { overflow:hidden }

button { font-family:inherit; cursor:pointer }
:focus-visible { outline:2px solid var(--primary-500); outline-offset:2px; border-radius:var(--radius-sm) }

/* ------------------------------------------------------- animacoes */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }
@keyframes slideInRight { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }
@keyframes shimmer    { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes pulseRing  { 0%{transform:scale(.7);opacity:.8} 70%{transform:scale(2.2);opacity:0} 100%{opacity:0} }

/* ------------------------------------------------------- barra superior */
/* Barra da marca: indigo solido, logo a esquerda, titulo ao centro e o
   produto a direita — o mesmo arranjo do site da Ease Labs. */
/* ---------------------------------------------------------------------
   Barra da marca. Indigo com profundidade: um degrade diagonal discreto,
   um brilho no alto e um fio verde na base — o verde do produto assinando
   a barra da empresa.
   --------------------------------------------------------------------- */
.topbar {
  height:var(--topbar-h); padding:0 22px;
  display:flex; align-items:center; gap:18px;
  position:relative; z-index:30; isolation:isolate;
  background:
    radial-gradient(120% 180% at 8% -40%, rgba(255,255,255,.14) 0%, transparent 58%),
    linear-gradient(105deg, var(--primary-700) 0%, var(--primary-600) 52%, #5F63DE 100%);
  box-shadow:0 2px 14px rgba(30,31,92,.28);
}
.topbar::after {          /* fio do Extrato assinando a base da barra */
  content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,
    var(--extrato-600) 0%, var(--extrato-500) 30%,
    var(--extrato) 62%, var(--extrato-300) 100%);
  box-shadow:0 1px 6px rgba(110,204,100,.5);
}
/* brilho lento percorrendo o fio: presenca sem chamar atencao */
.topbar .brilho {
  position:absolute; left:0; bottom:0; height:4px; width:15%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6) 50%, transparent);
  filter:blur(1.5px); pointer-events:none; z-index:2;
  animation:correFio 9s ease-in-out infinite;
}
@keyframes correFio {
  0%   { transform:translateX(-40%); opacity:0 }
  14%  { opacity:.7 }
  70%  { opacity:.7 }
  86%  { transform:translateX(700%); opacity:0 }
  100% { transform:translateX(700%); opacity:0 }
}

/* entrada em sequencia ao abrir o app */
.topbar .marca .logo { animation:entraMarca .6s cubic-bezier(.2,.7,.3,1) backwards }
.topbar .divisor     { animation:cresceFio .5s ease-out .18s backwards }
.topbar .eyebrow     { animation:entraTexto .5s ease-out .22s backwards }
.topbar .t           { animation:entraTexto .5s ease-out .3s backwards }
.topbar .produto     { animation:entraTexto .5s ease-out .4s backwards }

@keyframes entraMarca {
  from { opacity:0; transform:translateX(-14px) scale(.96) }
  to   { opacity:1; transform:none }
}
@keyframes entraTexto {
  from { opacity:0; transform:translateY(7px) }
  to   { opacity:1; transform:none }
}
@keyframes cresceFio {
  from { opacity:0; transform:scaleY(.2) }
  to   { opacity:1; transform:none }
}

.marca { display:flex; align-items:center; gap:16px; min-width:0; position:relative; z-index:3 }

/* a marca e indigo; sobre o indigo da barra ela precisa virar branca */
.marca .logo {
  height:27px; width:128px; flex:0 0 128px; display:block;
  background:#fff;
  -webkit-mask:var(--logo-ease) left center/contain no-repeat;
  mask:var(--logo-ease) left center/contain no-repeat;
  margin-top:-3px;                      /* alinha com o titulo, nao com o bloco */
  transition:opacity var(--transition-base);
}
.topbar:hover .marca .logo { opacity:.9 }

.divisor {
  width:1px; height:38px; flex:0 0 1px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.32) 20%,
                             rgba(255,255,255,.32) 80%, transparent);
}

.marca .titulos { min-width:0; display:flex; flex-direction:column; gap:5px }
/* Caption do sistema: Inter 500. Caixa alta e tracking sao o unico acrescimo,
   para o rotulo nao disputar peso com o titulo logo abaixo. */
.marca .eyebrow {
  font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7); white-space:nowrap; line-height:1;
}
.marca .eyebrow .ponto { color:rgba(255,255,255,.4); margin:0 4px; font-weight:400 }
/* Heading 2 do sistema: Inter 700, 22/30, sem tracking negativo — o aperto de
   -.028em era do Display (36px), onde faz sentido; em 22px ele so fecha as
   contraformas. O par 700 no nome / 300 no qualificador e a assinatura da
   empresa: a mesma de `.cover h1 span` e de `.sidebar-logo span` no sistema. */
.marca .t {
  font-size:22px; font-weight:700; letter-spacing:0; white-space:nowrap;
  color:#fff; line-height:1.36; margin:0;
  text-shadow:0 1px 2px rgba(30,31,92,.22);
}
.marca .t .leve { font-weight:300 }
.marca .t .tsep { color:rgba(255,255,255,.4); font-weight:300; margin:0 5px }

/* ---- o produto que esta sendo mostrado ---- */
.produto {
  margin-left:auto; flex:0 0 auto; display:flex; flex-direction:column;
  align-items:flex-end; gap:5px; min-width:0; position:relative; z-index:3;
}
.produto-rot {
  font-size:9.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.62); line-height:1; white-space:nowrap;
}
.produto-nome {
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:13px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.26);
  border-radius:var(--radius-full); padding:7px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.produto-nome b { font-weight:700 }
.produto-nome .pt {
  width:7px; height:7px; flex:0 0 7px; border-radius:50%;
  background:var(--extrato-500); box-shadow:0 0 0 3px rgba(110,204,100,.28);
  animation:respira 3.4s ease-in-out infinite;
}
@keyframes respira {
  0%, 100% { box-shadow:0 0 0 3px rgba(110,204,100,.28) }
  50%      { box-shadow:0 0 0 6px rgba(110,204,100,.1) }
}
.produto-nome .vol {
  font-weight:500; color:rgba(255,255,255,.72);
  border-left:1px solid rgba(255,255,255,.26); padding-left:9px; margin-left:2px;
}

/* ------------------------------------------------------- layout */
.layout {
  display:flex; height:calc(100vh - var(--topbar-h)); position:relative;
}
.painel {
  width:var(--painel-w); flex:0 0 var(--painel-w);
  background:var(--bg-card); border-right:1px solid var(--border-default);
  display:flex; flex-direction:column; min-height:0; z-index:20;
}
.mapa-wrap { flex:1; position:relative; min-width:0; background:var(--gray-100) }
#mapa { position:absolute; inset:0 }

/* ------------------------------------------------------- filtros */
.filtros {
  padding:13px 16px 14px; border-bottom:1px solid var(--border-light);
  display:flex; flex-direction:column; gap:11px; flex:0 0 auto;
}
.campo { display:flex; flex-direction:column; gap:5px }
.campo label {
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gray-400);
}
/* rotulo e atalho na mesma linha: o "Perto de mim" deixa de gastar uma faixa
   inteira do painel, que e onde a lista precisa de espaco */
.campo-topo { display:flex; align-items:center; justify-content:space-between; gap:8px }
.btn-local {
  display:inline-flex; align-items:center; gap:5px; border:none; background:transparent;
  color:var(--primary-600); font-size:11.5px; font-weight:600; padding:2px 4px;
  border-radius:var(--radius-sm); letter-spacing:.01em;
  transition:background var(--transition-base), color var(--transition-base);
}
.btn-local svg { width:13px; height:13px }
.btn-local:hover { background:var(--primary-50); color:var(--primary-700) }
.btn-local[disabled] { opacity:.5; cursor:default }
.btn-local.carregando svg { animation:girando 1s linear infinite }
.campo select, .campo input {
  font-family:inherit; font-size:14px; color:var(--gray-900);
  padding:9px 11px; border:1px solid var(--border-default);
  border-radius:var(--radius-md); background:var(--bg-card);
  transition:border-color var(--transition-base), box-shadow var(--transition-base);
  width:100%; min-width:0;
}
.campo select:focus, .campo input:focus {
  outline:none; border-color:var(--primary-400);
  box-shadow:0 0 0 3px var(--primary-100);
}
.campo select:disabled { background:var(--gray-50); color:var(--gray-400) }
.linha2 { display:grid; grid-template-columns:1fr 1fr; gap:10px }
/* cidade e bairro ocupam a linha inteira: nome de cidade nao cabe em meia
   coluna, e truncar o que o usuario acabou de escolher confunde */
.campos-local { display:flex; flex-direction:column; gap:10px }

/* ---------- campo com busca embutida (combobox) ---------- */
.cbx { position:relative }
.cbx-caixa { position:relative; display:flex; align-items:center }
.cbx-ic {
  position:absolute; left:10px; width:15px; height:15px; color:var(--gray-400);
  pointer-events:none; transition:color var(--transition-base);
}
.cbx-caixa input {
  font-family:inherit; font-size:14px; color:var(--gray-900);
  padding:9px 30px 9px 32px; border:1px solid var(--border-default);
  border-radius:var(--radius-md); background:var(--bg-card); width:100%; min-width:0;
  transition:border-color var(--transition-base), box-shadow var(--transition-base);
}
.cbx-caixa input::placeholder { color:var(--gray-400) }
.cbx-caixa input:focus {
  outline:none; border-color:var(--primary-400); box-shadow:0 0 0 3px var(--primary-100);
}
.cbx-caixa input:focus ~ .cbx-ic, .cbx-caixa:focus-within .cbx-ic { color:var(--primary-500) }
.cbx-caixa input:disabled { background:var(--gray-50); color:var(--gray-400); cursor:not-allowed }
.cbx-caixa input[type=search]::-webkit-search-cancel-button { display:none }

/* Tela de toque: os campos sobem para 16px pelo mesmo motivo ja documentado
   nos campos de login — abaixo disso o iOS AMPLIA a pagina inteira ao focar o
   campo, e a ampliacao desloca o layout, fazendo a lupa parecer invadir o
   texto. Ficaram em 14px por descuido quando o login foi protegido. */
@media (pointer: coarse) {
  .cbx-caixa input, .campo select, .campo input { font-size:16px }
  .cbx-caixa input { padding-left:34px }
  .cbx-ic { left:11px }
}

/* ---- busca falada ---- */
/* o campo de busca reserva 32px a esquerda para a lupa; o microfone ocupa a
   direita, e o input ganha folga equivalente para o texto nao passar por baixo */
#busca { padding-right:38px }
.btn-voz {
  position:absolute; right:5px; width:26px; height:26px; padding:0;
  border:none; border-radius:var(--radius-md); background:transparent;
  color:var(--gray-400); display:grid; place-items:center; cursor:pointer;
  transition:color var(--transition-base), background var(--transition-base);
}
.btn-voz svg { width:15px; height:15px }
.btn-voz:hover { color:var(--primary-600); background:var(--primary-100) }
.btn-voz.ouvindo {
  color:#fff; background:var(--error); animation:pulsaVoz 1.15s ease-in-out infinite;
}
@keyframes pulsaVoz {
  0%, 100% { box-shadow:0 0 0 0 rgba(229,72,77,.42) }
  50%      { box-shadow:0 0 0 9px rgba(229,72,77,0) }
}
/* So a transcricao do que foi dito. As fichas de interpretacao sairam: quem
   mostra a leitura sao os proprios seletores de cidade e bairro, que se
   preenchem na tela e podem ser corrigidos ali mesmo. */
.voz-estado { margin-top:7px; font-size:12px; line-height:1.5 }
.voz-estado .dito { color:var(--gray-500); font-style:italic; display:block }
.voz-erro { color:var(--error) }
@media (prefers-reduced-motion: reduce) { .btn-voz.ouvindo { animation:none } }
.cbx-x {
  position:absolute; right:6px; width:22px; height:22px; border:none; background:transparent;
  color:var(--gray-400); font-size:19px; line-height:1; border-radius:var(--radius-full);
  display:grid; place-items:center; transition:background var(--transition-base), color var(--transition-base);
}
.cbx-x:hover { background:var(--gray-100); color:var(--gray-700) }
.cbx-x[hidden] { display:none }

.cbx-lista {
  position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:60;
  background:var(--bg-card); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  max-height:300px; overflow-y:auto; overscroll-behavior:contain; padding:5px;
  animation:fadeInUp .16s ease-out;
}
.cbx-op {
  padding:8px 10px; border-radius:var(--radius-md); font-size:13.5px;
  cursor:pointer; display:flex; align-items:flex-start; gap:8px; line-height:1.3;
}
.cbx-op .uf, .cbx-op .qtd { flex:0 0 auto; margin-top:1px }
.cbx-op:hover, .cbx-op.foco { background:var(--primary-50) }
.cbx-op .nome { flex:1; min-width:0; line-height:1.3; word-break:break-word }
.cbx-op .uf { font-size:11px; color:var(--gray-400); font-weight:600 }
.cbx-op .qtd {
  font-size:11px; color:var(--gray-500); background:var(--gray-100);
  border-radius:var(--radius-full); padding:2px 7px; font-variant-numeric:tabular-nums;
}
.cbx-op .qtd.of { background:var(--extrato-100); color:var(--extrato-700); font-weight:600 }
.cbx-op mark { background:var(--primary-100); color:var(--primary-800); border-radius:2px }
.cbx-nada { padding:13px 10px; font-size:13px; color:var(--gray-500); text-align:center }

/* ---------- pilulas de desconto ---------- */
/* grade de 3 por 2: em linha livre o "50%" caia sozinho na segunda fila */
.pilulas { display:grid; grid-template-columns:repeat(3, 1fr); gap:5px }
.pil {
  font-size:12.5px; font-weight:600; color:var(--gray-600); text-align:center;
  background:var(--bg-card); border:1px solid var(--border-default);
  border-radius:var(--radius-md); padding:7px 6px;
  transition:background var(--transition-base), color var(--transition-base),
             border-color var(--transition-base);
}
.pil:hover { border-color:var(--primary-300); color:var(--primary-700) }
.pil.on {
  background:var(--primary-600); border-color:var(--primary-600); color:#fff;
  box-shadow:var(--shadow-xs);
}
.pil:focus-visible { outline-offset:1px }

.btn {
  font-size:13.5px; font-weight:600; padding:9px 14px; border-radius:var(--radius-md);
  border:1px solid transparent; display:inline-flex; align-items:center; gap:7px;
  transition:background var(--transition-base), color var(--transition-base),
             transform var(--transition-fast), box-shadow var(--transition-base);
  white-space:nowrap;
}
.btn svg { width:15px; height:15px; flex:0 0 auto }
.btn-primario { background:var(--primary-600); color:#fff; box-shadow:var(--shadow-xs) }
.btn-primario:hover { background:var(--primary-700); transform:translateY(-1px); box-shadow:var(--shadow-md) }
.btn-secundario { background:transparent; color:var(--primary-600); border-color:var(--primary-300) }
.btn-secundario:hover { background:var(--primary-50) }
.btn-fantasma { background:transparent; color:var(--gray-600) }
.btn-fantasma:hover { background:var(--gray-100); color:var(--gray-900) }
.btn[disabled] { opacity:.5; cursor:default; transform:none !important }
.btn.carregando svg { animation:girando 1s linear infinite }
@keyframes girando { to { transform:rotate(360deg) } }


/* ------------------------------------------------------- lista */
.lista-topo {
  padding:10px 16px; border-bottom:1px solid var(--border-light);
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  font-size:12.5px; color:var(--gray-500); background:var(--gray-50);
}
.lt-num { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; min-width:0 }
.lista-topo .n {
  font-size:15px; font-weight:700; color:var(--gray-900); font-variant-numeric:tabular-nums;
}
.lt-of {
  font-size:11.5px; font-weight:600; color:var(--extrato-700);
  background:var(--extrato-100); border-radius:var(--radius-full); padding:2px 8px;
}
/* "Limpar" recomeca a consulta. Fica em neutro de proposito: o indigo ja
   carrega barra, pilulas, botoes e rota — mais um uso e a cor
   deixa de significar "importante". Alem disso e acao utilitaria, nao de
   marca. O contraste vem do peso e da borda, nao da cor. */
.lista-topo .btn-limpar {
  margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; padding:6px 11px;
  color:var(--gray-700); background:var(--bg-card);
  border:1px solid var(--border-strong); border-radius:var(--radius-full);
  box-shadow:var(--shadow-xs);
  transition:background var(--transition-base), border-color var(--transition-base),
             color var(--transition-base), box-shadow var(--transition-base);
}
.lista-topo .btn-limpar svg { width:13px; height:13px; opacity:.8 }
.lista-topo .btn-limpar:hover {
  background:var(--gray-500); border-color:var(--gray-500); color:#fff;
  box-shadow:var(--shadow-sm);
}
.lista-topo .btn-limpar:hover svg { opacity:1 }
.lista-topo .btn-limpar:active { transform:translateY(1px); box-shadow:none }
.lista { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:10px 12px 20px }

.cartao {
  background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:var(--radius-lg); padding:11px 12px; margin-bottom:8px;
  cursor:pointer; position:relative; overflow:hidden;
  transition:border-color var(--transition-base), box-shadow var(--transition-base),
             transform var(--transition-fast);
  animation:fadeInUp .35s ease-out backwards;
}
.cartao:hover { border-color:var(--primary-300); box-shadow:var(--shadow-md) }
.cartao.ativo { border-color:var(--primary-500); box-shadow:0 0 0 3px var(--primary-100) }
.cartao.tem-oferta::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--extrato-500);
}
.cartao.tem-oferta { padding-left:15px }

.c-topo { display:flex; align-items:flex-start; gap:10px }
.c-logo {
  width:38px; height:38px; flex:0 0 38px; border-radius:var(--radius-md);
  background:var(--gray-50); border:1px solid var(--border-light);
  display:grid; place-items:center; overflow:hidden;
}
/* a margem ja vem embutida pelo normalizar_logos.py (86% de ocupacao), igual
   em todas as redes — aplicar outra aqui empilharia duas e encolheria a marca */
.c-logo img { width:100%; height:100%; object-fit:contain; display:block }
.c-id { flex:1; min-width:0 }
.c-nome {
  font-size:13.8px; font-weight:600; color:var(--gray-900); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.c-end {
  font-size:12.2px; color:var(--gray-500); line-height:1.42; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.selo {
  flex:0 0 auto; font-size:13px; font-weight:700; color:#fff;
  padding:5px 9px; border-radius:var(--radius-full); line-height:1;
  font-variant-numeric:tabular-nums; box-shadow:var(--shadow-xs);
}
.selo.d5{background:var(--d5)} .selo.d10{background:var(--d10)} .selo.d15{background:var(--d15)}
.selo.d25{background:var(--d25)} .selo.d50{background:var(--d50)}

.c-rodape {
  display:flex; flex-wrap:wrap; gap:5px 6px; margin-top:8px;
  padding-top:8px; border-top:1px solid var(--border-light);
}
.tag {
  font-size:11.2px; font-weight:500; color:var(--gray-600);
  background:var(--gray-50); border:1px solid var(--border-light);
  border-radius:var(--radius-full); padding:3px 8px; white-space:nowrap;
}
.tag.verde { background:var(--extrato-100); border-color:var(--extrato-300); color:var(--extrato-700) }
.tag.dist { background:var(--primary-50); border-color:var(--primary-200); color:var(--primary-700) }
.tag.dist.rota {
  background:var(--primary-600); border-color:var(--primary-600); color:#fff; font-weight:600;
}

/* skeleton */
.skel {
  height:74px; border-radius:var(--radius-lg); margin-bottom:9px;
  background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-50) 50%,var(--gray-100) 75%);
  background-size:800px 100%; animation:shimmer 1.4s infinite linear;
}
.vazio { text-align:center; padding:44px 22px; color:var(--gray-500); animation:fadeIn .3s }
.vazio .ic { font-size:30px; opacity:.5; margin-bottom:10px }
.vazio p { margin:0 0 4px; font-size:14px; font-weight:600; color:var(--gray-700) }
.vazio span { font-size:12.8px; line-height:1.5 }

/* ------------------------------------------------------- marcadores */
.mk { cursor:pointer; will-change:transform }
.mk-ponto {
  width:14px; height:14px; border-radius:50%;
  background:var(--extrato-600); border:2.5px solid #fff;
  box-shadow:0 1px 3px rgba(15,17,25,.5), 0 0 0 1px rgba(15,17,25,.12);
  transition:transform var(--transition-fast);
}
.mk:hover .mk-ponto { transform:scale(1.45) }
.mk-oferta {
  min-width:38px; height:27px; padding:0 9px; border-radius:var(--radius-full);
  color:#fff; font-size:12.5px; font-weight:700; display:grid; place-items:center;
  border:2.5px solid #fff;
  box-shadow:0 2px 8px rgba(15,17,25,.45), 0 0 0 1px rgba(15,17,25,.1);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  transition:transform var(--transition-fast);
}
.mk:hover .mk-oferta, .mk.destaque .mk-oferta { transform:scale(1.16) }
.mk.destaque .mk-ponto { transform:scale(1.6) }
.mk-oferta.d5{background:var(--d5)} .mk-oferta.d10{background:var(--d10)}
.mk-oferta.d15{background:var(--d15)} .mk-oferta.d25{background:var(--d25)}
.mk-oferta.d50{background:var(--d50)}

.mk-eu { width:16px; height:16px; position:relative }
.mk-eu i {
  position:absolute; inset:0; border-radius:50%; background:var(--primary-600);
  border:3px solid #fff; box-shadow:0 2px 6px rgba(15,17,25,.4);
}
.mk-eu::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--primary-500); animation:pulseRing 2.4s ease-out infinite;
}

/* balao do mapa */
.maplibregl-popup-content {
  border-radius:var(--radius-lg) !important; padding:0 !important;
  box-shadow:var(--shadow-xl) !important; overflow:hidden; border:1px solid var(--border-default);
}
.maplibregl-popup-close-button {
  font-size:19px; color:var(--gray-400); padding:4px 8px; right:2px; top:2px;
}
.balao { width:274px; font-family:var(--font-family) }
.balao-topo { padding:13px 14px 11px; display:flex; gap:10px; align-items:flex-start }
.balao-topo .c-logo { width:34px; height:34px; flex-basis:34px }
.balao h4 { margin:0; font-size:14px; font-weight:700; line-height:1.3 }
.balao .end { font-size:12.2px; color:var(--gray-500); margin-top:3px; line-height:1.45 }
.balao-tel {
  display:flex; align-items:center; gap:7px; padding:0 14px 5px;
  font-size:12.6px; font-weight:500; color:var(--gray-700);
}
.balao-tel svg { width:13px; height:13px; flex:0 0 13px; color:var(--gray-500) }
.balao-tel a { color:inherit; text-decoration:none }
.balao-tel a:hover { text-decoration:underline }
.balao-tel .sep { color:var(--gray-500); margin:0 6px }
/* Aviso logo abaixo do telefone, discreto de proposito: e ressalva, nao alerta
   — o dado nao esta errado, so tem idade. Vermelho aqui assustaria a cada
   clique num PDV. */
.balao-aviso {
  /* 34px de recuo NAO e estetica: e a coluna exata onde o numero comeca acima
     (14 de padding + 13 do icone + 7 do gap). A seta nasce ali, embaixo do
     primeiro digito, e e o que faz a frase apontar para o telefone em vez de
     ficar solta no rodape do card. */
  display:flex; gap:6px; padding:0 14px 12px 34px;
  font-size:11.4px; line-height:1.45; color:var(--gray-500);
}
.balao-aviso svg { width:12px; height:12px; flex:0 0 12px; margin:-1px 0 0 -3px }

.balao-oferta {
  background:var(--extrato-50); border-top:1px solid var(--extrato-100);
  padding:10px 14px; display:flex; align-items:center; gap:9px;
}
.balao-oferta .pct {
  font-size:21px; font-weight:800; letter-spacing:-.03em; line-height:1;
}
.balao-oferta .txt { font-size:11.8px; color:var(--gray-600); line-height:1.4 }
.balao-oferta .txt b { color:var(--gray-900); font-weight:700 }
.balao-oferta.sem-oferta { background:var(--gray-50); border-top-color:var(--border-light) }
.balao-acoes {
  display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border-light);
}
/* Duas acoes de navegacao dividem a faixa; compartilhar tem linha propria,
   logo abaixo. A distancia continua sendo informacao, nao botao. */
.balao-acoes .btn { flex:1; justify-content:center; padding:9px 10px; font-size:12.5px }
.balao-acoes .btn-secundario { background:var(--bg-card) }
/* "Abrir no Maps" na cor do proprio Google — reconhecimento imediato do
   destino, em vez do indigo generico da marca. */
.balao-acoes .btn-maps { background:#4285F4; color:#fff }
.balao-acoes .btn-maps:hover { background:#3367D6 }

/* Compartilhar: linha inteira, verde da marca e COM ROTULO.
   O rotulo nao e enfeite — so o icone verde sugeria "falar com esta loja pelo
   WhatsApp", quando a acao e o contrario: mandar a loja para outra pessoa.
   Linha propria tambem devolve largura cheia aos dois botoes de cima, que
   estavam quebrando em duas linhas quando dividiam a faixa em tres. */
.balao-compartilhar {
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:0 14px 13px; padding:11px 12px;
  background:#25D366; color:#fff; border-radius:var(--radius-md);
  font-size:12.8px; font-weight:600; text-decoration:none; letter-spacing:.01em;
  transition:background var(--transition-base);
}
.balao-compartilhar:hover { background:#1FBE5B }
.balao-compartilhar svg { width:17px; height:17px; flex:0 0 17px }


.balao-rota {
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 14px; background:var(--primary-50);
  border-top:1px solid var(--primary-100); color:var(--primary-800);
  font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums;
}
.balao-rota::before {              /* silhueta de carro: a medida e rodada */
  content:''; width:15px; height:15px; flex:0 0 15px; opacity:.8;
  background:currentColor;
  -webkit-mask:var(--ic-carro) center/contain no-repeat;
  mask:var(--ic-carro) center/contain no-repeat;
}

/* com rota tracada o botao vira estado ligado, sem virar acao principal */
.btn-rota-ativa {
  background:var(--primary-100) !important; color:var(--primary-800) !important;
  border-color:var(--primary-300) !important;
}
.btn-rota-ativa:hover { background:var(--primary-200) !important }
.tag.dist.calculando { opacity:.55 }

/* ------------------------------------------------------- controles do mapa */
.mapa-ferramentas {
  position:absolute; right:12px; top:12px; z-index:10;
  display:flex; flex-direction:column; gap:8px;
}
.fbtn {
  width:38px; height:38px; border-radius:var(--radius-md); border:1px solid var(--border-default);
  background:var(--bg-card); color:var(--gray-700); display:grid; place-items:center;
  box-shadow:var(--shadow-sm);
  transition:background var(--transition-base), color var(--transition-base);
}
.fbtn:hover { background:var(--primary-50); color:var(--primary-700) }
.fbtn svg { width:17px; height:17px }

/* zoom em bloco unico, como manda o costume em mapas */
.fgrupo {
  display:flex; flex-direction:column; border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.fgrupo .fbtn { border-radius:0; box-shadow:none; border-bottom:none }
.fgrupo .fbtn:first-child { border-radius:var(--radius-md) var(--radius-md) 0 0 }
.fgrupo .fbtn:last-child {
  border-radius:0 0 var(--radius-md) var(--radius-md);
  border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-default);
}

.legenda {
  position:absolute; left:12px; bottom:22px; z-index:10;
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  padding:10px 12px; box-shadow:var(--shadow-md); font-size:11.5px;
  animation:fadeIn .4s ease-out;
}
.legenda .tt {
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-500); margin-bottom:7px;
}
.legenda .esc { display:flex; align-items:center; gap:3px }
.legenda .esc i {
  width:26px; height:15px; display:grid; place-items:center; border-radius:3px;
  color:#fff; font-size:9.5px; font-weight:700;
}
.legenda .lin { display:flex; align-items:center; gap:7px; margin-top:7px; color:var(--gray-600) }
.legenda .lin .pt {
  width:11px; height:11px; border-radius:50%; background:var(--extrato-500); border:2px solid #fff;
  box-shadow:0 1px 3px rgba(15,17,25,.3);
}

/* ---- aviso previo da localizacao ---- */
.convite-local {
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:safe center;
  padding:24px; background:rgba(15,17,25,.42);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  animation:fadeIn .2s ease-out;
}
.convite-card {
  width:100%; max-width:392px; background:var(--bg-card);
  border-radius:var(--radius-2xl); padding:26px 26px 20px; text-align:center;
  box-shadow:0 24px 48px rgba(15,17,25,.3), 0 4px 12px rgba(15,17,25,.14);
  animation:fadeInUp .3s ease-out;
}
.convite-ico {
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--radius-full);
  background:var(--primary-50); color:var(--primary-600); margin-bottom:13px;
}
.convite-ico svg { width:23px; height:23px }
.convite-card h3 {
  margin:0 0 7px; font-size:16.5px; font-weight:700; line-height:1.3;
}
.convite-card p {
  margin:0 0 14px; font-size:13px; color:var(--gray-600); line-height:1.5;
}
/* o passo seguinte destacado: e nele, e nao neste card, que a permissao e dada */
.convite-passo {
  background:var(--primary-50); border-radius:var(--radius-md);
  padding:10px 13px; margin:0 0 20px !important; color:var(--gray-700) !important;
}
.convite-passo b { color:var(--primary-700); font-weight:700 }
.convite-acoes { display:flex; gap:9px }
.convite-acoes .btn { flex:1; justify-content:center }

/* ------------------------------------------------------- toast */
/* Centralizado por margem automatica, e NAO por translateX(-50%).
   Com o transform, a animacao `fadeInUp` — que tambem anima transform, e
   animacao sobrepoe declaracao normal — apagava o -50% enquanto rodava: o
   toast nascia deslocado meia largura para a direita e dava um salto para a
   esquerda ao terminar os 0,3s. Centralizar por margem tira o transform da
   disputa, e nenhuma animacao futura consegue quebrar isso de novo. */
.toast {
  position:fixed; left:0; right:0; bottom:26px;
  width:fit-content; margin-inline:auto;
  background:var(--gray-900); color:#fff; font-size:13.5px; font-weight:500;
  padding:12px 17px; border-radius:var(--radius-md); box-shadow:var(--shadow-xl);
  display:flex; align-items:center; gap:9px; z-index:1000; max-width:min(92vw,440px);
  animation:fadeInUp .3s ease-out;
}
.toast svg { width:17px; height:17px; flex:0 0 auto }
.toast-erro { background:var(--error) }

/* ------------------------------------------------------- gaveta (telas estreitas) */
.puxador { display:none }

@media (max-width:900px) {
  .layout { display:block; height:calc(100dvh - var(--topbar-h)) }
  .mapa-wrap { position:absolute; inset:0 }
  .painel {
    position:absolute; left:0; right:0; bottom:0; width:auto; flex:none;
    height:88dvh; border-right:none;
    border-top-left-radius:var(--radius-2xl); border-top-right-radius:var(--radius-2xl);
    box-shadow:0 -6px 26px rgba(15,17,25,.18);
    transform:translateY(calc(100% - var(--gaveta, 168px)));
    transition:transform var(--transition-slow);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .painel.media { --gaveta:52dvh }
  .painel.cheia { --gaveta:88dvh }
  .puxador {
    display:block; padding:9px 0 5px; flex:0 0 auto; cursor:grab;
    touch-action:none;
  }
  .puxador::before {
    content:''; display:block; width:38px; height:4px; border-radius:2px;
    background:var(--border-strong); margin:0 auto;
  }
  .legenda { display:none }
  .mapa-ferramentas { top:auto; bottom:calc(var(--gaveta, 168px) + 14px); transition:bottom var(--transition-slow) }
  .topbar { padding:0 14px; gap:11px }
  .marca { gap:11px }
  .marca .logo { height:23px; width:109px; flex-basis:109px; margin-top:-2px }
  .divisor { display:none }
  .marca .t { font-size:17px }
  .marca .eyebrow { font-size:9px; letter-spacing:.12em }
  .produto-rot { display:none }
  .produto-nome {
    font-size:11px; padding:5px 10px 5px 8px; gap:6px;
    max-width:44vw; overflow:hidden;
  }
  .produto-nome .vol { display:none }
}

@media (max-width:520px) {
  .linha2 { grid-template-columns:1fr }
  .chip-total { font-size:11.5px; padding:4px 9px }
}

/* alvos de toque confortaveis */
@media (pointer:coarse) {
  .campo select, .campo input { font-size:16px; padding:11px 12px; min-height:44px }
  .btn { min-height:44px }
  .fbtn { width:44px; height:44px }
}

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

/* ------------------------------------------------------- login */
/* Tela cheia sobre o indigo da marca. O app so aparece depois que a sessao
   existe — nao ha estado intermediario com mapa carregado e API negando. */
/* O gradiente continua aqui embaixo: e o que aparece enquanto o mapa carrega,
   e o que fica se ele nao carregar. */
/* Flex em coluna, e nao grid: com `place-items:center`, o grid criava uma linha
   automatica para o cartao e outra para o bloco de instalar, dividia a altura
   livre entre as duas e centralizava cada item DENTRO da sua metade — o cartao
   ficava a ~34% da tela e o bloco la embaixo, com 220px de vao no meio. Em
   coluna, os dois sao centralizados como um grupo so, e o espaco entre eles e
   o `margin-top` do proprio bloco. */
.login {
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center;
  /* `safe` protege a tela baixa (celular deitado): se o conteudo nao couber,
     o alinhamento cai para o inicio em vez de cortar o TOPO do cartao, que e
     onde ficam os campos. Navegador antigo ignora a palavra e centraliza. */
  justify-content:safe center;
  padding:24px; overflow:hidden;
  background:
    radial-gradient(120% 140% at 12% -10%, rgba(255,255,255,.12) 0%, transparent 58%),
    linear-gradient(140deg, var(--primary-700) 0%, var(--primary-600) 55%, #5F63DE 100%);
}
/* Sangra 5% para fora em cada lado: a deriva lenta do mapa nunca revela borda. */
.login-mapa {
  position:absolute; inset:-5%; z-index:0;
  opacity:0; transition:opacity 1.1s ease-out;
  filter:saturate(.62) contrast(1.03) brightness(.97);
}
.login-mapa.pronto { opacity:1 }
/* O veu. Claro no centro para o mapa se ler atras do cartao, fechando nas
   bordas para o cartao ter contra o que se destacar. */
.login::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(96% 78% at 50% 45%,
      rgba(64,67,170,.24) 0%, rgba(31,33,104,.56) 55%, rgba(16,17,58,.80) 100%),
    linear-gradient(150deg, rgba(85,88,212,.28) 0%, rgba(46,48,140,.24) 100%);
}
/* ---- convite de instalacao, na tela de entrada ---- */
/* Convite com peso proprio: um filete claro separando do cartao, chamada em
   cima e botao SOLIDO. Na versao translucida anterior ele se dissolvia no veu
   escuro do fundo e passava despercebido — e instalar e justamente o que
   queremos que o representante faca na primeira visita. */
/* O bloco NASCE colapsado e cresce ate a altura medida em JS.
   Nao e enfeite: o `beforeinstallprompt` do Chrome dispara depois que o login
   ja esta na tela, e ate entao o cartao esta centralizado sozinho. Quando o
   bloco aparecia de uma vez, o grupo crescia de repente e o cartao SALTAVA
   para cima ao ser recentralizado — `display:none` para `flex` nao transita.
   Crescendo, a recentralizacao acontece quadro a quadro e o cartao desliza. */
.login-instalar {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  max-width:352px; width:100%;
  border-top:1px solid transparent;
  max-height:0; opacity:0; margin-top:0; padding-top:0; overflow:hidden;
  transition:max-height .5s cubic-bezier(.22,.7,.3,1),
             margin-top .5s cubic-bezier(.22,.7,.3,1),
             padding-top .5s cubic-bezier(.22,.7,.3,1),
             opacity .4s ease-out .1s,
             border-top-color .4s ease-out .1s;
}
.login-instalar.aberto {
  opacity:1; margin-top:22px; padding-top:20px;
  border-top-color:rgba(255,255,255,.18);
}
.instalar-chamada {
  margin:0; text-align:center; font-size:12.5px; font-weight:500;
  color:rgba(255,255,255,.92); letter-spacing:.01em;
}
.btn-instalar {
  font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px;
  color:var(--primary-700); background:#fff; border:none;
  border-radius:var(--radius-full);
  box-shadow:0 6px 18px rgba(10,11,40,.28);
  transition:transform var(--transition-fast), box-shadow var(--transition-base);
  animation:chamaAtencao 2.6s ease-out .6s 2 backwards;
}
.btn-instalar:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(10,11,40,.36) }
.btn-instalar svg { width:16px; height:16px }
/* dois pulsos e para: chama o olho na chegada sem virar enfeite piscando */
@keyframes chamaAtencao {
  0%, 100% { box-shadow:0 6px 18px rgba(10,11,40,.28) }
  50%      { box-shadow:0 6px 18px rgba(10,11,40,.28), 0 0 0 7px rgba(255,255,255,.14) }
}
.instalar-ios {
  margin:0; text-align:center; line-height:1.55;
  font-size:11.8px; color:rgba(255,255,255,.80);
}
.instalar-ios b { font-weight:600; color:#fff }
.instalar-ios .ico-share {
  width:12px; height:12px; vertical-align:-2px; margin:0 1px;
}

/* ---- instalado no aparelho: a barra de status e nossa ----
   Com `apple-mobile-web-app-status-bar-style: black-translucent` o conteudo
   sobe para debaixo do relogio. A reserva abaixo e o que impede o logotipo de
   ficar atras dele — e faz o indigo do cabecalho chegar ao topo da tela, que e
   o que separa "aplicativo" de "site em tela cheia".

   Duas escritas do mesmo ajuste de proposito: a media query nao existe no iOS
   anterior ao 16.4, onde so `navigator.standalone` denuncia o modo instalado e
   quem marca a raiz e o JS. */
@media (display-mode: standalone) {
  .topbar { height:calc(var(--topbar-h) + env(safe-area-inset-top));
            padding-top:env(safe-area-inset-top) }
  .layout { height:calc(100dvh - var(--topbar-h) - env(safe-area-inset-top)) }
  .painel { padding-bottom:env(safe-area-inset-bottom) }
  .login  { padding:calc(24px + env(safe-area-inset-top)) 24px
                    calc(24px + env(safe-area-inset-bottom)) }
}
html.instalado .topbar { height:calc(var(--topbar-h) + env(safe-area-inset-top));
                         padding-top:env(safe-area-inset-top) }
html.instalado .layout { height:calc(100dvh - var(--topbar-h) - env(safe-area-inset-top)) }
html.instalado .painel { padding-bottom:env(safe-area-inset-bottom) }
html.instalado .login  { padding:calc(24px + env(safe-area-inset-top)) 24px
                                 calc(24px + env(safe-area-inset-bottom)) }

/* Credito do mapa: obrigatorio, e por isso acima do veu, onde de fato se le. */
.login-credito {
  position:absolute; right:16px; bottom:12px; z-index:2; margin:0;
  font-size:10.5px; color:rgba(255,255,255,.62); letter-spacing:.01em;
}
.login-credito a { color:inherit; text-decoration:underline; text-underline-offset:2px }
.login-credito a:hover { color:#fff }

.login-card {
  position:relative; z-index:2;
  width:100%; max-width:352px; background:var(--bg-card);
  border-radius:var(--radius-2xl); padding:34px 30px 26px;
  box-shadow:
    0 32px 64px rgba(10,11,40,.42),
    0 8px 20px rgba(10,11,40,.22),
    0 0 0 1px rgba(255,255,255,.10);
  display:flex; flex-direction:column;
  animation:fadeInUp .45s ease-out;
}
/* a mesma logo do cabecalho, no indigo da marca sobre o cartao branco */
.login-logo {
  height:28px; width:132px; align-self:center; display:block;
  background:var(--primary-600);
  -webkit-mask:var(--logo-ease) center/contain no-repeat;
  mask:var(--logo-ease) center/contain no-repeat;
}
.login-card h2 {
  margin:20px 0 2px; font-size:20px; font-weight:700; letter-spacing:0;
  text-align:center; line-height:1.3;
}
.login-sub {
  margin:0 0 22px; font-size:12.5px; color:var(--gray-500); text-align:center;
}
.login-card label {
  font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gray-500); margin-bottom:5px;
}
.login-card input {
  font-family:inherit; font-size:16px;   /* 16px evita o zoom automatico do iOS */
  padding:10px 12px; margin-bottom:16px;
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  background:var(--bg-card); color:var(--gray-900);
  transition:border-color var(--transition-base), box-shadow var(--transition-base);
}
.login-card input:focus {
  outline:none; border-color:var(--primary-400);
  box-shadow:0 0 0 3px var(--primary-100);
}
.login-erro {
  font-size:12.5px; color:var(--error); background:var(--error-bg);
  border-radius:var(--radius-md); padding:9px 11px; margin-bottom:14px; line-height:1.45;
}
.login-card .btn { justify-content:center; padding:11px; font-size:14px }
.login-rodape {
  margin:18px 0 0; font-size:11px; color:var(--gray-400); text-align:center;
}

/* ---- identificacao e saida, no cabecalho ---- */
/* Alinhado com a PILULA do produto, nao com o centro da barra.
   O bloco ao lado e uma coluna de duas linhas: o rotulo "Voce esta vendo"
   (9,5px, line-height 1) e a pilula, separados por 5px de gap. Como a barra
   centraliza os itens, descer 14,5px de margem no topo joga esta linha 7,25px
   para baixo — exatamente o centro da pilula. */
.sessao {
  margin-left:auto; margin-top:14.5px;
  display:flex; align-items:center; gap:10px;
  position:relative; z-index:3; flex:0 0 auto;
}
.sessao .quem {
  font-size:12.5px; font-weight:600; color:#fff; white-space:nowrap;
  max-width:190px; overflow:hidden; text-overflow:ellipsis;
}
.btn-sair {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-full); padding:6px 12px;
  transition:background var(--transition-base), color var(--transition-base);
}
.btn-sair svg { width:13px; height:13px }
/* Segunda chance de instalar, para quem passou direto pela tela de entrada.
   Solido no meio do cabecalho translucido: e um convite, nao um controle de
   rotina como o Sair ao lado. Some sozinho quando o app ja esta instalado. */
.btn-instalar-topo {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--primary-700);
  background:#fff; border:none; border-radius:var(--radius-full);
  padding:6px 13px; white-space:nowrap;
  box-shadow:0 2px 10px rgba(10,11,40,.22);
  transition:transform var(--transition-fast), box-shadow var(--transition-base);
}
.btn-instalar-topo:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(10,11,40,.3) }
.btn-instalar-topo svg { width:13px; height:13px }
.btn-sair:hover { background:rgba(255,255,255,.22); color:#fff }

/* o bloco do produto perde o "margin-left:auto" para a sessao assumir a direita */
.sessao ~ .produto { margin-left:0 }

@media (max-width:900px) {
  .sessao .quem { display:none }        /* no celular so o botao cabe */
  .btn-sair { padding:6px 10px }
}