/* GERADO por _glass-ui/sync.js (fonte: src/glass-tokens.css, 8fde4aa270) - NAO EDITE AQUI: edite a fonte e rode "node sync.js". */
/*
 * Glass UI — tokens + componentes globais (PDV, CRM, painel ADM e loja).
 * Estilo "vidro": fundo escuro com brilho, painéis translúcidos com blur, borda fina, destaque azul royal.
 * ÚNICO lugar das cores da marca, raios e desfoque: mexa só nas variáveis --g-* daqui e rode `node sync.js` (pasta _glass-ui).
 * Componentes reutilizáveis (use em qualquer tela nova): .g-card .g-title .g-btn .g-btn-primary .g-input .g-chip .g-list .g-tile .g-stepper .g-bar
 * Doc: docs/UI-GLASS.md
 */

:root,
html[data-bs-theme="dark"] {
    --g-font: 'Manrope', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    --g-bg: #07070b;
    --g-bg-2: #0d0d15;
    --g-surface: rgba(255, 255, 255, 0.055);
    --g-surface-2: rgba(255, 255, 255, 0.09);
    --g-surface-solid: #14141d;
    --g-border: rgba(255, 255, 255, 0.10);
    --g-border-strong: rgba(255, 255, 255, 0.18);
    --g-hl: rgba(255, 255, 255, 0.10);            /* brilho da borda de cima */
    --g-text: #f5f2ea;
    --g-muted: #9b968c;
    --g-input-bg: rgba(0, 0, 0, 0.38);
    --g-accent: #4169e1;
    --g-accent-2: #7f9dff;
    --g-accent-ink: #ffffff;
    --g-accent-grad: linear-gradient(135deg, #6f94ff 0%, #4169e1 52%, #2b49c9 100%);
    --g-accent-glass: linear-gradient(160deg, rgba(65, 105, 225, 0.34) 0%, rgba(65, 105, 225, 0.14) 55%, rgba(65, 105, 225, 0.07) 100%);
    --g-accent-glow: 0 0 0 4px rgba(65, 105, 225, 0.14), 0 10px 28px rgba(65, 105, 225, 0.22);
    --g-violet: #8b5cf6;
    --g-ok: #22c55e;
    --g-warn: #f59e0b;
    --g-danger: #ef4444;
    --g-info: #38bdf8;
    --g-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
    --g-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.30);
    --g-blur: 18px;
    --g-radius: 18px;
    --g-radius-md: 14px;
    --g-radius-sm: 10px;
    --g-bg-image:
        radial-gradient(900px 520px at 6% -8%, rgba(65, 105, 225, 0.17), transparent 60%),
        radial-gradient(820px 620px at 104% 104%, rgba(139, 92, 246, 0.18), transparent 58%),
        radial-gradient(600px 400px at 70% 10%, rgba(56, 189, 248, 0.06), transparent 60%);
}

html[data-bs-theme="light"] {
    --g-bg: #f4f1ff;
    --g-bg-2: #fff6e4;
    --g-surface: rgba(255, 255, 255, 0.62);
    --g-surface-2: rgba(255, 255, 255, 0.82);
    --g-surface-solid: #ffffff;
    --g-border: rgba(26, 18, 4, 0.09);
    --g-border-strong: rgba(26, 18, 4, 0.18);
    --g-hl: rgba(255, 255, 255, 0.9);
    --g-text: #14110a;
    --g-muted: #6b6558;
    --g-input-bg: rgba(255, 255, 255, 0.78);
    --g-accent: #3459d6;
    --g-accent-2: #2b49c9;
    --g-accent-ink: #ffffff;
    --g-accent-glass: linear-gradient(160deg, rgba(65, 105, 225, 0.28) 0%, rgba(65, 105, 225, 0.12) 60%, rgba(65, 105, 225, 0.06) 100%);
    --g-shadow: 0 10px 30px rgba(60, 40, 120, 0.12);
    --g-shadow-sm: 0 4px 12px rgba(60, 40, 120, 0.10);
    --g-bg-image:
        radial-gradient(900px 520px at 6% -8%, rgba(65, 105, 225, 0.20), transparent 60%),
        radial-gradient(820px 620px at 104% 104%, rgba(139, 92, 246, 0.16), transparent 58%);
}

/* ------------------------------------------------------------------ componentes */

.g-card {
    background: var(--g-surface);
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(150%);
    backdrop-filter: blur(var(--g-blur)) saturate(150%);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-hl);
    color: var(--g-text);
    padding: 16px;
}

.g-title {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--g-text);
    margin: 0;
}

.g-muted { color: var(--g-muted) !important; }

.g-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--g-border);
    background: var(--g-surface-2);
    color: var(--g-text);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.g-btn:hover { color: var(--g-text); background: var(--g-surface-2); border-color: var(--g-border-strong); }
.g-btn:active { transform: scale(.97); }
.g-btn-primary { background: var(--g-accent-grad); color: var(--g-accent-ink); border-color: transparent; box-shadow: 0 8px 22px rgba(65, 105, 225, .38); }
.g-btn-primary:hover { color: var(--g-accent-ink); background: var(--g-accent-grad); filter: brightness(1.06); box-shadow: var(--g-accent-glow); }
.g-btn-danger { background: rgba(239, 68, 68, .16); color: #fca5a5; border-color: rgba(239, 68, 68, .45); }
.g-btn-ok { background: rgba(34, 197, 94, .16); color: #86efac; border-color: rgba(34, 197, 94, .45); }
html[data-bs-theme="light"] .g-btn-danger { color: #b91c1c; }
html[data-bs-theme="light"] .g-btn-ok { color: #15803d; }
.g-btn-block { width: 100%; }
.g-btn-lg { min-height: 54px; font-size: 16px; }

.g-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--g-border);
    background: var(--g-input-bg);
    color: var(--g-text);
    font-size: 16px; /* 16px evita o zoom automático do iPhone */
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.g-input::placeholder { color: var(--g-muted); opacity: .8; }
.g-input:focus { border-color: var(--g-accent); box-shadow: 0 0 0 4px rgba(65, 105, 225, .16); }
.g-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-muted); margin: 0 0 6px; }

.g-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    background: var(--g-surface); border: 1px solid var(--g-border);
    color: var(--g-muted); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.g-chip.on, .g-chip-accent { background: var(--g-accent-glass); border-color: rgba(65, 105, 225, .55); color: var(--g-accent-2); }

.g-list > * { border-bottom: 1px solid var(--g-border); }
.g-list > *:last-child { border-bottom: 0; }

/* tile de atalho (ícone + texto) */
.g-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 96px; padding: 14px 10px; border-radius: var(--g-radius-md);
    background: var(--g-surface); border: 1px solid var(--g-border);
    box-shadow: inset 0 1px 0 var(--g-hl); color: var(--g-text); text-decoration: none; font-weight: 800; text-align: center;
    -webkit-backdrop-filter: blur(var(--g-blur)); backdrop-filter: blur(var(--g-blur));
    transition: transform .15s, box-shadow .2s, border-color .2s;
}
.g-tile i { font-size: 26px; color: var(--g-accent-2); }
.g-tile:hover { transform: translateY(-2px); border-color: rgba(65, 105, 225, .6); box-shadow: var(--g-accent-glow); color: var(--g-text); }

/* contador +/- (touch) */
.g-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--g-border); border-radius: 14px; overflow: hidden; background: var(--g-input-bg); }
.g-stepper button { width: 52px; border: 0; background: var(--g-surface-2); color: var(--g-text); font-size: 24px; font-weight: 800; line-height: 1; }
.g-stepper button:active { background: var(--g-accent-glass); }
.g-stepper input { width: 84px; border: 0; background: transparent; color: var(--g-text); text-align: center; font-size: 20px; font-weight: 800; outline: none; min-height: 52px; }

/* barra fixa de ação (embaixo, celular) */
.g-bar {
    position: sticky; bottom: 0; z-index: 20; margin: 14px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--g-surface-solid) 78%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
    border-top: 1px solid var(--g-border-strong); display: flex; gap: 10px; align-items: center;
}

@media (prefers-reduced-motion: reduce) { .g-btn, .g-tile { transition: none; } }