/* Expresso Delivery — site.
   Paleta igual à do app: marinho, azul, amarelo. */

:root {
  --marinho: #0D2B5E;
  /* Claro o bastante para ler sobre o fundo escuro. O #1A56B0 de antes
     servia no tema claro; aqui dava ~2:1 de contraste. */
  --azul: #8AB4F0;
  --azul-fraco: #16294A;
  --amarelo: #FFC223;
  --amarelo-txt: #FFC223;
  --amarelo-fraco: #33280A;

  --fundo: #0B1220;
  --superficie: #141E33;
  --texto: #E6EAF2;
  --texto-fraco: #93A0B5;
  --borda: #24314D;

  --ok: #5FCE95;
  /* O primeiro pedaço da barra da corrida ("até a loja"). Precisa se separar
     do amarelo da marca em TODAS elas — no 3F o amarelo é laranja, e um
     cinza-azulado ali ficaria igual ao azul do resto da tela. */
  --roxo: #B69CFF;
  --erro: #F2B8B5;
  /* O par escuro do --erro, como o --amarelo-fraco é do --amarelo. Cor cheia,
     não rgba: a pílula bloqueada e a faixa de motivo aparecem sobre o cartão E
     sobre o fundo, e um vermelho translúcido mudaria de tom entre os dois. */
  --erro-fraco: #3A1A1C;

  --raio: 14px;
  --sombra: none;
}

* { box-sizing: border-box; }

/* O `hidden` do HTML precisa vencer.

   O navegador aplica [hidden] { display: none } pela folha DELE, que tem a
   menor prioridade de todas. Qualquer classe nossa com `display` — e várias
   têm, porque são flex — passa por cima, e o elemento continua na tela com o
   atributo marcado. Foi o que fez "Falar no WhatsApp" aparecer antes do aceite:
   o JS marcava hidden e o CSS mandava exibir. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); }

/* ── topo ─────────────────────────────────────────────────────────────── */
.topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding: 14px 20px;
}
/* O aferidor põe uma nota à direita; a home não tem nada além da marca. */
.topo-diag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.marca img { display: block; border-radius: 8px; }
.marca-txt { display: flex; align-items: baseline; gap: 7px; }
.marca-nome {
  font-weight: 700;
  letter-spacing: 0.055em;
  color: #FFFFFF;
  font-size: 1.05rem;
}
.marca-sub {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amarelo-txt);
  font-weight: 600;
}

/* ── entrada ──────────────────────────────────────────────────────────── */
.entrada {
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}
.entrada-cab { text-align: center; margin-bottom: 26px; }
.entrada-cab h1 {
  font-size: 1.72rem;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--texto);
  letter-spacing: -0.015em;
}
.entrada-cab p { margin: 0; color: var(--texto-fraco); font-size: 0.95rem; }

.cartoes { display: flex; flex-direction: column; gap: 18px; }

.cartao-perfil {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 22px;
  position: relative;
}
/* Cartão em destaque: faixa amarela encostada no topo.
   overflow:hidden no cartão + faixa retangular = a faixa é recortada pelo
   próprio canto arredondado do cartão. Tentar arredondar a faixa sozinha não
   funciona: 4px de altura com 14px de raio o navegador achata, e ela vira uma
   lente flutuando acima do cartão em vez de fazer parte dele. */
.cartao-perfil { overflow: hidden; }
.cartao-perfil.destaque::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--amarelo);
}

.cartao-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.selo-icone {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--azul-fraco);
  color: #9FC0F0;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.destaque .selo-icone { background: var(--amarelo-fraco); color: var(--amarelo-txt); }
.selo-icone svg { width: 26px; height: 26px; }

.etiqueta {
  font-size: 0.72rem;
  padding: 5px 11px;
  border-radius: 20px;
  background: var(--azul-fraco);
  color: #9FC0F0;
  white-space: nowrap;
  font-weight: 500;
}
.etiqueta-amarela { background: var(--amarelo-fraco); color: var(--amarelo-txt); }

.cartao-perfil h2 {
  font-size: 1.22rem;
  margin: 0 0 7px;
  letter-spacing: -0.01em;
}
.cartao-perfil > p {
  margin: 0 0 18px;
  color: var(--texto-fraco);
  font-size: 0.93rem;
  line-height: 1.55;
}

.acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 9px;
}
.acao svg { width: 18px; height: 18px; }
.acao-azul { color: var(--azul); }
.acao-azul:hover { color: #B9D3F8; }
.acao-amarela {
  background: var(--amarelo);
  color: #0D2B5E;
  padding: 11px 18px;
  width: 100%;
  justify-content: center;
}
.acao-amarela:hover { filter: brightness(0.95); }
.acao-amarela[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Ação secundária ao lado de uma amarela: mesma forma e mesma altura, sem
   preenchimento. Vira alvo de toque de verdade (um link de texto no celular
   não é), e continua claramente abaixo da ação principal. */
.acao-contorno {
  margin-top: 10px;
  padding: 11px 18px;
  width: 100%;
  justify-content: center;
  border: 1.5px solid var(--borda);
  color: var(--azul);
  background: transparent;
}
.acao-contorno:hover { border-color: var(--azul); background: var(--azul-fraco); }
.acao-contorno svg { width: 17px; height: 17px; }

.acao:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

.mini {
  margin: 9px 0 0;
  font-size: 0.78rem;
  color: var(--texto-fraco);
  text-align: center;
}
.mini.erro { color: var(--erro); }

.rodape-nota {
  margin: 28px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--texto-fraco);
}

/* ── página de download ───────────────────────────────────────────────── */

/* O cartão é o assunto todo desta página: centraliza vertical e horizontal.
   min-height com dvh porque em celular o vh não desconta a barra do navegador
   e o cartão fica cortado embaixo. */
.pagina-baixar { display: flex; }
.palco {
  flex: 1;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
}

.cartao-baixar {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 32px 26px 26px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: var(--sombra);
}

.marca-centro { justify-content: center; }

.disco-app {
  width: 76px; height: 76px;
  border-radius: 22px;
  background: var(--marinho);
  color: var(--amarelo);
  display: flex; align-items: center; justify-content: center;
  margin: 22px auto 0;
}
.disco-app svg { width: 46px; height: 46px; }

.cartao-baixar h1 {
  font-size: 1.45rem;
  margin: 18px 0 0;
  letter-spacing: -0.015em;
  color: var(--texto);
}
.chamada { margin: 7px 0 0; color: var(--texto-fraco); font-size: 0.95rem; line-height: 1.5; }

.acao-baixar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
  padding: 15px 18px;
  border-radius: 11px;
  background: var(--amarelo);
  color: #0D2B5E;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
}
.acao-baixar svg { width: 19px; height: 19px; }
.acao-baixar:hover { filter: brightness(0.95); }
.acao-baixar[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.acao-baixar:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

.rodape-cartao {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
  font-size: 0.83rem;
  color: var(--texto-fraco);
}

/* ── login e conta do motoboy ─────────────────────────────────────────── */

.cartao-form { text-align: left; }
.cartao-form h1 { font-size: 1.4rem; margin: 22px 0 0; text-align: left; }
.cartao-form .chamada { text-align: left; }

/* Voltar à esquerda, marca à direita — a mesma ordem da barra do aplicativo,
   para quem usa os dois não ter que procurar em dois cantos diferentes. */
.cab-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Seta e palavra juntas: o ícone sozinho é entendido por quem usa app o dia
   todo, e esta tela também atende quem não usa.
   O padding não é enfeite — é o que leva o alvo de toque aos ~44px que um dedo
   acerta, num botão que vai ser tocado na rua. */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 10px 12px 10px 2px;
  margin: -10px 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--texto);
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.voltar:hover { color: var(--azul); }
.voltar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
.voltar svg { width: 17px; height: 17px; }

.rot {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin: 18px 0 6px;
}

.cartao-form input,
.campo-zap {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 1rem;
}
.campo-zap {
  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-align: center;
}
/* O navegador escolhe um cinza próprio para o texto-fantasma, e no escuro ele
   dá 3.6:1 — abaixo do legível. E aqui o fantasma não é enfeite: "(00) 9
   0000-0000" é a única coisa que diz o formato do número. */
.cartao-form input::placeholder,
.campo-zap::placeholder { color: var(--texto-fraco); opacity: 1; }

.cartao-form input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

.acao-form { width: 100%; border: none; cursor: pointer; font-family: inherit; }
.acao-form:disabled { opacity: .6; cursor: default; }

/* Serve para <button> E para <a>.
   Nasceu só para botão, e em link ficava um retângulo de 123px no meio de um
   cartão de 380: `width:100%` não faz nada num elemento `inline`, que é o que
   um <a> é por padrão. O `display:block` é o que conserta — o resto (centrar o
   texto, tirar o sublinhado) é consequência de aceitar link aqui. */
.acao-secundaria {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 12px;
  border-radius: 9px;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto-fraco);
  font: inherit;
  font-size: 0.92rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.acao-secundaria:hover { border-color: var(--azul); color: var(--texto); }
.acao-secundaria:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ── contas salvas (entrar com 1 toque) ───────────────────────────────── */

.lembrar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--texto-fraco);
  cursor: pointer;
}
.lembrar input { width: 17px; height: 17px; accent-color: var(--azul); flex: none; }

.rot-salvas { margin-top: 26px; }

.conta-salva {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-top: 8px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie);
  overflow: hidden;
}
.conta-salva:hover { border-color: var(--azul); }

/* Botão, não div clicável: teclado e leitor de tela vêm de graça. O reset
   dos estilos de botão é o preço de usar a tag certa. */
.conta-toque,
.conta-tirar {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}
.conta-toque {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 4px 10px 12px;
  text-align: left;
  min-width: 0;
}
.conta-toque:disabled { opacity: .55; cursor: default; }

.conta-ini {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--azul-fraco);
  color: var(--azul);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
}

/* min-width:0 nos dois: sem isso um nome longo estica o flex e empurra o ✕
   para fora do cartão em vez de reticenciar. */
.conta-info { display: flex; flex-direction: column; min-width: 0; }
.conta-info strong {
  font-size: 0.93rem;
  color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conta-info span { font-size: 0.78rem; color: var(--texto-fraco); }

.conta-tirar {
  flex: none;
  padding: 0 14px;
  font-size: 0.95rem;
  color: var(--texto-fraco);
}
.conta-tirar:hover { color: var(--erro); }
.conta-toque:focus-visible,
.conta-tirar:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

.erro-form { margin: 11px 0 0; font-size: 0.85rem; color: var(--erro); }
.mini-nota { margin: 14px 0 0; font-size: 0.8rem; color: var(--texto-fraco); text-align: center; }
/* A nota que explica um cartão inteiro lê melhor alinhada à esquerda, como o
   resto do cartão. Classe, e não `style="text-align:left"` no HTML: a CSP do
   .htaccess é `style-src 'self'`, sem 'unsafe-inline' — o navegador DESCARTA o
   atributo style, e a nota que parecia alinhada aqui ficava centrada no ar. */
.mini-nota-esq { text-align: left; }

.cracha-web {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--azul-fraco);
  border-radius: 9px;
  padding: 9px 12px;
  margin: 12px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.cracha-web b {
  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: #9FC0F0;
}

/* O aviso da sessão única. Amarelo, não vermelho: é uma consequência a saber,
   não um erro — quem lê ainda vai querer entrar. */
.aviso-sessao {
  margin: 18px 0 0;
  padding: 11px 13px;
  border-radius: 9px;
  background: var(--amarelo-fraco);
  color: var(--amarelo-txt);
  font-size: 0.79rem;
  line-height: 1.5;
  text-align: left;
}
.aviso-sessao a { color: inherit; font-weight: 600; }
.aviso-solto { max-width: 620px; margin: 20px auto 0; }

.conta { max-width: 620px; margin: 0 auto; padding: 26px 20px 60px; }
.conta-cab { margin-bottom: 18px; }
.conta-cab h1 { font-size: 1.6rem; margin: 0; letter-spacing: -0.015em; }
.conta-sub { margin: 4px 0 0; font-size: 0.86rem; color: var(--texto-fraco); }

.conta .cartao { margin-bottom: 14px; }
/* Só o PRIMEIRO rótulo encosta no topo do cartão — é o título dele.
   Sem o `:first-child` a regra pegava todos, e o cartão de requisitos, que tem
   dois ("Meus requisitos" e "Minha bag"), colava o segundo na caixa de marcar
   acima dele. */
.conta .cartao > .rot:first-child { margin-top: 0; }

.dados { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 0 0 4px; font-size: 0.93rem; }
.dados dt { color: var(--texto-fraco); }
.dados dd { margin: 0; color: var(--texto); text-align: right; }
.dados .mono { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: 0.86rem; }

/* Escolher entre P e GG.
   Dois botões lado a lado, não um menu suspenso: são duas opções e só duas, e
   um <select> cobraria dois toques mais uma lista para responder a uma
   pergunta de uma palavra. O aria-pressed é o que diz qual está valendo —
   para o leitor de tela e para o CSS, sem uma classe paralela para
   dessincronizar. */
.escolha { display: flex; gap: 8px; }
.escolha-op {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: transparent;
  color: var(--texto-fraco);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.escolha-op:hover { border-color: var(--azul); color: var(--texto); }
.escolha-op[aria-pressed="true"] {
  border-color: var(--amarelo);
  background: var(--amarelo-fraco);
  color: var(--amarelo-txt);
}
.escolha-op:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ── home da loja ─────────────────────────────────────────────────────── */

/* Borda mais grossa: é a ação principal da tela, mesmo desligada. Espelha o
   cartão de status do aplicativo, que também é o único com contorno. */
.cartao-pedir { border-width: 2px; }
.cartao-pedir .acao-form { margin-top: 16px; }
.cartao-pedir .acao-form:disabled {
  background: var(--azul-fraco);
  color: var(--texto-fraco);
  opacity: 1; /* o disabled padrão apaga demais e some no fundo claro */
  cursor: not-allowed;
}

.numeros { display: flex; gap: 12px; margin-bottom: 14px; }
.numero {
  flex: 1;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
}
.numero span { display: block; font-size: 0.8rem; color: var(--texto-fraco); }
.numero b { display: block; font-size: 1.35rem; margin-top: 2px; color: var(--texto); }

/* ── chamado ──────────────────────────────────────────────────────────── */

.coleta {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--azul-fraco);
  border-radius: 10px; padding: 11px 12px; margin-top: 12px;
}
.coleta-fixa { margin-top: 14px; }
.coleta-pin { font-size: 1rem; line-height: 1.2; flex: none; }
.coleta-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.coleta-txt strong { font-size: 0.92rem; color: var(--texto); }
.coleta-txt span { font-size: 0.78rem; color: var(--texto-fraco); }
.coleta-txt span.destaque { color: var(--amarelo); font-weight: 600; }
.coleta-trocar {
  flex: none; background: none; border: none; font: inherit; cursor: pointer;
  font-size: 0.8rem; font-weight: 700; color: var(--amarelo); padding: 4px 2px 4px 10px;
}
.coleta-trocar:hover { text-decoration: underline; }

.opcoes { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }

/* Link desligado: <a> ignora `disabled`, então quem comunica é a classe (e o
   aria-disabled para quem usa leitor de tela). */
.desligado { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }

.cartao-relogio {
  display: flex; flex-direction: column; align-items: center;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 22px 18px 18px; margin-top: 16px;
}
.relogio {
  font-size: 2.4rem; font-weight: 800; color: var(--amarelo);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.relogio.pronto { font-size: 1.25rem; color: var(--ok); }
.relogio-lb { font-size: 0.76rem; color: var(--texto-fraco); margin-top: 6px; text-align: center; }
.procurando {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0; font-size: 0.85rem; color: var(--texto-fraco);
}
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--amarelo); flex: none; }

.cartao-boy {
  display: flex; align-items: center; gap: 11px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px; margin-top: 16px;
}

.passos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.passo { font-size: 0.85rem; color: var(--texto-fraco); opacity: .55; }
.passo.feito { opacity: 1; }
.passo.agora { opacity: 1; color: var(--texto); font-weight: 650; }

.pill {
  flex: none; border-radius: 20px; padding: 3px 10px;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Cor semântica, separada do amarelo da marca. */
.pill-am { background: var(--amarelo-fraco); color: var(--amarelo-txt); }
.pill-vd { background: rgba(95, 206, 149, .16); color: var(--ok); }
.pill-vm { background: rgba(242, 184, 181, .14); color: var(--erro); }
.pill-ap { background: var(--azul-fraco); color: var(--texto-fraco); }

.btn-cancelar {
  display: block; width: 100%; margin-top: 12px; padding: 14px;
  border-radius: 11px; font: inherit; font-size: 0.98rem; font-weight: 700;
  background: transparent; border: 1px solid var(--erro); color: var(--erro);
  cursor: pointer;
}
.btn-cancelar:disabled {
  border-color: var(--borda); color: var(--texto-fraco);
  background: var(--azul-fraco); cursor: default;
  font-variant-numeric: tabular-nums;
}

/* ── chamados do motoboy ──────────────────────────────────────────────── */

.abas {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 14px;
}
.aba {
  flex: 1; padding: 11px 4px;
  font: inherit; font-size: 0.86rem;
  background: none; border: none; cursor: pointer;
  color: var(--texto-fraco);
  /* A linha do selecionado é box-shadow, não border-bottom: uma borda somaria
     1px de altura só no ativo e faria a fileira inteira pular a cada troca. */
  box-shadow: inset 0 -2px 0 transparent;
}
.aba.on { color: var(--amarelo); font-weight: 700; box-shadow: inset 0 -2px 0 var(--amarelo); }
.aba:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

.cartao-espera { margin-bottom: 12px; }
.espera-topo { display: flex; align-items: baseline; gap: 10px; }
.espera-topo strong { flex: 1; min-width: 0; font-size: 1rem; color: var(--texto); }
/* Há quanto tempo espera é o que decide qual pegar — fica em destaque, e em
   fonte tabular para o número não dançar a cada segundo. */
.espera-tempo {
  flex: none; font-weight: 700; color: var(--amarelo);
  font-variant-numeric: tabular-nums;
}
.espera-onde { margin: 3px 0 0; font-size: 0.83rem; color: var(--texto-fraco); }

/* ── requisitos do chamado ────────────────────────────────────────────────
   A .tag nasceu aqui, na fila do motoboy, e hoje é a MESMA pílula nas telas da
   loja. Não existe uma quinta família ao lado da .pill: o que muda é a
   variante, para "BAG GG" ser a mesma coisa nos dois lados do balcão. */

.tags { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.tag {
  background: var(--azul-fraco); color: var(--texto-fraco);
  border-radius: 20px; padding: 2px 9px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Dentro de um item de lista as pílulas são a TERCEIRA linha, logo abaixo da
   hora. Os 9px de cima servem ao cartão; numa fileira de 44px abririam um
   buraco entre um chamado e o seguinte. */
.item-meio .tags { margin-top: 5px; }

/* "BAG GG" leva o amarelo da marca. É o pedido raro, e quem comprou a bag
   grande está justamente procurando por ele numa fila de chamados iguais. */
.tag-am { background: var(--amarelo-fraco); color: var(--amarelo-txt); }

/* Bloqueada: o chamado existe, ele vê, e não é para ele.
   O ✕ vem do CSS porque é desenho, não informação — o que está escrito
   continua sendo só "BAG GG", e o porquê está por extenso na faixa abaixo.
   NÃO há variante verde: pintar de verde o que ele atende encheria de cor
   justamente a tela em que está tudo certo. */
.tag-bloq { background: var(--erro-fraco); color: var(--erro); }
.tag-bloq::before { content: "✕"; margin-right: 4px; }

/* A faixa que toma o lugar do trilho de arrastar.
   Mesma margem e mesmo raio do .desliza de propósito: o cartão bloqueado fica
   com a altura do cartão que dá, e a fila não pula de posição entre um e
   outro enquanto ele rola a lista. */
.motivo {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--erro-fraco);
  color: var(--erro);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* O cartão recua para o olho pular para os que dão. Apagar SEM esconder é
   decisão: sumir com o chamado faria a fila encolher sozinha, e ele acharia
   que não há trabalho quando na verdade há trabalho que não é dele. */
.cartao-apagado { opacity: .6; }

.boy-empresa { display: block; font-size: 1.05rem; color: var(--texto); }

/* Botão que abre a lista, na conta do motoboy. */
.acao-chamados {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; padding: 16px 18px;
  border: 2px solid var(--amarelo); border-radius: var(--raio);
  background: var(--superficie); color: inherit; text-decoration: none;
}
.acao-chamados:hover { background: var(--azul-fraco); }
.acao-chamados b { display: block; font-size: 1.02rem; color: var(--texto); }
.acao-chamados span { display: block; font-size: 0.82rem; color: var(--texto-fraco); }
.acao-chamados .seta { color: var(--amarelo); font-size: 1.2rem; flex: none; }

/* ── arraste para confirmar ───────────────────────────────────────────── */

/* O que fica no lugar do trilho enquanto o tempo não venceu. Mesma altura e
   mesma margem: nada pula de posição quando o trilho toma o lugar dele. */
.espera-cancelar {
  display: flex; align-items: center; justify-content: center;
  height: 54px; margin-top: 12px; border-radius: 12px;
  background: var(--azul-fraco); color: var(--texto-fraco);
  font-size: 0.92rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.desliza {
  position: relative;
  height: 54px;
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--azul-fraco);
  /* touch-action: none — sem isto o navegador rouba o gesto para rolar a
     página na primeira tremida vertical, e o arrasto nunca chega ao fim. */
  touch-action: none;
  user-select: none;
}
/* Começa NO puxador, não na borda do trilho.
   Antes ia de `inset: 0` e, parado, sobrava uma tira colorida em volta dele —
   parecia sujeira ou uma segunda caixa atrás do botão. */
.desliza-enche {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: 0; opacity: .22; border-radius: 10px;
}
.desliza-rotulo {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.92rem; font-weight: 700; color: var(--texto-fraco);
  pointer-events: none; text-align: center; padding: 0 56px;
}
.desliza-puxa {
  position: absolute; top: 4px; left: 4px;
  width: 46px; height: 46px;
  border: none; border-radius: 10px;
  font: inherit; font-size: 1.3rem; font-weight: 800; line-height: 1;
  cursor: grab; touch-action: none;
  /* Sem sombra. Uma sombra preta desfocada sobre o trilho escuro não lê como
     relevo — lê como mancha em volta do botão. */
}
.desliza-puxa:active { cursor: grabbing; }
.desliza-puxa:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

/* Cor = o que a ação significa: verde faz, vermelho desfaz, amarelo avança. */
.desliza-verde .desliza-enche, .desliza-verde .desliza-puxa { background: var(--ok); }
.desliza-verde .desliza-puxa { color: #062A17; }
.desliza-verde.desliza-feito { background: var(--ok); }
.desliza-verde.desliza-feito .desliza-rotulo { color: #062A17; }

.desliza-vermelho .desliza-enche, .desliza-vermelho .desliza-puxa { background: var(--erro); }
.desliza-vermelho .desliza-puxa { color: #3A0F0C; }
.desliza-vermelho.desliza-feito { background: var(--erro); }
.desliza-vermelho.desliza-feito .desliza-rotulo { color: #3A0F0C; }

.desliza-amarelo .desliza-enche, .desliza-amarelo .desliza-puxa { background: var(--amarelo); }
.desliza-amarelo .desliza-puxa { color: var(--marinho); }
.desliza-amarelo.desliza-feito { background: var(--amarelo); }
.desliza-amarelo.desliza-feito .desliza-rotulo { color: var(--marinho); }

/* Só bem no fim: quase-lá não pode parecer feito. */
.desliza-pronto .desliza-puxa { background: var(--texto); color: var(--marinho); }
.desliza-feito .desliza-enche { opacity: 1; }

/* Trilho invertido: punho à DIREITA, arrasto para a ESQUERDA.
   O JS já cuida do sinal do movimento; aqui só muda de que lado as duas peças
   nascem. `left: auto` é obrigatório — sem ele o `left: 4px` das regras acima
   continua valendo e a peça estica de uma borda à outra em vez de andar. */
.desliza-invertido .desliza-enche { left: auto; right: 4px; }
.desliza-invertido .desliza-puxa { left: auto; right: 4px; }

/* ── modo fila: o cartão da posição ───────────────────────────────────────
   Só aparece quando a central liga o modo fila. Em modo livre a tela do motoboy
   continua exatamente a de antes, sem nenhuma destas classes.

   Centralizado porque tem UM assunto: o número dele. NUNCA lista quem mais
   está na fila — a posição é a informação, e a lista de nomes seria só
   combustível para desconfiar do rodízio. */
.cartao-fila { margin-bottom: 14px; text-align: center; }
.fila-rot { margin: 0 0 6px; }
.fila-num {
  display: block;
  font-size: 3.2rem; line-height: 1; font-weight: 800;
  color: var(--amarelo);
  /* Tabular: a posição muda sozinha enquanto ele olha, e sem isto o número
     dança de largura a cada troca. */
  font-variant-numeric: tabular-nums;
}
.fila-nota { margin: 8px 0 0; font-size: 0.83rem; color: var(--texto-fraco); line-height: 1.5; }
.fila-fora { margin: 0; font-size: 0.9rem; color: var(--texto-fraco); line-height: 1.5; }

.lista-chamados { list-style: none; margin: 8px 0 0; padding: 0; }
/* Serve para <a> E para <button>.
   Na lista da empresa é link (leva a outra página); na do motoboy é botão
   (abre o detalhe ali mesmo). Sem zerar o que o navegador dá de graça ao
   <button> — borda, fundo, fonte e largura de conteúdo — cada linha virava uma
   caixinha branca encolhida no meio do cartão. */
.item-chamado {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 0;
  border: none; border-bottom: 1px solid var(--borda);
  background: none;
  font: inherit; text-align: left;
  text-decoration: none; color: inherit;
  cursor: pointer;
}
.item-chamado:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.lista-chamados li:last-child .item-chamado { border-bottom: none; }
.item-chamado:hover .item-meio strong { color: var(--azul); }
.item-meio { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.item-meio strong { font-size: 0.9rem; color: var(--texto); }
/* O `>` não é enfeite: a terceira linha do item são pílulas, e cada pílula é
   um <span> lá dentro. Sem o filho direto, esta regra venceria a .tag por
   especificidade e apagaria o amarelo do "BAG GG" na lista. */
.item-meio > span { font-size: 0.76rem; color: var(--texto-fraco); }

/* Diálogo suspenso — o que fica atrás continua visível de propósito: é uma
   pergunta, não outro lugar. */
.veu {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(4, 10, 24, .72);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.veu[hidden] { display: none; }
.dialogo {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 16px; padding: 20px; width: 100%; max-width: 380px;
  max-height: 90dvh; overflow-y: auto;
}
.dialogo h2 { margin: 0 0 4px; font-size: 1.15rem; }
.dialogo input {
  width: 100%; padding: 11px 13px; margin-top: 4px;
  border: 1px solid var(--borda); border-radius: 9px;
  background: var(--fundo); color: var(--texto); font: inherit;
}
.dialogo input::placeholder { color: var(--texto-fraco); opacity: 1; }
.dialogo input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

/* ── o pop-up da oferta (modo fila) ───────────────────────────────────────

   DEPOIS do .veu e do .dialogo de propósito. As duas famílias têm a mesma
   especificidade (uma classe), então quem vem por último vence — escrito antes,
   este bloco perdia o z-index, o alinhamento e a borda verde sem dar nenhum
   sinal de que tinha perdido. */

/* Acima do menu de baixo (z-index 40). Por oito segundos esta é a tela
   inteira, e um menu por cima do trilho de aceitar seria um toque perdido. */
.veu-oferta { z-index: 60; }

/* Encostado embaixo: os dois trilhos são o que a mão precisa alcançar, e o
   polegar de quem está com a luva não sobe até o meio da tela. Em tela alta
   sobra espaço e o centro volta a ser o lugar natural do olho. */
.veu-oferta { align-items: flex-end; }
@media (min-height: 720px) { .veu-oferta { align-items: center; } }

/* Verde na borda: a mesma cor do trilho que aceita. É a corrida CHEGANDO. */
.oferta { border-color: var(--ok); }
.oferta-rot {
  margin: 0;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 800; color: var(--ok);
}
.oferta-empresa { display: block; margin-top: 6px; font-size: 1.25rem; color: var(--texto); }

.oferta-conta { display: flex; align-items: baseline; gap: 9px; margin-top: 16px; }
.oferta-num {
  font-size: 2.6rem; line-height: 1; font-weight: 800;
  color: var(--amarelo);
  font-variant-numeric: tabular-nums;
  /* Largura reservada: "8" e "1" têm larguras diferentes, e sem isto a frase ao
     lado anda para os lados a cada segundo — bem quando ela precisa ser lida. */
  min-width: 1.6ch; text-align: right;
}
.oferta-seg { font-size: 0.88rem; color: var(--texto-fraco); }

.oferta-barra {
  height: 6px; margin-top: 12px;
  border-radius: 999px; overflow: hidden;
  background: var(--azul-fraco);
}
/* Sem transição de propósito: a barra é reescrita dez vezes por segundo, e uma
   transição a faria correr atrás do próprio valor — terminando depois do prazo,
   que é exatamente a mentira que este contador não pode contar. */
.oferta-barra i {
  display: block; height: 100%; width: 100%;
  border-radius: 999px; background: var(--amarelo);
}

.cartao-vazio-txt {
  margin: 16px 0 0; padding: 24px 18px; text-align: center;
  background: var(--superficie); border: 1px dashed var(--borda);
  border-radius: var(--raio); font-size: 0.9rem; color: var(--texto-fraco);
}

.cartao-vazio { border-style: dashed; background: transparent; }
.vazio-texto { margin: 0; font-size: 0.9rem; color: var(--texto-fraco); line-height: 1.55; }

.btn-sair { font-size: 0.85rem; padding: 7px 14px; }

/* ── aferidor (página de diagnóstico) ─────────────────────────────────── */
.diag { max-width: 720px; margin: 0 auto; padding: 24px 20px 60px; display: flex; flex-direction: column; gap: 16px; }
.diag h2 { font-size: 15px; margin: 0 0 12px; }
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
}
.cartao-nota { background: transparent; border-style: dashed; }
.linha-status { display: flex; align-items: center; gap: 14px; }
.bolinha { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; background: var(--texto-fraco); }
.bolinha[data-estado="ok"] { background: var(--ok); }
.bolinha[data-estado="erro"] { background: var(--erro); }
.titulo-status { margin: 0; font-size: 18px; font-weight: 600; }
.detalhe { margin: 2px 0 0; font-size: 13px; color: var(--texto-fraco); }
code { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: 0.9em; }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.btn {
  font: inherit; font-size: 14px; padding: 9px 15px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--borda); background: transparent; color: var(--texto);
}
.btn:hover { border-color: var(--azul); }
.btn:disabled { opacity: .55; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }
.btn-primario { background: var(--marinho); border-color: var(--marinho); color: #fff; font-weight: 600; }
.btn-primario:hover { background: var(--azul); border-color: var(--azul); }
.saida {
  margin: 0; padding: 14px; background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px;
  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  max-height: 340px; overflow: auto;
}
.lista { margin: 0; font-size: 14px; }
.lista dt { font-weight: 600; margin-top: 10px; }
.lista dt:first-child { margin-top: 0; }
.lista dd { margin: 2px 0 0; color: var(--texto-fraco); }
.topo-nota { font-size: 13px; color: var(--texto-fraco); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── menu de baixo do motoboy ───────────────────────────────────────────────

   A mesma barra do aplicativo: quatro itens de largura igual, fundo marinho,
   o da tela atual em amarelo.

   Fixa, e não no fim do documento, porque no app ela também não some ao rolar
   — é o que faz ela ser um menu e não um rodapé. */
.menu-baixo {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--marinho);
  /* Acima de tudo, menos de um diálogo. */
  z-index: 40;
  /* Barra de gestos do celular: sem isto os rótulos ficam embaixo dela. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.menu-item {
  flex: 1;
  text-align: center;
  /* O alvo de toque é a faixa inteira, não a palavra. Na moto o dedo não
     acerta 16px de texto. */
  padding: 13px 0 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-fraco);
  /* Compartilhado entre <a> e <span>: o <a> traz sublinhado e cor de link. */
  text-decoration: none;
  border: 0;
  background: none;
}

.menu-item-on { color: var(--amarelo); font-weight: 800; }

/* O respiro para o último cartão não ficar debaixo da barra. */
.com-menu main { padding-bottom: 78px; }

/* ── "chamado enviado" ──────────────────────────────────────────────────────

   Suspenso sobre o formulário, que fica escurecido atrás. Sai sozinho em 3
   segundos levando a loja para o acompanhamento.

   Não bloqueia nada: o chamado JÁ está criado quando isto aparece. Se a
   animação travar num aparelho velho, nada se perde — ela é só o aviso. */
.veu-enviado { align-items: center; }

.enviado {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 26px 20px 22px;
  text-align: center;
  max-width: 320px;
  width: 100%;
  animation: enviado-sobe .22s ease;
}
@keyframes enviado-sobe {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.enviado h2 { margin: 14px 0 0; font-size: 1.15rem; }
.enviado p  { margin: 5px 0 0; font-size: 0.86rem; color: var(--texto-fraco); }

.enviado-id {
  display: inline-block; margin-top: 12px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.78rem; color: var(--amarelo);
  background: var(--amarelo-fraco);
  border-radius: 6px; padding: 3px 10px;
}

/* O desenho que se escreve.

   `stroke-dasharray` igual ao comprimento do traço e `stroke-dashoffset` no
   mesmo valor deixa a linha inteira "fora" do desenho; animar o offset até
   zero puxa ela para dentro. O aro tem ~170 de perímetro e o risco ~32 — os
   números são MEDIDOS com getTotalLength(), não chutados: o aro dá 169,0 e o
   risco 34,7. Errar para menos deixa um pedaço nunca desenhado — com 32 no
   risco, a ponta do certo simplesmente não aparecia. Para mais só custa uma
   pausa curta antes de o traço começar, então os valores ficam logo acima. */
.enviado-marca { width: 76px; height: 76px; display: block; margin: 0 auto; }
.enviado-marca circle,
.enviado-marca path {
  fill: none; stroke: var(--ok); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
.enviado-aro {
  stroke-dasharray: 170; stroke-dashoffset: 170;
  animation: enviado-aro .55s ease-out .1s forwards;
}
.enviado-risco {
  stroke-dasharray: 35; stroke-dashoffset: 35;
  animation: enviado-risco .35s ease-out .5s forwards;
}
@keyframes enviado-aro   { to { stroke-dashoffset: 0; } }
@keyframes enviado-risco { to { stroke-dashoffset: 0; } }

/* Quem pediu para o sistema parar de animar não recebe o desenho se escrevendo
   — recebe ele pronto. A informação é a mesma; o movimento é que sai. */
@media (prefers-reduced-motion: reduce) {
  .enviado { animation: none; }
  .enviado-aro, .enviado-risco { animation: none; stroke-dashoffset: 0; }
}

/* ── dados da loja (motoboy) ──────────────────────────────────────────────

   Os dois botões da corrida em andamento e o pop-up que um deles abre.

   NO FIM DO ARQUIVO de propósito, pelo mesmo motivo do bloco da oferta: as
   variantes daqui corrigem classes de uma classe só, então quem vem depois
   vence. `.acao-loja` escrita antes da `.acao-form` nasceria sem borda — é a
   `.acao-form` que zera a borda de todo mundo.

   E o nome é `.acao-loja`, não `.acao-contorno`: a `.acao-contorno` já tem dono
   lá em cima — é o "Entrar pelo navegador" da home, azul sobre borda apagada.
   Redeclarar a classe aqui pintava aquele botão de amarelo também, e a porta de
   entrada do produto ficava com dois amarelos empilhados, que é exatamente o
   que este desenho existe para evitar. */

.acoes-duo {
  display: flex;
  gap: 10px;
  /* Os 22px que o .acao-baixar dava sozinho passam para a fileira: com dois
     botões, a margem em cada um dobraria o respiro no meio. */
  margin-top: 22px;
}
/* Larguras iguais, e independentes do rótulo. O `flex: 1 1 auto` do padrão
   reparte pelo tamanho do conteúdo, e aí o "Chamar no WhatsApp" ficaria maior
   que o vizinho só por ter mais letras. Com `1 1 0` os dois medem o mesmo — e
   o que sobra sozinho na linha (chamado sem WhatsApp, ou o detalhe do Hoje)
   toma a largura inteira sem precisar de outra classe. */
.acoes-duo > * {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
  /* A borda transparente é o que iguala as larguras DE VERDADE.
     Com `box-sizing: border-box`, um `flex-basis: 0` não pode ficar menor que a
     borda mais o recheio — então o botão de contorno começa a repartição já 3px
     maior que o cheio e termina 2px mais largo que ele. Dando a mesma borda aos
     dois, os dois partem do mesmo lugar; o de contorno só troca a cor dela. */
  border: 1.5px solid transparent;
  /* Metade da largura não cabe o padding de um botão de linha inteira. */
  padding: 14px 10px;
  font-size: 0.95rem;
  text-align: center;
  /* Em tela estreita "Chamar no WhatsApp" quebra em duas linhas — e os 1.55 do
     corpo do site deixariam o botão alto demais quando isso acontece. Os dois
     continuam da mesma altura de qualquer jeito: item de flex estica. */
  line-height: 1.25;
}

/* O verde de sempre, cheio: é o botão que ele já usa dez vezes por turno, e
   mudar a cor dele custaria mais do que qualquer coisa que se ganhasse. */
.acao-zap { background: var(--ok); color: var(--marinho); }

/* Contorno, não cheio. Acima deste botão fica o trilho de arrastar, que é
   amarelo CHEIO; um segundo bloco cheio poria três coisas disputando o olho
   numa tela lida de capacete, e a única urgente ali é o trilho. */
.acao-loja {
  background: transparent;
  border: 1.5px solid var(--amarelo);
  color: var(--amarelo-txt);
}
/* O `brightness` que o .acao-baixar usa escurece o TEXTO quando o fundo é
   transparente — que é o contrário do que hover deve fazer. */
.acao-loja:hover { background: var(--amarelo-fraco); filter: none; }

/* Acima do menu de baixo (z-index 40) e abaixo da oferta (60): o menu por cima
   dos botões de copiar seria um toque perdido, e a oferta, quando chega, é a
   tela inteira por oito segundos. */
.veu-loja { z-index: 50; }

.loja-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* 40px de alvo: este ✕ é tocado com luva, na rua. O padding negativo devolve o
   alinhamento que o alvo grande tirou. */
.loja-x {
  flex: none;
  width: 40px; height: 40px;
  margin: -8px -8px -8px 0;
  border: none; background: none; color: var(--texto-fraco);
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.loja-x:hover { color: var(--texto); }
.loja-x:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 8px; }

/* O texto que se copia — e que já abre marcado.

   `user-select` escrito à mão, com o prefixo do WebKit: o padrão do navegador
   já é `text`, mas basta um `user-select: none` aparecer num ancestral (o dia
   em que alguém quiser matar a marcação acidental do painel que rola) para a
   marcação sumir daqui sem deixar rastro — e a marcação é o motivo de este
   pop-up existir. O prefixo é pelo Safari do iPhone, que ainda pede.

   O aplicativo não entra nesta conta: lá a mesma tela é a LojaView, feita de
   TextView em Kotlin, e não há WebView nenhuma lendo esta folha. */
.loja-dado {
  padding: 12px 13px;
  border-radius: 10px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  user-select: text;
  -webkit-user-select: text;
  /* Endereço comprido quebra dentro da caixa em vez de empurrar o pop-up para
     os lados. */
  overflow-wrap: anywhere;
}
.loja-dado:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.loja-linha { margin: 0; font-size: 0.98rem; color: var(--texto); line-height: 1.45; }
.loja-ref { margin: 4px 0 0; font-size: 0.85rem; color: var(--texto-fraco); line-height: 1.4; }

/* O número vai PURO, sem parêntese e sem traço: a máscara é bonita e faz a
   busca do WhatsApp não achar ninguém — quem colou conclui que o número da loja
   não existe. Largura fixa e respiro entre os dígitos porque ele também é lido
   em voz alta e conferido, não só colado. */
.loja-num {
  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-size: 1.12rem;
  letter-spacing: 0.08em;
  color: var(--texto);
}

.loja-acoes { display: flex; gap: 8px; margin-top: 10px; }
/* Serve para <button> E para <a>: o do mapa é link de verdade, com destino que
   se pode abrir em outra aba, e o de copiar não leva a lugar nenhum. */
.loja-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 8px;
  border-radius: 9px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  font: inherit; font-size: 0.88rem;
  text-align: center; text-decoration: none;
  cursor: pointer;
}
.loja-btn:hover { border-color: var(--azul); }
.loja-btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* Copiou. É a única confirmação que existe — a área de transferência não tem
   onde ser olhada. */
.loja-btn-feito { border-color: var(--ok); color: var(--ok); }

.loja-aviso { margin-top: 10px; }

/* O Fechar afastado dos botões que agem: com o dedo na tela de uma moto, tocar
   em "Copiar" e fechar sem querer custa a viagem de volta. */
.dados-loja .acao-secundaria { margin-top: 18px; }

/* ── o relatório de desempenho do motoboy ───────────────────────────────────
 *
 * MESMO CONTEÚDO DO APLICATIVO, MESMA ORDEM, MESMAS PALAVRAS. O que muda é a
 * largura: aqui as colunas ficam lado a lado, lá viram rolagem. Quem olha nos
 * dois lugares tem que reconhecer a mesma tela — senão são dois relatórios, e
 * ele desconfia dos dois.
 *
 * Os números usam tabular-nums em todo lugar. Numa coluna de durações, a
 * largura variável do dígito faz "22:22" e "11:30" desalinharem, e a coluna
 * inteira deixa de ser comparável de relance — que é o único jeito como esta
 * tela é lida. */
.rel { display: grid; gap: 10px; }
.rel-num { font-variant-numeric: tabular-nums; }

.rel-cab { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; justify-content: space-between; }
.rel-cab h1 { margin: 0; font-size: 1.5rem; }
.rel-cab .rel-quem { color: var(--texto-fraco); font-size: .85rem; margin: 2px 0 0; }

.rel-periodos { display: flex; flex-wrap: wrap; gap: 6px; }
.rel-periodos button {
  font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  padding: 6px 14px; border-radius: 20px;
  background: var(--superficie); color: var(--texto-fraco);
  border: 1px solid var(--borda);
}
.rel-periodos button[aria-pressed="true"] {
  background: var(--amarelo); color: var(--marinho); border-color: var(--amarelo);
}

.rel-grade { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rel-larga { display: grid; gap: 10px; grid-template-columns: 2fr 1fr; }
.rel-dupla { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) {
  .rel-larga, .rel-dupla { grid-template-columns: 1fr; }
}

.rel-cx {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px;
}
.rel-rot {
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texto-fraco); font-weight: 700; margin: 0 0 8px;
}
.rel-grande { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.rel-nota { font-size: .76rem; color: var(--texto-fraco); margin: 2px 0 0; }
.rel-nota.bom { color: var(--ok); }

.rel-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

/* a barra da corrida, em três pedaços */
.rel-barra { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--azul-fraco); }
.rel-barra i { display: block; height: 100%; }
.rel-legs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; font-size: .72rem; color: var(--texto-fraco); }
.rel-legs span { display: flex; align-items: center; gap: 5px; }
.rel-legs i { width: 8px; height: 8px; border-radius: 3px; display: block; flex: none; }

/* o dia em 24 colunas, e as barras simples */
.rel-dia, .rel-barras { display: flex; align-items: flex-end; gap: 2px; }
.rel-dia { height: 92px; }
.rel-barras { height: 74px; }
.rel-dia > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
/* flex:none impede as duas fatias de encolherem numa hora cheia — sem ele a
 * proporção da coluna passa a mentir justamente na hora mais movimentada. */
.rel-dia b, .rel-dia u { display: block; flex: none; min-height: 3px; }
.rel-dia b { background: var(--azul); opacity: .5; border-radius: 3px 3px 0 0; }
.rel-dia u { background: var(--ok); }
.rel-dia > div.vazia { border-bottom: 2px solid var(--borda); }
.rel-barras i { flex: 1; background: var(--azul); opacity: .8; border-radius: 3px 3px 0 0; display: block; min-height: 2px; }
.rel-barras i.forte { background: var(--amarelo); opacity: 1; }
.rel-barras i.nada { background: var(--borda); opacity: 1; }
.rel-eixo { display: flex; justify-content: space-between; font-size: .62rem; color: var(--texto-fraco); margin-top: 5px; }

/* as tabelinhas do extrato */
.rel-tab { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rel-tab td { padding: 7px 0; border-bottom: 1px solid var(--borda); }
.rel-tab tr:last-child td { border-bottom: 0; }
.rel-tab td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.rel-tab td.chave { color: var(--texto-fraco); }
.rel-tab tr.forte td { font-weight: 700; color: var(--texto); }

.rel-dica {
  background: var(--azul-fraco); border-radius: 10px; padding: 10px 12px;
  font-size: .76rem; color: var(--texto-fraco); margin: 11px 0 0;
}
.rel-vazio { text-align: center; padding: 40px 16px; color: var(--texto-fraco); }


/* ── o submenu do som, no perfil do motoboy ─────────────────────────────── */
.som-cx { padding: 0; }
.som-cab {
  list-style: none; cursor: pointer; padding: 15px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.som-cab::-webkit-details-marker { display: none; }
/* A seta é desenhada aqui e gira ao abrir: o marcador padrão do <details> tem
   aparência diferente em cada navegador, e esta linha aparece ao lado de
   controles que já têm um visual definido. */
.som-cab::after {
  content: '▾'; color: var(--texto-fraco); font-size: .8rem; flex: none;
  transition: transform .15s ease;
}
.som-cx[open] .som-cab::after { transform: rotate(180deg); }
.som-cab strong { display: block; }
.som-atual { display: block; font-size: .78rem; color: var(--texto-fraco); margin-top: 2px; }
.som-nota { margin: 0 16px 4px; font-size: .78rem; color: var(--texto-fraco); }
.som-opcoes { display: grid; gap: 9px; padding: 10px 16px 16px; }
.som-op {
  display: flex; gap: 11px; align-items: flex-start; text-align: left;
  font: inherit; cursor: pointer; width: 100%;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 10px; padding: 12px;
}
.som-op[aria-pressed="true"] { border: 2px solid var(--amarelo); background: var(--superficie); }
.som-bola {
  width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 2px;
  border: 2px solid var(--borda); background: transparent;
}
.som-op[aria-pressed="true"] .som-bola { background: var(--amarelo); border-color: var(--amarelo); }
.som-op b { display: block; font-size: .88rem; font-weight: 700; }
.som-op span { display: block; font-size: .76rem; color: var(--texto-fraco); margin-top: 2px; }


/* O risco entre duas corridas na mesma aba. Ele existe porque os dois cartões
   têm a mesma cara e os mesmos botões — sem uma separação clara, o dedo erra o
   "Coletei" de uma achando que é o da outra. */
.risco-corrida { border: 0; border-top: 1px solid var(--borda); margin: 18px 0 14px; }