/* =====================================================================
   diMacedo Expresso — "Café, Laranja & Champanhe"
   Design system: design-system/lanchonete-expresso/pages/app.md
   Café (marrom) para estrutura · Laranja para ação · Champanhe (metal do escudo) para valor/seleção
   Títulos em serifa (Fraunces), como o "diMacedo" da logo; UI em Outfit; texto em Rubik
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&family=Outfit:wght@400;500;600;700;800&family=Rubik:wght@400;500;600;700&display=swap');

:root {
  /* Superfícies */
  --bg: #FAF5EF;
  --surface: #FFFFFF;
  --surface-2: #FDF9F4;
  --surface-3: #F3EADF;
  --border: #ECE1D4;
  --border-strong: #DAC8B4;
  --text: #2A160C;
  --muted: #6F5544;
  --subtle: #9A806D;

  /* Café (estrutura escura: menus, comanda, herói) */
  --ink: #2A160C;
  --ink-2: #381F12;
  --ink-3: #4A2918;
  --ink-line: rgba(255, 236, 214, .10);
  --on-ink: #FBF3EA;
  --on-ink-muted: #CDB6A1;

  /* Marca */
  --primary: #BA540A;
  --primary-hover: #9C4508;
  --primary-soft: #FFF1E3;
  --primary-line: #F8D3AE;
  --on-primary: #FFFFFF;
  --gold: #E6CFB3;          /* champanhe (metal do escudo) sobre fundo escuro */
  --gold-soft: rgba(230, 207, 179, .14);
  --accent: #9C4508;        /* laranja queimado legível sobre fundo claro */
  --accent-soft: #FFF1E3;
  --success: #15803D;
  --success-soft: #E9F8EF;

  --cat-salgado-a: #FFF3E4; --cat-salgado-b: #FCDDB9; --cat-salgado-fg: #9C4508;
  --cat-bebida-a:  #F6EDE4; --cat-bebida-b:  #E9D6C3; --cat-bebida-fg:  #5A3420;
  --cat-doce-a:    #FBEDE8; --cat-doce-b:    #F3D2C7; --cat-doce-fg:    #8E3B2E;
  --cat-outro-a:   #F3EFEA; --cat-outro-b:   #E3DAD0; --cat-outro-fg:   #4E3B30;

  /* Tipografia */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;   /* títulos: mesma família visual do "diMacedo" */
  --font-body: 'Rubik', system-ui, sans-serif;

  /* Forma */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --shadow-xs: 0 1px 2px rgba(42, 22, 12, .05);
  --shadow-sm: 0 1px 2px rgba(42, 22, 12, .04), 0 2px 8px -2px rgba(42, 22, 12, .06);
  --shadow: 0 2px 4px rgba(42, 22, 12, .04), 0 12px 28px -10px rgba(42, 22, 12, .14);
  --shadow-lg: 0 30px 60px -20px rgba(42, 22, 12, .35), 0 8px 20px -8px rgba(42, 22, 12, .15);
  --ring: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary);

  /* Movimento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 140ms;
  --t: 220ms;
  --t-slow: 420ms;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #130B07;
    --surface: #1D120C;
    --surface-2: #231610;
    --surface-3: #2E1E15;
    --border: #38261B;
    --border-strong: #4E3627;
    --text: #FBF3EA;
    --muted: #C7B09C;
    --subtle: #9C8572;
    --ink: #0D0704;
    --ink-2: #180F0A;
    --ink-3: #2A1B12;
    --primary: #C85D0C;
    --primary-hover: #DA6A12;
    --primary-soft: #2E1A0C;
    --primary-line: #5A2E10;
    --accent: #F2A65A;
    --accent-soft: #33200F;
    --success: #22C55E;
    --success-soft: #0F2418;
    --cat-salgado-a: #34200F; --cat-salgado-b: #452A13; --cat-salgado-fg: #F8B26A;
    --cat-bebida-a:  #2C1D14; --cat-bebida-b:  #3B281C; --cat-bebida-fg:  #E6CFB3;
    --cat-doce-a:    #2E1915; --cat-doce-b:    #3E211B; --cat-doce-fg:    #F2B4A3;
    --cat-outro-a:   #241C17; --cat-outro-b:   #322720; --cat-outro-fg:   #D8C8BA;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 12px 28px -10px rgba(0,0,0,.6);
    --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.5;
  color: var(--text); background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-serif); font-optical-sizing: auto; margin: 0; line-height: 1.1; letter-spacing: -.015em; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button, a, label, select, [role="tab"], [role="radio"] { cursor: pointer; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
[data-icon] { display: inline-grid; place-items: center; }
:focus-visible { outline: none; box-shadow: var(--ring); }
::selection { background: var(--gold); color: var(--ink); }
kbd {
  font-family: var(--font-display); font-size: 11px; font-weight: 600; line-height: 1;
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 6px; border: 1px solid currentColor; opacity: .6;
}

/* ---------- Botões ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease),
              transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), opacity var(--t);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  color: var(--on-primary);
  background: linear-gradient(180deg, #D0620F 0%, var(--primary) 55%, #A84B08 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(90,40,8,.4), 0 8px 20px -8px rgba(232,116,15,.6);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #C0570B 0%, var(--primary-hover) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(90,40,8,.4), 0 12px 26px -8px rgba(232,116,15,.7); }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover:not(:disabled) { background: var(--ink-3); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-xs); }
.btn-ghost:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-2); }
.btn-quiet { background: transparent; color: var(--muted); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.btn-lg { min-height: 60px; font-size: 18px; border-radius: 16px; padding: 0 24px; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn-sm .icon { width: 16px; height: 16px; }
.btn-block { width: 100%; }
.btn-perigo { color: var(--primary); }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  transition: background-color var(--t) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t);
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.icon-btn:active { transform: scale(.94); }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Formulários ---------- */
.field { display: grid; gap: 7px; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > [data-icon] { position: absolute; left: 15px; color: var(--subtle); pointer-events: none; z-index: 1; transition: color var(--t); }
.input-wrap:focus-within > [data-icon] { color: var(--primary); }
.input {
  width: 100%; min-height: 52px; padding: 0 14px 0 46px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); font-size: 16px;
  box-shadow: var(--shadow-xs), inset 0 1px 2px rgba(28,25,23,.03);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t);
}
.input:hover { border-color: var(--border-strong); }
.input::placeholder { color: var(--subtle); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.input.sem-ico { padding-left: 14px; min-height: 46px; border-radius: 12px; }
select.input { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238F857B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.input-wrap .toggle-pass { position: absolute; right: 5px; width: 42px; height: 42px; border: 0; background: transparent; display: grid; place-items: center; color: var(--subtle); border-radius: 10px; transition: color var(--t), background-color var(--t); }
.input-wrap .toggle-pass:hover { color: var(--text); background: var(--surface-3); }
.form-error {
  display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px;
  background: var(--primary-soft); color: var(--primary-hover); border: 1px solid var(--primary-line);
  font-weight: 500; font-size: 14px; animation: shake .4s var(--ease);
}
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* ---------- Marca diMacedo Expresso ---------- */
/* Assinatura: escudo (ícone) + "diMacedo" em serifa com "di" laranja + EXPRESSO espaçado */
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.escudo { width: var(--escudo, 44px); height: var(--escudo, 44px); flex: none; display: block; object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.marca-txt { display: grid; line-height: 1; min-width: 0; }
.marca-nome { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 800; font-size: var(--marca-fs, 22px); letter-spacing: -.02em; color: inherit; white-space: nowrap; }
.marca-nome i { font-style: normal; color: #EF7A1A; }
.marca-sub { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-family: var(--font-display); font-weight: 600; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--on-ink-muted); white-space: nowrap; }
.marca-sub b { font-weight: 600; color: var(--gold); letter-spacing: .26em; }
.marca-sub::before { content: ''; width: 14px; height: 2px; border-radius: 2px; background: #EF7A1A; }
/* Logo completa (xícara), com fundo transparente — usar sobre fundo claro */
.logo-completa { display: block; height: var(--logo-h, 120px); width: auto; }

/* ---------- Avatar / chips ---------- */
.avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  background: linear-gradient(135deg, #F6E8D6, #C9A98A); color: #2A160C;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 2px var(--ink-line);
}
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.chip .icon { width: 14px; height: 14px; }
.chip.ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.chip.off { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.chip.gold { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* ---------- Ícones de produto ---------- */
.p-ico { display: grid; place-items: center; border-radius: 14px; position: relative; overflow: hidden; }
.p-foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
  transition: transform var(--t-slow) var(--ease);
}
.p-ico:has(.p-foto) { background: var(--surface-3); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.cat-salgado { background: linear-gradient(145deg, var(--cat-salgado-a), var(--cat-salgado-b)); color: var(--cat-salgado-fg); }
.cat-bebida  { background: linear-gradient(145deg, var(--cat-bebida-a),  var(--cat-bebida-b));  color: var(--cat-bebida-fg); }
.cat-doce    { background: linear-gradient(145deg, var(--cat-doce-a),    var(--cat-doce-b));    color: var(--cat-doce-fg); }
.cat-outro   { background: linear-gradient(145deg, var(--cat-outro-a),   var(--cat-outro-b));   color: var(--cat-outro-fg); }

/* ---------- Toast ---------- */
.toast-area { position: fixed; z-index: 1000; left: 50%; top: 16px; transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 92%, transparent); color: var(--on-ink);
  backdrop-filter: blur(12px); border: 1px solid var(--ink-line);
  box-shadow: var(--shadow-lg); font-weight: 500; font-size: 15px;
  animation: toast-in var(--t-slow) var(--ease-spring) both;
}
.toast.success .toast-ico { background: var(--success); }
.toast.error .toast-ico { background: var(--primary); }
.toast-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.toast-ico .icon { width: 16px; height: 16px; stroke-width: 3; }
.toast.leaving { animation: toast-out var(--t) var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.95); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* ---------- Faixa demo ---------- */
.demo-flag {
  position: fixed; z-index: 999; left: 50%; top: 8px; transform: translateX(-50%); opacity: .92; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; background: var(--gold); color: #2A160C;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: var(--shadow); text-decoration: none;
}

/* =====================================================================
   MOVIMENTO (CSS) — hover, clique, carregamento e transições de página.
   O que depende de lógica (contadores, scroll, modais, indicadores)
   fica em js/movimento.js (biblioteca Motion).
   ===================================================================== */
:root {
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-in-cubic: cubic-bezier(.32, 0, .67, 0);
}

/* Transição entre páginas (login → caixa → painel) e entre menus */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-sai 160ms var(--ease-in-cubic) both; }
::view-transition-new(root) { animation: vt-entra 320ms var(--ease-out-quint) both; }
@keyframes vt-sai { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(8px); } }

/* Barra de carregamento no topo (estilo Linear) */
.barra-carga {
  position: fixed; z-index: 2000; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--primary) 70%, transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
  opacity: 0; transform-origin: left; transition: opacity 200ms linear;
}
.barra-carga.ativa { opacity: 1; animation: carga 1.1s var(--ease-in-out-cubic) infinite; }
.barra-carga.fim { animation: none; background: linear-gradient(90deg, var(--gold), var(--primary)); transform: scaleX(1); opacity: 0; transition: opacity 300ms 80ms linear; }
@keyframes carga { from { background-position: -60% 0; } to { background-position: 160% 0; } }

/* Microinterações: todo clicável responde ao toque */
.btn, .icon-btn, .tab, .pag, .chip, .nav a, .tabbar a, .switch, .ck-btn, .tb-btn, .side-icon { will-change: auto; }
.btn:active:not(:disabled), .tab:active, .nav a:active, .tabbar a:active, .ck-btn:active:not(:disabled), .side-icon:active { transform: scale(.97); transition-duration: 90ms; }
.btn .icon { transition: transform 220ms var(--ease-out-quint); }
.btn:hover:not(:disabled) .icon { transform: translateX(0) scale(1.06); }
.icon-btn .icon, .tb-btn .icon { transition: transform 220ms var(--ease-out-quint); }
.icon-btn:hover .icon, .tb-btn:hover .icon { transform: scale(1.08); }

/* Botão primário: brilho sutil ao passar o mouse */
.btn-primary { overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-100%); transition: transform 650ms var(--ease-out-quint);
}
.btn-primary:hover:not(:disabled)::after { transform: translateX(100%); }

/* Estado de sucesso em botões (formulários) */
.btn.ok { background: var(--success) !important; box-shadow: 0 8px 20px -8px rgba(21,128,61,.6) !important; color: #fff; }

/* Modais: fundo com fade (abertura/fechamento ficam no Motion) */
dialog::backdrop { transition: opacity 180ms linear; }
dialog.saindo::backdrop { opacity: 0; }

/* Esqueleto para números enquanto carregam */
body.carregando .num-load { color: transparent !important; border-radius: 8px; background: linear-gradient(100deg, var(--surface-3) 30%, var(--surface-2) 50%, var(--surface-3) 70%); background-size: 300% 100%; animation: shimmer-base 1.3s linear infinite; }
@keyframes shimmer-base { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Campo validado */
.input-wrap .ok-ico { position: absolute; right: 14px; color: var(--success); opacity: 0; transform: scale(.6); transition: opacity 200ms, transform 300ms var(--ease-spring); pointer-events: none; }
.input-wrap.valido .ok-ico { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .btn-primary::after { display: none; }
}