/* Caminho: public_html/assets/css/base.css
   Reset moderno, tipografia, componentes de formulário e utilitários
   compartilhados pelo cardápio, pelo KDS e pelo Hub Administrativo. */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--fonte-texto);
  font-size: var(--t-md);
  line-height: var(--altura-normal);
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  overflow-x: hidden;
  transition: background var(--d-media) var(--easing-suave), color var(--d-media) var(--easing-suave);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; border: 0; background: none; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-black);
  line-height: var(--altura-apertada);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--marca); color: var(--marca-texto); }

/* ------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------ */
.container {
  width: min(100% - (var(--recuo-lateral) * 2), var(--largura-max));
  margin-inline: auto;
}

.pilha > * + * { margin-top: var(--e-4); }
.linha { display: flex; align-items: center; gap: var(--e-3); }
.linha-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.crescer { flex: 1 1 auto; min-width: 0; }
.esconder { display: none !important; }

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   Marca

   O logotipo oficial tem as letras em carvão. Em tema escuro elas sumiriam,
   então existe uma segunda arte com as letras em creme. As duas imagens vão
   para o HTML e aqui decidimos qual aparece. Nunca redesenhamos a marca:
   apenas escolhemos entre dois arquivos oficiais.
   ------------------------------------------------------------------ */
.marca-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 0;
  flex: none;
}

.marca-logo img {
  height: clamp(42px, 8.5vw, 58px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.22));
}

.marca-logo-grande img { height: clamp(64px, 15vw, 96px); }

/* Padrão dos temas claros: mostra a arte de letras escuras */
.marca-logo .logo-claro { display: none; }

/* Temas escuros: troca para a arte de letras claras */
[data-tema="sumi"] .marca-logo .logo-escuro,
[data-tema="neotokyo"] .marca-logo .logo-escuro,
[data-tema="umami"] .marca-logo .logo-escuro { display: none; }

[data-tema="sumi"] .marca-logo .logo-claro,
[data-tema="neotokyo"] .marca-logo .logo-claro,
[data-tema="umami"] .marca-logo .logo-claro { display: block; }

.marca-nome {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-black);
  font-size: var(--t-lg);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.marca-sub {
  font-size: var(--t-xs);
  color: var(--texto-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Ícones orientais

   São ilustrações coloridas e chapadas, usadas como apoio visual.
   Não substituem os ícones de interface, que continuam em SVG traçado
   para herdar a cor do tema.
   ------------------------------------------------------------------ */
.icone {
  width: 28px;
  height: 28px;
  flex: none;
  object-fit: contain;
}

.icone-sm { width: 20px; height: 20px; }
.icone-md { width: 34px; height: 34px; }
.icone-lg { width: 52px; height: 52px; }
.icone-xl { width: 76px; height: 76px; }

/* Selo, para o ícone ganhar peso sobre qualquer fundo */
.icone-selo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--superficie-forte);
  border: 1px solid var(--borda);
  flex: none;
  transition: transform var(--d-media) var(--easing), background var(--d-media) var(--easing-suave);
}

.icone-selo img { width: 28px; height: 28px; }
.icone-selo-lg { width: 60px; height: 60px; border-radius: var(--r-lg); }
.icone-selo-lg img { width: 38px; height: 38px; }

/* ------------------------------------------------------------------
   Superfícies e vidro
   ------------------------------------------------------------------ */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
}

.vidro {
  background: color-mix(in srgb, var(--fundo-2) 78%, transparent);
  -webkit-backdrop-filter: var(--desfoque-vidro);
  backdrop-filter: var(--desfoque-vidro);
  border: 1px solid var(--borda);
}

@supports not (backdrop-filter: blur(1px)) {
  .vidro { background: var(--fundo-2); }
}

/* ------------------------------------------------------------------
   Botões
   ------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--superficie-forte);
  --btn-cor: var(--texto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.78rem 1.3rem;
  min-height: 48px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-cor);
  font-weight: var(--peso-forte);
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
  border: 1px solid var(--borda);
  transition: transform var(--d-rapida) var(--easing),
              box-shadow var(--d-media) var(--easing),
              background var(--d-rapida) var(--easing-suave),
              filter var(--d-rapida) var(--easing-suave);
  will-change: transform;
  text-align: center;
}

.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.btn-marca {
  --btn-bg: var(--marca);
  --btn-cor: var(--marca-texto);
  border-color: transparent;
  box-shadow: var(--sombra-marca);
}

.btn-acento {
  --btn-bg: var(--acento);
  --btn-cor: #1a1310;
  border-color: transparent;
}

.btn-contorno { --btn-bg: transparent; border-color: var(--borda-forte); }
.btn-fantasma { --btn-bg: transparent; border-color: transparent; }
.btn-bloco { width: 100%; }
.btn-pequeno { min-height: 38px; padding: 0.4rem 0.9rem; font-size: var(--t-xs); }
.btn-grande { min-height: 56px; padding: 1rem 1.8rem; font-size: var(--t-md); }

/* ------------------------------------------------------------------
   Formulários
   ------------------------------------------------------------------ */
.campo { display: block; }

.campo > label,
.rotulo {
  display: block;
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: var(--e-2);
}

.entrada,
.selecao,
.area {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 50px;
  background: var(--fundo-2);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  transition: border-color var(--d-rapida) var(--easing-suave),
              box-shadow var(--d-rapida) var(--easing-suave),
              background var(--d-rapida) var(--easing-suave);
}

.entrada::placeholder, .area::placeholder { color: var(--texto-3); }

.entrada:focus,
.selecao:focus,
.area:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 4px var(--marca-suave);
}

.area { min-height: 110px; resize: vertical; line-height: 1.5; }

.selecao {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}

.erro-campo { color: var(--erro); font-size: var(--t-xs); margin-top: var(--e-1); }
.ajuda-campo { color: var(--texto-3); font-size: var(--t-xs); margin-top: var(--e-1); }

.grade-2 { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grade-2 { grid-template-columns: 1fr 1fr; } }
.col-inteira { grid-column: 1 / -1; }

/* Opção clicável grande, pensada para o polegar */
.opcao {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.9rem 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--fundo-2);
  cursor: pointer;
  transition: border-color var(--d-rapida) var(--easing-suave),
              background var(--d-rapida) var(--easing-suave),
              transform var(--d-rapida) var(--easing);
}

.opcao:hover { border-color: var(--borda-forte); }
.opcao:active { transform: scale(0.99); }

.opcao input { accent-color: var(--marca); width: 20px; height: 20px; flex: none; }

.opcao:has(input:checked) {
  border-color: var(--marca);
  background: var(--marca-suave);
}

/* ------------------------------------------------------------------
   Selos e etiquetas
   ------------------------------------------------------------------ */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.62rem;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.03em;
  background: var(--superficie-forte);
  border: 1px solid var(--borda);
  white-space: nowrap;
}

.selo-marca { background: var(--marca-suave); border-color: transparent; color: var(--marca-forte); }
.selo-acento { background: var(--acento-suave); border-color: transparent; color: var(--acento); }
.selo-ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); border-color: transparent; }
.selo-erro { background: color-mix(in srgb, var(--erro) 16%, transparent); color: var(--erro); border-color: transparent; }
.selo-alerta { background: color-mix(in srgb, var(--alerta) 18%, transparent); color: var(--alerta); border-color: transparent; }

.ponto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.pulsa { animation: pulsa 2.2s var(--easing-suave) infinite; }

@keyframes pulsa {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

/* ------------------------------------------------------------------
   Animações de entrada acionadas por scroll
   ------------------------------------------------------------------ */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-lenta) var(--easing), transform var(--d-lenta) var(--easing);
}

.revelar.visivel { opacity: 1; transform: none; }

@keyframes sobe {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes surge {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes brilho {
  from { background-position: -180% 0; }
  to { background-position: 180% 0; }
}

.esqueleto {
  background: linear-gradient(90deg, var(--superficie) 25%, var(--superficie-forte) 37%, var(--superficie) 63%);
  background-size: 300% 100%;
  animation: brilho 1.4s linear infinite;
  border-radius: var(--r-md);
}

/* ------------------------------------------------------------------
   Avisos flutuantes
   ------------------------------------------------------------------ */
#avisos {
  position: fixed;
  left: 50%;
  bottom: calc(var(--e-6) + var(--safe-baixo));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--e-2);
  width: min(92vw, 420px);
  pointer-events: none;
}

.aviso {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--fundo-3);
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-2);
  font-size: var(--t-sm);
  animation: sobe var(--d-media) var(--easing);
  /* Avisos nunca capturam o toque: eles informam, não interagem. */
  pointer-events: none;
}

.aviso-ok { border-color: var(--ok); }
.aviso-erro { border-color: var(--erro); }

/* ------------------------------------------------------------------
   Rolagem horizontal com pistas de borda
   ------------------------------------------------------------------ */
.rolagem-x {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--e-2);
}

.rolagem-x::-webkit-scrollbar { display: none; }
.rolagem-x > * { scroll-snap-align: start; flex: none; }

/* A casca é criada pelo JavaScript em volta de qualquer fila horizontal.
   Sem ela, o card cortado na borda parece defeito de layout. Com ela,
   parece o que é de verdade: tem mais coisa logo ali do lado. */
.rolagem {
  position: relative;
  --veu: 72px;
  /* Cor do véu: por padrão a do fundo da página. Onde a fila mora sobre
     outra superfície, como a barra de categorias em vidro, basta a
     vizinhança redefinir esta variável para o degradê continuar
     invisível na ponta certa. */
  --veu-cor: var(--fundo);
}

.vidro .rolagem,
.barra-navegacao .rolagem { --veu-cor: var(--fundo-2); }

/* Véu das bordas: acende só do lado que realmente esconde conteúdo. */
.rolagem::before,
.rolagem::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--veu);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-media) var(--easing-suave);
}

/* Três paradas em vez de duas: no tema escuro um degradê simples some
   contra o card, e o corte volta a parecer defeito. */
.rolagem::before {
  left: 0;
  background: linear-gradient(90deg,
    var(--veu-cor) 0%,
    color-mix(in srgb, var(--veu-cor) 70%, transparent) 45%,
    transparent 100%);
}

.rolagem::after {
  right: 0;
  background: linear-gradient(270deg,
    var(--veu-cor) 0%,
    color-mix(in srgb, var(--veu-cor) 70%, transparent) 45%,
    transparent 100%);
}

.rolagem[data-tem-antes="1"]::before,
.rolagem[data-tem-depois="1"]::after { opacity: 1; }

/* Setas: aparecem no computador E no celular.
   Já foi diferente aqui, e estava errado. A ideia de que no toque o
   arraste se explica sozinho só vale para quem já sabe que a fila rola.
   Quem abre o site pela primeira vez vê um card cortado na borda e
   entende que aquilo é tudo. A seta é a única coisa na tela que diz,
   sem texto e sem instrução, que existe mais conteúdo daquele lado. */
.rolagem-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  /* Fundo sólido de propósito: a seta pousa em cima do véu, e com
     superfície translúcida ela ficaria ilegível. */
  background: var(--fundo-3);
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-2);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--texto);
  transition: opacity var(--d-media) var(--easing-suave),
              transform var(--d-rapida) var(--easing),
              background var(--d-rapida) var(--easing-suave);
}

.rolagem-seta-antes { left: 4px; }
.rolagem-seta-depois { right: 4px; }
.rolagem-seta span { display: block; margin-top: -3px; }

.rolagem-seta:hover {
  background: var(--marca);
  color: var(--marca-texto);
  border-color: transparent;
}

.rolagem-seta:active { transform: translateY(-50%) scale(0.9); }

/* No computador a seta pode ser um pouco maior, porque ali ela é a
   única forma de navegar: não existe arrastar com o dedo. */
@media (hover: hover) and (pointer: fine) {
  .rolagem-seta { width: 42px; height: 42px; }
}

/* A fila abre espaço para a seta não pousar em cima do card. */
.rolagem[data-tem-antes="1"] > .rolagem-x,
.rolagem[data-tem-antes="1"] > .abas-categorias { scroll-padding-left: 50px; }

.rolagem[data-tem-depois="1"] > .rolagem-x,
.rolagem[data-tem-depois="1"] > .abas-categorias { scroll-padding-right: 50px; }

.rolagem[data-tem-antes="0"] .rolagem-seta-antes,
.rolagem[data-tem-depois="0"] .rolagem-seta-depois {
  opacity: 0;
  pointer-events: none;
}

/* A seta que aponta para onde ainda há conteúdo pulsa de leve nos
   primeiros segundos, uma vez só. É o convite: olha aqui, tem mais. */
.rolagem-seta.chamando {
  animation: chamaSeta 1.6s var(--easing-suave) 3;
}

@keyframes chamaSeta {
  0%, 62%, 100% { transform: translateY(-50%) translateX(0); }
  74% { transform: translateY(-50%) translateX(var(--empurrao, 4px)); }
  86% { transform: translateY(-50%) translateX(0); }
}

.rolagem-seta-antes.chamando { --empurrao: -4px; }

/* Barra de posição: diz de relance quanto da fila já passou e quanto
   ainda falta. No celular ela é a resposta mais direta para "isso é
   tudo?", porque se mexe junto com o dedo enquanto a pessoa arrasta. */
.rolagem-barra {
  height: 3px;
  width: 72px;
  margin: var(--e-2) auto 0;
  border-radius: var(--r-pill);
  background: var(--borda-forte);
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--d-media) var(--easing-suave);
}

.rolagem[data-tem-antes="1"] .rolagem-barra,
.rolagem[data-tem-depois="1"] .rolagem-barra { opacity: 1; }

.rolagem-barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--marca);
  transform-origin: left center;
  transition: transform var(--d-rapida) linear;
}

@media (prefers-reduced-motion: reduce) {
  .rolagem::before,
  .rolagem::after,
  .rolagem-seta { transition: none; }
}

/* ------------------------------------------------------------------
   Impressão: cupom limpo em qualquer impressora
   ------------------------------------------------------------------ */
@media print {
  body { background: #fff; color: #000; }
  .sem-impressao, header, footer, nav, .barra-inferior { display: none !important; }
}