/* =====================================================================
   DaVez — camada "Cockpit" do app do motoboy.

   Quem usa esta tela está de capacete, com pressa, na porta da loja e
   quase sempre à noite. Por isso o modelo não é "app": é painel de
   instrumento de moto. O dado que decide o turno — a posição na fila
   DaVez — é tratado como leitura de instrumento, legível num relance
   com o celular no suporte do guidão.

   Regras desta camada:
   - Só toca no app público (body.public-app). O painel da loja não é
     afetado: remover o <link> do index.html reverte tudo.
   - Carrega DEPOIS do CSS embutido do index.html na ordem do documento,
     então todo seletor é prefixado com body.public-app para vencer por
     especificidade, e não por !important.
   - Nenhuma regra de comportamento muda aqui. É só pintura.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tipografia hospedada no próprio servidor.
   A política de segurança do projeto proíbe recurso de origem externa
   (script/CSS de CDN comprometido rodaria dentro da sessão autenticada),
   então as fontes moram em assets/fonts. Subset latin: cobre todos os
   acentos do português. Ambas são licença aberta (OFL).
--------------------------------------------------------------------- */
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/chakra-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakra-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------
   Paleta do instrumento — só no tema escuro.
   Azul de ação para o que exige toque, azul-claro de telemetria para dado
   secundário, neutros com viés petróleo (cinza puro lê como descuido).
   No tema claro a camada só empresta tipografia e forma, preservando a
   legibilidade sob sol, que é o motivo de o claro existir.
--------------------------------------------------------------------- */
:root[data-theme="dark"] body.public-app {
  /* Tinta em assets/css/davez-tokens.css — fonte única da paleta. */
  --cock-acao: var(--dv-acao);
  --cock-acao-tinta: var(--dv-acao-tinta);
  --cock-acao-borda: var(--dv-acao-borda);
  --cock-acao-clara: var(--dv-acao-clara);
  --cock-line: var(--dv-cock-linha);
  --cock-line-hot: var(--dv-cock-linha-viva);
  --cock-faint: var(--dv-cock-apagado);
}

/* ---------------------------------------------------------------------
   Tipografia — vale nos dois temas.
   Chakra Petch (angular, técnica) carrega títulos, rótulos e números;
   Barlow (humanista, estreita) carrega o texto corrido, que precisa
   aguentar frase longa em tela de 5 polegadas.
--------------------------------------------------------------------- */
body.public-app {
  font-family: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
}

body.public-app h1,
body.public-app h2,
body.public-app .eyebrow,
body.public-app .wait-title,
body.public-app .davez-title,
body.public-app .davez-lbl,
body.public-app .wait-pos .lbl,
body.public-app label,
body.public-app #btn,
body.public-app #btnDaVez2,
body.public-app #btnRecover,
body.public-app .pwa-btn {
  font-family: "Chakra Petch", "Barlow", "Segoe UI", system-ui, sans-serif;
}

body.public-app .eyebrow,
body.public-app .davez-lbl,
body.public-app .wait-pos .lbl {
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   O instrumento: a posição na fila DaVez.

   Antes era um número igual ao da lista de fechamento, e os dois se
   confundiam — confusão que já apareceu na operação. Agora a fila DaVez
   domina no azul de ação e a lista de fechamento fica menor e em azul-claro,
   visivelmente de outra natureza.
--------------------------------------------------------------------- */
/* O bloco vira uma coluna só: lado a lado com "Próximo da fila", o número
   fica espremido em metade da largura e não consegue dominar — medido em
   375px, saía só 1,4x maior que o da lista de fechamento, o que não
   resolve a confusão entre as duas filas. Empilhado, ele ocupa a largura
   inteira e o "próximo" desce para uma faixa de apoio. Só CSS: o HTML e a
   ordem de leitura continuam iguais. */
body.public-app .davez-grid {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

body.public-app .davez-grid > .davez-col:last-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line);
}

body.public-app .davez-num {
  font-family: "Chakra Petch", "Barlow", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(4.5rem, 27vw, 7rem);
  line-height: 0.84;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

:root[data-theme="dark"] body.public-app .davez-num {
  color: var(--cock-acao-tinta);
  text-shadow: 0 0 34px color-mix(in srgb, var(--dv-acao-tinta) 26%, transparent);
}

/* No tema claro a hierarquia é a mesma, com as cores que aguentam fundo
   claro: o azul de instrumento se lava sob sol, então quem marca
   "a sua vez" aqui é o laranja queimado que o app já usa (--locator).
   Sem isto, o claro herdaria a cor do texto comum e o número ficaria
   grande porém mudo. */
:root[data-theme="light"] body.public-app .davez-num {
  color: var(--locator);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.public-app .davez-num {
    color: var(--locator);
  }
}

body.public-app .wait-pos .num {
  font-family: "Chakra Petch", "Barlow", system-ui, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

:root[data-theme="dark"] body.public-app .wait-pos .num {
  color: var(--cock-acao-clara);
}

/* A lista de fechamento fica com o azul da marca nos dois temas: o ponto é
   ela NÃO competir com a fila DaVez, e cor diferente resolve isso melhor
   que tamanho sozinho. */
:root[data-theme="light"] body.public-app .wait-pos .num {
  color: var(--route);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.public-app .wait-pos .num {
    color: var(--route);
  }
}

body.public-app .davez-after {
  font-family: "Chakra Petch", "Barlow", system-ui, sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* O quadro da fila DaVez ganha corpo de instrumento: canto chanfrado no
   lugar do raio uniforme, que é a forma que mais entrega "template". */
:root[data-theme="dark"] body.public-app .davez-box {
  border-color: var(--cock-acao-borda);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--dv-acao) 7%, transparent), transparent 42%),
    rgba(10, 14, 20, 0.72);
  clip-path: polygon(
    16px 0, 100% 0, 100% calc(100% - 16px),
    calc(100% - 16px) 100%, 0 100%, 0 16px
  );
}

:root[data-theme="dark"] body.public-app .davez-state {
  color: var(--cock-acao-clara);
  border-color: var(--cock-line-hot);
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------
   Ação principal — o botão que o motoboy aperta de luva.
   Chanfro no lugar do raio, e o azul de ação reservado para ele: é o único
   ponto da tela que pede toque.
--------------------------------------------------------------------- */
:root[data-theme="dark"] body.public-app #btn,
:root[data-theme="dark"] body.public-app #btnDaVez2:not([disabled]) {
  background: var(--cock-acao);
  color: #ffffff;
  border-color: transparent;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 0 30px color-mix(in srgb, var(--dv-acao) 20%, transparent);
  clip-path: polygon(
    12px 0, 100% 0, 100% calc(100% - 12px),
    calc(100% - 12px) 100%, 0 100%, 0 12px
  );
}

/* Desabilitado ("Aguardando despacho") não pode parecer clicável. */
:root[data-theme="dark"] body.public-app #btnDaVez2[disabled] {
  background: transparent;
  color: var(--cock-faint);
  border-color: var(--cock-line);
  box-shadow: none;
}

:root[data-theme="dark"] body.public-app input:focus {
  border-color: var(--cock-acao-clara);
  box-shadow: 0 0 0 4px rgba(79, 216, 232, 0.16);
}

/* Campo de código: espaçado como leitura de instrumento, para conferir
   dígito a dígito sem tirar a luva. */
body.public-app #accessCode {
  font-family: "Chakra Petch", "Barlow", system-ui, sans-serif;
  letter-spacing: 0.16em;
  font-size: 1.15rem;
}

/* ---------------------------------------------------------------------
   Tela de entrada — a PRIMEIRA que o motoboy vê.

   Ela ficou de fora da primeira passada e continuava azul, porque usa
   cores fixas (#c7d5ef) em vez de tokens de tema: no escuro, borda azul
   clara sobre fundo quase preto. Aqui os três caminhos (check-in,
   cadastro, painel) ganham a mesma forma chanfrada do resto, e o ícone
   entra no azul de ação — é ele que diz "toque aqui".
--------------------------------------------------------------------- */
:root[data-theme="dark"] body.public-app .motoboy-panel-link {
  border-color: var(--cock-line-hot);
  background: rgba(16, 22, 31, 0.72);
  clip-path: polygon(
    12px 0, 100% 0, 100% calc(100% - 12px),
    calc(100% - 12px) 100%, 0 100%, 0 12px
  );
}

:root[data-theme="dark"] body.public-app .motoboy-panel-icon {
  border-color: var(--cock-acao-borda);
  background: color-mix(in srgb, var(--dv-acao) 10%, transparent);
  color: var(--cock-acao-tinta);
  clip-path: polygon(
    9px 0, 100% 0, 100% calc(100% - 9px),
    calc(100% - 9px) 100%, 0 100%, 0 9px
  );
}

:root[data-theme="dark"] body.public-app .motoboy-panel-arrow {
  color: var(--cock-acao-tinta);
  opacity: 0.75;
}

/* ---------------------------------------------------------------------
   A opção principal, no tema escuro.

   As três opções do menu tinham peso idêntico, e "Fazer check-in" é o
   motivo de o app existir — o motoboy chega na porta da loja com pressa.

   Mora AQUI, e não no index.html, por especificidade: as regras acima são
   `:root[data-theme="dark"] body.public-app .motoboy-panel-*` (0,4,0), e a
   variante escrita no HTML como `.as-button.is-principal` (0,3,0) perdia
   sem dizer nada — a borda e o ícone saíam idênticos aos dos outros dois
   cartões, e só medindo dava para ver.

   A distinção não é só cor: o padding maior e o corpo do ícone cheio
   sobrevivem ao daltonismo e ao sol na tela.
--------------------------------------------------------------------- */
:root[data-theme="dark"] body.public-app .motoboy-panel-link.is-principal {
  border-color: var(--cock-acao-borda);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dv-acao) 12%, transparent), transparent 58%),
    rgba(19, 26, 37, 0.86);
}

:root[data-theme="dark"] body.public-app .motoboy-panel-link.is-principal
  .motoboy-panel-icon {
  border-color: transparent;
  background: var(--cock-acao);
  color: #ffffff;
}

body.public-app .motoboy-panel-copy strong {
  font-family: "Chakra Petch", "Barlow", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Toque e teclado precisam responder — sem isso o card parece decorativo. */
:root[data-theme="dark"] body.public-app .motoboy-panel-link:hover,
:root[data-theme="dark"] body.public-app .motoboy-panel-link:focus-visible {
  border-color: var(--cock-acao-borda);
  background: color-mix(in srgb, var(--dv-acao) 6%, transparent);
}

:root[data-theme="dark"] body.public-app .motoboy-panel-link:focus-visible {
  outline: 3px solid var(--cock-acao-clara);
  outline-offset: 3px;
}

/* O logo vinha num retângulo branco cravado, que no escuro vira um bloco
   aceso no meio da tela. A marca fica sobre o próprio fundo. */
:root[data-theme="dark"] body.public-app .logo-top {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* ---------------------------------------------------------------------
   Acessibilidade: o foco tem que continuar visível sobre o novo fundo,
   e o chanfro não pode comer o anel de foco.
--------------------------------------------------------------------- */
:root[data-theme="dark"] body.public-app #btn:focus-visible,
:root[data-theme="dark"] body.public-app #btnDaVez2:focus-visible {
  outline: 3px solid var(--cock-acao-clara);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body.public-app .davez-num,
  body.public-app .davez-box {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------
   Recuperação da permissão de localização.

   Quem lê esta tela está de pé na calçada, provavelmente de capacete e com
   uma mão só, depois de já ter falhado uma vez. Então: passo grande, um
   comando por linha, e um único botão que importa.

   É tela e não pop-up porque ele vai SAIR do app para mexer nos ajustes —
   um pop-up ele fecha e volta ao mesmo lugar de antes.
--------------------------------------------------------------------- */
body.public-app .gps-help {
  margin: 0 auto;
  max-width: 34rem;
  padding: 22px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

body.public-app .gps-help[hidden] { display: none; }

body.public-app .gps-help-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}

body.public-app .gps-help-marca {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--danger);
  background: var(--danger-soft);
}
body.public-app .gps-help-marca svg { width: 24px; height: 24px; }

body.public-app .gps-help-titulo {
  margin: 0 0 6px;
  font-family: "Chakra Petch", "Barlow", system-ui, sans-serif;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

body.public-app .gps-help-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Os passos. A numeração vem do contador do próprio <ol>: a ordem É a
   instrução, e um número escrito na marcação sairia do lugar no dia em que
   a lista mudasse. */
body.public-app .gps-passos {
  counter-reset: gpspasso;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

body.public-app .gps-passo {
  counter-increment: gpspasso;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

body.public-app .gps-passo::before {
  content: counter(gpspasso);
  font-family: "Chakra Petch", "Barlow", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: var(--cock-acao, #b45309);
}

body.public-app .gps-passo-icone {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--muted);
}
body.public-app .gps-passo-icone svg { width: 22px; height: 22px; }

/* 1.06rem e não 0.9: esta linha é lida em movimento, sob sol, por quem já
   está irritado de não conseguir entrar. */
body.public-app .gps-passo-texto {
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--ink);
}

/* O único botão que importa. 56px de altura porque o dedo pode estar de luva,
   e azul de ação porque é a cor de "faça isto" em todo o produto. */
body.public-app .gps-help-acao {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 15px 18px;
  border: 0;
  border-radius: 12px;
  font-family: "Chakra Petch", "Barlow", system-ui, sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--cock-acao, #b45309);
  cursor: pointer;
}

body.public-app .gps-help-acao:focus-visible {
  outline: 3px solid var(--cock-acao-clara, #0e7490);
  outline-offset: 3px;
}

body.public-app .gps-help-aparelho {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Saída sempre disponível: ninguém pode ficar preso numa tela de ajuda.
   Discreto de propósito — é escape, não o caminho recomendado. */
/* 48px e não 44: o mínimo de toque é 44, e medindo deu 43 por arredondamento
   do line-height. Alvo abaixo do mínimo é justamente o que faz errar o dedo. */
body.public-app .gps-help-voltar {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 12px 10px;
  border: 0;
  background: none;
  font-size: 0.98rem;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

body.public-app .gps-help-voltar:focus-visible {
  outline: 3px solid var(--cock-acao-clara, #0e7490);
  outline-offset: 2px;
}

/* No escuro a tela ganha o mesmo chanfro e o mesmo azul de ação do
   resto do app, para não parecer página de outro produto. */
:root[data-theme="dark"] body.public-app .gps-help {
  border-color: var(--cock-line-hot);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--dv-acao) 6%, transparent), transparent 44%),
    rgba(10, 14, 20, 0.72);
  clip-path: polygon(
    16px 0, 100% 0, 100% calc(100% - 16px),
    calc(100% - 16px) 100%, 0 100%, 0 16px
  );
  border-radius: 0;
}

:root[data-theme="dark"] body.public-app .gps-passo {
  border-color: var(--cock-line);
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 380px) {
  body.public-app .gps-passo {
    grid-template-columns: auto 1fr;
    row-gap: 8px;
  }
  /* No aparelho estreito o ícone sai da linha em vez de espremer o texto:
     quem manda aqui é a frase, não a decoração. */
  body.public-app .gps-passo-icone { display: none; }
}