:root {
    /* VENUZ FOOD — Bancada de Instrumento. Sistema completo em DESIGN.md. */
    --vz-chassis:   #1B1D20;
    --vz-panel:     #26292E;
    --vz-well:      #16181B;
    --vz-gunmetal:  #3E4146;
    --vz-keycap:    #B9B4A6;
    --vz-keycap-up: #C9C4B6;
    --vz-bone:      #E6E2DA;
    --vz-legend:    #1B1D20;
    --vz-muted:     #9BA0A6;
    --vz-orange:    #FF6A1A;
    --vz-amber:     #FFB000;

    --vz-font-display: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --vz-font-ui:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --vz-key-r: 4px;
    --vz-panel-r: 6px;
    --vz-travel: 70ms;

    /* Tokens legados remapeados: as ~240 regras existentes passam a render no
       mundo novo sem precisar reescrever cada uma. */
    --bg-body: var(--vz-chassis);
    --bg-sidebar: var(--vz-panel);
    --bg-card: var(--vz-panel);
    --bg-input: var(--vz-well);
    --primary: var(--vz-bone);
    --secondary: var(--vz-orange);
    --accent: var(--vz-bone);
    --success: var(--vz-amber);
    --danger: var(--vz-bone);
    --text-main: var(--vz-bone);
    --text-muted: var(--vz-muted);
    --border: var(--vz-gunmetal);
    --radius: var(--vz-panel-r);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--vz-font-ui);
    background-color: var(--bg-body);
    color: var(--text-main);
    display: flex;
    height: 100vh;
    overflow: hidden; /* App Style */
}

/* --- SIDEBAR (Barra Lateral) --- */
.sidebar {
    width: 260px;
    background-color: var(--bg-sidebar); /* Efeito Vidro */
    padding: 30px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 100;
}

.logo-area { display: flex; align-items: center; gap: 12px; margin-bottom: 50px; }
.logo-icon {
    width: 40px; height: 40px;
    background: var(--vz-orange);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 20px;
    box-shadow: 0 2px 0 #7A2E06;
}
.logo-text { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-left: 4px solid transparent;
}
.nav-item:hover {
    background-color: var(--vz-veu);
    color: var(--text-main);
}
.nav-item.active {
    background: var(--vz-well);
    color: var(--text-main);
}

/* --- ÁREA PRINCIPAL --- */
.main-content {
    flex: 1;
    padding: 40px;
    overflow-y: auto; /* Conteúdo rolável */
    scroll-behavior: smooth;
}
.main-content::-webkit-scrollbar { width: 8px; }
.main-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

.top-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.search-bar {
    background: var(--bg-card); padding: 12px 20px; border-radius: 50px;
    border: 1px solid var(--border); color: var(--vz-txt); width: 300px;
    display: flex; align-items: center; gap: 10px; transition: 0.3s;
}
.search-bar:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,176,0,0.18); }
.search-bar input { background: transparent; border: none; color: var(--vz-txt); width: 100%; outline: none; font-family: inherit;}

/* --- SPA VISUALIZATION (Abas) --- */
.view-section { display: none; animation: fadeIn 0.3s ease-out; }
.view-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- CARDS DE ESTATÍSTICAS --- */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-bottom: 40px; }
.stat-card {
    background: var(--bg-card); padding: 25px; border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); text-align: center; position: relative; overflow: hidden;
    border: 1px solid var(--border);
    transition: 70ms ease-out;
}
.stat-card:hover { transform: translateY(-5px); border-color: rgba(255,176,0,0.18); }

/* Efeito de brilho no card */
.stat-card::after {
    content: ''; position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%);
}
.stat-icon-bg { width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 15px; margin-left: auto; margin-right: auto; }

.bg-purple { background: rgba(255,176,0,0.18); color: var(--primary); box-shadow: none;}
.bg-pink { background: rgba(255,106,26,0.18); color: var(--secondary); box-shadow: none;}
.bg-orange { background: rgba(255,176,0,0.2); color: var(--accent); box-shadow: 0 0 20px rgba(255,176,0,0.2);}
.bg-green { background: rgba(255,176,0,0.2); color: var(--success); box-shadow: 0 0 20px rgba(255,176,0,0.2);}

.stat-value { font-size: 28px; font-weight: 700; margin-bottom: 5px; }
.stat-label { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

/* --- GRID DE PAINÉIS (Formulário e Listas) --- */
.dashboard-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 25px; }
.config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 25px; align-items: start; }
.panel-box { 
    background: var(--bg-card); border-radius: var(--radius); padding: 30px; 
    border: 1px solid var(--border); margin-bottom: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.panel-title { 
    font-size: 18px; font-weight: 600; margin-bottom: 25px; 
    display: flex; align-items: center; justify-content: space-between; 
}

/* --- CAIXA --- */
.bill-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;
}
.bill-card {
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px;
    padding: 20px; display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden; transition: 70ms ease-out;
}
.bill-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 15px 30px rgba(0,0,0,0.3); }
.bill-card::before {
    content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px;
    background: var(--accent); transition: 0.3s;
}
.bill-card:hover::before { background: var(--primary); width: 6px; }

.bill-header { display: flex; justify-content: space-between; margin-bottom: 15px; }
.bill-mesa { font-size: 18px; font-weight: 800; color: var(--vz-txt); }
.bill-cliente { font-size: 14px; color: var(--text-muted); margin-bottom: 15px; }
.bill-total { font-size: 24px; font-weight: 800; color: var(--success); margin-bottom: 20px; }

.btn-pay {
    width: 100%; padding: 12px; background: var(--success); color: #000;
    border: none; border-radius: 8px; font-weight: 700; cursor: pointer;
    transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-pay:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(255,176,0,0.3); }

/* --- INPUTS E FORMULÁRIOS --- */
.input-group { margin-bottom: 15px; }
.input-group label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 600;}

input, select, textarea {
    width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--vz-txt);
    padding: 12px 15px; border-radius: 10px; font-family: inherit; outline: none; transition: 0.3s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(255,176,0,0.18); }

/* Input desativado (ReadOnly) */
input:disabled, textarea:disabled {
    background: var(--vz-veu); color: #3E4146; cursor: not-allowed; border-color: var(--border);
}

/* --- NOVA GRID DE TAMANHOS (Feature de Lote) --- */
.size-grid { 
    display: grid; gap: 10px; margin-bottom: 20px; 
    background: rgba(0,0,0,0.2); padding: 15px; border-radius: 10px; border: 1px solid var(--border); 
}
.size-row { 
    display: grid; grid-template-columns: 30px 1fr 1fr; align-items: center; gap: 10px; 
}
.size-row input[type="checkbox"] { 
    width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; 
}
.size-row span { font-size: 13px; font-weight: 600; }
.size-row input[type="number"] { padding: 8px; font-size: 13px; margin: 0; }

/* BOTÕES */
.btn-gradient {
    background: var(--vz-orange);
    color: var(--vz-txt); border: none; width: 100%; padding: 14px;
    border-radius: 10px; font-weight: 600; cursor: pointer;
    transition: transform 0.2s; margin-top: 10px; text-transform: uppercase;
    box-shadow: 0 2px 0 #7A2E06;
}
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 2px 0 #7A2E06; }

.btn-cancel {
    background: transparent; border: 1px solid var(--text-muted); color: var(--text-muted);
    width: 100%; padding: 10px; border-radius: 10px; font-weight: 600; cursor: pointer;
    margin-top: 10px; display: none; transition: 0.3s;
}
.btn-cancel:hover { border-color: var(--danger); color: var(--danger); background: rgba(230,226,218,0.1); }

/* --- LISTAS --- */
.list-header {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 0 10px 15px 10px; border-bottom: 1px solid var(--border);
    color: var(--text-muted); font-size: 12px; font-weight: 600;
}

.list-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: 0.2s;
}
.list-item:hover { background: var(--vz-veu); transform: translateX(5px); }
.list-item img { width: 35px; height: 35px; border-radius: 8px; object-fit: cover; margin-right: 10px; vertical-align: middle; }

.cat-badge {
    font-size: 11px; padding: 4px 10px; border-radius: 6px;
    background: var(--vz-veu-forte); color: var(--text-main);
}

/* Badge de Tamanho */
.size-badge {
    font-size: 10px; padding: 2px 8px; border-radius: 4px;
    background: rgba(255,176,0,0.15); color: var(--accent);
    border: 1px solid rgba(255,176,0,0.3); margin-left: 5px;
}

/* Botões de Ação (Ícones) */
.action-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.btn-icon {
    width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; background: transparent; transition: 0.2s;
}
.btn-delete { color: #E6E2DA; border-color: rgba(230,226,218,0.3); }
.btn-delete:hover { background: #E6E2DA; color: var(--vz-txt); transform: scale(1.1); }
.btn-edit { color: var(--primary); border-color: rgba(255,176,0,0.18); }
.btn-edit:hover { background: var(--primary); color: var(--vz-txt); transform: scale(1.1); }

/* Botão WhatsApp */
.btn-whatsapp { color: var(--vz-bone); border-color: var(--vz-gunmetal); }
.btn-whatsapp:hover { background: var(--vz-gunmetal); color: var(--vz-bone); transform: none; }
/* Botão Imprimir */
.btn-print { color: var(--vz-bone); border-color: var(--vz-gunmetal); }
.btn-print:hover { background: var(--vz-gunmetal); color: var(--vz-bone); transform: none; }
/* Botão Cancelar (Listagem) */
.btn-cancel-order { color: #E6E2DA; border-color: var(--vz-gunmetal); }
.btn-cancel-order:hover { background: #E6E2DA; color: var(--vz-txt); transform: scale(1.1); }

/* Botão Esgotado */
.btn-stock { color: var(--vz-bone); border-color: var(--vz-gunmetal); }
.btn-stock:hover { background: var(--vz-gunmetal); color: var(--vz-bone); transform: none; }
/* ESTILO PARA QUANDO ESTIVER ESGOTADO */
.btn-stock.off { color: #3E4146 !important; border-color: #3E4146 !important; background: transparent !important; }
.btn-stock.off:hover { background: #3E4146 !important; color: #9BA0A6 !important; transform: scale(1.1); }

/* Lista de Pedidos RESTAURADA */
.order-row {
    display: flex; justify-content: space-between; padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05); align-items: center;
}
.status-pill {
    padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: bold;
    background: rgba(255,176,0,0.18); color: var(--primary);
}

/* --- ESTILOS PARA OPÇÕES/ADICIONAIS --- */
.option-tag {
    background: var(--vz-gunmetal); padding: 6px 12px; border-radius: 6px;
    font-size: 12px; display: flex; align-items: center; gap: 8px;
    margin-bottom: 5px; border: 1px solid #3E4146; animation: fadeIn 0.3s;
}
.option-remove { cursor: pointer; color: #E6E2DA; font-weight: bold; font-size: 14px; }
.option-remove:hover { color: #E6E2DA; }

/* --- NOVO: ESTILO PARA O BOTÃO DE UPLOAD PERSONALIZADO (RESTAURADO) --- */
.file-upload-wrapper {
    display: flex; align-items: center; gap: 15px; margin-top: 5px;
}
.custom-file-btn {
    background: var(--vz-orange);
    color: var(--vz-txt); padding: 10px 20px; border-radius: 10px; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    transition: transform 0.2s; font-size: 14px;
}
.custom-file-btn:hover { transform: translateY(-2px); box-shadow: 0 2px 0 #7A2E06; }
/* Esconde o input file padrão feio */
input[type="file"] { display: none; }
/* Texto que mostra o nome do arquivo */
#file-name-display {
    color: var(--text-muted); font-size: 13px; font-style: italic; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}

/* ------------------------------------------- */
/* Estilos para o Modal de Horários (RESTAURADOS) */
/* ------------------------------------------- */
.btn-config {
    background-color: var(--bg-card); color: var(--vz-txt); padding: 10px 15px; border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; font-weight: bold; margin-right: 10px; transition: 0.3s;
}
.btn-config:hover { background-color: var(--primary); border-color: var(--primary); }

.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); justify-content: center; align-items: center;
    z-index: 3000; 
}
.modal-content {
    background: var(--bg-card); padding: 35px; border-radius: 6px; width: 100%; max-width: 500px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6); color: var(--text-main); border: 1px solid var(--border);
    text-align: left; animation: slideUp 0.3s ease-out;
    max-height: 90vh; overflow-y: auto;
}
.modal-content h3 { color: var(--vz-txt); margin-top: 0; margin-bottom: 15px; }

@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.form-group-modal { margin-bottom: 15px; text-align: left; }
.form-group-modal label { display: block; font-weight: bold; margin-bottom: 5px; color: var(--text-muted); }
.form-group-modal input { 
    width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; 
    background: var(--bg-body); color: var(--vz-txt); outline: none;
}

/* Switch (Botão de Ligar/Desligar) RESTAURADO */
.switch { position: relative; display: inline-block; width: 56px; height: 32px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-input); border: 1px solid var(--border); transition: .4s; border-radius: 6px;
}
.slider:before {
    position: absolute; content: ""; height: 24px; width: 24px; left: 3px; bottom: 3px;
    background-color: var(--text-muted); transition: .4s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
input:checked + .slider { background-color: var(--success); border-color: var(--success); }
input:checked + .slider:before { transform: translateX(24px); background-color: var(--vz-keycap); }


/* ========================================================= */
/* 🛒 PDV (NOVO PEDIDO) - NOVA ESTRUTURA GAVETA LATERAL      */
/* ========================================================= */
.pos-container {
    display: block; /* Remove o Grid antigo de 2 colunas para ocupar 100% da tela */
    position: relative;
    height: calc(100vh - 200px);
    overflow: hidden;
}

/* Área de Produtos ocupa tudo */
.pos-products {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Cards maiores */
    gap: 20px;
    overflow-y: auto; 
    padding-right: 15px; 
    height: 100%;
    align-content: start;
}

.pos-prod-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
    padding: 18px; cursor: pointer; text-align: left; transition: 0.3s; position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; height: 130px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.pos-prod-card:hover { border-color: var(--primary); transform: translateY(-5px); box-shadow: 0 2px 0 #7A2E06; }
.pos-prod-card h4 { font-size: 15px; margin-bottom: 8px; line-height: 1.3; font-weight: 700; color: var(--vz-txt);}
.pos-prod-card .pdv-cat { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--primary); margin-bottom: auto; letter-spacing: 0.5px;}
.pos-prod-card .pdv-price { font-size: 16px; color: var(--success); font-weight: 800; margin-top: 10px; }

/* A Nova Gaveta do Carrinho (Invisível até o JS ativar) */
.pos-cart {
    position: fixed;
    top: 0;
    right: -500px; /* Escondido fora da tela */
    width: 100%;
    max-width: 420px;
    height: 100vh;
    background: var(--vz-panel);
    border-left: 1px solid var(--border);
    z-index: 2500;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    padding: 30px 25px;
    box-shadow: -15px 0 50px rgba(0,0,0,0.6);
}
.pos-cart.open {
    right: 0; /* JS vai adicionar esta classe para abrir */
}

/* Fundo escuro atrás da Gaveta */
.pos-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 2499;
    display: none; opacity: 0; transition: opacity 0.3s;
}
.pos-overlay.active { display: block; opacity: 1; }

.pos-cart-list { flex: 1; overflow-y: auto; margin-bottom: 20px; padding-right: 5px; border-bottom: 1px solid var(--border); }
.pos-cart-item { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 15px; background: var(--vz-veu); padding: 15px; border-radius: 12px; }
.pos-total { font-size: 28px; font-weight: 900; text-align: center; color: var(--success); margin-bottom: 25px; background: rgba(255,176,0,0.1); padding: 20px; border-radius: 6px; border: 1px solid rgba(255,176,0,0.2); }

/* Categorias em Pílulas no PDV */
.pos-header { display: flex; gap: 15px; margin-bottom: 25px; }
.pos-cats { 
    display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 15px; 
    scrollbar-width: none; 
}
.pos-cat-chip {
    padding: 10px 20px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap;
    transition: 0.3s; font-weight: 700; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.pos-cat-chip:hover { border-color: var(--primary); color: var(--vz-txt); transform: translateY(-2px); }
.pos-cat-chip.active { background: var(--vz-orange); color: var(--vz-txt); border-color: transparent; box-shadow: 0 2px 0 #7A2E06; }

/* Botões do Modal PDV */
.pos-modal-size-opt {
    padding: 15px; border: 1px solid var(--border); background: var(--bg-input); 
    border-radius: 12px; margin-bottom: 8px; cursor: pointer; display: flex; justify-content: space-between;
    transition: 0.2s; font-weight: 600;
}
.pos-modal-size-opt:hover { border-color: var(--primary); }
.pos-modal-size-opt.selected { border-color: var(--primary); background: rgba(255,176,0,0.18); box-shadow: 0 0 0 2px rgba(255,176,0,0.18); }

/* Estilo para opções adicionais no PDV */
.pos-opt-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer;
}
.pos-opt-checkbox {
    width: 18px; height: 18px; border: 2px solid var(--border);
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    margin-right: 10px;
}
.pos-opt-checkbox.checked { background: var(--primary); border-color: var(--primary); }

.half-option {
    padding: 10px; border-radius: 10px; background: var(--bg-body); margin-bottom: 8px; cursor: pointer;
    border: 1px solid var(--border); transition: 0.2s; display: flex; justify-content: space-between; align-items: center;
}
.half-option:hover { border-color: var(--primary); }
.half-option.selected { border-color: var(--success); background: rgba(255,176,0,0.1); }


/* ========================================================= */
/* 🖨️ ESTILOS DE IMPRESSÃO (TÉRMICA - CORRIGIDO)             */
/* ========================================================= */
#cupom-impressao { display: none; }

@media print {
    @page { size: 80mm auto; margin: 0mm; }
    html, body { background-color: white !important; margin: 0 !important; padding: 0 !important; width: 80mm; }
    body * { visibility: hidden; }
    .modal-overlay, .sidebar, .top-header, .main-content { display: none !important; }

    #cupom-impressao {
        display: block !important; position: absolute; left: 0; top: 0; width: 76mm; 
        background: white !important; color: black !important;
        font-family: 'Courier New', Courier, monospace; font-size: 14px; font-weight: bold;
        padding: 2mm; margin: 0; visibility: visible; z-index: 9999;
    }
    #cupom-impressao * { visibility: visible; }
}

/* ========================================================= */
/* 📱 RESPONSIVIDADE                                         */
/* ========================================================= */
#btn-mobile-menu { display: none; background: var(--bg-card); border: 1px solid var(--border); color: var(--vz-txt); padding: 12px 18px; border-radius: 12px; font-size: 20px; cursor: pointer; margin-bottom: 20px; }

@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .config-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    body { flex-direction: column; }
    .sidebar {
        position: fixed;
        top: 0; left: -280px;
        height: 100%;
        z-index: 2000;
        transition: 0.3s;
        box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    }
    .sidebar.open { left: 0; }

    .overlay-menu {
        display: none;
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.7); z-index: 1500;
    }
    .overlay-menu.active { display: block; }

    .main-content { padding: 20px; width: 100%; }
    #btn-mobile-menu { display: inline-block; }

    .stats-grid { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .config-grid { grid-template-columns: 1fr; }
    .list-header { display: none; }
    
    .list-item { 
        display: flex; flex-direction: column; align-items: flex-start; gap: 10px; 
        padding: 15px; background: var(--vz-veu); border-radius: 10px; margin-bottom: 10px;
    }
    .list-item img { width: 50px; height: 50px; }
    .action-buttons { width: 100%; justify-content: space-between; margin-top: 10px; }
    
    .top-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .search-bar { width: 100%; }
}

/* ========================================================= */
/* 📦 GAVETA DE PRODUTOS E UX PREMIUM                        */
/* ========================================================= */
.drawer-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 2499;
    display: none; opacity: 0; transition: opacity 0.3s;
}
.drawer-overlay.active { display: block; opacity: 1; }

.product-drawer {
    position: fixed; top: 0; right: -600px; width: 100%; max-width: 500px; height: 100vh;
    background: var(--vz-panel);
    border-left: 1px solid var(--border); z-index: 2500;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex; flex-direction: column; padding: 0;
    box-shadow: -15px 0 50px rgba(0,0,0,0.6);
}
.product-drawer.open { right: 0; }

.drawer-header {
    padding: 25px 30px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-card);
}
.drawer-content {
    padding: 30px; flex: 1; overflow-y: auto;
}
.drawer-footer {
    padding: 25px 30px; border-top: 1px solid var(--border);
    background: var(--bg-card); display: flex; gap: 15px;
}

/* Upload Box Estilizado */
.upload-box {
    border: 2px dashed rgba(255,176,0,0.18); border-radius: 6px;
    padding: 30px 20px; text-align: center; cursor: pointer;
    background: rgba(255,176,0,0.18); transition: 0.3s; margin-bottom: 15px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.upload-box:hover { background: rgba(255,176,0,0.18); border-color: var(--primary); }
.upload-box i { font-size: 30px; color: var(--primary); }
.upload-box span { font-size: 13px; color: var(--text-muted); font-weight: 600; }

/* Bloco Visual de Formulário */
.form-block {
    background: var(--vz-veu); border: 1px solid var(--border);
    border-radius: 6px; padding: 25px; margin-bottom: 25px;
}
.form-block-title {
    font-size: 14px; font-weight: 800; color: var(--vz-txt); margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.5px;
}
.form-block-title i { color: var(--primary); }

/* Tamanhos Modernos (Substituindo checkbox velho) */
.size-pills-container { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.size-pill {
    background: var(--bg-input); border: 1px solid var(--border); padding: 10px 18px;
    border-radius: 50px; font-size: 13px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; transition: 0.3s; user-select: none;
}
.size-pill.active { background: rgba(255,176,0,0.18); color: var(--vz-txt); border-color: var(--primary); }

/* Grid de Tamanhos Dinâmica */
.size-price-grid {
    display: grid; gap: 15px; background: var(--bg-input); padding: 15px;
    border-radius: 12px; border: 1px solid var(--border); margin-top: 10px;
}
.size-price-row {
    display: flex; align-items: center; justify-content: space-between; gap: 15px;
}
.size-price-row span { font-weight: bold; width: 80px; }
.size-price-row input { flex: 1; margin: 0; padding: 10px; }

/* Botão Novo Produto Gigante */
.btn-new-product {
    background: var(--vz-orange);
    color: var(--vz-txt); border: none; padding: 12px 25px; border-radius: 12px;
    font-weight: 800; cursor: pointer; transition: 0.3s; box-shadow: 0 5px 15px rgba(255,176,0,0.3);
    display: flex; align-items: center; gap: 10px; font-size: 14px; text-transform: uppercase;
}
.btn-new-product:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255,176,0,0.4); }
/* ── DIVIDIR CONTA (PDV + CAIXA) ──────────────────────────────── */
.div-admin-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7);
    display: none; align-items: center; justify-content: center;
    z-index: 9999; padding: 20px;
}
.div-admin-modal {
    background: var(--bg-card); border-radius: 6px; border: 1px solid var(--border);
    width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
    padding: 28px 24px 32px; box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.div-admin-modal h2 { font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.div-admin-modal .subtitulo { font-size: 12px; color: var(--text-muted); margin-bottom: 22px; }

.div-secao { font-size: 11px; font-weight: 800; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: 0.08em; margin-bottom: 10px; }

.div-pessoas-row { display: flex; gap: 8px; margin-bottom: 14px; }
.div-pessoas-row input {
    flex: 1; padding: 11px 14px; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: 12px;
    color: var(--vz-txt); font-family: inherit; font-size: 14px; outline: none;
}
.div-pessoas-row input:focus { border-color: var(--primary); }
.div-pessoas-row button {
    padding: 11px 16px; background: var(--primary); border: none;
    border-radius: 12px; color: var(--vz-txt); font-weight: 900; font-size: 18px; cursor: pointer;
}
.div-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.div-chip {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg-input); border: 1.5px solid var(--border);
    border-radius: 50px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--vz-txt);
}
.div-chip .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.div-chip .rm { background: none; border: none; color: var(--danger);
    cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1; }

.div-item-linha {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-input); border-radius: 12px; padding: 12px 14px;
    border: 1.5px solid var(--border); margin-bottom: 8px; transition: border-color 0.2s;
}
.div-item-linha.ok { border-color: var(--success); }
.div-item-info { flex: 1; min-width: 0; }
.div-item-nome { font-weight: 700; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.div-item-preco { font-size: 12px; color: var(--success); font-weight: 700; margin-top: 2px; }
.div-item-sel {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; color: var(--vz-txt); font-family: inherit;
    font-size: 13px; padding: 7px 10px; outline: none; max-width: 130px; cursor: pointer;
}
.div-item-sel:focus { border-color: var(--primary); }

/* Resumo por pessoa no caixa */
.div-resumo-card {
    box-shadow: inset 0 0 0 1px var(--vz-amber); background: var(--vz-well);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
}
.div-resumo-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.div-resumo-nome { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.div-resumo-total { font-size: 16px; font-weight: 900; color: var(--success); }
.div-resumo-itens { font-size: 12px; color: var(--text-muted); line-height: 1.8; }

/* badge no bill-card */
.badge-divisao-admin {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--vz-orange);
    color: var(--vz-txt); font-size: 10px; font-weight: 800;
    padding: 3px 8px; border-radius: 8px; margin-left: 8px; vertical-align: middle;
}

/* ========================================================= */
/* 🔥 COZINHA (KDS) INTEGRADA NO PAINEL                       */
/* ========================================================= */
.kds-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.kds-mural { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; align-items: start; }

.kds-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
    overflow: hidden; display: flex; flex-direction: column;
    border-top: 1px solid var(--vz-gunmetal); box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}
.kds-card.type-mesa { border-top-color: var(--primary); }
.kds-card.type-delivery { border-top-color: var(--accent); }
.kds-card.type-balcao { border-top-color: var(--secondary); }
.kds-card.status-preparo { box-shadow: 0 0 0 2px rgba(255,176,0,0.35); }

.kds-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; font-weight: 800; font-size: 14px; background: var(--vz-veu); }
.kds-sub { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.kds-cliente { font-weight: 700; }
.kds-itens { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.kds-item {
    display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px;
    background: var(--vz-veu); cursor: pointer; transition: 0.15s;
}
.kds-item:hover { background: var(--vz-veu-forte); }
.kds-item.feito { opacity: 0.5; text-decoration: line-through; }
.kds-item.novo { box-shadow: inset 0 0 0 1px var(--vz-amber); background: var(--vz-well); }
.kds-qtd { min-width: 28px; height: 28px; border-radius: 8px; background: var(--bg-input); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.kds-obs { font-size: 12px; color: var(--accent); margin-top: 4px; }
.kds-meta { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); }
.kds-meta b { color: var(--success); font-size: 15px; }
.kds-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); margin-top: auto; }
.kds-badge { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.kds-badge.pendente { background: rgba(148,163,184,0.15); color: var(--text-muted); }
.kds-badge.preparo { background: rgba(255,176,0,0.18); color: var(--accent); }
.kds-btn {
    flex: 1; padding: 10px; border: none; border-radius: 10px; font-weight: 800; cursor: pointer;
    font-family: inherit; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: 0.2s;
}
.kds-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.kds-btn.prep { background: var(--accent); color: #16181B; }
.kds-btn.pronto { background: var(--success); color: #16181B; }
.kds-btn.cancel { background: transparent; border: 1px solid rgba(230,226,218,0.4); color: var(--danger); flex: 0 0 46px; }


/* =========================================================================
   VENUZ FOOD — GRAMÁTICA DA BANCADA (sobreposição)
   Estas regras vêm por último e definem os componentes do mundo. As regras
   acima permanecem para layout; identidade é decidida aqui.
   ========================================================================= */

body { font-family: var(--vz-font-ui); font-variant-numeric: tabular-nums; }

/* Serigrafia do chassi */
.panel-title, .list-header, .stat-label, .form-block-title, .kds-sub {
    font-family: var(--vz-font-ui); text-transform: uppercase;
    letter-spacing: 0.12em; font-weight: 600; color: var(--vz-muted);
}

/* Números e dinheiro sempre em visor */
.stat-value, .bill-total, .pos-total, .div-resumo-total, .kds-head,
.div-item-preco, .size-price-row input {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
}
.stat-value { color: var(--vz-bone); font-weight: 700; }
.bill-total, .pos-total, .div-resumo-total { color: var(--vz-amber); font-weight: 700; }

/* Painéis: superfície opaca com moldura, sem vidro */
.panel-box, .stat-card, .bill-card, .pos-prod-card, .form-block,
.div-resumo-card, .kds-card, .modal-content, .product-drawer {
    background: var(--vz-panel); border: 1px solid var(--vz-gunmetal);
    border-radius: var(--vz-panel-r); box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}
.stat-card:hover, .bill-card:hover, .pos-prod-card:hover {
    transform: none; border-color: var(--vz-gunmetal);
}
.bill-card::before, .bill-card:hover::before, .stat-card::after { display: none; }

/* Sidebar: painel lateral do rack */
.sidebar { background: var(--vz-panel); border-right: 1px solid var(--vz-gunmetal); }
.logo-text, .logo-icon {
    font-family: var(--vz-font-display); letter-spacing: 0.1em; text-transform: uppercase;
    background: none; -webkit-text-fill-color: currentColor; color: var(--vz-bone);
}
.logo-icon { background: var(--vz-well); color: var(--vz-bone); border-radius: 3px; }
.nav-item {
    font-family: var(--vz-font-ui); border-radius: var(--vz-key-r);
    text-transform: uppercase; letter-spacing: 0.07em; font-size: 12px; font-weight: 600;
    color: var(--vz-muted); background: transparent; border-left: none;
}
.nav-item:hover { background: var(--vz-well); color: var(--vz-bone); }
.nav-item.active {
    background: var(--vz-well); color: var(--vz-amber);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.7); border-left: none;
}

/* Campos: poço rebaixado */
input, select, textarea, .search-bar, .form-group-modal input,
.div-pessoas-row input, .div-item-sel {
    background: var(--vz-well); border: 1px solid var(--vz-gunmetal);
    color: var(--vz-bone); border-radius: 3px; font-family: var(--vz-font-ui);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.55);
}
input:focus, select:focus, textarea:focus, .search-bar:focus-within {
    border-color: var(--vz-amber); box-shadow: inset 0 2px 5px rgba(0,0,0,0.55);
}
input::placeholder, textarea::placeholder { color: var(--vz-muted); }

/* TECLA — o átomo */
.btn-gradient, .btn-pay, .btn-config, .custom-file-btn, .btn-new-product,
.pos-cat-chip, .size-pill, .pos-modal-size-opt, .half-option,
.div-pessoas-row button, .div-chip, .kds-btn, .btn-icon, .feature-btn {
    font-family: var(--vz-font-ui);
    background: var(--vz-keycap); color: var(--vz-legend); border: none;
    border-radius: var(--vz-key-r); cursor: pointer;
    font-weight: 700; letter-spacing: 0.07em;
    box-shadow: inset 0 1px 0 var(--vz-keycap-up), inset 0 -2px 0 rgba(0,0,0,0.22),
                0 2px 0 #0E0F11, 0 3px 6px rgba(0,0,0,0.4);
    transition: transform var(--vz-travel) ease-out, box-shadow var(--vz-travel) ease-out;
}
.btn-gradient:hover, .btn-pay:hover, .btn-config:hover, .custom-file-btn:hover,
.btn-new-product:hover, .pos-cat-chip:hover, .kds-btn:hover, .btn-icon:hover {
    transform: none; background: var(--vz-keycap-up); box-shadow:
        inset 0 1px 0 var(--vz-keycap-up), inset 0 -2px 0 rgba(0,0,0,0.22),
        0 2px 0 #0E0F11, 0 3px 6px rgba(0,0,0,0.4);
}
.btn-gradient:active, .btn-pay:active, .btn-config:active, .custom-file-btn:active,
.btn-new-product:active, .pos-cat-chip:active, .kds-btn:active, .btn-icon:active,
.size-pill:active, .pos-modal-size-opt:active, .half-option:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 var(--vz-keycap-up), 0 0 0 #0E0F11, 0 1px 2px rgba(0,0,0,0.4);
}

/* Tecla pressionada = estado ativo */
/* TECLA ACESA: selecionada = erguida + LED. Nunca rebaixar a ativa.
   O anel escuro e o soquete do LED — ambar sobre putty da ~1.5:1 sem ele. */
.pos-cat-chip.active, .size-pill.active, .pos-modal-size-opt.selected,
.half-option.selected, .div-chip.ativa, .vz-tab-on, .btn-pgt-real.sel {
    background: var(--vz-keycap-up) !important;
    color: var(--vz-legend) !important;
    font-weight: 700 !important;
    transform: none !important;
    box-shadow:
        inset 0 1px 0 #D8D3C4,
        inset 0 -2px 0 rgba(0,0,0,0.22),
        0 2px 0 #0E0F11,
        0 3px 6px rgba(0,0,0,0.45) !important;
    position: relative;
}
.pos-cat-chip.active::before, .size-pill.active::before, .pos-modal-size-opt.selected::before,
.half-option.selected::before, .div-chip.ativa::before, .vz-tab-on::before,
.btn-pgt-real.sel::before {
    content: ''; position: absolute; top: 6px; left: 7px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--vz-amber);
    box-shadow: 0 0 0 2px rgba(27,29,32,0.6), 0 0 6px 1px rgba(255,176,0,0.9);
    pointer-events: none;
}

/* Tecla lisa: acao secundaria que nao commita (ex.: "Ver Fila da Cozinha").
   Antes era .btn-gradient com fundo sobrescrito inline: o texto continuava
   na cor da tecla laranja e o botao ficava preto sobre preto (1.05:1). */
.vz-key-plain {
    font-family: var(--vz-font-ui);
    background: var(--vz-keycap); color: var(--vz-legend); border: none;
    border-radius: var(--vz-key-r); cursor: pointer;
    font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
    min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: inset 0 1px 0 var(--vz-keycap-up), inset 0 -2px 0 rgba(0,0,0,0.22),
                0 2px 0 #0E0F11, 0 3px 6px rgba(0,0,0,0.4);
    transition: transform var(--vz-travel) ease-out;
}
.vz-key-plain:hover { background: var(--vz-keycap-up); }
.vz-key-plain:active { transform: translateY(2px); }

/* A TECLA LARANJA: uma por contexto de decisão (ver DESIGN.md) */
.btn-gradient, .btn-pay, .kds-btn.pronto, .btn-new-product {
    background: var(--vz-orange); color: var(--vz-legend);
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 0 rgba(0,0,0,0.28),
                0 2px 0 #7A2E06, 0 3px 8px rgba(0,0,0,0.5);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.btn-gradient:hover, .btn-pay:hover, .kds-btn.pronto:hover, .btn-new-product:hover {
    background: var(--vz-orange); filter: brightness(1.06);
}

/* Ação destrutiva: guarda física, o sistema não tem vermelho */
.btn-delete, .btn-cancel-order, .kds-btn.cancel, .div-chip .rm, .option-remove {
    background: var(--vz-well); color: var(--vz-bone);
    border: 1px solid var(--vz-gunmetal); box-shadow: none;
    position: relative; overflow: hidden; border-radius: var(--vz-key-r);
}
.btn-delete::after, .btn-cancel-order::after, .kds-btn.cancel::after {
    content: ''; position: absolute; top: 0; right: 0; width: 18px; height: 100%;
    background: repeating-linear-gradient(45deg, var(--vz-bone) 0 3px, transparent 3px 7px);
    opacity: 0.3; pointer-events: none;
}
.btn-delete:hover, .btn-cancel-order:hover, .kds-btn.cancel:hover { background: #101215; color: var(--vz-bone); }

/* Selos e pílulas de status */
.status-pill, .cat-badge, .size-badge, .kds-badge, .option-tag, .badge-divisao-admin {
    font-family: var(--vz-font-ui); border-radius: 2px;
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
    background: var(--vz-gunmetal); color: var(--vz-bone); border: none;
}
.kds-badge.preparo { background: var(--vz-amber); color: var(--vz-legend); }
.kds-badge.pendente { background: var(--vz-gunmetal); color: var(--vz-bone); }

/* Ícones de estatística: chapa gravada, não bolha colorida com brilho */
.stat-icon-bg, .bg-purple, .bg-pink, .bg-orange, .bg-green {
    background: var(--vz-well); color: var(--vz-muted);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); border-radius: 3px;
}

/* Upload: rebaixo, não caixa tracejada roxa */
.upload-box {
    background: var(--vz-well); border: 1px dashed var(--vz-gunmetal);
    border-radius: 3px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}
.upload-box:hover { background: #101215; border-color: var(--vz-bone); }
.upload-box i { color: var(--vz-muted); }

/* KDS embutido no admin: mesma gramática da tela dedicada */
.kds-card.type-mesa, .kds-card.type-delivery, .kds-card.type-balcao { background: var(--vz-panel); }
.kds-card.status-preparo { border-color: var(--vz-amber); }
.kds-head { color: var(--vz-amber); }
.kds-qtd {
    background: var(--vz-keycap); color: var(--vz-legend);
    border: none; border-radius: var(--vz-key-r); font-family: var(--vz-font-display);
}
.kds-obs { background: var(--vz-well); color: var(--vz-bone); border: 1px solid var(--vz-gunmetal); border-radius: 3px; }
.kds-item.novo { background: var(--vz-well); box-shadow: inset 0 0 0 1px var(--vz-amber); border-left: none; }

/* Modais e gaveta: sem vidro */
.modal-overlay, .div-admin-overlay, .drawer-overlay, .pos-overlay, .overlay-menu {
    background: rgba(0,0,0,0.78);
}
.product-drawer, .div-admin-modal, .pos-cart { background: var(--vz-panel); }
.modal-content h3, .div-admin-modal h2, .drawer-header {
    font-family: var(--vz-font-display); letter-spacing: 0.03em;
}

/* Movimento: só o curso da tecla */
.list-item:hover, .kds-item:hover { background: var(--vz-veu); transform: none; }

:focus-visible { outline: 2px solid var(--vz-amber); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: 1ms !important; } }

/* Aba ativa do painel: tecla pressionada */
.vz-tab-on {
    font-family: var(--vz-font-ui); background: var(--vz-well); color: var(--vz-amber);
    border: 1px solid var(--vz-gunmetal); border-radius: var(--vz-key-r); cursor: pointer;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
}

/* O ALERTA PRECISA FICAR ACIMA DO OVERLAY DE LOGIN (corrigido 2026-08-04).
   O #auth-lock tem z-index:9999 inline (admin.html); o SweetAlert usa 1060 por
   padrao. Resultado: o alerta era disparado na hora certa, mas ATRAS da tela de
   login — invisivel. So aparecia quando o login dava certo e o overlay recebia
   display:none, entregando a mensagem da tentativa ANTERIOR. A leitura do
   operador era "erra a senha e nao acontece nada".

   Isso nao escondia so o "credenciais invalidas". Escondia TODA mensagem da tela
   de login, incluindo o "sistema fora do ar, nao e a sua senha" (erro_banco) e o
   aviso de bloqueio por inadimplencia — as duas construidas justamente depois do
   incidente em que a operacao passou horas achando que era senha errada.

   Fica acima do 9999 do auth-lock e do 2500 da gaveta do PDV. */
div:where(.swal2-container) { z-index: 10050 !important; }

/* SweetAlert no mundo do aparelho — sem isto o botao de confirmar volta roxo */
div:where(.swal2-container) div:where(.swal2-popup) {
    background: var(--vz-panel) !important; color: var(--vz-bone) !important;
    border: 1px solid var(--vz-gunmetal); border-radius: var(--vz-panel-r) !important;
    font-family: var(--vz-font-ui) !important;
}
div:where(.swal2-container) .swal2-title { font-family: var(--vz-font-display) !important; letter-spacing: 0.02em; }
div:where(.swal2-container) .swal2-html-container { color: var(--vz-bone) !important; }
div:where(.swal2-container) .swal2-confirm {
    background: var(--vz-orange) !important; color: var(--vz-legend) !important;
    border-radius: var(--vz-key-r) !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: 0.08em; box-shadow: none !important;
}
div:where(.swal2-container) .swal2-cancel, div:where(.swal2-container) .swal2-deny {
    background: var(--vz-well) !important; color: var(--vz-bone) !important;
    border: 1px solid var(--vz-gunmetal) !important; border-radius: var(--vz-key-r) !important;
    box-shadow: none !important;
}
div:where(.swal2-icon).swal2-warning { border-color: var(--vz-amber) !important; color: var(--vz-amber) !important; }
div:where(.swal2-icon).swal2-error   { border-color: var(--vz-bone) !important;  color: var(--vz-bone) !important; }
div:where(.swal2-icon).swal2-success { border-color: var(--vz-bone) !important; color: var(--vz-bone) !important; }
div:where(.swal2-icon).swal2-question, div:where(.swal2-icon).swal2-info {
    border-color: var(--vz-muted) !important; color: var(--vz-muted) !important;
}

/* Nome da loja na sidebar nao pode truncar com reticencias */
.logo-text {
    white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 13px; line-height: 1.25; overflow-wrap: anywhere;
}

/* Âmbar é estado ao vivo, não dado estático (ver DESIGN.md, lei 2).
   Preço e rótulo de categoria são dado: osso e serigrafia. */
.pos-prod-card .pdv-price, .list-item .prod-price, .order-row .valor,
.size-price-row span { color: var(--vz-bone); font-family: var(--vz-font-display); font-weight: 700; }
.pos-prod-card .pdv-cat {
    color: var(--vz-muted); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.pos-prod-card h4 { color: var(--vz-bone); font-weight: 600; }
/* Âmbar fica só no que é estado corrente: total do carrinho, caixa aberto, badge ativo. */
.pos-total, .bill-total, .stat-value.ao-vivo { color: var(--vz-amber); }

/* =========================================================================
   FASE 2 — ambar reservado a estado ao vivo (ver DESIGN.md, lei 2)
   Legitimo: LED de tecla acesa, mesa ocupada, caixa aberto, pedido em
   preparo, foco, e digito dentro de visor. Tudo o mais perde o ambar.
   ========================================================================= */
.cat-badge, .size-badge, .option-tag, .status-pill:not(.ao-vivo) {
    color: var(--vz-bone); background: var(--vz-gunmetal);
}
.btn-icon, .btn-edit { color: var(--vz-bone); }
.panel-title i, .form-block-title i, .list-header i { color: var(--vz-muted); }
/* Borda decorativa em caixa estatica: era ambar sem carregar estado nenhum */
.form-block, .input-group, .config-grid .panel-box { border-color: var(--vz-gunmetal); }

/* =========================================================================
   ESCALA CATEGORICA — FORMA DE PAGAMENTO (DESIGN.md, lei 3)
   LED indicador, nunca preenchimento de regiao.

   MEDIDO: sobre o chassi, dinheiro 9.2:1, pix 6.9:1, cartao 5.4:1 — todos
   muito acima do minimo de 3:1 para marca nao-textual. Mas a separacao
   MUTUA entre os tres e fraca (1.3-1.7:1): quem nao distingue matiz ve tres
   pontos parecidos. Por isso a regra vinculante nao e negociavel — a cor
   NUNCA aparece sozinha, sempre com o rotulo escrito ao lado. A cor acelera
   o reconhecimento para quem enxerga matiz; o texto garante para todos.
   ========================================================================= */
:root {
    --pg-dinheiro: #7ED09B;   /* verde claro  — dinheiro em especie */
    --pg-pix:      #2FB6C4;   /* ciano medio  — PIX */
    --pg-cartao:   #6E8FE8;   /* azul         — cartao */
    --pg-dividido: #E6E2DA;   /* osso         — conta dividida (nao e forma) */
    --pg-outros:   #9BA0A6;   /* muted        — demais */
}

.vz-pgt {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--vz-font-ui); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--vz-bone); white-space: nowrap;
}
.vz-pgt::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--pg-outros);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.45), 0 0 6px 1px currentColor;
}
.vz-pgt--dinheiro::before { background: var(--pg-dinheiro); box-shadow: 0 0 0 2px rgba(0,0,0,0.45), 0 0 6px 1px rgba(126,208,155,0.55); }
.vz-pgt--pix::before      { background: var(--pg-pix);      box-shadow: 0 0 0 2px rgba(0,0,0,0.45), 0 0 6px 1px rgba(47,182,196,0.55); }
.vz-pgt--cartao::before   { background: var(--pg-cartao);   box-shadow: 0 0 0 2px rgba(0,0,0,0.45), 0 0 6px 1px rgba(110,143,232,0.55); }
.vz-pgt--dividido::before { background: var(--pg-dividido); box-shadow: 0 0 0 2px rgba(0,0,0,0.45), 0 0 6px 1px rgba(230,226,218,0.45); }
.vz-pgt--outros::before   { background: var(--pg-outros);   box-shadow: 0 0 0 2px rgba(0,0,0,0.45); }

/* Celula de reconciliacao: o LED identifica a categoria, o numero fica osso.
   O valor NAO e ambar: e dado estatico, nao estado ao vivo. */
.vz-recon { position: relative; }
.vz-recon .vz-recon-val {
    font-family: var(--vz-font-display); font-size: 22px; font-weight: 700;
    color: var(--vz-bone); font-variant-numeric: tabular-nums;
}

/* =========================================================================
   VISOR DO CAIXA — estado que bloqueia toda venda da loja (regra F3).
   Era pilula com branco sobre ambar: 1.83:1 aberto, 1.29:1 fechado.
   Agora e visor: poco rebaixado, rotulo em serigrafia, valor legivel,
   LED carregando o estado. Nenhuma cor nova; contraste sai de 1.83 para >10:1.
   ========================================================================= */
.vz-caixa {
    display: inline-flex; align-items: center; gap: 10px;
    /* Janela de display: escura nos DOIS temas. O digito ambar so existe
       porque o fundo e escuro — sobre creme viraria texto marrom. */
    background: var(--vz-visor); border: 1px solid var(--vz-visor-borda);
    border-radius: 3px; padding: 10px 18px; cursor: pointer;
    box-shadow: inset 0 2px 7px rgba(0,0,0,0.7);
    font-family: var(--vz-font-ui); transition: border-color 120ms linear;
}
.vz-caixa:hover { border-color: var(--vz-muted); }
.vz-caixa-led {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    background: #4A4C50; transition: background 200ms linear, box-shadow 200ms linear;
}
.vz-caixa.aberto .vz-caixa-led {
    background: var(--vz-amber-led); box-shadow: 0 0 7px 1px rgba(255,176,0,0.85);
    transition-duration: 120ms;
}
.vz-caixa-rot {
    font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: #9BA0A6;  /* dentro do visor escuro */
}
.vz-caixa-val {
    font-family: var(--vz-font-display); font-size: 15px; font-weight: 700;
    letter-spacing: 0.04em; color: #E6E2DA;  /* osso dentro do visor escuro */
}
.vz-caixa.aberto .vz-caixa-val { color: var(--vz-amber-led); }

/* =========================================================================
   SIDEBAR ROLAVEL — bug pre-existente, medido em 2026-07-30.
   O conteudo tem 881px. Em 1366x768 (a resolucao de notebook mais comum)
   sobram 768px: CONFIGURACOES fica na borda, SUPORTE e SAIR ficam
   inalcancaveis. Com body{overflow:hidden} e .sidebar sem overflow proprio,
   o conteudo era simplesmente cortado, sem barra de rolagem — o usuario nao
   tinha como chegar em Configuracoes nem sair do sistema.
   ========================================================================= */
.sidebar {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--vz-gunmetal) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--vz-gunmetal); border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* Em tela baixa, aperta o respiro vertical antes de precisar rolar:
   rolar menu de navegacao e pior que menu compacto. */
@media (max-height: 800px) {
    .sidebar { padding: 18px 20px; }
    .nav-item { padding: 10px 14px; margin-bottom: 3px; }
    .logo-area { margin-bottom: 18px; }
}

/* =========================================================================
   GRADE DO PAINEL — sistema unico
   Medido antes: duas grades irmas com gaps diferentes (25px por classe,
   20px inline), a .dashboard-grid definida e nunca usada, e trilhas
   fantasma de 0px porque um painel nasce oculto. Resultado: um bloco de
   1100px encostado embaixo de tres cards de 350px, sem borda em comum.

   Regra: TODO bloco do painel vive nesta grade e ocupa 1, 2 ou 3 colunas.
   Assim as bordas caem sempre nas mesmas trilhas, sem alinhamento manual.
   ========================================================================= */
:root {
    --vz-gap: 20px;       /* respiro entre blocos irmaos */
    --vz-gap-secao: 32px; /* separacao entre secoes */
}

.vz-dash {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vz-gap);
    align-items: start;
}
.vz-dash > .col-2 { grid-column: span 2; }
.vz-dash > .col-3 { grid-column: span 3; }

/* Quebra antes de esmagar: a 1100px os cards ficavam com 237px porque
   repeat(3,1fr) segurava tres colunas ate 1024px. */
@media (max-width: 1200px) {
    .vz-dash { grid-template-columns: repeat(2, 1fr); }
    .vz-dash > .col-3 { grid-column: span 2; }
}
@media (max-width: 820px) {
    .vz-dash { grid-template-columns: 1fr; }
    .vz-dash > .col-2, .vz-dash > .col-3 { grid-column: span 1; }
}

/* Dentro da grade, o bloco nao carrega margem propria: o gap resolve. */
.vz-dash > .panel-box, .vz-dash > .stat-card { margin-bottom: 0; }

/* =========================================================================
   PAINEL — HIERARQUIA DE CONTEUDO
   O problema medido nao era estetico: tres numeros de 32px lado a lado,
   sem ordem, e o dado mais acionavel (mesas nominais abertas) descartado
   no cliente. Aqui a hierarquia e de tamanho e de posicao, nao de cor.
   ========================================================================= */

.vz-bloco-topo {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 18px;
    padding-bottom: 12px; border-bottom: 1px solid var(--vz-gunmetal);
}
.vz-silk {
    font-family: var(--vz-font-ui); font-size: 11px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--vz-muted);
}
.vz-carimbo {
    font-size: 11px; letter-spacing: 0.06em; color: var(--vz-muted);
    font-variant-numeric: tabular-nums;
}

/* Indicador. O peso vem do tamanho do digito, nao de cor nem de placa de
   icone: as tres placas coloridas anteriores davam enfase igual a todos. */
.vz-ind { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vz-ind .stat-value {
    font-family: var(--vz-font-display); font-weight: 700;
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
    color: var(--vz-bone); font-size: 26px; line-height: 1.05;
    margin: 0; padding: 0;
}
.vz-ind--forte .stat-value { font-size: 44px; }
@media (max-width: 900px) { .vz-ind--forte .stat-value { font-size: 34px; } }

/* --- 1. Dinheiro na rua ------------------------------------------------ */
.vz-rua-visor {
    display: flex; align-items: flex-end; gap: 44px; flex-wrap: wrap;
    margin-bottom: 22px;
}
/* Ambar so quando ha dinheiro aberto de verdade: e estado corrente, nao
   enfase (DESIGN.md, lei 2). Zero na rua nao acende nada. */
.vz-rua-visor .vz-ind--forte.vivo .stat-value { color: var(--vz-amber); }

.vz-mesas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vz-mesa-row {
    display: grid; grid-template-columns: 62px 1fr auto auto;
    align-items: center; gap: 14px;
    background: var(--vz-well); border: 1px solid var(--vz-gunmetal);
    border-radius: 3px; padding: 12px 14px;
}
.vz-mesa-num {
    font-family: var(--vz-font-display); font-size: 17px; font-weight: 700;
    color: var(--vz-bone); letter-spacing: 0.02em;
}
.vz-mesa-nome {
    font-size: 13px; color: var(--vz-bone); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vz-mesa-meta { display: block; font-size: 11px; color: var(--vz-muted); letter-spacing: 0.04em; }
.vz-mesa-val {
    font-family: var(--vz-font-display); font-size: 18px; font-weight: 700;
    color: var(--vz-bone); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Fechar conta e a acao que consuma dinheiro. Cada linha e um modulo
   independente — mesma licenca do PRONTO por card no KDS (DESIGN.md, lei 1). */
.vz-mesa-row .vz-key-fechar {
    font-family: var(--vz-font-ui); font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    background: var(--vz-orange); color: var(--vz-legend);
    border: none; border-radius: 4px; padding: 0 18px; height: 44px; min-width: 96px;
    cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.55);
    transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}
.vz-mesa-row .vz-key-fechar:hover { filter: brightness(1.06); }
.vz-mesa-row .vz-key-fechar:active {
    transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,0.55);
}
.vz-mesa-row .vz-key-fechar:focus-visible {
    outline: 2px solid var(--vz-bone); outline-offset: 2px;
}

/* Vazio explicito. Uma lista que some deixa a duvida "carregou ou nao ha?" */
.vz-vazio {
    border: 1px dashed var(--vz-gunmetal); border-radius: 3px;
    padding: 22px; text-align: center; color: var(--vz-muted); font-size: 13px;
}

/* --- 2. O turno -------------------------------------------------------- */
/* QUEBRA ANTES DE ESMAGAR (medido em 2026-09-18, nao estimado).
   Colunas fracionarias fixas davam ao Faturamento 169px a 1366px para um numero
   que ocupa 310px: "R$ 12.450,00" a 44px. O valor transbordava por cima do
   rotulo vizinho, e o teste nao pegava porque innerText le o DOM, nao o layout.
   Media tambem um defeito ANTERIOR ao lucro: com valor grande, TICKET MEDIO ja
   transbordava a 1366/1100/390px, e no celular PEDIDOS chegava a sobrepor
   TICKET MEDIO. So nao aparecia porque a loja de teste vendia R$ 4,00.
   190px e o piso medido do maior indicador secundario (183px + folga). Com
   auto-fit a grade REFLUI em linhas em vez de espremer, e o Faturamento ocupa
   duas unidades porque o numero dele e o dobro do tamanho. */
.vz-turno-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 24px; align-items: end; margin-bottom: 22px;
}
.vz-turno-grid .vz-ind--forte { grid-column: span 2; }
/* Numero que nao cabe encolhe em vez de vazar: tabular-nums mantem a coluna
   estavel, e ler um digito menor e melhor que ler digito por cima de rotulo. */
.vz-turno-grid .stat-value { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 620px) {
    .vz-turno-grid { grid-template-columns: 1fr; }
    .vz-turno-grid .vz-ind--forte { grid-column: span 1; }
}

/* Cobertura do lucro. Numero de lucro sem dizer sobre quanto foi apurado engana:
   "R$ 80" pode ser de 1 item num turno de 40. Serigrafia, nao ambar — e dado
   estatico, e ambar e estado ao vivo (DESIGN.md, lei 2). */
.vz-dash-lucro-aviso {
    margin: -8px 0 18px; font-size: 11.5px; line-height: 1.5;
    color: var(--vz-muted);
}

.vz-turno-acoes {
    display: flex; gap: 12px; flex-wrap: wrap;
    padding-top: 18px; border-top: 1px solid var(--vz-gunmetal);
}
/* Os atalhos perderam o painel proprio: dois botoes nao justificam um
   bloco com titulo. Viram rodape do turno, que e o contexto deles. */
.vz-turno-acoes .btn-gradient,
.vz-turno-acoes .vz-key-plain {
    width: auto; margin: 0; padding: 0 22px; height: 44px;
}

/* Quando o caixa esta fechado a gaveta nao existe, e o turno ocupa a
   linha inteira em vez de deixar uma trilha vazia. */
.vz-dash > .vz-turno.sem-gaveta { grid-column: span 3; }
@media (max-width: 1200px) { .vz-dash > .vz-turno.sem-gaveta { grid-column: span 2; } }
@media (max-width: 820px)  { .vz-dash > .vz-turno.sem-gaveta { grid-column: span 1; } }

@media (max-width: 700px) {
    .vz-mesa-row { grid-template-columns: 52px 1fr; row-gap: 10px; }
    .vz-mesa-val { grid-column: 2; text-align: right; }
    .vz-mesa-row .vz-key-fechar { grid-column: 1 / -1; width: 100%; }
}

/* =========================================================================
   PDV — CORRECOES P0/P1 (critica 2026-07-31)
   ========================================================================= */

/* P0 · A GRADE NAO ROLAVA.
   .pos-products ja tinha `height:100%; overflow-y:auto`, mas o pai imediato
   e um <div> flex SEM altura, entao a percentagem nao resolvia: a grade
   crescia a 1780px dentro de um .pos-container de 568px com overflow:hidden,
   e o `auto` nunca ativava porque scrollHeight === clientHeight.
   Medido com 56 produtos a 1366x768: 10 visiveis, 41 INALCANCAVEIS — e nem
   a roda do mouse, nem a pagina, nem o container rolavam.
   `min-height:0` e obrigatorio: sem ele um filho flex nao encolhe abaixo do
   proprio conteudo e o overflow volta a vazar. */
.pos-container > div:first-child {
    height: 100%;
    min-height: 0;
}
.pos-products {
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--vz-gunmetal) transparent;
}
.pos-products::-webkit-scrollbar { width: 10px; }
.pos-products::-webkit-scrollbar-thumb {
    background: var(--vz-gunmetal); border-radius: 5px;
    border: 3px solid var(--vz-chassis);
}

/* Preco que nao danca: o card tem altura fixa, mas o preco seguia o nome —
   nome de 2 linhas empurrava o preco 12px pra baixo. DESIGN.md: "coluna de
   preco que nao danca e requisito de um produto que lida com dinheiro". */
.pos-prod-card { display: flex; flex-direction: column; }
.pos-prod-card .pdv-price { margin-top: auto; }

/* P1 · O TIQUE DO ADICIONAL ESTAVA INVERTIDO.
   O glifo <i class="fa-check"> era renderizado SEMPRE, em branco; a classe
   .checked so trocava o fundo. Medido: desmarcado 14,59:1 (tique bem
   visivel), marcado 1,29:1 (branco sobre osso, invisivel). Num campo de
   dinheiro, a leitura padrao era o oposto da verdade.
   Agora o tique so existe quando marcado, em legenda escura sobre a face
   clara — o mesmo contraste da tecla do sistema. */
.pos-opt-checkbox i { display: none; }
.pos-opt-checkbox.checked i { display: block; color: var(--vz-legend); }

/* P1 · A COMANDA NO MOMENTO DO DINHEIRO.
   Com 5 itens a 1366x768 sobravam 149px de lista para 443px de conteudo:
   UMA linha inteira visivel, sob o total, sem indicacao de rolagem.
   min-height:0 faz o flex encolher de verdade; o padding do total cede
   espaco; e a sombra de corte avisa que ha mais coisa abaixo. */
.pos-cart-list {
    min-height: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}
.pos-total { padding: 12px 16px; margin-bottom: 16px; }

/* A gaveta tinha 30px de respiro vertical e o bloco de campos e flex-shrink:0,
   entao TODO o aperto caia na lista de itens: 95px a 1366x768, uma linha.
   Aqui o padding cede e a lista ganha um piso — a conferencia completa
   continua no modal de confirmacao, mas a comanda tambem tem que ser legivel. */
.pos-cart { padding-top: 20px; padding-bottom: 20px; }
.pos-cart-list { min-height: 120px; }

/* A BARRA DA COMANDA nao tinha UMA regra no admin.css: a classe .cart-bar so
   e estilizada no index.html (cardapio do cliente, CSS inline). Aqui o
   elemento existia com a classe e nada a definia — medido: position static,
   fundo transparente, sem justify-content. Os dois filhos encostavam com gap
   de 0px e liam-se como "Ver ComandaR$ 62.68" solto sobre a grade.
   E uma tecla: face clara, legenda escura, curso de 2px. Nao usa laranja —
   quem commita e o LANCAR PEDIDO dentro da gaveta (lei 1). */
#cart-bar-admin.cart-bar {
    position: fixed; right: 30px; z-index: 2400;
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
    min-width: 300px; padding: 12px 18px;
    background: var(--vz-keycap); border-radius: 4px;
    border-top: 1px solid var(--vz-keycap-up);
    box-shadow: 0 3px 0 #7A2E06, 0 8px 18px rgba(0,0,0,0.55);
    cursor: pointer; font-family: var(--vz-font-ui);
    transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}
#cart-bar-admin.cart-bar:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #7A2E06, 0 4px 10px rgba(0,0,0,0.55);
}
/* A legenda vence o color: var(--vz-txt) inline dos filhos (a face e clara). */
#cart-bar-admin.cart-bar,
#cart-bar-admin.cart-bar div,
#cart-bar-admin.cart-bar span { color: var(--vz-legend); }
#cart-bar-admin #cart-count-admin {
    background: var(--vz-well); color: var(--vz-bone);
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
}
#cart-bar-admin #cart-total-admin {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* =========================================================================
   ROLAGEM — dois pontos onde o conteudo excedia e nao havia como alcancar
   ========================================================================= */

/* A FAIXA DE CATEGORIAS escondia a barra de proposito (`scrollbar-width:none`)
   e nao tinha tratamento de roda. Medido: 15 chips, 6 visiveis, 9 fora;
   scrollWidth 2040 contra clientWidth 1026; e a roda vertical sobre a faixa
   deixava scrollLeft em 0. Nove categorias inalcancaveis com mouse de balcao.
   Agora a barra existe e e visivel, e a roda vertical rola na horizontal
   (ver vzRodaHorizontal no admin.js). */
.pos-cats {
    scrollbar-width: thin;
    scrollbar-color: var(--vz-gunmetal) transparent;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
}
.pos-cats::-webkit-scrollbar { height: 8px; }
.pos-cats::-webkit-scrollbar-track {
    background: var(--vz-well); border-radius: 4px;
}
.pos-cats::-webkit-scrollbar-thumb {
    background: var(--vz-gunmetal); border-radius: 4px;
}
.pos-cats::-webkit-scrollbar-thumb:hover { background: var(--vz-muted); }

/* Aviso de que ha mais categorias a direita: desbotado no fim da faixa,
   que some quando o fim e alcancado (classe posta pelo JS). */
.pos-cats-wrap { position: relative; }
.pos-cats-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 14px; width: 46px;
    background: linear-gradient(to right, transparent, var(--vz-chassis));
    pointer-events: none; opacity: 1; transition: opacity 140ms linear;
}
.pos-cats-wrap.no-fim::after { opacity: 0; }

/* A GAVETA: o bloco de campos agora encolhe e rola, e a tecla que commita
   fica grudada no rodape — sempre visivel, sem sair do lugar no DOM. */
.pos-cart-form {
    scrollbar-width: thin;
    scrollbar-color: var(--vz-gunmetal) transparent;
    padding-right: 4px;
}
.pos-cart-form::-webkit-scrollbar { width: 8px; }
.pos-cart-form::-webkit-scrollbar-thumb {
    background: var(--vz-gunmetal); border-radius: 4px;
}
.pos-cart-form .btn-gradient {
    position: sticky; bottom: 0; z-index: 2;
    margin-bottom: 0;
    box-shadow: 0 -10px 16px -6px var(--vz-panel), 0 3px 0 #7A2E06;
}

/* =========================================================================
   CATEGORIAS — a aba mostrava so o nome. Agora mostra a consequencia:
   quantos produtos cada uma carrega, porque apagar uma categoria com
   produtos os deixa orfaos (nao ha FK) e eles caem no rotulo "Geral",
   que nao tem chip nenhum no PDV.
   ========================================================================= */

.vz-dica {
    font-size: 12px; line-height: 1.5; color: var(--vz-muted);
    margin: 10px 0 0; padding-left: 10px;
    border-left: 1px solid var(--vz-gunmetal);
}
.vz-cat-contagem {
    font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--vz-muted);
}

.vz-cat-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.vz-cat-row {
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: center; gap: 14px;
    background: var(--vz-well); border: 1px solid var(--vz-gunmetal);
    border-radius: 3px; padding: 12px 14px;
}
.vz-cat-nome {
    font-family: var(--vz-font-ui); font-size: 14px; font-weight: 600;
    color: var(--vz-bone); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A contagem e dado estatico: osso e serigrafia, nunca ambar (DESIGN.md, lei 2). */
.vz-cat-qtd {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
    font-size: 12px; letter-spacing: 0.06em; color: var(--vz-muted);
    white-space: nowrap;
}
.vz-cat-qtd.vazia { color: var(--vz-gunmetal); }

.vz-cat-acoes { display: flex; gap: 6px; }
.vz-cat-btn {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: var(--vz-keycap); color: var(--vz-legend);
    border: none; border-radius: 4px; cursor: pointer; font-size: 13px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.55);
    transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}
.vz-cat-btn:hover { background: var(--vz-keycap-up); }
.vz-cat-btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,0.55); }
.vz-cat-btn:focus-visible { outline: 2px solid var(--vz-amber); outline-offset: 2px; }

/* Acao destrutiva usa TARJA DE RISCO, nao vermelho (DESIGN.md): face escura
   com listras diagonais no canto, a convencao industrial de guarda fisica. */
.vz-cat-btn--risco {
    background: var(--vz-panel); color: var(--vz-bone);
    border: 1px solid var(--vz-gunmetal); position: relative; overflow: hidden;
}
.vz-cat-btn--risco::after {
    content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px;
    background: repeating-linear-gradient(-45deg,
        var(--vz-gunmetal) 0 3px, transparent 3px 6px);
}
.vz-cat-btn--risco:hover { background: var(--vz-gunmetal); }

/* Renomear no lugar: sem tirar a pessoa da tela nem abrir modal. */
.vz-cat-row input.vz-cat-edit {
    font-family: var(--vz-font-ui); font-size: 14px; font-weight: 600;
    background: var(--vz-chassis); color: var(--vz-bone);
    border: 1px solid var(--vz-amber); border-radius: 3px;
    padding: 8px 10px; width: 100%; min-width: 0; outline: none;
}

/* Vazio que ensina, em vez de "Nenhuma categoria." */
.vz-cat-vazio {
    border: 1px dashed var(--vz-gunmetal); border-radius: 3px;
    padding: 26px 22px; text-align: center;
}
.vz-cat-vazio strong {
    display: block; color: var(--vz-bone); font-size: 14px; margin-bottom: 8px;
}
.vz-cat-vazio span { color: var(--vz-muted); font-size: 13px; line-height: 1.55; }

@media (max-width: 620px) {
    .vz-cat-row { grid-template-columns: 1fr auto; }
    .vz-cat-acoes { grid-column: 1 / -1; }
}

/* --- REORDENAR CATEGORIAS ------------------------------------------------
   A ordem desta lista e a ordem do cardapio do cliente e dos atalhos do PDV.
   Duas formas de mexer porque nenhuma serve sozinha: arrastar e rapido no
   mouse mas nao existe para teclado; as setas sao precisas e acessiveis. */
.vz-cat-row { grid-template-columns: 20px 1fr auto auto; cursor: default; }
.vz-cat-alca {
    color: var(--vz-gunmetal); cursor: grab; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.vz-cat-row:hover .vz-cat-alca { color: var(--vz-muted); }
.vz-cat-alca:active { cursor: grabbing; }

.vz-cat-row.arrastando { opacity: 0.45; }
/* Linha de insercao, nao caixa colorida: o alvo e a fresta entre duas linhas. */
.vz-cat-row.alvo { box-shadow: inset 0 2px 0 var(--vz-amber); }

.vz-cat-btn:disabled {
    background: var(--vz-well); color: var(--vz-gunmetal);
    box-shadow: none; cursor: default;
}
.vz-cat-btn:disabled:active { transform: none; }

@media (max-width: 620px) {
    .vz-cat-row { grid-template-columns: 20px 1fr auto; }
}

/* =========================================================================
   PRODUTOS AGRUPADOS POR CATEGORIA
   Antes: 82 linhas numa lista unica, ordenadas alfabeticamente atravessando
   categorias — "Acai, Agua, Bacon, Batata" abria a tela de uma pizzaria, e a
   coluna CATEGORIA repetia o mesmo texto dezenas de vezes.
   Agora cada categoria e uma secao, na MESMA ordem que o cliente ve no
   cardapio, e a coluna vira cabecalho de grupo.
   ========================================================================= */

.vz-prod-head,
.vz-prod-item { display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: center; }

.vz-prod-grupo { margin-bottom: 10px; }
.vz-prod-grupo-head {
    width: 100%; display: flex; align-items: center; gap: 10px;
    background: var(--vz-well); border: 1px solid var(--vz-gunmetal);
    border-radius: 3px; padding: 11px 14px; cursor: pointer;
    font-family: var(--vz-font-ui); text-align: left;
    position: sticky; top: 0; z-index: 3;
}
.vz-prod-grupo-head:hover { border-color: var(--vz-muted); }
.vz-prod-grupo-head:focus-visible { outline: 2px solid var(--vz-amber); outline-offset: 2px; }

.vz-prod-grupo-nome {
    flex: 1; min-width: 0; font-size: 12px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--vz-bone);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Contagem e dado estatico: serigrafia, nunca ambar (DESIGN.md, lei 2). */
.vz-prod-grupo-qtd {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
    font-size: 11px; letter-spacing: 0.06em; color: var(--vz-muted); white-space: nowrap;
}
.vz-prod-seta {
    font-size: 11px; color: var(--vz-muted); flex-shrink: 0;
    transition: transform 120ms ease-out;
}
.vz-prod-grupo.recolhido .vz-prod-seta { transform: rotate(-90deg); }
.vz-prod-grupo.recolhido .vz-prod-grupo-corpo { display: none; }

.vz-prod-grupo-corpo { padding: 4px 0 2px; }

/* Item pausado: a loja parou de vender. Marca com tarja discreta e o nome
   apagado, sem vermelho (nao existe vermelho neste sistema). */
.vz-prod-item.pausado { opacity: 0.62; }
.vz-prod-item.pausado .vz-prod-nome { text-decoration: line-through; }

.vz-prod-nome {
    font-weight: 700; font-size: 14px; color: var(--vz-bone);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vz-prod-desc { font-size: 11px; color: var(--vz-muted); margin-top: 2px; }
/* Preco e dado estatico: osso, nao ambar. */
.vz-prod-preco {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
    color: var(--vz-bone); font-weight: 700; font-size: 14px;
}

.vz-prod-vazio {
    color: var(--vz-muted); font-size: 12.5px; line-height: 1.55;
    padding: 12px 14px; margin: 0;
    border-left: 1px solid var(--vz-gunmetal); margin-left: 14px;
}

/* ESTADO VAZIO DA BUSCA — diz a causa e oferece a saida no mesmo lugar.
   A versao anterior era uma linha de texto cinza ("Nenhum produto encontrado
   para a busca."), e na pratica lia-se como "os produtos sumiram": o campo de
   busca esta no topo, fora do campo de atencao de quem encara a lista vazia.
   Custou duas rodadas de investigacao com a loja achando que a migracao tinha
   perdido o cardapio.
   Sem fundo cravado: so tokens, que o tema.css inverte. A tecla usa
   keycap + legend, a mesma dupla do #cart-bar-admin — legend NAO e redefinido
   pelo tema justamente porque legenda escura sobre face clara vale nos dois. */
.vz-busca-vazia {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 32px 20px; text-align: center;
}
.vz-busca-vazia-txt {
    margin: 0; color: var(--vz-bone); font-size: 14px; line-height: 1.5;
}
.vz-busca-vazia-sub {
    margin: 0; color: var(--vz-muted); font-size: 12.5px; line-height: 1.5;
}
/* Tecla, nao link: e uma acao de recuperacao e precisa parecer clicavel de
   longe. NAO usa laranja — laranja e a acao que commita (lei 1 do DESIGN.md),
   e limpar um filtro nao commita nada. */
.vz-busca-vazia-btn {
    margin-top: 4px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: var(--vz-keycap); color: var(--vz-legend);
    border: none; border-top: 1px solid var(--vz-keycap-up);
    border-radius: var(--vz-key-r);
    box-shadow: 0 3px 0 var(--vz-gunmetal), 0 6px 14px rgba(0,0,0,0.4);
    font-family: var(--vz-font-ui); font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    cursor: pointer;
    transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}
.vz-busca-vazia-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--vz-gunmetal), 0 3px 8px rgba(0,0,0,0.4);
}
.vz-busca-vazia-btn:focus-visible {
    outline: 2px solid var(--vz-amber); outline-offset: 2px;
}

/* Produtos cuja categoria foi apagada: nao aparecem nos filtros do cardapio,
   entao a secao precisa se declarar em vez de parecer mais uma. */
.vz-prod-grupo.orfa .vz-prod-grupo-head {
    border-color: var(--vz-amber);
    box-shadow: inset 3px 0 0 var(--vz-amber);
}

@media (max-width: 820px) {
    .vz-prod-head { display: none; }
    .vz-prod-item { grid-template-columns: 1fr auto; row-gap: 8px; }
    .vz-prod-item .action-buttons { grid-column: 1 / -1; }
}

/* =========================================================================
   VISORES — a janela do display fica escura nos dois temas.
   Um instrumento num estudio claro continua tendo o display escuro; e o que
   permite o ambar existir. Sem isto o tema claro teria "visor" bege com
   digito marrom, que nao e visor, e texto.
   ========================================================================= */
.pos-total {
    background: var(--vz-visor);
    border: 1px solid var(--vz-visor-borda);
    color: var(--vz-amber-led);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
}

/* O visor de "dinheiro na rua" acende quando ha valor aberto (lei 2). */
.vz-rua-visor .vz-ind--forte {
    background: var(--vz-visor);
    border: 1px solid var(--vz-visor-borda);
    border-radius: 3px;
    padding: 12px 18px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
}
.vz-rua-visor .vz-ind--forte .stat-value { color: #E6E2DA; }
.vz-rua-visor .vz-ind--forte.vivo .stat-value { color: var(--vz-amber-led); }
.vz-rua-visor .vz-ind--forte .vz-silk { color: #9BA0A6; }

/* =========================================================================
   CONFIGURAÇÕES
   Antes: tres painéis em grade de 2 colunas, alturas de 797/739/456px, e o
   botao "Salvar Alteracoes" em y=1491 numa janela de 768 — fora da tela.
   Pior: "Senha do Painel" tinha botao proprio e as outras caixas (senha do
   garcom, slug, taxa, pedido minimo) dependiam do botao la embaixo, todas
   com a MESMA aparencia. Nada dizia qual salvava como.
   Agora: secoes em coluna unica por assunto, e uma barra de salvamento que
   acompanha o rodape e declara quantas alteracoes estao pendentes.
   ========================================================================= */

#view-config { padding-bottom: 92px; }   /* espaço para a barra fixa */

.vz-cfg-sec { margin-bottom: 18px; }
.vz-cfg-sec .panel-title { justify-content: flex-start; gap: 14px; }

.vz-cfg-campos {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px; align-items: start;
}
.vz-cfg-campos.vz-cfg-1col { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.vz-cfg-largo { grid-column: 1 / -1; }
@media (max-width: 1024px) { .vz-cfg-campos { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }

.vz-cfg-selo {
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--vz-muted); border: 1px solid var(--vz-gunmetal);
    border-radius: 3px; padding: 4px 9px; white-space: nowrap;
}
/* "Salva na hora" e informacao sobre o comportamento, nao estado ao vivo:
   fica em serigrafia, nao em ambar (DESIGN.md, lei 2). */
.vz-cfg-selo--agora { border-style: dashed; }
.vz-cfg-opc { color: var(--vz-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.vz-cfg-dica {
    font-size: 12px; line-height: 1.55; color: var(--vz-muted);
    margin: 8px 0 0; padding-left: 10px; border-left: 1px solid var(--vz-gunmetal);
}

/* --- link publico --- */
.vz-cfg-url {
    display: flex; align-items: stretch;
    border: 1px solid var(--vz-gunmetal); border-radius: 3px;
    background: var(--vz-well); overflow: hidden;
}
.vz-cfg-url-base {
    display: flex; align-items: center; padding: 0 4px 0 14px;
    color: var(--vz-muted); font-size: 14px; white-space: nowrap;
    font-family: var(--vz-font-ui);
}
.vz-cfg-url input {
    border: none; background: transparent; border-radius: 0;
    padding-left: 0; flex: 1; min-width: 0;
}
.vz-cfg-url input:focus { box-shadow: none; }
.vz-cfg-url:focus-within { border-color: var(--vz-amber); }
.vz-cfg-copiar {
    background: var(--vz-keycap); color: var(--vz-legend);
    border: none; border-left: 1px solid var(--vz-gunmetal);
    width: 46px; cursor: pointer; font-size: 13px; flex-shrink: 0;
}
.vz-cfg-copiar:hover { background: var(--vz-keycap-up); }
.vz-cfg-copiar:focus-visible { outline: 2px solid var(--vz-amber); outline-offset: -2px; }

/* Aviso do slug: so aparece quando o campo e realmente alterado. QR code
   impresso na mesa aponta para o endereco antigo e para de funcionar. */
.vz-cfg-aviso {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 12px 0 0; padding: 12px 14px;
    background: var(--vz-well); border: 1px solid var(--vz-amber);
    border-radius: 3px; font-size: 12.5px; line-height: 1.55; color: var(--vz-bone);
}
.vz-cfg-aviso i { color: var(--vz-amber); margin-top: 2px; flex-shrink: 0; }
.vz-cfg-aviso[hidden] { display: none; }

/* --- bloco de acao com salvamento proprio --- */
.vz-cfg-acao {
    margin-top: 22px; padding: 18px;
    background: var(--vz-well); border: 1px solid var(--vz-gunmetal);
    border-radius: 3px;
}
.vz-cfg-acao-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.vz-cfg-acao-tit { font-size: 14px; font-weight: 700; color: var(--vz-bone); }
.vz-cfg-senha { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.vz-cfg-senha input { flex: 1 1 180px; min-width: 0; }
.vz-cfg-senha .vz-key-plain { flex: 0 0 auto; padding: 0 22px; height: 46px; }

/* --- atalho para outra tela --- */
.vz-cfg-atalho {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--vz-gunmetal);
    font-size: 12.5px; color: var(--vz-muted);
}
.vz-cfg-atalho .vz-key-plain { padding: 0 20px; height: 42px; flex-shrink: 0; }

/* --- somente leitura: declarado, nao apenas apagado --- */
.vz-cfg-travado input, .vz-cfg-travado textarea {
    background: transparent; border-style: dashed; cursor: not-allowed;
    color: var(--vz-muted);
}

/* --- barra de salvamento --- */
.vz-cfg-barra {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: 14px;
    margin-top: 24px; padding: 14px 18px;
    background: var(--vz-panel); border: 1px solid var(--vz-gunmetal);
    border-radius: 3px;
    box-shadow: 0 -10px 24px -12px var(--vz-sombra);
}
.vz-cfg-barra-txt {
    flex: 1; min-width: 0; font-size: 12px; letter-spacing: 0.06em;
    color: var(--vz-muted);
}
.vz-cfg-barra[data-sujo="1"] .vz-cfg-barra-txt { color: var(--vz-bone); font-weight: 600; }
.vz-cfg-barra .btn-gradient,
.vz-cfg-barra .vz-key-plain { width: auto; margin: 0; padding: 0 22px; height: 46px; flex-shrink: 0; }
.vz-cfg-barra button:disabled { opacity: 0.45; cursor: default; }
.vz-cfg-barra button:disabled:active { transform: none; }

/* =========================================================================
   AJUDA (aba Suporte)
   Era um paragrafo com um e-mail. Virou o manual da operacao: modo LEITURA,
   nao formulario — colunas curtas, hierarquia de titulo, e busca por assunto
   porque quem abre esta tela ja tem uma duvida especifica na cabeca.
   ========================================================================= */

.vz-aj-topo {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; margin-bottom: 20px;
}
.vz-aj-intro {
    font-size: 13.5px; line-height: 1.6; color: var(--vz-muted);
    margin: 0; max-width: 62ch;   /* medida de leitura */
}

.vz-aj-busca {
    display: flex; align-items: center; gap: 10px; flex: 0 1 380px;
    background: var(--vz-well); border: 1px solid var(--vz-gunmetal);
    border-radius: 3px; padding: 0 14px; height: 46px;
}
.vz-aj-busca:focus-within { border-color: var(--vz-amber); }
.vz-aj-busca i { color: var(--vz-muted); font-size: 13px; flex-shrink: 0; }
.vz-aj-busca input {
    border: none; background: transparent; padding: 0; height: 100%;
    font-size: 14px; min-width: 0;
}
.vz-aj-busca input:focus { box-shadow: none; }

/* Duas colunas de blocos independentes: cada assunto e uma unidade que pode
   ser lida sozinha, entao nao ha ordem obrigatoria entre eles. */
.vz-aj-grade {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px; align-items: start;
}
@media (max-width: 1100px) { .vz-aj-grade { grid-template-columns: minmax(0, 1fr); } }

.vz-aj-bloco { margin-bottom: 0; }
.vz-aj-bloco .panel-title { justify-content: flex-start; margin-bottom: 6px; }

.vz-aj-item { padding: 16px 0; border-top: 1px solid var(--vz-gunmetal); }
.vz-aj-item:first-of-type { border-top: none; padding-top: 8px; }
.vz-aj-item h4 {
    font-family: var(--vz-font-ui); font-size: 14px; font-weight: 700;
    color: var(--vz-bone); margin: 0 0 8px; line-height: 1.4;
}
.vz-aj-item p {
    font-size: 13px; line-height: 1.65; color: var(--vz-muted);
    margin: 0 0 8px; max-width: 62ch;
}
.vz-aj-item p:last-child { margin-bottom: 0; }
.vz-aj-item b { color: var(--vz-bone); font-weight: 700; }

/* Nota: a ressalva que muda a leitura da regra acima. Recuada, nao colorida. */
.vz-aj-nota {
    padding-left: 12px; border-left: 1px solid var(--vz-gunmetal);
    font-size: 12.5px !important;
}

.vz-aj-vazio {
    text-align: center; color: var(--vz-muted); font-size: 13px;
    padding: 30px 20px; border: 1px dashed var(--vz-gunmetal);
    border-radius: 3px; margin-top: 4px;
}
.vz-aj-vazio[hidden] { display: none; }

/* --- contato --- */
.vz-aj-contato {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; margin-top: 18px; margin-bottom: 0;
}
.vz-aj-contato .panel-title { margin-bottom: 8px; justify-content: flex-start; }
.vz-aj-contato-acoes { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.vz-aj-contato-acoes .vz-key-plain {
    display: inline-flex; align-items: center; width: auto; margin: 0;
    padding: 0 20px; height: 46px; text-decoration: none;
}
/* Verde do WhatsApp: marca de terceiro, nao decisao nossa — preservado de
   proposito, como ja registrado na normalizacao de paleta. */
.vz-aj-wpp {
    display: inline-flex; align-items: center; gap: 10px;
    background: #25D366; color: #0B2B16; text-decoration: none;
    border-radius: 4px; padding: 0 22px; height: 46px;
    font-family: var(--vz-font-ui); font-size: 12px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: 0 2px 0 rgba(0,0,0,0.35);
    transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}
.vz-aj-wpp:hover { filter: brightness(1.05); }
.vz-aj-wpp:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,0.35); }
.vz-aj-wpp:focus-visible { outline: 2px solid var(--vz-amber); outline-offset: 2px; }
.vz-aj-wpp i { font-size: 17px; }

/* =========================================================================
   MARCA — a tecla do sistema, acesa.
   Dois arquivos porque a face inverte com o tema: tecla osso sobre chassi
   escuro daria 1,2:1 no tema claro e a marca sumiria.
   ========================================================================= */
.vz-marca { display: block; flex-shrink: 0; }
.vz-marca--cla { display: none; }
:root[data-tema="claro"] .vz-marca--esc { display: none; }
:root[data-tema="claro"] .vz-marca--cla { display: block; }

/* =========================================================================
   ADICIONAIS EM MASSA
   Um adicional existe em uma linha por produto E por tamanho. Esta tela mostra
   o GRUPO (o nome) e nao a linha, entao a unidade visual e "Bacon, R$ 5,00, em
   34 produtos" — o alcance e tao importante quanto o preco, porque e ele que
   diz o tamanho da mudanca que o clique vai causar.

   Cor: preco e nome sao dado estatico -> osso e serigrafia, nunca ambar. O
   unico ambar aqui e o LED de divergencia, que e ESTADO ao vivo da loja (como
   mesa ocupada) — e nunca aparece sozinho, sempre com o rotulo escrito ao lado.
   ========================================================================= */
.vz-adc-alvos {
    max-height: 230px; overflow-y: auto;
    background: var(--vz-well); border: 1px solid var(--vz-gunmetal);
    border-radius: 3px; padding: 10px 12px;
}
.vz-adc-check {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; cursor: pointer;
    font-size: 13px; color: var(--vz-bone); line-height: 1.4;
}
.vz-adc-check input { width: auto; margin: 0; flex-shrink: 0; accent-color: var(--vz-orange); }
.vz-adc-check b { color: var(--vz-muted); font-weight: 600; }
.vz-adc-todos {
    border-bottom: 1px solid var(--vz-gunmetal);
    margin-bottom: 4px; padding-bottom: 9px;
}
.vz-adc-check + .btn-gradient { margin-top: 16px; }

.vz-adc-row {
    background: var(--vz-well); border: 1px solid var(--vz-gunmetal);
    border-radius: 3px; margin-bottom: 8px;
}
.vz-adc-row.aberto { border-color: var(--vz-muted); }

.vz-adc-cab {
    display: grid; grid-template-columns: minmax(0,1fr) auto auto auto 16px;
    align-items: center; gap: 16px; padding: 13px 14px; cursor: pointer;
}
.vz-adc-cab:hover { background: var(--vz-veu); }
.vz-adc-cab:focus-visible { outline: 2px solid var(--vz-amber); outline-offset: -2px; }

.vz-adc-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.vz-adc-nome {
    color: var(--vz-bone); font-weight: 600; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vz-adc-preco {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
    color: var(--vz-bone); font-weight: 700; font-size: 14px; white-space: nowrap;
}
.vz-adc-alcance {
    font-family: var(--vz-font-ui); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--vz-muted); white-space: nowrap;
}
.vz-adc-seta { color: var(--vz-muted); font-size: 12px; }
.vz-adc-acoes { display: flex; gap: 8px; }
.vz-adc-acoes button { padding: 7px 12px; font-size: 11px; min-height: 34px; }

/* LED de divergencia: estado, nao decoracao. O rotulo escrito carrega o
   significado sozinho — quem nao distingue matiz le "2 PREÇOS" do mesmo jeito. */
.vz-adc-alerta {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--vz-font-ui); font-size: 10px; font-weight: 700;
    letter-spacing: 0.12em; white-space: nowrap;
    background: var(--vz-visor); color: var(--vz-amber-led);
    border: 1px solid var(--vz-gunmetal); border-radius: 2px; padding: 3px 7px;
}
.vz-adc-led {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--vz-amber-led); box-shadow: 0 0 5px var(--vz-amber-led);
    flex-shrink: 0;
}

.vz-adc-det { border-top: 1px solid var(--vz-gunmetal); padding: 14px; }
.vz-adc-det ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.vz-adc-det li {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 7px 10px; font-size: 13px; color: var(--vz-muted);
    border-bottom: 1px solid var(--vz-veu);
}
.vz-adc-det-preco {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
    color: var(--vz-bone); white-space: nowrap;
}
.vz-adc-unificar {
    background: var(--vz-panel); border: 1px solid var(--vz-gunmetal);
    border-radius: 3px; padding: 14px;
}
.vz-adc-unificar p { margin: 0 0 12px; font-size: 13px; color: var(--vz-muted); line-height: 1.5; }
.vz-adc-unificar button { width: 100%; }

@media (max-width: 860px) {
    .vz-adc-cab { grid-template-columns: 1fr auto; row-gap: 10px; }
    .vz-adc-id { grid-column: 1 / -1; }
    .vz-adc-acoes { grid-column: 1 / -1; }
    .vz-adc-acoes button { flex: 1; }
    .vz-adc-seta { display: none; }
}

/* A tarja de risco do .btn-delete e um ::after de 18px fixos colado na direita.
   Com o padding padrao de 12px a ultima letra de "Remover" fica por baixo dela
   (medido: texto terminava em 58px, tarja comeca em 53px). Reserva o corredor. */
.vz-adc-acoes .btn-delete { padding-right: 28px; }

/* =========================================================================
   LEGIBILIDADE DE ICONE — auditoria 2026-08-05
   Varridas as 13 views nos dois temas: 22 elementos abaixo do minimo em cada.
   Nenhum era "cor feia" — os tres eram heranca errada. Medido, nao estimado.
   ========================================================================= */

/* 1. GLIFO SOBRE TECLA (o que o dono viu em Pedidos).
   `.btn-icon` entrou na lista de teclas do rebrand e ganhou a face putty
   (#B9B4A6), mas continuou pintando o glifo de OSSO (#E6E2DA): 1,6:1 — luz
   sobre luz, o mesmo defeito que ja tinha mordido o garcom. Legenda sobre
   tecla e ESCURA, e a lei ja vale no resto do sistema.
   MEDIDO: osso sobre putty 1,6:1 -> legenda sobre putty 8,6:1. */
.btn-icon, .btn-icon i, .btn-edit, .btn-edit i,
.btn-print, .btn-print i, .btn-whatsapp, .btn-whatsapp i,
.btn-stock, .btn-stock i { color: var(--vz-legend); }

/* Excecao: a tecla destrutiva tem face de POCO (escura), entao ali o glifo
   continua osso. Ja media 13,8:1 — o que estava certo nao muda. */
.btn-delete, .btn-delete i,
.btn-cancel-order, .btn-cancel-order i { color: var(--vz-bone); }

/* A acao que commita o card do pedido — uma laranja por modulo (DESIGN.md),
   igual ao PRONTO do KDS. Tambem e o que separa esse icone dos outros cinco. */
.btn-icon.btn-commit, .btn-icon.btn-commit i {
    background: var(--vz-orange); color: var(--vz-legend);
    border-color: transparent;
}

/* 2. ICONE DENTRO DE BOTAO herdava a cor de legenda do cabecalho
   (`.panel-title i` = --vz-muted). Sobre a tecla laranja do "Novo Produto"
   isso dava 1,09:1. Icone dentro de botao segue o BOTAO, nao o cabecalho. */
.panel-title button i, .panel-title a i,
.list-header button i, .form-block-title button i { color: inherit; }

/* 3. GUNMETAL E COR DE BORDA, nao de glifo. Usado como cor de icone dava
   1,4-1,9:1 nos DOIS temas: alca e setas de categoria, item esgotado,
   ilustracao de estado vazio. */
.vz-cat-alca { color: var(--vz-muted); }   /* alca fica no poco da linha */

/* As setas de reordenar sao TECLAS (.vz-cat-btn tem face putty), nao icones
   soltos no painel. Na primeira passada eu apliquei --vz-muted aqui e piorei:
   1,74 -> 1,27:1. Medir depois de cada mudanca, nao so antes. */
.vz-cat-mover, .vz-cat-mover i { color: var(--vz-legend); }

/* O item esgotado volta a ter fundo TRANSPARENTE (`background: transparent
   !important`), entao o glifo dele nao pode seguir a regra da tecla — e o `i`
   precisa ser citado, senao `.btn-stock i` continua pintando legenda. */
.btn-stock.off, .btn-stock.off i { color: var(--vz-muted) !important; }

/* 4. FUNDO CRAVADO + COR EM TOKEN, a armadilha ja documentada: no tema claro
   o texto inverte e o fundo nao. `--accent` vira #26292E (escuro) e a legenda
   ja era escura -> 1,22:1. PREPARAR e tecla comum; a laranja do card do KDS
   pertence ao PRONTO. */
.kds-btn.prep { background: var(--vz-keycap); color: var(--vz-legend); }

/* Seta desativada (primeira linha nao sobe, ultima nao desce): a face vira
   POCO rebaixado, entao o glifo nao pode ser legenda escura — legenda sobre
   poco da 1,05:1 e o operador nem ve que existe um botao ali. O `i` precisa
   ser citado: `.vz-cat-mover i` e mais especifico que a heranca do :disabled.
   Quem diz "desativado" e a face afundada e a ausencia de sombra, nao o
   apagamento do icone. */
.vz-cat-btn:disabled, .vz-cat-btn:disabled i { color: var(--vz-muted); }

/* =========================================================================
   CUSTO, FICHA TECNICA E ASSISTENTE  (2026-09-18)
   -------------------------------------------------------------------------
   Duas decisoes de cor que seguem o DESIGN.md e nao sao obvias:

   1. Margem e lucro sao DADO ESTATICO -> osso e serigrafia, nunca ambar.
      Ambar e estado ao vivo (visor, LED, mesa ocupada). Marcar margem de
      ambar gastaria a cor exatamente como a lei 2 descreve.
   2. "Vende abaixo do custo" e um problema real, mas nao existe vermelho
      neste sistema. A marcacao e a TARJA DE RISCO listrada, a mesma
      convencao industrial ja usada na tecla destrutiva, somada ao rotulo
      escrito. Cor nunca aparece sozinha.
   ========================================================================= */

/* A coluna de custo entra entre PRECO e ACOES. Com ela a linha passa a ter
   4 colunas; abaixo de 820px o cabecalho ja some e a linha vira 2 colunas,
   entao custo e preco empilham (ver o media query mais abaixo). */
.vz-prod-head,
.vz-prod-item { grid-template-columns: 2fr 0.9fr 1.1fr 1fr; }

.vz-prod-custo {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
    font-size: 12.5px; line-height: 1.35; min-width: 0;
}
.vz-prod-custo .v { color: var(--vz-bone); font-weight: 700; display: block; }
.vz-prod-custo .m { color: var(--vz-muted); font-size: 11px; letter-spacing: 0.06em; }

/* Sem custo cadastrado: convite discreto, nao erro. A loja pode nunca querer
   preencher, e o cardapio funciona igual sem isso. */
.vz-prod-custo .vazio {
    background: none; border: 1px dashed var(--vz-gunmetal); color: var(--vz-muted);
    font-family: var(--vz-font-ui); font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 5px 9px; border-radius: 3px; cursor: pointer;
}
.vz-prod-custo .vazio:hover { border-color: var(--vz-muted); color: var(--vz-bone); }

/* Custo vindo da ficha: o dono nao digita, a receita manda. O glifo diz de
   onde veio o numero, para ninguem tentar editar e achar que o campo travou. */
.vz-prod-custo .ficha { color: var(--vz-muted); font-size: 10px; margin-left: 5px; }

/* TARJA DE RISCO — vende por menos do que custa. Listras gunmetal/osso,
   exatamente como a tecla destrutiva. Sem vermelho, com o texto ao lado. */
.vz-alerta-risco {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--vz-font-ui); font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--vz-bone);
    border: 1px solid var(--vz-gunmetal); border-radius: 3px;
    padding: 4px 9px 4px 4px; background: var(--vz-well);
}
.vz-alerta-risco::before {
    content: ""; width: 14px; height: 16px; border-radius: 2px; flex-shrink: 0;
    background: repeating-linear-gradient(-45deg,
        var(--vz-gunmetal) 0 3px, var(--vz-bone) 3px 6px);
}

/* ── VISORES DE LUCRO (relatorios) ──────────────────────────────────────── */
.vz-lucro-grade {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px; margin-top: 14px;
}
.vz-lucro-visor {
    background: var(--vz-visor); border: 1px solid var(--vz-visor-borda);
    border-radius: 3px; padding: 13px 15px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
}
/* ATENCAO — a armadilha do visor, medida e corrigida em 2026-09-18.
   O fundo aqui e --vz-visor, que por lei fica ESCURO nos dois temas. Mas
   --vz-muted e recalibrado para superficie clara no tema claro, entao a
   combinacao virava cinza escuro sobre visor escuro: 2,26:1, ilegivel.
   E a mesma armadilha ja documentada (fundo cravado + texto em token), so
   que ao contrario: aqui quem NAO muda e o fundo.
   Dentro de um visor a cor do texto e literal, como ja faz
   `.vz-rua-visor .stat-value`. #9BA0A6 sobre #16181B = 6,75:1 nos dois temas. */
.vz-lucro-visor .rot {
    display: block; font-family: var(--vz-font-ui); font-size: 10.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: #9BA0A6;
    margin-bottom: 7px;
}
/* Digito de visor: ambar legitimo, e o unico lugar onde ele cabe aqui —
   janela escura nos dois temas, valor corrente do periodo consultado. */
.vz-lucro-visor .num {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
    font-size: 22px; font-weight: 700; color: var(--vz-amber-led); line-height: 1.1;
}
.vz-lucro-visor .sub { display: block; font-size: 11px; color: #9BA0A6; margin-top: 5px; }

/* Cobertura: sem ela o dono le "lucro R$ 400" achando que e do periodo
   inteiro quando pode ser de 10% dos itens. Nunca separar os dois. */
.vz-cobertura {
    margin-top: 12px; padding: 11px 13px; border-radius: 3px;
    background: var(--vz-well); border: 1px solid var(--vz-gunmetal);
    font-size: 12px; color: var(--vz-muted); line-height: 1.55;
}
.vz-cobertura b { color: var(--vz-bone); font-weight: 700; }
.vz-cobertura .barra {
    height: 5px; border-radius: 2px; background: var(--vz-chassis);
    margin-top: 9px; overflow: hidden; border: 1px solid var(--vz-gunmetal);
}
.vz-cobertura .barra span { display: block; height: 100%; background: var(--vz-amber-led); }

/* ── FICHA TECNICA (dentro da gaveta do produto) ────────────────────────── */
.vz-ficha-linha {
    display: grid; grid-template-columns: 1fr 84px 76px 34px;
    gap: 8px; align-items: center; margin-bottom: 8px;
}
.vz-ficha-linha select, .vz-ficha-linha input { margin-bottom: 0; }
.vz-ficha-sub {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
    font-size: 12px; color: var(--vz-muted); text-align: right;
}
.vz-ficha-total {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px dashed var(--vz-gunmetal); margin-top: 12px; padding-top: 12px;
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
}
.vz-ficha-total .rot {
    font-family: var(--vz-font-ui); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--vz-muted);
}
.vz-ficha-total .val { font-size: 17px; font-weight: 700; color: var(--vz-bone); }
.vz-ficha-aviso { font-size: 11.5px; color: var(--vz-muted); line-height: 1.5; margin: 8px 0 0; }

/* ── INSUMOS ────────────────────────────────────────────────────────────── */
.vz-insumo-head,
.vz-insumo-item { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; align-items: center; }
.vz-insumo-nome { font-weight: 700; font-size: 14px; color: var(--vz-bone); }
.vz-insumo-uso { font-size: 11px; color: var(--vz-muted); margin-top: 2px; }
.vz-insumo-valor {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
    color: var(--vz-bone); font-weight: 700; font-size: 14px;
}

/* ── ASSISTENTE ─────────────────────────────────────────────────────────── */
.vz-ia-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: none; z-index: 9998;
}
.vz-ia-overlay.aberto { display: block; }

.vz-ia-painel {
    position: fixed; right: 0; top: 0; bottom: 0; width: 420px; max-width: 100%;
    background: var(--vz-panel); border-left: 1px solid var(--vz-gunmetal);
    z-index: 9999; transform: translateX(100%);
    transition: transform 160ms ease-out;
    display: flex; flex-direction: column;
}
.vz-ia-painel.aberto { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .vz-ia-painel { transition: none; } }

.vz-ia-topo {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px; border-bottom: 1px solid var(--vz-gunmetal); flex-shrink: 0;
}
.vz-ia-topo h3 {
    margin: 0; flex: 1; font-family: var(--vz-font-display);
    font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vz-bone);
}
.vz-ia-fechar { background: none; border: none; color: var(--vz-muted); font-size: 19px; cursor: pointer; }
.vz-ia-fechar:hover { color: var(--vz-bone); }

.vz-ia-corpo { flex: 1; overflow-y: auto; padding: 16px 18px; }

.vz-ia-msg { margin-bottom: 14px; font-size: 13.5px; line-height: 1.6; }
.vz-ia-msg .quem {
    display: block; font-family: var(--vz-font-ui); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--vz-muted); margin-bottom: 5px;
}
.vz-ia-msg .txt {
    display: block; padding: 11px 13px; border-radius: 3px;
    border: 1px solid var(--vz-gunmetal); white-space: pre-wrap; word-break: break-word;
}
.vz-ia-msg.eu .txt { background: var(--vz-keycap); color: var(--vz-legend); }
.vz-ia-msg.ia .txt { background: var(--vz-well); color: var(--vz-bone); }
/* Falha e informacao operacional, nao decoracao: fundo de poco e a tarja
   de risco na lateral, mesma convencao do resto do sistema. */
.vz-ia-msg.falha .txt {
    background: var(--vz-well); color: var(--vz-bone);
    border-left: 4px solid transparent;
    border-image: repeating-linear-gradient(-45deg,
        var(--vz-gunmetal) 0 3px, var(--vz-bone) 3px 6px) 1;
}

.vz-ia-sug { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.vz-ia-sug button {
    background: var(--vz-well); border: 1px solid var(--vz-gunmetal); color: var(--vz-bone);
    font-family: var(--vz-font-ui); font-size: 11.5px; padding: 8px 11px;
    border-radius: 3px; cursor: pointer; text-align: left;
}
.vz-ia-sug button:hover { border-color: var(--vz-muted); }

.vz-ia-rodape {
    border-top: 1px solid var(--vz-gunmetal); padding: 13px 18px; flex-shrink: 0;
    display: flex; gap: 9px; align-items: flex-end;
}
/* MEDIDO em 2026-09-18, reportado pelo dono: o campo de digitar ficava com 32px
   e o botao com 383px, colados. Causa: o ENVIAR usa .btn-gradient, a tecla
   laranja padrao do sistema, que tem `width: 100%` porque em todo o resto do
   painel e botao de largura cheia. Como flex-basis e `auto`, ele resolvia para
   100% da linha — e o `flex-shrink: 0` que eu mesmo pus impedia de ceder.
   O `width: auto` e o que desarma isso; sem ele, qualquer botao que herde
   .btn-gradient dentro de um flex row come a linha inteira. */
.vz-ia-rodape textarea {
    flex: 1 1 auto; min-width: 0;   /* min-width:0 deixa o campo encolher sem estourar a linha */
    width: auto; margin: 0; resize: none;
    min-height: 46px; max-height: 120px; font-size: 13px; line-height: 1.4;
}
.vz-ia-rodape .vz-ia-enviar {
    flex: 0 0 auto; width: auto;    /* vence o width:100% do .btn-gradient */
    min-height: 46px; height: 46px; padding: 0 18px; margin: 0;
    border: none; cursor: pointer; white-space: nowrap;
    border-radius: var(--vz-key-r); font-family: var(--vz-font-ui); font-weight: 700;
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
}
.vz-ia-aviso {
    padding: 0 18px 12px; font-size: 10.5px; color: var(--vz-muted); line-height: 1.5;
}

/* Tecla flutuante que abre o assistente. Nao e laranja: a acao que commita
   na tela do painel continua sendo outra, e a lei do laranja vale por
   contexto de decisao. Dentro da gaveta, ai sim, ENVIAR e a laranja. */
.vz-ia-botao {
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    width: 54px; height: 54px; border-radius: var(--vz-key-r);
    background: var(--vz-keycap); color: var(--vz-legend); border: none; cursor: pointer;
    font-size: 19px; display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 var(--vz-keycap-up), inset 0 -2px 0 rgba(0,0,0,0.22),
                0 2px 0 #0E0F11, 0 4px 10px rgba(0,0,0,0.45);
    transition: transform var(--vz-travel) ease-out;
}
.vz-ia-botao:hover { background: var(--vz-keycap-up); }
.vz-ia-botao:active { transform: translateY(2px); }
.vz-ia-botao i { color: var(--vz-legend); }

@media (max-width: 820px) {
    .vz-prod-item { grid-template-columns: 1fr auto; }
    .vz-prod-custo { grid-column: 1 / -1; }
    .vz-insumo-head { display: none; }
    .vz-insumo-item { grid-template-columns: 1fr auto; row-gap: 6px; }
    .vz-ficha-linha { grid-template-columns: 1fr 70px 30px; }
    .vz-ficha-sub { display: none; }
    .vz-ia-botao { bottom: 16px; right: 16px; }
}

/* =========================================================================
   PEDIDOS POR TIPO (Delivery / Mesa / Balcao)  — 2026-09-18
   -------------------------------------------------------------------------
   NEUTRO de proposito. A escala categorica (--pg-*) e de forma de pagamento e
   so dela; o bloco de pagamento fica na mesma tela, logo abaixo. Colorir tipo
   de pedido faria PIX e Delivery disputarem a mesma leitura e a cor deixaria
   de ensinar (DESIGN.md, lei 3). Quem distingue aqui e o rotulo escrito.
   ========================================================================= */
.vz-tipo-grade {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px; margin-bottom: 10px;
}
.vz-tipo-card {
    background: var(--vz-well); border: 1px solid var(--vz-gunmetal);
    border-radius: 6px; padding: 16px 18px; min-width: 0;
}
.vz-tipo-card .rot {
    display: block; font-family: var(--vz-font-ui); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--vz-muted);
    margin-bottom: 9px;
}
/* Quantidade e o numero que manda neste card — a pergunta era "quantos". */
.vz-tipo-card .qtd {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
    font-size: 26px; font-weight: 700; color: var(--vz-bone); line-height: 1.05;
}
.vz-tipo-card .qtd small {
    font-family: var(--vz-font-ui); font-size: 11px; font-weight: 600;
    color: var(--vz-muted); margin-left: 6px; letter-spacing: 0.06em;
}
.vz-tipo-card .val {
    display: block; margin-top: 8px; font-family: var(--vz-font-display);
    font-variant-numeric: tabular-nums; font-size: 14px; color: var(--vz-bone);
}
.vz-tipo-card .sub { display: block; margin-top: 4px; font-size: 11px; color: var(--vz-muted); }
/* Barra de participacao: comprimento, nao cor. Osso sobre o chassi. */
.vz-tipo-card .barra {
    height: 4px; border-radius: 2px; background: var(--vz-chassis);
    margin-top: 10px; overflow: hidden; border: 1px solid var(--vz-gunmetal);
}
.vz-tipo-card .barra span { display: block; height: 100%; background: var(--vz-bone); }
/* Canal que a loja nao usa fica apagado, mas NAO some: "Delivery 0" ensina que
   a informacao existe; a ausencia da linha parece tela incompleta. */
.vz-tipo-card.zerado { opacity: 0.55; }

/* Versao compacta do dashboard: uma linha, sem caixa. */
.vz-tipo-linha {
    display: flex; flex-wrap: wrap; gap: 18px;
    padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--vz-gunmetal);
}
.vz-tipo-linha .item { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.vz-tipo-linha .rot {
    font-family: var(--vz-font-ui); font-size: 10.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--vz-muted);
}
.vz-tipo-linha .n {
    font-family: var(--vz-font-display); font-variant-numeric: tabular-nums;
    font-size: 16px; font-weight: 700; color: var(--vz-bone);
}
.vz-tipo-linha .item.zerado .n { color: var(--vz-muted); }