@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');
body { font-family: 'Inter', sans-serif; transition: background-color 0.3s ease, color 0.3s ease; }

:root {
    --bg-main: #000000;
    --bg-card: #000000;
    --accent-amber: #f59e0b;
    --price-green: #00d924;
}

/* Oculta scrollbar global */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #000000; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }

.bg-grid {
    background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px);
    background-size: 20px 20px;
}

#mapCanvas { touch-action: none; will-change: transform; transform-origin: 0 0; position: absolute; top: 0; left: 0; min-width: 3000px; min-height: 2000px; cursor: crosshair; }
#mapControls { pointer-events: auto; }
#mapControls button { transition: background 0.15s, transform 0.1s; }
#mapControls button:active { transform: scale(0.9); }

.modal { visibility: hidden; opacity: 0; transition: all 0.3s ease; z-index: 100; }
.modal.active { visibility: visible; opacity: 1; }
.modal-content { transform: scale(0.95); transition: 0.3s; }
.modal.active .modal-content { transform: scale(1); }
#modalConfirmarExclusao { z-index: 9999 !important; }
#modalRenovarSessao { z-index: 9999 !important; }
#modalRejeitarPedido { z-index: 9999 !important; }
#modalAvisoCobranca { z-index: 9999 !important; }
/* Achado 2026-08-09: "fica tudo enorme" + "cortando os cards sem poder usar a barra de
   rolagem" — CSS Grid, por padrão, ESTICA a única fileira de cards pra preencher todo o
   espaço vertical sobrando quando tem poucos resultados (ex: filtro com só 3 itens) — aí o
   card vira gigante e o conteúdo de baixo (preço, seletor -/+) pode passar do que dá pra ver,
   sem gerar scroll (porque tecnicamente nada "transbordou", só esticou). `align-content:
   start` trava cada fileira no tamanho natural do conteúdo — sobra vira espaço em branco
   (poucos itens) ou rolagem de verdade (muitos itens), nunca esticamento. */
#grade_busca_mobile { align-content: start; }

/* Botão de suporte via WhatsApp — agora vive dentro de #mapControls, mesmo
   estilo/tamanho/z-index dos ícones de manuseio do mapa (.map-ctrl-btn cuida
   do tema claro/escuro). Só o ícone continua verde (cor oficial do WhatsApp). */
#btn-suporte-wpp { text-decoration: none; }

/* Controles do mapa — nítidos em ambos os temas */
.map-ctrl-btn { background: rgba(0, 0, 0, 0.92) !important; }
.light-mode .map-ctrl-btn {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: #000000 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}
.light-mode .map-ctrl-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #000000 !important;
}

.input-premium { width: 100%; background: #000000; border: 1px solid rgba(255,255,255,0.2); border-radius: 0.75rem; padding: 0.75rem 1rem; color: #ffffff; outline: none; transition: 0.2s; }
.input-premium:focus { border-color: #3b82f6; background-color: #000000; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.form-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #ffffff; margin-bottom: 0.4rem; display: block; }

/* CardForm do Mercado Pago (2026-08-09) — os 3 campos sensíveis (número/validade/CVV) são
   iframes injetados pelo próprio MP.js dentro dessas divs; sem altura/borda fixas o iframe some
   (herda 0px) ou fica sem cara de campo de formulário. */
.mp-card-field { width: 100%; height: 40px; background: #000000; border: 1px solid rgba(255,255,255,0.2); border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.mp-card-field.error { border-color: #ef4444; }

/* ESTILOS ESPECÍFICOS DE OFERTAS */
.tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
.tab-content.active { display: flex; flex-direction: column; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@keyframes neon-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(var(--neon-rgb), 0.2); border-color: rgba(var(--neon-rgb), 0.3); }
    50% { box-shadow: 0 0 25px rgba(var(--neon-rgb), 0.6); border-color: rgba(var(--neon-rgb), 0.8); }
}
.neon-card-active { animation: neon-pulse 3s infinite ease-in-out; }
/* Filtro de "produto indisponível" na FOTO em si (não é cor de UI, é efeito na imagem) — mantido de propósito. */
.card-inactive { filter: grayscale(1) opacity(0.5); }

.unavailable-badge {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg);
    background: transparent; color: #ef4444; font-weight: 900;
    text-transform: uppercase; font-size: 2rem; letter-spacing: 0.1em;
    text-shadow: 0px 4px 15px rgba(0,0,0,0.8), 0px 0px 10px rgba(0,0,0,0.9);
    z-index: 20; white-space: nowrap; pointer-events: none;
}

.step-inactive { display: none; }

/* Posicionador de imagem do card (achado 2026-08-13) — arrasta a foto dentro de uma
   prévia no formato real da área de imagem do card (2/3 do card, já contando o modelo
   escolhido) pra o admin centralizar o produto. touch-action:none impede a página de rolar
   junto enquanto o dedo arrasta dentro da caixa no celular. */
.foco-imagem-box {
    position: relative; width: 100%; max-width: 220px; margin: 0 auto;
    border-radius: 1rem; overflow: hidden; cursor: grab; touch-action: none;
    user-select: none; border: 1px solid rgba(255,255,255,0.15); background-color: #000;
}
.foco-imagem-box:active { cursor: grabbing; }
.foco-imagem-mira {
    position: absolute; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #f59e0b; box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%); pointer-events: none;
}
.foco-imagem-mira::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px;
    background: #f59e0b; border-radius: 50%; transform: translate(-50%, -50%);
}

.swap-active {
    outline: 3px dashed #f59e0b !important;
    outline-offset: 4px;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.4);
    opacity: 0.9;
    transform: scale(0.98);
}

.file-upload-wrapper { position: relative; overflow: hidden; display: inline-block; width: 100%; }
.file-upload-wrapper input[type=file] { position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.glass-badge { backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); }
.text-shadow-premium { text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 4px 12px rgba(0,0,0,1); }
/* Achado 2026-08-13: "quero remover a sombra da fonte dos badges, deixa a fonte limpa e
   clara" — o badge fica DENTRO do bloco .text-shadow-premium e herdava a sombra. */
.glass-badge { text-shadow: none !important; }
/* Texto POR CIMA de imagem (achado 2026-08-13): o escurecimento por trás dele é fixo, não
   muda com o tema — então a cor da letra também não pode mudar, senão vira preto no preto e
   some no modo claro. Só força as fontes que HOJE já são claras; cor customizada da oferta
   (aplicada por style inline) continua mandando. */
.light-mode .sobre-imagem .text-white,
.light-mode .sobre-imagem .text-zinc-100,
.light-mode .sobre-imagem .text-zinc-200,
.light-mode .sobre-imagem .text-zinc-300,
.light-mode .sobre-imagem .text-zinc-400 { color: #ffffff !important; }

#toastContainer { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1000000; display: flex; flex-direction: column; gap: 0.75rem; pointer-events: none; }
/* Vidro (achado 2026-08-09) — translúcido + desfoque, em vez de totalmente transparente
   (o transparente puro de antes ficava difícil de ler em cima de conteúdo colorido). */
.toast { pointer-events: auto; min-width: 280px; max-width: 350px; background: rgba(20,20,22,0.45); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,0.2); border-left-width: 4px; border-radius: 1rem; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); animation: toast-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; transition: all 0.3s ease; }
.toast.hiding { animation: toast-out 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
/* Título do toast usava só a classe Tailwind "text-white" (CDN, gerada ao vivo via
   MutationObserver) — como o toast nasce depois do load via innerHTML, se o CDN não pegar a
   mutação a tempo (rede lenta, bloqueador etc.) a classe nunca vira CSS real e o título fica
   sem cor nenhuma = herda preto = some no fundo preto (achado 2026-08-08, mesmo sintoma do
   "toast preto" antigo). Garantido aqui direto, sem depender do Tailwind pra isso. */
.toast h5 { color: #39ff14 !important; }
.toast p { color: #39ff14 !important; }
/* Identidade visual por tipo (achado 2026-08-09: "o toast continua todo pretão, tá feio
   demais") — a classe toast-${type} já nascia no JS, mas nunca teve nenhuma cor/ícone: todo
   toast saía com a MESMA borda cinza-translúcida, sem diferenciar sucesso/erro/aviso. */
.toast-success { border-left-color: #10b981 !important; }
.toast-error   { border-left-color: #ef4444 !important; }
.toast-warning { border-left-color: #f59e0b !important; }
.toast-icon { color: #ffffff; }
.toast-success .toast-icon { color: #10b981; }
.toast-error .toast-icon   { color: #ef4444; }
.toast-warning .toast-icon { color: #f59e0b; }
@keyframes toast-in { from { opacity: 0; transform: translateX(100%) scale(0.9); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes toast-out { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(100%) scale(0.9); } }

/* Achado 2026-08-10 (feedback-tema-sem-cinza): os itens de "Pedidos via QR" usavam fundo
   sólido âmbar/verde-água meio apagado — ilegível no modo claro (a cor do valor sumia).
   Mesma receita de "vidro" do .toast acima: translúcido + desfoque, com a cor de status
   só na borda esquerda — funciona nos dois modos sem esconder o texto. */
.qr-item-glass { background: rgba(20,20,22,0.45); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,0.2); border-left-width: 4px; border-radius: 0.75rem; }
.qr-item-glass.status-aguardando { border-left-color: #f59e0b; }
.qr-item-glass.status-pendente { border-left-color: #14b8a6; }
.light-mode .qr-item-glass { background-color: rgba(255,255,255,0.55) !important; border-color: rgba(0,0,0,0.14) !important; }

.mobile-simulator-frame {
    border: 12px solid rgba(255,255,255,0.25);
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    background: #000000;
}

/* ═══════════════════════════════════════════════════════════════
   TEMA MODO ESCURO (padrão) — SEM tons de cinza: todo fundo que
   antes usava a escala zinc (950/900/800/700, sólido OU com qualquer
   opacidade — /30, /50, /60, /90...) e todo hex arbitrário bg-[#...]
   viram preto puro. Usa seletor de atributo (wildcard) em vez de
   listar classe por classe: antes, cada variação de opacidade nova
   (ex: bg-zinc-900/30, bg-[#0c0c0e]) que aparecesse em algum modal
   ficava de fora da lista e vazava cinza/preto-errado — foi o que
   causou o bug das abas Complementos/Vitrine/Simulador e da linha
   de bandeira de pagamento. Com o wildcard, qualquer variação nova
   já cai automaticamente na regra, sem precisar caçar uma por uma.
   Todo texto/ícone zinc vira branco puro. Onde um elemento PRECISA
   se distinguir do fundo preto (toggle desligado, mesa "livre" no
   mapa, parede do mapeamento), usa branco translúcido — não é "um
   cinza", é branco com opacidade, então não conta como tom de cinza. */
[class*="bg-zinc-"], [class*="bg-["] { background-color: #000000 !important; }
[class*="text-zinc-"] { color: #ffffff !important; }
[class*="border-zinc-"] { border-color: rgba(255,255,255,0.18) !important; }
.placeholder-zinc-700::placeholder { color: rgba(255,255,255,0.4) !important; }
[class*="hover:bg-zinc-"]:hover { background-color: rgba(255,255,255,0.12) !important; color: #ffffff !important; }
.hover\:text-zinc-300:hover { color: #ffffff !important; }
[class*="after:border-gray-300"]::after { border-color: rgba(255,255,255,0.4) !important; }
/* Exceções que NÃO podem virar preto sólido (ficariam invisíveis no fundo preto):
   toggle "desligado", mesa "livre" no mapa e a PAREDE (deixou de usar bg-zinc-700
   — que o wildcard acima achata pra preto igual ao chão do mapa, ficando
   invisível — e ganhou classe própria, sempre visível em qualquer tema). */
.peer.bg-zinc-800, .switch .bg-zinc-800 { background-color: rgba(255,255,255,0.22) !important; }
.table-card.bg-zinc-800 { background-color: #ffffff !important; border-color: rgba(0,0,0,0.2) !important; }
/* Sólido, não translúcido — branco translúcido em cima de preto pinta um cinza médio
   (o exato efeito que a regra "zero cinza" existe pra evitar). */
.parede-fill { background-color: #ffffff !important; }

/* ═══════════════════════════════════════════════════════════════
   TEMA MODO CLARO (.light-mode) — SEM tons de cinza: fundo sempre
   branco puro, texto/ícone sempre preto puro, divisórias em preto
   translúcido (idem acima — não é "um cinza", é preto com opacidade).
   ═══════════════════════════════════════════════════════════════ */

/* Fundo e cor base */
.light-mode { background-color: #ffffff !important; color: #000000 !important; }
.light-mode #notMapOverlay { background-color: rgba(255, 255, 255, 0.9) !important; }

/* Fundo: QUALQUER classe zinc (sólida ou com opacidade — /30, /50, /60, /90...)
   ou hex arbitrário bg-[#...] vira branco puro — wildcard em vez de listar
   classe por classe (mesma lógica/motivo do bloco escuro acima). Cobre nav
   lateral, aside, modal-content, toast, cinema (Vitrine), Complementos e
   Simulador de uma vez só, sem depender de eu ter "pescado" aquela opacidade
   específica antes — foi exatamente essa lacuna que deixava fundo cinza em
   Complementos/Vitrine/Simulador e na linha de bandeira de pagamento
   (bg-[#0c0c0e], nunca listado). */
.light-mode [class*="bg-zinc-"], .light-mode [class*="bg-["] { background-color: #ffffff !important; }
.light-mode [class*="border-zinc-"] { border-color: rgba(0,0,0,0.14) !important; }
.light-mode [class*="hover:bg-zinc-"]:hover { background-color: rgba(0,0,0,0.08) !important; color: #000000 !important; }
.light-mode .modal-content, .light-mode .toast { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.06) !important; }
/* Fundo do toast tinha ficado sem cobertura nenhuma quando o bloco de fundos virou
   wildcard (.toast não é bg-zinc-*/bg-[#...], é uma classe própria com cor fixa em
   app.css) — ficava preto sólido no claro, e como o texto (linhas abaixo) já era forçado
   pra preto, virava "caixa preta sem nenhum texto visível". Bug real, achado em 2026-08-06. */
.light-mode .toast { background-color: rgba(255,255,255,0.55) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; border-color: rgba(0,0,0,0.14) !important; }
/* Exceções (mesma lógica do modo escuro, espelhada): toggle "desligado", mesa
   "livre" e a PAREDE (sempre visível — ver .parede-fill) precisam de ALGUMA
   distinção do fundo branco. */
.light-mode .peer.bg-zinc-800, .light-mode .switch .bg-zinc-800 { background-color: rgba(0,0,0,0.18) !important; }
.light-mode .parede-fill { background-color: #000000 !important; }

/* ── TEXTO: zinc-scales ──────────────────────────────────────── */
.light-mode .text-zinc-100,
.light-mode .text-zinc-200,
.light-mode .text-zinc-300,
.light-mode .text-zinc-400,
.light-mode .text-zinc-500,
.light-mode .text-zinc-600,
.light-mode .text-zinc-700,
.light-mode .text-zinc-800 { color: #000000 !important; }

/* ── HEADINGS em modais e aside ─────────────────────────────── */
.light-mode aside h1, .light-mode aside h2, .light-mode aside h3,
.light-mode aside h4, .light-mode aside h5,
.light-mode .modal h1, .light-mode .modal h2, .light-mode .modal h3,
.light-mode .modal h4, .light-mode .modal h5,
.light-mode #notMapOverlay h2,
.light-mode .tab-content > div > div > h2,
.light-mode #cinemaContainer h3 { color: #000000 !important; }

/* ── PARÁGRAFOS e LABELS ────────────────────────────────────── */
.light-mode p, .light-mode label { color: #000000 !important; }

/* ── text-white GENÉRICO: qualquer tag dentro de modal/aside/área principal ── */
/* (exclui botões com fundo colorido, restaurado logo abaixo — ordem importa aqui) */
.light-mode .modal-content .text-white,
.light-mode .modal-content span.text-white,
.light-mode .modal-content strong.text-white,
.light-mode .modal-content li .text-white,
.light-mode .modal-content div.text-white,
.light-mode .modal-content h1.text-white, .light-mode .modal-content h2.text-white,
.light-mode .modal-content h3.text-white, .light-mode .modal-content h4.text-white,
.light-mode .modal-content p.text-white, .light-mode .modal-content label.text-white,
.light-mode .modal-content td.text-white, .light-mode .modal-content button.text-white { color: #000000 !important; }
/* Toast: fundo transparente + fonte verde neon (pedido 2026-08-08), em ambos os temas */
.light-mode .toast h5 { color: #39ff14 !important; }
.light-mode .toast p { color: #39ff14 !important; }
/* Aside e área principal (submódulos do admin, mapa, ofertas): mesma cobertura do modal */
.light-mode aside .text-white,
.light-mode aside span.text-white,
.light-mode aside strong.text-white,
.light-mode aside li .text-white,
.light-mode aside div.text-white,
.light-mode aside h1.text-white, .light-mode aside h2.text-white, .light-mode aside h3.text-white,
.light-mode aside h4.text-white, .light-mode aside p.text-white, .light-mode aside label.text-white,
.light-mode aside td.text-white, .light-mode aside button.text-white,
.light-mode main .text-white,
.light-mode #ofertasMainArea .text-white,
.light-mode #notMapOverlay .text-white { color: #000000 !important; }

/* Restaura branco nos botões com fundo colorido (modal e aside) */
.light-mode .modal-content .bg-blue-600,   .light-mode .modal-content .bg-blue-500,
.light-mode .modal-content .bg-emerald-600, .light-mode .modal-content .bg-emerald-500,
.light-mode .modal-content .bg-amber-600,   .light-mode .modal-content .bg-amber-500,
.light-mode .modal-content .bg-red-600,     .light-mode .modal-content .bg-red-500,
.light-mode .modal-content .bg-orange-600,  .light-mode .modal-content .bg-orange-500,
.light-mode aside .bg-blue-600,   .light-mode aside .bg-blue-500,
.light-mode aside .bg-emerald-600,.light-mode aside .bg-emerald-500,
.light-mode aside .bg-amber-600,  .light-mode aside .bg-amber-500,
.light-mode aside .bg-red-600,    .light-mode aside .bg-red-500,
.light-mode aside .bg-orange-600, .light-mode aside .bg-orange-500 { color: #ffffff !important; }

/* ── HOVER: text-white torna-se invisível em hover no claro ─── */
.light-mode .hover\:text-white:hover { color: #000000 !important; }
.light-mode .group:hover .group-hover\:text-white { color: #000000 !important; }
.light-mode .hover\:text-zinc-300:hover { color: #000000 !important; }

/* ── INPUTS ─────────────────────────────────────────────────── */
.light-mode .input-premium { background: #ffffff !important; border-color: rgba(0,0,0,0.2) !important; color: #000000 !important; }
.light-mode .input-premium:focus { background-color: #ffffff !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important; }
.light-mode select.input-premium option { background-color: #ffffff; color: #000000; }
.light-mode .form-label { color: #000000 !important; }

/* ── ABAS ATIVAS ─────────────────────────────────────────────  */
.light-mode .sub-tab-btn.border-blue-500 { border-color: #2563eb !important; color: #2563eb !important; background-color: #eff6ff !important; }
.light-mode .oferta-menu-item.border-amber-500 { border-color: #d97706 !important; color: #b45309 !important; background-color: #fef3c7 !important; }

/* ── HOVER em backgrounds zinc ──────────────────────────────── */
.light-mode .hover\:bg-zinc-800:hover { background-color: rgba(0,0,0,0.08) !important; color: #000000 !important; }
.light-mode .hover\:bg-zinc-700:hover { background-color: rgba(0,0,0,0.14) !important; color: #000000 !important; }

/* ── GRID DO MAPA ───────────────────────────────────────────── */
.light-mode .bg-grid { background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px) !important; }

/* ── TABLE CARDS (mesa/Balcão) ──────────────────────────────── */
/* Pedido explícito: mesa e Balcão SEMPRE com a mesma cor clara, independente do
   tema — viram cards "flutuantes" claros sobre o chão preto no escuro, e mantêm
   o mesmo visual no claro. Por isso essas regras NÃO têm prefixo .light-mode:
   valem nos dois temas, sem exceção. */
.table-card.bg-blue-900\/30 { background-color: #eff6ff !important; border-color: #bfdbfe !important; }
.table-card.bg-amber-900\/20 { background-color: #fffbeb !important; border-color: #fde68a !important; }
.table-card.bg-emerald-900\/20 { background-color: #ecfdf5 !important; border-color: #34d399 !important; }
.table-card.bg-red-900\/20 { background-color: #fef2f2 !important; border-color: #f87171 !important; }
/* Descendente (com espaço), não composta: o número/status é um <span> FILHO do
   card (que é quem leva a classe table-card), não o mesmo elemento — "table-card.
   text-zinc-300" (sem espaço) nunca batia com essa marcação e o texto ficava
   branco (herdado do wildcard de tema escuro) em cima do card agora branco,
   sumindo o número da mesa. Bug real, achado em 2026-08-06. */
.table-card .text-zinc-300 { color: #000000 !important; }
.table-card .text-emerald-500 { color: #059669 !important; }
.table-card .text-red-500 { color: #dc2626 !important; }
.table-card .icon-color { color: #000000 !important; }

/* ── SIMULADOR MOBILE ───────────────────────────────────────── */
.light-mode .mobile-simulator-frame { background-color: #ffffff !important; border-color: rgba(0,0,0,0.2) !important; }
.light-mode .mobile-simulator-frame .bg-zinc-950 { background-color: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,0.14); border-top: 1px solid rgba(0,0,0,0.14); }
.light-mode .mobile-simulator-frame .bg-zinc-950 .text-white { color: #000000 !important; }
.light-mode .mobile-simulator-frame .bg-zinc-950 .bg-white { background-color: rgba(0,0,0,0.15) !important; }

/* ── SCROLLBAR no tema claro ────────────────────────────────── */
.light-mode ::-webkit-scrollbar-track { background: #ffffff !important; }
.light-mode ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25) !important; }
.light-mode ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4) !important; }

/* ── MOBILE PANEL HANDLE no claro ───────────────────────────── */
.light-mode .mp-handle { background: #ffffff !important; border-bottom-color: rgba(0,0,0,0.14) !important; }
.light-mode .mp-pill { background: rgba(0,0,0,0.18) !important; }
.light-mode .mp-close-btn { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.14) !important; color: #000000 !important; }
.light-mode .mp-close-btn:active { background: rgba(0,0,0,0.12) !important; color: #000000 !important; }

/* ── MOBILE SHEET no claro ───────────────────────────────────── */
.light-mode #mobileSheet { background: #ffffff !important; }
.light-mode #mobileSheetHandle { background: #ffffff !important; border-bottom-color: rgba(0,0,0,0.14) !important; }
.light-mode .sheet-pill { background: rgba(0,0,0,0.18) !important; }
.light-mode .sheet-back-btn { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.14) !important; color: #000000 !important; }
.light-mode .sheet-back-btn:active { background: rgba(0,0,0,0.12) !important; color: #000000 !important; }

/* ── NOTIFICAÇÕES/BADGES de estado coloridos: mantém cores ──── */
/* (blue-400, amber-400, emerald-400, red-400 estão OK em ambos temas) */

/* ── Mobile Panel (aside como sheet) ──────────────────────────────── */
.mp-handle { display: none; flex-direction: column; background: #000000; border-bottom: 1px solid rgba(255,255,255,.14); padding: 8px 16px 12px; flex-shrink: 0; touch-action: none; cursor: grab; }
.mp-pill { width: 36px; height: 4px; background: rgba(255,255,255,.3); border-radius: 99px; margin: 0 auto 10px; }
.mp-back-btn { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #ffffff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: 7px 14px; border-radius: 10px; cursor: pointer; transition: background .15s, color .15s; }
.mp-back-btn:active { background: rgba(255,255,255,.2); color: #fff; }

@media (max-width: 767px) {
    /* Aside: ancorado no fundo, meia tela por padrão (mapa visível acima) */
    #mobileAside {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
        z-index: 150 !important;
        height: 52dvh !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                    height 0.3s ease,
                    border-radius 0.3s ease;
        will-change: transform, height;
        border-top: none !important;
        overflow: clip !important;
        pointer-events: none;
    }
    #mobileAside.mp-open {
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
    /* Outras abas (usuários, ofertas, etc.) → tela cheia */
    #mobileAside.mp-full {
        height: 100dvh !important;
        border-radius: 0 !important;
    }
    /* h-full nos wrappers estoura o aside. No mobile usa flex-1 */
    #mobileAside #wrapper_admin,
    #mobileAside #wrapper_operacao {
        flex: 1 1 0% !important;
        height: auto !important;
        min-height: 0 !important;
    }
    #mobileAside #operacaoPanelAside,
    #mobileAside .flex-1.overflow-y-auto {
        flex: 1 1 0% !important;
        min-height: 0 !important;
    }
    /* CAUSA RAIZ REAL (achada só depois de comparar com o Toro/admin-ofertas.php, que usa
       sidebar off-canvas clássico em vez desse esquema): #ofertasMainArea NÃO fica dentro do
       #mobileAside — ele mora dentro de <main id="mainArea">, o painel do MAPA, que é um
       IRMÃO do aside, não um filho. No desktop os dois ficam lado a lado (sidebar + mapa) e
       tudo aparece. No mobile o #mobileAside vira um sheet fixed cobrindo a tela inteira
       (z-index 150/200) por CIMA do #mainArea — então mesmo com #ofertasMainArea desmarcado
       como "hidden" (o que já acontecia), ele ficava desenhado corretamente só que atrás do
       sheet, 100% encoberto. Por isso só "funcionava" no modo desktop do Chrome: lá o layout
       vira lado-a-lado de verdade (viewport reportado ≥768px), sem sheet nenhum por cima.
       Fix: quando o usuário escolhe uma aba (Vitrine/Complementos/Simulador) via showTab(),
       o JS adiciona a classe abaixo, e #ofertasMainArea passa a se comportar como um modal de
       tela cheia por CIMA do próprio sheet (mesma ideia do modal que você sugeriu) — com um
       botão X que tira essa classe e volta a mostrar o menu de escolha no sheet. */
    #ofertasMainArea.mobile-fullscreen {
        position: fixed !important;
        inset: 0 !important;
        height: 100dvh !important;
        z-index: 300 !important;
        /* Rede de segurança: se algum dia uma linha de botões não couber (como aconteceu com os
           ▲▼ de mover grupo antes do ajuste abaixo), trava aqui em vez de vazar a viewport com
           scroll horizontal. Com os elementos comprimidos + título truncado logo abaixo, isso
           não deveria mais disparar na prática — fica só como garantia. */
        overflow-x: hidden !important;
    }
    /* Botões de editar/duplicar/excluir de Vitrine e Complementos usam opacity-0 +
       group-hover:opacity-100 (só aparecem passando o mouse) — em touch não existe hover, então
       ficavam permanentemente invisíveis e inalcançáveis no mobile, mesmo com o container
       visível. Força esses botões a aparecerem sempre nessa faixa de largura. */
    #ofertasMainArea .group-hover\:opacity-100 {
        opacity: 1 !important;
    }
    /* Comprime a linha de cabeçalho dos cards da Vitrine (ícones + título + botões ▲▼/editar/
       excluir) pra caber tudo numa linha só, do jeito idêntico ao desktop, só que em escala
       menor — em vez de quebrar linha. Título já ganhou truncate no template (JS) como rede de
       segurança pra título muito comprido; isso aqui só reduz o "peso" dos elementos fixos ao
       redor pra sobrar mais espaço pro título antes de precisar truncar. */
    #cinemaContainer svg { width: 12px !important; height: 12px !important; }
    #cinemaContainer .p-2 { padding: 6px !important; }
    #cinemaContainer .p-1\.5 { padding: 5px !important; }
    #cinemaContainer .gap-4 { gap: 6px !important; }
    #cinemaContainer .gap-3 { gap: 6px !important; }
    #cinemaContainer .gap-2 { gap: 4px !important; }
    #cinemaContainer h3 { font-size: 11px !important; }
    /* Handle mobile: só X no canto direito */
    .mp-handle { display: flex !important; align-items: center; justify-content: flex-end; }
    .mp-pill { display: none !important; }
    /* Modais sempre acima de QUALQUER coisa mobile — inclusive #ofertasMainArea.mobile-
       fullscreen (z-index 300, ver comentário acima), que é de onde "Nova Oferta" é aberto.
       Antes disso o modal (200) ficava sistematicamente ATRÁS da tela cheia da Vitrine (300)
       no mobile — abria "por trás", exatamente o sintoma reportado. */
    .modal { z-index: 350 !important; }
    #mobileSheet { display: none !important; }
    /* Modais de operação: tela quase cheia no mobile */
    #modalPayment .modal-content,
    #modalMerge .modal-content,
    #modalHistory .modal-content,
    #modalUser .modal-content {
        height: 95dvh !important;
        max-height: 95dvh !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP GRANDE (≥1280px) — pedido explícito: em tela grande tudo fica
   pequeno/apertado sobrando espaço, principalmente no vendas.php (fica ligado
   o dia inteiro num computador de balcão pra imprimir pedido). Aumenta nav,
   ícones, abas e os cards de oferta da Vitrine nos 3 painéis (adm/garçom/
   vendas compartilham o mesmo app.css). Não mexe no mapa/mesas — esses têm
   tamanho calculado em JS (px) pro clique/arraste baterem certo com o visual;
   escalar só via CSS desalinharia clique com a posição real do elemento.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
    /* Nav lateral mais larga + ícones maiores */
    nav.md\:w-16 { width: 5.5rem !important; }
    nav.md\:w-16 button { padding: 1rem !important; }
    nav.md\:w-16 svg[data-lucide] { width: 28px !important; height: 28px !important; }
    nav.md\:w-16 #userBadgeNome { font-size: 12px !important; }
    nav.md\:w-16 #userBadgeCargo { font-size: 9px !important; }

    /* Controles do mapa (zoom/centralizar/suporte) maiores */
    .map-ctrl-btn { width: 3.25rem !important; height: 3.25rem !important; }
    .map-ctrl-btn svg[data-lucide] { width: 24px !important; height: 24px !important; }

    /* Abas (sub-tab-btn do wrapper admin, oferta-menu-item de Vitrine/Complementos/Simulador) */
    .sub-tab-btn { padding-top: 1.15rem !important; padding-bottom: 1.15rem !important; }
    .sub-tab-btn svg[data-lucide] { width: 22px !important; height: 22px !important; }
    .oferta-menu-item { padding-top: 1rem !important; padding-bottom: 1rem !important; font-size: 0.95rem !important; }
    .oferta-menu-item svg[data-lucide] { width: 20px !important; height: 20px !important; }

    /* Cards de oferta na Vitrine (miniaturas hoje em w-12/48px, apertadas) */
    #cinemaContainer { gap: 2rem !important; }
    #cinemaContainer .w-12 { width: 4.5rem !important; }
    #cinemaContainer h3, #cinemaContainer .text-sm { font-size: 0.95rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   "FLASH CARDS" — modais/overlays criados via JS puro (innerHTML), não
   passam pelas classes Tailwind que o resto do tema cobre. Antes usavam cor
   fixa via style="" inline — o texto (com <p>/<label>, que a regra global do
   tema claro sempre pinta de preto) ficava preto em cima de um fundo que
   continuava escuro (o inline nunca respondia ao tema), virando ilegível no
   claro. Ex: "Item lançado!", "Salvando...". Essas classes dão o mesmo
   comportamento dos modais normais (fundo escuro/claro, texto branco/preto)
   pra qualquer elemento assim, sem precisar duplicar lógica de tema em JS. */
.pdv-flash-card { background: #121214; }
.light-mode .pdv-flash-card { background: #ffffff !important; border-color: rgba(0,0,0,0.14) !important; }
.pdv-flash-card .pdv-flash-title { color: #ffffff; }
.light-mode .pdv-flash-card .pdv-flash-title { color: #000000 !important; }
.pdv-flash-card .pdv-flash-text { color: #a1a1aa; }
.light-mode .pdv-flash-card .pdv-flash-text { color: #52525b !important; }
.pdv-flash-btn-secundario { background: #18181b; color: #ffffff; }
.light-mode .pdv-flash-btn-secundario { background: #f4f4f5 !important; color: #000000 !important; border-color: rgba(0,0,0,0.14) !important; }

/* Estilos do X de fechar (visível só via .mp-handle) */
.mp-close-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.mp-close-btn:active { background: rgba(255,255,255,.2); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   LOGIN / CADASTRO UNIFICADO
   ═══════════════════════════════════════════════════════════════ */
#loginOverlay {
    position: fixed; inset: 0; z-index: 999999; background: rgba(0,0,0,0.97);
    backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center;
    padding: 16px; overflow-y: auto;
}
/* CRÍTICO: seletor por ID (#loginOverlay) tem mais especificidade que a classe utilitária
   .hidden do Tailwind (display:none) — sem essa regra, classList.add('hidden') no overlay
   NUNCA escondia o elemento de verdade (o display:flex acima sempre vencia). Isso fazia o
   overlay ficar visível pra sempre por cima do painel, mesmo com o login/cadastro concluído
   com sucesso — o app "pensava" que tinha destravado, mas a tela continuava presa no último
   step ativo (ex: formulário de cadastro), dando a impressão de estar travado. */
#loginOverlay.hidden { display: none; }
/* .auth-step.active força display:block (2 classes venceria a utilitária .flex do Tailwind,
   que é só 1 classe) — sem isso o spinner de "Verificando sessão..." empilhava sem centralizar. */
#authStep_loading.active { display: flex !important; }
.auth-card { width: 100%; max-width: 420px; background: #000000; border: 1px solid rgba(255,255,255,0.2); border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6); margin: auto; }
.auth-step { display: none; }
.auth-step.active { display: block; }
.auth-card p, .auth-card label { color: #ffffff; }
.auth-card h2, .auth-card h3 { color: #ffffff; }
.light-mode .auth-card { background: #ffffff !important; border-color: rgba(0,0,0,0.14) !important; }
.light-mode .auth-card p, .light-mode .auth-card label { color: #000000 !important; }
.light-mode .auth-card h2, .light-mode .auth-card h3 { color: #000000 !important; }

/* Achado 2026-08-10 (bug real): essa caixa tinha o MESMO preto puro do modal em volta
   (.auth-card, acima) — ficava literalmente invisível, sem contorno nenhum, câmera
   camuflada dentro do próprio modal. Um tom acima (zinc-900) + borda translúcida dá
   contraste real, sem fugir do tema escuro do resto do app. */
#authCameraBox, #authFotoPreviewBox { position: relative; border-radius: 1rem; overflow: hidden; background: #18181b; border: 1px solid rgba(255,255,255,0.2); }
#authCameraVideo, #authFotoPreviewImg { width: 100%; height: 220px; object-fit: cover; display: block; }

.senha-forca-track { width: 100%; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.18); overflow: hidden; margin-top: 6px; }
.senha-forca-fill { height: 100%; width: 0%; background: #ef4444; border-radius: 99px; transition: width 0.25s ease, background 0.25s ease; }
.light-mode .senha-forca-track { background: rgba(0,0,0,0.14) !important; }

/* ── Mobile Sheet ──────────────────────────────────────────────────── */
#mobileSheet {
    display: none; /* escondido no desktop — JS cuida do mobile */
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #000000;
    flex-direction: column;
    /* começa fora da tela (baixo) */
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}
/* só existe no mobile */
@media (max-width: 767px) {
    #mobileSheet { display: flex; }
}
#mobileSheet.open {
    transform: translateY(0);
}
#mobileSheetHandle {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,.14);
    padding: 10px 16px 12px;
    flex-shrink: 0;
    touch-action: none; /* para swipe capturar */
    cursor: grab;
}
.sheet-pill {
    width: 36px; height: 4px;
    background: rgba(255,255,255,.3);
    border-radius: 99px;
    margin: 0 auto 10px;
}
.sheet-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sheet-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 7px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sheet-back-btn:active { background: rgba(255,255,255,.2); color: #fff; }
#mobileSheetBody {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}
/* Remove o sticky bottom do panel quando está no sheet
   (sheet já tem padding bottom suficiente) */
#mobileSheet .sticky { position: static !important; }