/*
 * Cardápio Online — identidade visual (bloco L0). Usada no painel, no admin e na landing.
 * O cardápio público NÃO carrega este arquivo (usa publico.css + temas da loja).
 *
 * Direção: "lousa de giz moderna". Grafite azulado + papel claro; o giz aparece como acento
 * (verde-giz #7FD1AE e rosa-giz #F3A6B6), sempre com texto grafite por cima (contraste ≥ 8:1).
 * Títulos em Alegreya (serifa humanista caligráfica: lembra letra escrita à mão sem ser fonte
 * de giz); texto em Atkinson Hyperlegible Next (legibilidade no celular). Fontes OFL, auto-hospedadas.
 *
 * Contraste conferido (WCAG AA): texto 14.6:1 / suave 6.0:1 no claro; texto 15.1:1 / suave 8.1:1
 * no escuro; grafite sobre giz 8.9:1, sobre rosa 8.4:1; perigo 6.6:1.
 *
 * Tema: segue o sistema; `<html data-tema="claro|escuro">` força um dos dois.
 */

/* Fontes ---------------------------------------------------------------------------------- */
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/alegreya-5bd90e88.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: "Alegreya";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/alegreya-ext-a5eb1f63.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/atkinson-next-264aa1e2.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: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/atkinson-next-ext-a1e1b854.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/atkinson-next-italico-933ed2a8.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: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/atkinson-next-italico-ext-de6a123b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens ---------------------------------------------------------------------------------- */
:root {
  /* Paleta fixa (não muda com o tema) */
  --grafite: #1c2226;
  --giz: #eef0ea;
  --giz-verde: #7fd1ae;
  --giz-verde-claro: #d6f2e5;
  --giz-rosa: #f3a6b6;
  --giz-rosa-claro: #fbe1e7;

  /* Tema claro (papel) */
  --cor-fundo: #f4f4ef;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #ecede7;
  --cor-texto: var(--grafite);
  --cor-texto-suave: #545e66;
  --cor-borda: #d3d7d6;
  --cor-borda-forte: #7e8890;
  --cor-acento: var(--giz-verde);
  --cor-sobre-acento: var(--grafite);
  --cor-destaque: var(--giz-rosa);
  --cor-sobre-destaque: var(--grafite);
  --cor-perigo: #b42318;
  --cor-sobre-perigo: #ffffff;
  --cor-perigo-fundo: #fdecea;
  --cor-sucesso-fundo: var(--giz-verde-claro);
  --cor-aviso-fundo: var(--giz-rosa-claro);
  --cor-foco: var(--grafite);
  --sombra: 0 1px 2px rgb(28 34 38 / 0.06), 0 4px 16px rgb(28 34 38 / 0.06);

  /* Tipografia */
  --fonte-titulo: "Alegreya", "Iowan Old Style", Georgia, serif;
  --fonte-texto: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto-xs: 0.8125rem;
  --texto-sm: 0.9375rem;
  --texto-md: 1rem;
  --texto-lg: 1.1875rem;
  --texto-xl: 1.5rem;
  --texto-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --texto-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);

  /* Espaço, raio, toque */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-7: 3rem;
  --raio: 0.625rem;
  --raio-sm: 0.375rem;
  --raio-pilula: 999px;
  --toque: 2.75rem; /* 44px: alvo mínimo de toque */
  --largura-conteudo: 46rem;
  --altura-barra-inferior: 4rem;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-fundo: #161b1e;
    --cor-superficie: #1f262a;
    --cor-superficie-2: #283035;
    --cor-texto: var(--giz);
    --cor-texto-suave: #a9b2b8;
    --cor-borda: #333c42;
    --cor-borda-forte: #6e7981;
    --cor-perigo: #ff8a80;
    --cor-sobre-perigo: var(--grafite);
    --cor-perigo-fundo: #3a2422;
    --cor-sucesso-fundo: #1d3a2f;
    --cor-aviso-fundo: #3d2930;
    --cor-foco: var(--giz-verde);
    --sombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
  }
}

:root[data-tema="escuro"] {
  --cor-fundo: #161b1e;
  --cor-superficie: #1f262a;
  --cor-superficie-2: #283035;
  --cor-texto: var(--giz);
  --cor-texto-suave: #a9b2b8;
  --cor-borda: #333c42;
  --cor-borda-forte: #6e7981;
  --cor-perigo: #ff8a80;
  --cor-sobre-perigo: var(--grafite);
  --cor-perigo-fundo: #3a2422;
  --cor-sucesso-fundo: #1d3a2f;
  --cor-aviso-fundo: #3d2930;
  --cor-foco: var(--giz-verde);
  --sombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--espaco-3);
  text-wrap: balance;
}
h1 { font-size: var(--texto-2xl); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-lg); }

p { margin: 0 0 var(--espaco-4); text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--giz-verde);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-color: currentColor; }

img, svg { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

::selection { background: var(--giz-verde); color: var(--grafite); }

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

.pular-para-conteudo {
  position: absolute; left: var(--espaco-3); top: -4rem;
  padding: var(--espaco-2) var(--espaco-4);
  background: var(--giz-verde); color: var(--grafite);
  border-radius: var(--raio-sm); z-index: 100;
}
.pular-para-conteudo:focus { top: var(--espaco-3); }

.texto-suave { color: var(--cor-texto-suave); }
.numero { font-variant-numeric: tabular-nums; }

/* Marca: "Cardápio Online" — "Cardápio" forte, "Online" mais leve e o ponto de giz no fim.
 * Markup vem do helper `marca` (ApplicationHelper). Cabe numa linha a 360 px. */
.marca {
  display: inline-flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.375rem; line-height: 1.1;
  color: var(--cor-texto); text-decoration: none; letter-spacing: -0.015em;
}
.marca__nome { margin-right: 0.22em; }
.marca__sufixo { font-weight: 500; letter-spacing: 0; opacity: 0.86; }
.marca::after {
  content: ""; flex: none; width: 0.3em; height: 0.3em; margin-left: 0.08em; border-radius: 50%;
  background: var(--giz-verde); transform: translateY(-0.05em);
}

/* Traço de giz (sublinhado desenhado à mão) para uma palavra de destaque */
.traco-giz {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 80 10, 120 6 S 180 4, 198 7' fill='none' stroke='%237FD1AE' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 0.32em;
  background-position: 0 100%;
  padding-bottom: 0.08em;
}

/* Layout ---------------------------------------------------------------------------------- */
.conteudo {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding: var(--espaco-5) var(--espaco-4) calc(var(--altura-barra-inferior) + var(--espaco-6));
}
@media (min-width: 48rem) {
  .conteudo { padding-bottom: var(--espaco-7); }
}

.conteudo--largo { max-width: 72rem; padding-bottom: var(--espaco-7); }

.pilha > * + * { margin-top: var(--espaco-4); }
.pilha + .pilha { margin-top: var(--espaco-7); }
.linha { display: flex; align-items: center; gap: var(--espaco-3); flex-wrap: wrap; }
.linha--entre { justify-content: space-between; }

.cabecalho-pagina {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--espaco-3); flex-wrap: wrap; margin-bottom: var(--espaco-5);
}
.cabecalho-pagina h1 { margin: 0; }

/* Topo do painel (desktop) */
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4);
  min-height: 3.5rem; padding: var(--espaco-2) var(--espaco-4);
  background: color-mix(in srgb, var(--cor-fundo) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cor-borda);
}
.topo__nav { display: none; gap: var(--espaco-1); }
/* Celular estreito (≤ 384 px): a marca "Cardápio Online" encolhe para "Ver cardápio" e "Sair" caberem na mesma linha. */
@media (max-width: 24rem) {
  .topo { gap: var(--espaco-3); }
  .topo > .marca { font-size: 1.1875rem; }
  .topo > .linha { flex-wrap: nowrap; gap: var(--espaco-3); white-space: nowrap; }
}
@media (max-width: 21rem) { .topo > .marca { font-size: 1.0625rem; } }
.topo__nav a {
  padding: var(--espaco-2) var(--espaco-3); border-radius: var(--raio-pilula);
  text-decoration: none; color: var(--cor-texto-suave); font-weight: 600;
}
.topo__nav a:hover { color: var(--cor-texto); background: var(--cor-superficie-2); }
.topo__nav a[aria-current="page"] { color: var(--grafite); background: var(--giz-verde); }
@media (min-width: 48rem) { .topo__nav { display: flex; } }
.topo__nav--sempre { display: flex; overflow-x: auto; }

/* Barra inferior (celular): navegação do painel ao alcance do polegar */
.barra-inferior {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--altura-barra-inferior) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  box-shadow: 0 -4px 16px rgb(0 0 0 / 0.06);
}
.barra-inferior a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--toque); text-decoration: none;
  font-size: var(--texto-xs); font-weight: 600; color: var(--cor-texto-suave);
}
.barra-inferior svg { width: 1.375rem; height: 1.375rem; }
.barra-inferior a[aria-current="page"] { color: var(--cor-texto); }
.barra-inferior a[aria-current="page"] svg {
  background: var(--giz-verde); color: var(--grafite);
  border-radius: var(--raio-pilula); padding: 2px 10px; width: 2.6rem; box-sizing: content-box;
}
@media (min-width: 48rem) { .barra-inferior { display: none; } }

/* Componentes ----------------------------------------------------------------------------- */

/* Botão */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2);
  min-height: var(--toque); padding: 0 var(--espaco-5);
  border: 1px solid transparent; border-radius: var(--raio-pilula);
  font: 700 var(--texto-md)/1 var(--fonte-texto);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, transform 0.05s;
  background: var(--giz-verde); color: var(--grafite);
  border-color: color-mix(in srgb, var(--grafite) 18%, var(--giz-verde));
}
.botao:hover { background: color-mix(in srgb, var(--giz-verde) 85%, var(--grafite)); }
.botao:active { transform: translateY(1px); }
.botao[disabled], .botao[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.botao--secundario {
  background: var(--cor-superficie); color: var(--cor-texto); border-color: var(--cor-borda-forte);
}
.botao--secundario:hover { background: var(--cor-superficie-2); }
.botao--fantasma { background: transparent; color: var(--cor-texto); border-color: transparent; }
.botao--fantasma:hover { background: var(--cor-superficie-2); }
.botao--perigo { background: var(--cor-perigo); color: var(--cor-sobre-perigo); border-color: var(--cor-perigo); }
.botao--perigo:hover { background: color-mix(in srgb, var(--cor-perigo) 85%, #000); }
.botao--pequeno { min-height: 2.25rem; padding: 0 var(--espaco-4); font-size: var(--texto-sm); }
.botao--bloco { width: 100%; }
/* Botão de ícone (subir/descer, esgotado): ainda 44px de toque */
.botao--icone { width: var(--toque); padding: 0; }

/* Campo */
.campo { display: grid; gap: var(--espaco-1); margin-bottom: var(--espaco-4); }
.campo > label, .campo__rotulo { font-weight: 700; font-size: var(--texto-sm); }
.campo__ajuda { font-size: var(--texto-sm); color: var(--cor-texto-suave); margin: 0; }
.campo__erro { font-size: var(--texto-sm); color: var(--cor-perigo); font-weight: 700; margin: 0; }
.campo input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"]),
.campo select,
.campo textarea {
  width: 100%; min-height: var(--toque);
  padding: var(--espaco-2) var(--espaco-3);
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm);
  background: var(--cor-superficie); color: var(--cor-texto);
  font: inherit; font-size: max(16px, var(--texto-md)); /* 16px evita zoom no iOS */
}
.campo textarea { min-height: 6rem; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 3px solid var(--giz-verde); outline-offset: 0; border-color: var(--grafite);
}
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: var(--cor-perigo); border-width: 2px; }
.campo--preco input { font-variant-numeric: tabular-nums; }
.campo--marcar { display: flex; align-items: center; gap: var(--espaco-2); min-height: var(--toque); }
.campo--marcar input { width: 1.25rem; height: 1.25rem; accent-color: var(--giz-verde); }

/* Cartão */
.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--espaco-5);
  box-shadow: var(--sombra);
}
.cartao__titulo { margin-bottom: var(--espaco-2); }
.cartao--plano { box-shadow: none; }

/* Selo (etiqueta curta de estado) */
.selo {
  display: inline-flex; align-items: center; gap: var(--espaco-1);
  padding: 0.125rem 0.625rem; border-radius: var(--raio-pilula);
  font-size: var(--texto-xs); font-weight: 700; line-height: 1.6;
  background: var(--cor-superficie-2); color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
}
.selo--verde { background: var(--giz-verde); color: var(--grafite); border-color: transparent; }
.selo--rosa { background: var(--giz-rosa); color: var(--grafite); border-color: transparent; }
.selo--perigo { background: var(--cor-perigo); color: var(--cor-sobre-perigo); border-color: transparent; }
.selo--contorno { background: transparent; }

/* Lista (pratos, seções, lojas) */
.lista {
  list-style: none; margin: 0; padding: 0;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  overflow: hidden;
}
.lista__item {
  display: flex; align-items: center; gap: var(--espaco-3);
  min-height: 3.75rem; padding: var(--espaco-3) var(--espaco-4);
}
.lista__item + .lista__item { border-top: 1px solid var(--cor-borda); }
.lista__principal { flex: 1; min-width: 0; }
.lista__titulo { font-weight: 700; overflow-wrap: anywhere; }
.lista__detalhe { font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.lista__acoes { display: flex; align-items: center; gap: var(--espaco-1); flex-shrink: 0; }
.lista__item--apagado .lista__titulo { color: var(--cor-texto-suave); text-decoration: line-through; }

/* Faixa de aviso (super admin "entrando como", loja bloqueada, avisos fixos) */
.faixa-aviso {
  display: flex; align-items: center; justify-content: center; gap: var(--espaco-3); flex-wrap: wrap;
  padding: var(--espaco-2) var(--espaco-4);
  background: var(--giz-rosa); color: var(--grafite);
  font-weight: 700; font-size: var(--texto-sm); text-align: center;
}
.faixa-aviso .botao { min-height: 2.25rem; background: var(--grafite); color: var(--giz); border-color: var(--grafite); }

/* Mensagens (flash) */
.aviso {
  display: flex; gap: var(--espaco-2); align-items: flex-start;
  padding: var(--espaco-3) var(--espaco-4); margin-bottom: var(--espaco-4);
  border-radius: var(--raio-sm); border-left: 4px solid var(--giz-verde);
  background: var(--cor-sucesso-fundo); color: var(--cor-texto);
}
.aviso--erro { border-left-color: var(--cor-perigo); background: var(--cor-perigo-fundo); }

/* Estado vazio */
.vazio {
  text-align: center; padding: var(--espaco-7) var(--espaco-4);
  border: 2px dashed var(--cor-borda); border-radius: var(--raio);
  color: var(--cor-texto-suave);
}
.vazio h2 { color: var(--cor-texto); }

/* Tela de acesso (entrar, senha, convite) */
.acesso { min-height: 100dvh; display: grid; place-items: center; padding: var(--espaco-5) var(--espaco-4); }
.acesso__caixa { width: 100%; max-width: 24rem; }
.acesso__caixa .marca { margin-bottom: var(--espaco-5); }
.acesso__caixa form + p { margin-top: var(--espaco-4); }

/* Catálogo /painel/estilo */
.amostras { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--espaco-3); }
.amostra { border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); overflow: hidden; font-size: var(--texto-xs); }
.amostra__cor { height: 4rem; display: grid; place-items: center; font-weight: 700; font-size: var(--texto-sm); }
.amostra__nome { padding: var(--espaco-2); background: var(--cor-superficie); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}