/* =========================================================
   Brasa New — o visual da Mix Gourmet sobre as funções da First

   Carregado DEPOIS do style.css (e do <style> de cada página), em
   todas as telas: painel, PDV, loja, cadastro, entregador e rastreio.
   A First é toda feita de variáveis; aqui elas recebem a paleta da
   Mix (carvão, brasa, gordura dourada, osso) e as fontes dela
   (Big Shoulders Display nos títulos, Instrument Sans no texto).
   O que a First pintava com cor escrita na unha é corrigido no fim.

   A Mix só tem o escuro: os dois temas da First caem nele.
   ========================================================= */

@font-face { font-family: 'Big Shoulders Display'; font-weight: 700; font-display: swap; src: url('/brasa/static/mixgourmet/fonts/big-shoulders-display-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Big Shoulders Display'; font-weight: 800; font-display: swap; src: url('/brasa/static/mixgourmet/fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Big Shoulders Display'; font-weight: 900; font-display: swap; src: url('/brasa/static/mixgourmet/fonts/big-shoulders-display-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-display: swap; src: url('/brasa/static/mixgourmet/fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 500; font-display: swap; src: url('/brasa/static/mixgourmet/fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; font-display: swap; src: url('/brasa/static/mixgourmet/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 700; font-display: swap; src: url('/brasa/static/mixgourmet/fonts/instrument-sans-latin-700-normal.woff2') format('woff2'); }

:root, [data-theme="light"], [data-theme="dark"] {
  /* a paleta da Mix */
  --char: #17110d;  --char-2: #211812;  --char-3: #2e231b;  --line: #3b2e24;
  --bone: #efe4d2;  --bone-2: #c4b49e;  --bone-3: #8f7f6c;
  --gold: #e3a646;  --gold-ink: #241606;  --ember: #d4552a;
  --good: #6fb37a;  --bad: #e0614a;  --info: #7fa7c9;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;

  /* as variáveis da First, apontadas para ela */
  --bg-0: var(--char);
  --bg-1: var(--char-2);
  --bg-2: #271d16;
  --bg-3: var(--char-3);
  --bg-4: var(--line);

  --primary: var(--gold);
  --primary-light: #f0b65a;
  --primary-dark: #c98d32;

  --text-1: var(--bone);
  --text-2: var(--bone-2);
  --text-3: var(--bone-3);
  --text-4: #6f6152;
  --text-5: #4a3d32;

  --border-1: var(--line);
  --border-2: #4a3a2e;
  --border-focus: var(--gold);

  --accent-blue: var(--info);
  --accent-green: var(--good);
  --accent-red: var(--bad);
  --accent-amber: var(--gold);

  --brand-1: var(--ember);
  --brand-2: #7a2708;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-lg: 0 18px 40px -18px rgba(0,0,0,.7);

  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

html, body { background: var(--char); color: var(--bone); }
::selection { background: var(--gold); color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::-webkit-scrollbar-thumb { background: var(--line); }

/* a Mix não tem claro: some o botão de tema */
#btnTheme { display: none !important; }

/* ── títulos na fonte da Mix ── */
.page-title, .page-head h1, .section-title, .card-head h3, .card-title, .modal-head h2,
.auth-title, .auth-brand-copy h2, .sidebar-logo-text, .kpi-value, .total-big strong,
.alert-top h2, .alert-total, .empty strong, .pricing-suggest .value, .donut-center b {
  font-family: var(--display); font-weight: 800; letter-spacing: .005em; line-height: 1;
}
.page-title, .page-head h1 { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.card-head h3, .card-title { font-size: 1.45rem; }
.modal-head h2 { font-size: 1.9rem; }
.kpi-value { font-size: 2.2rem; font-variant-numeric: tabular-nums; }
.sidebar-logo-text { font-weight: 900; font-size: 1.55rem; }
.section-title { font-size: 1.35rem; text-transform: none; color: var(--bone); }

/* ── botões: pílula, o dourado é o destaque ── */
.btn { border-radius: 999px; font-weight: 600; background: transparent; border-color: var(--line); color: var(--bone); }
.btn:hover { background: rgba(239,228,210,.04); border-color: var(--bone-3); }
.btn-primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 700; }
.btn-primary:hover { background: #f0b65a; border-color: #f0b65a; color: var(--gold-ink); }
.btn-ghost { border-color: transparent; color: var(--bone-2); }
.btn-ghost:hover { background: var(--char-3); color: var(--bone); }
.btn-danger { background: transparent; color: var(--bad); border-color: rgba(224,97,74,.45); }
.btn-danger:hover { background: rgba(224,97,74,.12); color: var(--bad); border-color: var(--bad); }
.btn-lg { border-radius: 999px; }
.icon-btn { border-radius: 50%; color: var(--bone-2); }
.icon-btn:hover { background: var(--char-3); color: var(--bone); }

/* ── menu lateral: o da Mix, com a barra dourada no item ativo ── */
.sidebar { background: var(--char-2); border-right: 1px solid var(--line); }
.sidebar-group { color: var(--bone-3); letter-spacing: .08em; }
.sidebar-item { color: var(--bone-2); border-radius: var(--radius-sm); }
.sidebar-item:hover { background: var(--char-3); color: var(--bone); }
.sidebar-item.active { background: var(--char-3); color: var(--bone); box-shadow: inset 3px 0 0 var(--gold); }
.sidebar-item.active .si-ic { color: var(--gold); }
.si-conta { background: var(--gold) !important; color: var(--gold-ink) !important; }
.logo-mark { background: radial-gradient(circle at 50% 80%, var(--ember), var(--gold) 75%); border-radius: 50%; }
.logo-mark.has-logo { border-radius: var(--radius-sm); background-color: var(--char-3); }

/* ── topo: a linha de brasa da Mix ── */
.header { background: rgba(23,17,13,.88); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(59,46,36,.6); position: relative; }
.header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ember) 25%, var(--gold) 50%, var(--ember) 75%, transparent); opacity: .65;
}
.header-title { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: .01em; }

/* ── blocos ── */
.card, .kpi, .table-wrap, .modal, .pdv-right, .register-bar, .pricing, .customer-slot {
  background: var(--char-2); border-color: var(--line);
}
.card, .table-wrap, .kpi { border-radius: var(--radius-lg); box-shadow: none; }
.kpi:hover { border-color: var(--bone-3); }
.kpi-label { color: var(--bone-2); }
.kpi.green .kpi-value { color: var(--good); }
.kpi.red .kpi-value { color: var(--bad); }
thead th { background: var(--char-2); color: var(--bone-3); border-color: var(--line); }
tbody td { border-color: var(--line); }
tbody tr.clickable:hover td { background: rgba(239,228,210,.03); }

/* campos */
input[type=text], input[type=number], input[type=password], input[type=email], input[type=date],
input[type=search], input[type=tel], input[type=time], input[type=datetime-local], select, textarea, .form-input {
  background: var(--char); border-color: var(--line); color: var(--bone); border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus, .form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227,166,70,.15); }
input::placeholder, textarea::placeholder { color: var(--bone-3); }
input[type=checkbox], input[type=radio] { accent-color: var(--gold); }
.form-label, .field > span { color: var(--bone-2); }

/* pílulas de filtro, como as da Mix */
.chip { background: var(--char); border-color: var(--line); color: var(--bone-2); border-radius: 999px; }
.chip:hover { border-color: var(--bone-3); color: var(--bone); }
.chip.on, .chip.active { background: var(--bone); color: var(--char); border-color: var(--bone); }

/* etiquetas */
.badge { border-radius: 999px; background: var(--char-3); color: var(--bone-2); }
.badge.green { background: rgba(111,179,122,.14); color: var(--good); }
.badge.red { background: rgba(224,97,74,.14); color: var(--bad); }
.badge.blue { background: rgba(127,167,201,.14); color: var(--info); }
.badge.gold { background: rgba(227,166,70,.15); color: var(--gold); }
.badge.ember { background: rgba(212,85,42,.16); color: var(--ember); }

/* modal e avisos */
.overlay { background: rgba(10,7,5,.72); backdrop-filter: blur(3px); }
.modal { border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.modal-head, .modal-foot { border-color: var(--line); }
.toast { background: var(--bone); color: var(--char); border-radius: var(--radius-lg); font-weight: 600; }
.toast.err { background: var(--bad); color: #fff; }
.toast.ok { background: var(--bone); color: var(--char); }
.alert-modal { border-radius: var(--radius-xl); border-color: var(--ember); background: var(--char-2); }
.alert-top { background: linear-gradient(135deg, var(--ember), #7a2708); }

/* gráficos e barras */
.bar-fill, .spark-col.on { background: var(--gold); }
.bar-fill.cold { background: var(--line); }
.bar-track { background: var(--char-3); }
.margin-meter { background: var(--char-3); }

/* ── login: o painel de brasa da Mix ── */
.auth-screen { background: radial-gradient(ellipse at 50% 120%, rgba(212,85,42,.25), transparent 60%), var(--char); }
.auth-split { background: var(--char-2); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.auth-brand {
  background: linear-gradient(180deg, rgba(23,17,13,.15), rgba(23,17,13,.85)),
              url('/brasa/static/mixgourmet/media/hero.jpg') center / cover no-repeat;
}
.auth-brand-copy h2 { font-size: 2.6rem; font-weight: 900; }
.auth-form { background: var(--char-2); }
.auth-title { font-size: 2.4rem; }
.auth-subtitle { color: var(--bone-2); }

/* ── frente de caixa ── */
.pdv-left { background: var(--char); }
.pdv-right { border-left: 1px solid var(--line); }
.scan-box input { background: var(--char-2); border-color: var(--line); border-radius: 999px; }
.scan-box input:focus { border-color: var(--gold); }
.scan-hint kbd { background: var(--char-3); border-color: var(--line); color: var(--bone-2); }
.suggest { background: var(--char-2); border-color: var(--line); }
.suggest-item:hover, .suggest-item.on { background: var(--char-3); }
.suggest-item .s-price, .cart-total { color: var(--gold); font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.cart-item { border-color: var(--line); }
.cart-item:hover { background: rgba(239,228,210,.03); }
.cart-name { font-weight: 600; }
.qty-btn { background: var(--char-3); border-color: var(--line); border-radius: 50%; }
.total-big strong { font-size: 2.6rem; color: var(--bone); }
.pay-btn { background: var(--char); border-color: var(--line); border-radius: var(--radius-lg); color: var(--bone-2); }
.pay-btn.on { background: rgba(227,166,70,.12); border-color: var(--gold); color: var(--bone); }
.btn-finish { background: var(--gold); color: var(--gold-ink); border-radius: var(--radius-xl); }
.btn-finish:hover { background: #f0b65a; }
.btn-finish strong, .btn-finish span { font-family: var(--display); font-weight: 800; }
.register-warn { background: rgba(227,166,70,.08); border-color: rgba(227,166,70,.28); color: var(--bone-2); }
.register-warn strong { color: var(--gold); }
.keypad button { background: var(--char-2); border-color: var(--line); }
.keypad button:hover { background: var(--char-3); }
.keypad-display { background: var(--char); border-color: var(--line); }
.customer-slot { border-radius: var(--radius-lg); }
.customer-avatar { background: var(--char-3); color: var(--gold); }
.pedidos-btn.tem-novo { border-color: var(--gold); }
.pedidos-btn .pedidos-conta { background: var(--gold); color: var(--gold-ink); }

/* disponíveis */
.disp-card { background: var(--char-2); border-color: var(--line); border-radius: var(--radius-lg); }
.disp-nome { font-family: var(--display); font-weight: 800; font-size: 1.3rem; }
.disp-preco { color: var(--gold); font-family: var(--display); font-weight: 800; }
.disp-num { font-family: var(--display); font-weight: 800; }

/* abas do cadastro de produto */
.form-aba { border-color: var(--line); color: var(--bone-2); }
.form-aba.on { border-color: var(--gold); color: var(--bone); background: rgba(227,166,70,.1); }
.serve-bonecos button.on { color: var(--gold); }

/* a nota impressa continua preto no branco */
.receipt, .receipt-preview { background: #fff; color: #000; }

@media print {
  html, body { background: #fff !important; color: #000 !important; }
}

/* botão do campo de arquivo (logo, fotos) */
input[type=file] { color: var(--bone-2); font-size: .85rem; }
input[type=file]::file-selector-button {
  margin-right: 10px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--char-3); color: var(--bone); font: 600 .82rem var(--font-sans); cursor: pointer;
}
input[type=file]::file-selector-button:hover { border-color: var(--bone-3); }

/* mapa das entregas ao vivo: escurece os ladrilhos para casar com o carvão */
.leaflet-container { background: var(--char-2); border-radius: var(--radius-lg); }
.leaflet-tile-pane { filter: brightness(.72) saturate(.7) sepia(.25); }

.empty strong { font-size: 1.6rem; color: var(--bone); }

/* =========================================================
   Páginas públicas pequenas: cadastro do clube, painel do
   entregador e rastreio do pedido — o topo de brasa da Mix
   ========================================================= */
.signup-hero, .ent-hero, .rt-topo {
  background:
    linear-gradient(180deg, rgba(23,17,13,.45), rgba(23,17,13,.88)),
    url('/brasa/static/mixgourmet/media/hero.jpg') 70% 45% / cover no-repeat !important;
  color: var(--bone) !important; position: relative;
}
.signup-hero::after, .ent-hero::after, .rt-topo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ember) 25%, var(--gold) 50%, var(--ember) 75%, transparent); opacity: .7;
}
.signup-hero .brand, .ent-hero .brand { font-family: var(--display); font-weight: 900; font-size: 1.6rem; }
.signup-hero h1, .ent-hero h1, .rt-topo h1, .signup-done h2 {
  font-family: var(--display); font-weight: 900; font-size: 2.3rem; line-height: .95; letter-spacing: .005em;
}
.signup-hero p, .ent-hero .sub, .rt-frase small, .ent-acerto, .rt-loja { color: var(--bone-2) !important; }
.ent-hero .sub a { color: var(--gold); }
.ent-num, .ent-loc { background: rgba(23,17,13,.6) !important; border-color: var(--line) !important; }
.ent-num span, .ent-loc .dim2 { color: var(--bone-3) !important; }
.ent-num strong { font-family: var(--display); font-weight: 800; font-size: 1.7rem; }
.switch span { background: var(--char-3); }
.switch input:checked + span { background: var(--gold); }
.sec { font-family: var(--display); font-weight: 800; font-size: 1.4rem; text-transform: none; letter-spacing: .005em; color: var(--bone); }
.del, .rt-card { background: var(--char-2); border-color: var(--line); box-shadow: none; }
.del-num { font-family: var(--display); font-weight: 800; font-size: 1.5rem; }
.del-end { color: var(--gold); }
.del-pay.receber, .rt-alerta.chegando, .ent-alerta.aviso { background: rgba(227,166,70,.12); color: var(--gold); border-color: rgba(227,166,70,.4); }
.del-pay.pago { background: rgba(111,179,122,.12); color: var(--good); }
.ent-alerta.erro, .rt-alerta.erro { background: rgba(224,97,74,.12); color: var(--bad); border-color: rgba(224,97,74,.4); }
.rt-passo { color: var(--bone-3); }
.rt-passo i { background: rgba(239,228,210,.15); }
.rt-passo.feito { color: var(--bone-2); }
.rt-passo.feito i { background: var(--good); }
.rt-passo.agora { color: var(--bone); }
.rt-passo.agora i { background: var(--gold); }
.rt-mapa { border-color: var(--line); background: var(--char-2); }
.rt-frase { font-size: 1.08rem; }