/* ==========================================================
   UaiPedidos — DESIGN SYSTEM  (ds.css)
   Identidade visual: Anota AI (pedido.anota.ai).
   Referência viva: /design-system
   ----------------------------------------------------------
   Fundamentos extraídos do cardápio Anota AI real:
   - Fonte única: Montserrat (400/500/600/700/800)
   - Neutros: #2b2b2b / #5a5a5a / #9d9d9d, bordas #ebebeb/#e1e1e1,
     fundo #fff sobre canvas #f5f5f5
   - Semânticas: verde #009440 (aberto/ok), vermelho #c13840,
     amarelo #ffa800, azul #0098fc
   - Marca por estabelecimento via CSS vars (--brand*) — tema
     white-label igual ao sistema --bg-color/--soft-color deles
   - Raios: 4px (imagens/inputs/badges), 8px (botões/cards),
     16px (sheets), 24px (modais), 999px (pílulas)
   - Sombras raras e suaves; profundidade por borda
   Requer o CSS do Quasar carregado ANTES (skin abaixo).
   ========================================================== */

/* ===================== 0. FONTE ===================== */
/* AmsiProNarw (Amsi Pro Narrow — mesma fonte do UaiRango; comercial).
   Coloque os arquivos licenciados em /assets/fonts/ com estes nomes.
   Enquanto não existirem, o sistema usa "Archivo Narrow" (Google Fonts,
   carregada pelo head.php) como aproximação. */
@font-face { font-family: 'AmsiProNarw'; src: url('/assets/fonts/AmsiProNarw-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'AmsiProNarw'; src: url('/assets/fonts/AmsiProNarw-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'AmsiProNarw'; src: url('/assets/fonts/AmsiProNarw-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'AmsiProNarw'; src: url('/assets/fonts/AmsiProNarw-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'AmsiProNarw'; src: url('/assets/fonts/AmsiProNarw-Black.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* ===================== 1. TOKENS ===================== */
/* Marca base em :where(:root) = especificidade zero: o <style id="tema-marca">
   emitido pelo head.php (cores da loja + contraste calculado) SEMPRE vence,
   independentemente da ordem dos <link>/<style> no documento. */
:where(:root) {
  --brand:          #1095F3;   /* default UaiPedidos (azul) */
  --brand-contrast: #ffffff;   /* calculado no PHP (luminância) */
  --brand-2:        #1581E0;   /* compat: cor secundária da loja */
  --brand-accent:   #ffa800;   /* compat: destaque da loja */
}
:root {
  /* --- Derivadas da marca (acompanham o --brand injetado) --- */
  --brand-hover:    color-mix(in srgb, var(--brand) 82%, #fff);
  --brand-active:   color-mix(in srgb, var(--brand) 84%, #000);
  --brand-soft:     color-mix(in srgb, var(--brand) 11%, #fff);
  --brand-badge:    color-mix(in srgb, var(--brand) 62%, #000);

  /* --- Neutros --- */
  --ink:     #2b2b2b;   /* texto forte / títulos */
  --ink-2:   #5a5a5a;   /* texto padrão */
  --ink-3:   #9d9d9d;   /* texto apagado / placeholder */
  --line:    #ebebeb;   /* borda padrão */
  --line-2:  #e1e1e1;   /* borda de seção */
  --paper:   #ffffff;   /* superfície */
  --canvas:  #f5f5f5;   /* fundo de página */

  /* --- Semânticas --- */
  --ok:        #009440;
  --ok-dark:   #006c2f;
  --ok-soft:   #d9ffe6;
  --danger:    #c13840;
  --danger-strong: #8f0808;
  --danger-soft:   #fdecec;
  --warn:      #ffa800;
  --warn-soft: #fff4d6;
  --info:      #0098fc;
  --info-soft: #e3f3ff;

  /* --- Raios --- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-modal: 24px;  --r-pill: 999px;

  /* --- Sombras --- */
  --sombra-1: 4px 4px 16px rgba(0,0,0,.05);
  --sombra-2: 0 4px 12px rgba(0,0,0,.11);
  --sombra-scroll: 0 15px 45px rgba(10,10,10,.10);
  --sombra-modal: 5px 5px 15px rgba(0,0,0,.20);

  /* --- Tipografia --- */
  --fonte: "AmsiProNarw", "Archivo Narrow", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Métricas de layout --- */
  --topo-h: 56px;
  --nav-h: 60px;
  --conteudo-max: 1080px;

  /* --- Quasar bridge --- */
  --q-primary:  var(--brand);
  --q-secondary:var(--brand-badge);
  --q-accent:   var(--warn);
  --q-positive: var(--ok);
  --q-negative: var(--danger);
  --q-info:     var(--info);
  --q-warning:  var(--warn);
}

/* ===================== 2. BASE ===================== */
html, body { background: var(--canvas); color: var(--ink-2); }
body { font-family: var(--fonte); font-size: 14px; line-height: 1.45; }
h1, h2, h3, h4, b, strong { color: var(--ink); }
h1 { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; }
h2 { font-size: 16px; font-weight: 600; line-height: 23px; margin: 0; }
h3 { font-size: 14px; font-weight: 600; margin: 0; }
a { color: var(--brand); text-decoration: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: color-mix(in srgb, var(--brand) 25%, #fff); }
* { scrollbar-width: thin; scrollbar-color: #d7d8dd transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #d7d8dd; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Utilidades de texto */
.muted   { color: var(--ink-3) !important; }
.suave   { color: var(--ink-2) !important; }
.text-brand { color: var(--brand) !important; }
.bg-brand   { background: var(--brand) !important; color: var(--brand-contrast) !important; }
.bg-surface-2 { background: var(--canvas) !important; }
.overline { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.sec-titulo { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.sec-titulo::before { content: none; }
.sec-sub { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* ===================== 3. SKIN QUASAR (claro, Anota) ===================== */
.q-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: none;
  color: var(--ink-2);
}
.q-btn { border-radius: var(--r-sm); font-weight: 700; text-transform: none; letter-spacing: 0; font-family: var(--fonte); }
.q-btn.q-btn--round { border-radius: 50%; }
.q-btn--outline .q-btn__content { font-weight: 600; }
.q-btn-group, .q-btn-toggle { border-radius: var(--r-sm); overflow: hidden; }
.q-btn.bg-primary, .q-btn.bg-brand { color: var(--brand-contrast) !important; }

.q-field { font-family: var(--fonte); }
.q-field--outlined .q-field__control { border-radius: var(--r-xs) !important; background: var(--paper); }
.q-field--outlined .q-field__control:before { border-color: #a7a7a7; }
.q-field--outlined:hover .q-field__control:before { border-color: var(--ink-2); }
.q-field--outlined.q-field--focused .q-field__control:after { border-width: 2px; border-color: var(--brand); }
.q-field--error .q-field__control:after { border-color: #f15c3b; }
.q-field__label, .q-field input::placeholder, .q-field textarea::placeholder { color: var(--ink-3); }

.q-dialog__inner > .q-card { border-radius: var(--r-modal); box-shadow: var(--sombra-modal); border: none; }
.q-dialog__inner--maximized > .q-card { border-radius: 0; }
.q-dialog__inner--bottom > .q-card { border-radius: var(--r-modal) var(--r-modal) 0 0; }
.q-dialog__backdrop { background: rgba(0,0,0,.70); }

.q-tab { text-transform: none; font-weight: 600; font-family: var(--fonte); color: var(--ink); }
.q-tab--active { color: var(--brand) !important; font-weight: 700; }
.q-tab__indicator { background: var(--brand) !important; height: 3px; border-radius: 3px; }

.q-chip { font-size: 12px; font-weight: 600; font-family: var(--fonte); }
.q-banner { border-radius: var(--r-sm); }
.q-menu { border-radius: var(--r-sm); box-shadow: var(--sombra-2); border: 1px solid var(--line); }
.q-notification { border-radius: var(--r-sm); font-family: var(--fonte); }
.q-table { border-radius: var(--r-sm); }
.q-toolbar { font-family: var(--fonte); }
.q-header { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line-2); }
.q-header .q-toolbar__title { font-weight: 700; font-size: 16px; letter-spacing: 0; }
.q-drawer { background: var(--paper); border-right: 1px solid var(--line); color: var(--ink-2); }
.q-separator { background: var(--line); }
.q-tooltip { font-family: var(--fonte); }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ===================== 4. CARDÁPIO PÚBLICO ===================== */

/* --- 4.1 Header fixo da loja (sem capa: fundo na cor da marca) --- */
.loja-topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
  background: var(--brand); transition: background .18s, box-shadow .18s;
}
.loja-topo .conteudo-topo {
  max-width: var(--conteudo-max); margin: 0 auto; height: var(--topo-h);
  padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.loja-topo .perfil { display: flex; align-items: center; gap: 12px; min-width: 0; }
.loja-topo .logo {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid #d4d4d4;
  object-fit: cover; background: #fff; flex: 0 0 auto;
}
.loja-topo .nome {
  font-size: 16px; font-weight: 700; line-height: 18px; color: var(--brand-contrast);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loja-topo .acoes { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.loja-topo .btn-topo {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand); transition: background .18s;
}
/* rolou a página: header vira branco */
.loja-topo.-rolado { background: var(--paper); box-shadow: var(--sombra-scroll); }
.loja-topo.-rolado .nome { color: var(--ink-2); }
.loja-topo.-rolado .btn-topo { background: var(--line); color: var(--ink-2); }

/* --- 4.1b Header com capa (banner) --- */
.loja-capa { height: 160px; background: var(--brand) center/cover no-repeat; }
@media (min-width: 700px) { .loja-capa { height: 220px; } }
.loja-cabecalho-capa {
  max-width: var(--conteudo-max); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: flex-end; gap: 14px;
  position: relative; z-index: 2;   /* logo acima de overlays da capa (ex.: loja fechada) */
}
.loja-cabecalho-capa .logo {
  width: 72px; height: 72px; border-radius: 50%; border: 2px solid #d4d4d4;
  object-fit: cover; background: #fff; margin-top: -36px; flex: 0 0 auto;
}
.loja-cabecalho-capa .nome { font-size: 18px; font-weight: 700; color: var(--ink); padding-bottom: 4px; }

/* --- 4.2 Faixa de infos do estabelecimento --- */
.loja-info {
  background: var(--paper); border-bottom: 1px solid var(--line-2);
  padding: 12px 16px;
}
.loja-info .linha {
  max-width: var(--conteudo-max); margin: 0 auto;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.loja-info .texto { font-size: 14px; font-weight: 600; color: var(--ink); min-width: fit-content; }
.loja-info .texto.-aberto { color: var(--ok); font-weight: 700; }
.loja-info .texto.-fechado { color: var(--danger); font-weight: 700; }
.loja-info .ponto { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.loja-info .btn-perfil {
  margin-left: auto; border: 1.5px solid var(--brand); border-radius: var(--r-pill);
  background: var(--brand-soft); cursor: pointer; padding: 6px 14px;
  font-family: var(--fonte); font-size: 13px; font-weight: 700; color: var(--brand); white-space: nowrap;
  transition: background .15s;
}
.loja-info .btn-perfil:hover { background: var(--brand); color: var(--brand-contrast); }

/* --- 4.3 Busca --- */
.busca-wrap { background: var(--paper); padding: 8px 16px 12px; }
.busca-wrap .inner { max-width: var(--conteudo-max); margin: 0 auto; position: relative; }
.busca-input {
  width: 100%; height: 38px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--canvas); padding: 0 38px; font-family: var(--fonte); font-size: 13px; color: var(--ink);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.busca-input::placeholder { color: var(--ink-3); }
.busca-input:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--paper); }
.busca-wrap .icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.busca-wrap .limpar { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* --- 4.4 Abas de categoria (sticky) --- */
.cat-tabs {
  position: sticky; top: var(--topo-h); z-index: 1500;
  background: #f3f3f3; border-bottom: 1px solid var(--line-2);
}
.cat-tabs .trilho {
  max-width: var(--conteudo-max); margin: 0 auto;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 8px;
}
.cat-tabs .trilho::-webkit-scrollbar { display: none; }
.cat-tab {
  flex: 0 0 auto; border: none; background: none; cursor: pointer; padding: 12px 12px 10px;
  font-family: var(--fonte); font-size: 13px; font-weight: 600; color: var(--ink);
  border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s;
}
.cat-tab.-ativa { color: var(--brand); font-weight: 700; border-bottom-color: var(--brand); }

/* --- 4.5 Destaques ("Os mais pedidos") --- */
.destaques { background: var(--paper); padding: 8px 0 16px; }
.destaques .inner { max-width: var(--conteudo-max); margin: 0 auto; }
.destaques .titulo { font-size: 16px; font-weight: 600; line-height: 23px; color: var(--ink); padding: 16px 16px 8px; }
.destaques .trilho {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 16px 8px;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.destaques .trilho::-webkit-scrollbar { display: none; }
.destaque-item { flex: 0 0 132px; scroll-snap-align: start; cursor: pointer; }
.destaque-item img {
  width: 132px; height: 100px; border-radius: var(--r-xs); object-fit: cover; background: var(--canvas); display: block;
}
.destaque-item .nome {
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.destaque-item .preco { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-top: 2px; }
.destaque-item .preco.-promo { color: var(--brand); }

/* --- 4.6 Lista de produtos por categoria --- */
.categorias-wrap { background: var(--paper); }
.categoria-bloco { max-width: var(--conteudo-max); margin: 0 auto; padding: 16px 16px 24px; scroll-margin-top: calc(var(--topo-h) + 46px); }
.categoria-bloco .titulo { font-size: 16px; font-weight: 600; line-height: 23px; color: var(--ink); }
.categoria-bloco .descricao { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

.item-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0; cursor: pointer; border-bottom: 1px solid var(--line);
}
.item-row:last-child { border-bottom: none; }
.item-row .texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.item-row .nome {
  color: var(--ink-2); font-size: 14px; font-weight: 600; line-height: 16px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.item-row .descricao {
  color: #595959; font-size: 12px; font-weight: 400; line-height: 16px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.item-row .preco { font-size: 14px; font-weight: 700; line-height: 16px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.item-row .preco .antigo { font-size: 12px; font-weight: 400; text-decoration: line-through; color: var(--ink-3); }
.item-row .preco.-promo { color: var(--brand); }
.item-row .preco .a-partir { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.selo-promo {
  color: #f5f5f5; background: var(--brand); border-radius: var(--r-xs);
  padding: 0 4px; font-size: 11px; font-weight: 700; line-height: 16px;
}
.item-row .foto-wrap { position: relative; width: 90px; height: 90px; border-radius: var(--r-xs); flex: 0 0 auto; }
.item-row .foto { width: 90px; height: 90px; border-radius: var(--r-xs); object-fit: cover; background: var(--canvas); display: block; }
.item-row .foto-vazia {
  width: 90px; height: 90px; border-radius: var(--r-xs); background: var(--canvas);
  display: flex; align-items: center; justify-content: center; color: var(--ink-3);
}
.item-row.-esgotado { cursor: default; }
.item-row.-esgotado .foto { filter: grayscale(1); }
.item-row.-esgotado .nome, .item-row.-esgotado .preco { color: var(--ink-3); }
.item-row .tag-falta {
  position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 var(--r-xs) var(--r-xs);
  background: rgba(43,43,43,.85); color: #fff; font-size: 10px; font-weight: 700;
  text-align: center; padding: 3px 2px;
}

/* --- 4.7 Selos / badges --- */
.selo {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 8px; border-radius: var(--r-xs); font-size: 10px; font-weight: 700; line-height: normal;
}
.selo-aberto   { background: var(--ok-soft); color: var(--ok-dark); }
.selo-fechado  { background: var(--danger-strong); color: #fff; }
.selo-destaque { background: var(--warn-soft); color: #8a5b00; }
.selo-novo     { background: var(--brand-soft); color: var(--brand); }
.selo-falta    { background: var(--line); color: var(--ink-2); }
.selo-teste    { background: var(--info-soft); color: #0e5287; }
.selo-obrigatorio { background: var(--ink); color: #fff; letter-spacing: .04em; }
.selo-opcional    { background: var(--line); color: var(--ink-2); letter-spacing: .04em; }

/* --- 4.8 Grupo de complementos (modal de produto) --- */
.grp-cabec {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--canvas); padding: 12px 16px; margin: 0 -16px;
}
.grp-cabec .nome { font-weight: 700; font-size: 14px; color: var(--ink); }
.grp-cabec .regra { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.opcao-lin {
  display: flex; align-items: center; gap: 10px; padding: 14px 0;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.opcao-lin:last-child { border-bottom: none; }
.opcao-lin .nome { font-size: 14px; font-weight: 500; color: var(--ink); }
.opcao-lin .extra { font-size: 13px; font-weight: 700; color: var(--ink-2); flex: 0 0 auto; }
.opcao-lin.-esgotada { opacity: .5; cursor: default; }

/* --- 4.9 Stepper de quantidade --- */
.qtd-ctl {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper);
}
.qtd-ctl span { min-width: 32px; text-align: center; font-weight: 700; color: var(--ink); }
.qtd-ctl .q-btn { color: var(--brand); }
.qtd-ctl .q-btn.disabled { color: var(--ink-3); }

/* --- 4.10 Navegação inferior + carrinho --- */
.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2400;
  background: var(--paper); border-top: 2px solid var(--line);
  box-shadow: 0 -15px 45px rgba(10,10,10,.10);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-inferior .conteudo-nav {
  max-width: var(--conteudo-max); margin: 0 auto; height: var(--nav-h);
  padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.nav-item {
  position: relative; width: 64px; height: 100%; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-top: 2px solid transparent; margin-top: -2px; color: var(--ink-3);
  font-family: var(--fonte);
}
.nav-item .rotulo { font-size: 10px; font-weight: 500; color: inherit; }
.nav-item.-ativo { border-top-color: var(--brand); color: var(--brand); }
.nav-item .cont {
  position: absolute; top: 6px; right: 10px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--brand-badge); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.nav-cart-btn {
  height: 40px; padding: 0 18px; border: none; border-radius: var(--r-sm); cursor: pointer;
  background: var(--brand); color: var(--brand-contrast);
  font-family: var(--fonte); font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px; transition: background .18s;
}
.nav-cart-btn:hover { background: var(--brand-hover); }
.nav-cart-btn:active { background: var(--brand-active); }

/* Barra de carrinho cheia (páginas internas) */
.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2500;
  background: var(--brand); color: var(--brand-contrast); padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.14);
}
.cart-bar .q-btn { background: rgba(255,255,255,.18); color: var(--brand-contrast); }

/* --- 4.11 Rodapé "por UaiPedidos" --- */
.rodape-cardapio {
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
  padding: 20px 16px calc(var(--nav-h) + 28px); margin: 0 16px; border-top: 1px solid var(--line-2);
  background: var(--paper); font-size: 12px; color: var(--ink-2);
}

/* --- 4.12 Conteúdo central de páginas internas --- */
.conteudo { max-width: 720px; margin: 0 auto; padding: 16px; padding-bottom: 120px; }

/* ===================== 5. COMPONENTES DE APOIO ===================== */

/* Chips de status de pedido (tints claros) */
.chip-st {
  font-size: 11px; font-weight: 700; border-radius: var(--r-pill); padding: 4px 10px;
  display: inline-flex; align-items: center; gap: 4px; line-height: 1.2;
}
.chip-ok     { background: var(--ok-soft);     color: var(--ok-dark); }
.chip-warn   { background: var(--warn-soft);   color: #8a5b00; }
.chip-info   { background: var(--info-soft);   color: #0e5287; }
.chip-err    { background: var(--danger-soft); color: var(--danger); }
.chip-brand  { background: var(--brand-soft);  color: var(--brand); }
.chip-neutro { background: var(--line);        color: var(--ink-2); }

/* Pílulas de filtro */
.chip-f {
  appearance: none; border: 1px solid var(--line-2); background: var(--paper);
  color: var(--ink-2); font-family: var(--fonte); font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.chip-f:hover { border-color: var(--brand); color: var(--brand); }
.chip-f.ativo { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.chip-f.mini { font-size: 11.5px; padding: 4px 11px; }

/* KPI (dashboards) */
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; }
.kpi .kpi-label { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.kpi .kpi-value { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.1; margin-top: 4px; }
.kpi .kpi-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* Estado vazio */
.vazio {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; color: var(--ink-3); padding: 44px 20px;
}
.vazio .vz-t { font-weight: 700; font-size: 15px; color: var(--ink); }
.vazio .vz-s { font-size: 13px; max-width: 300px; line-height: 1.5; color: var(--ink-2); }

/* Toast */
.toast-uai {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 24px); transform: translateX(-50%);
  z-index: 9000; color: #fff; padding: 11px 20px; border-radius: var(--r-sm);
  font-weight: 600; font-size: 13px; box-shadow: var(--sombra-2);
  max-width: 92vw; text-align: center;
}

/* Skeleton (carregando) */
.skel { position: relative; overflow: hidden; background: var(--line); border-radius: var(--r-xs); }
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: skel-shimmer 1.3s infinite;
}
@keyframes skel-shimmer { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }

/* Passos (checkout / assistentes) */
.passos { display: flex; gap: 6px; margin-bottom: 18px; }
.passos .p { flex: 1; height: 4px; border-radius: 4px; background: var(--line-2); }
.passos .p.on { background: var(--brand); }

/* Cartão de opção selecionável (pagamento, entrega, método de import) */
.pag-card {
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: 14px; cursor: pointer;
  display: flex; gap: 12px; align-items: center; background: var(--paper);
  transition: border-color .15s, background .15s;
}
.pag-card:hover { border-color: var(--ink-3); }
.pag-card.sel { border-color: var(--brand); background: var(--brand-soft); }

/* Caixa PIX */
.pix-box {
  background: var(--canvas); border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  padding: 12px; font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; color: var(--ink-2);
}

/* Timeline */
.timeline-uai { position: relative; padding-left: 26px; }
.timeline-uai::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line-2); }
.tl-item { position: relative; padding-bottom: 16px; }
.tl-item::before {
  content: ''; position: absolute; left: -24px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--brand);
}

/* Linhas de formulário */
.form-col { display: flex; flex-direction: column; gap: 14px; }
.form-lin { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.form-lin > * { min-width: 0; }

/* Fundo de telas de login */
.auth-bg {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center; padding: 28px 16px;
  background: radial-gradient(1100px 460px at 50% -10%, var(--brand-soft), transparent), var(--canvas);
}
.auth-card { width: 100%; max-width: 420px; }

/* ===================== 6. PAINEL / ADMIN (skin claro sobre painel.css) =====================
   Carregado DEPOIS de painel.css com <html class="tema-claro"> fixo:
   converte o chrome dark+dourado para o sistema claro Anota. */
html.tema-claro {
  --g-preto:   var(--canvas);
  --g-ouro:    var(--brand);
  --surface:   var(--paper);
  --surface-2: var(--canvas);
  --borda:       var(--line);
  --borda-forte: color-mix(in srgb, var(--brand) 40%, #fff);
  --texto:       var(--ink);
  --texto-suave: var(--ink-2);
  --radius: var(--r-sm);
}
html.tema-claro body { background: var(--canvas); color: var(--ink-2); font-family: var(--fonte); }
html.tema-claro .q-drawer { background: var(--paper) !important; }
html.tema-claro .drawer-top .logo-nome b { color: var(--brand); }
html.tema-claro .drawer-nav .nav-header { color: var(--ink-3) !important; }
html.tema-claro .item-nav { border-radius: var(--r-sm); margin: 2px 10px; min-height: 42px; color: var(--ink-2); font-weight: 500; }
html.tema-claro .item-nav .q-icon { color: var(--ink-3); }
html.tema-claro .item-nav:hover { background: var(--canvas); }
html.tema-claro .item-nav.ativo { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
html.tema-claro .item-nav.ativo .q-icon { color: var(--brand); }
html.tema-claro .sec-titulo { font-size: 18px; }
html.tema-claro .sec-titulo::before { content: none; }
html.tema-claro .card-cfg { border-radius: var(--r-sm); border-color: var(--line); }
html.tema-claro .q-card { border-radius: var(--r-sm); }
html.tema-claro .q-btn { border-radius: var(--r-sm); }
html.tema-claro .q-btn.bg-ouro { background: var(--brand) !important; color: var(--brand-contrast) !important; }
html.tema-claro .text-ouro { color: var(--brand) !important; }
html.tema-claro .q-tab--active { color: var(--brand) !important; }
html.tema-claro .q-tab__indicator { background: var(--brand) !important; }
html.tema-claro .chip-ok     { background: var(--ok-soft);     color: var(--ok-dark); }
html.tema-claro .chip-warn   { background: var(--warn-soft);   color: #8a5b00; }
html.tema-claro .chip-info   { background: var(--info-soft);   color: #0e5287; }
html.tema-claro .chip-err    { background: var(--danger-soft); color: var(--danger); }
html.tema-claro .chip-neutro { background: var(--line);        color: var(--ink-2); }
html.tema-claro .chip-falta  { background: var(--warn-soft);   color: #8a5b00; }
html.tema-claro .kpi { border-radius: var(--r-sm); }
html.tema-claro .kpi .kpi-value { font-weight: 700; }
html.tema-claro .login-bg {
  background: radial-gradient(1100px 460px at 50% -10%, var(--brand-soft), transparent), var(--canvas);
}
html.tema-claro .seg-opt.ativo { color: var(--brand-contrast); }
html.tema-claro .chip-f.ativo { color: var(--brand-contrast); }
html.tema-claro .toast-uai { border: none; bottom: 26px; }
html.tema-claro .conv-filtro.on { color: #fff; }

/* ===================== 7. ASSISTENTE DE IMPORTAÇÃO ===================== */
.imp-drop {
  border: 2px dashed var(--line-2); border-radius: var(--r-md); background: var(--canvas);
  padding: 28px 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.imp-drop:hover, .imp-drop.-sobre { border-color: var(--brand); background: var(--brand-soft); }
.imp-foto { position: relative; width: 84px; height: 84px; border-radius: var(--r-xs); overflow: hidden; flex: 0 0 auto; }
.imp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imp-foto .st {
  position: absolute; inset: auto 0 0 0; font-size: 9px; font-weight: 700; text-align: center;
  color: #fff; padding: 2px; background: rgba(43,43,43,.75);
}
.imp-foto .st.-ok { background: var(--ok); }
.imp-foto .st.-erro { background: var(--danger); }
.imp-prev-cat { margin-bottom: 14px; }
.imp-prev-cat > .cab {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--canvas); border-radius: var(--r-sm); font-weight: 700; color: var(--ink); font-size: 14px;
}
.imp-prev-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.imp-prev-item:last-child { border-bottom: none; }
.imp-prev-item .foto { width: 44px; height: 44px; border-radius: var(--r-xs); object-fit: cover; background: var(--canvas); flex: 0 0 auto; }
.imp-prev-item .nm { font-weight: 600; color: var(--ink); }
.imp-prev-item .ds { font-size: 12px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.imp-prev-item .pr { font-weight: 700; color: var(--ink); flex: 0 0 auto; }

/* ===================== 8. RESPONSIVO ===================== */
@media (max-width: 600px) {
  .item-row .foto-wrap, .item-row .foto, .item-row .foto-vazia { width: 78px; height: 78px; }
  .kpi .kpi-value { font-size: 22px; }
  .loja-capa { height: 130px; }
}