/**
 * ==============================================================================
 * painel.css - ESTÉTICA PREMIUM LUMERA SAAS (Fase 3: Midnight Corporate)
 * Efeitos: High-Contrast Dark Mode, Glassmorphism Sutil, Fluid Layout
 *
 * CORREÇÕES APLICADAS NESTA REVISÃO:
 * - Adicionadas classes utilitárias "tipo Tailwind" que eram usadas no HTML/JS
 *   mas não existiam neste arquivo (font-black, text-*, w-full, flex-1, etc.)
 * - Adicionada classe .campo-label-oculto para labels acessíveis sem alterar o visual
 * - Adicionado suporte a prefers-reduced-motion
 * - Pequenos ajustes de contraste em toggles sobre fundos coloridos
 * ==============================================================================
 */

/* ==========================================
   1. VARIÁVEIS GLOBAIS E RESET
========================================== */
:root {
    --cor-primaria: #9333ea; /* Injetado via JS posteriormente */
    
    /* Paleta Dark Premium (Slate) */
    --cor-fundo: #020617; /* Fundo principal mega escuro */
    --cor-superficie: #0f172a; /* Fundo dos cards */
    --cor-texto-escuro: #f8fafc; /* Texto principal (Branco Gelo - Nome mantido para compatibilidade HTML) */
    --cor-texto-claro: #94a3b8; /* Texto secundário (Cinza Azulado) */
    --cor-borda: #1e293b; /* Bordas visíveis mas sutis */
    
    --sucesso: #10b981;
    --alerta: #f59e0b;
    --perigo: #ef4444;
    
    /* Efeitos de Vidro adaptados para Dark Mode */
    --glass-bg: rgba(15, 23, 42, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);
    --sombra-suave: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    
    --raio-card: 24px;
    --raio-btn: 14px;
    --raio-input: 14px;
    
    --gap-padrao: 1.5rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto-escuro);
    overflow-x: hidden;
}

/* Esconder barra de rolagem */
.no-scrollbar::-webkit-scrollbar,
.listagem-scroll::-webkit-scrollbar { display: none; }
.no-scrollbar, .listagem-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* Respeita preferência do usuário por menos movimento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   2. EFEITOS DE FUNDO (BACKGROUND BLUR)
========================================== */
.bg-effects {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
    background-blend-mode: overlay;
    opacity: 0.15;
}

.aura-glow {
    position: absolute;
    top: -10%; right: -10%;
    width: 40vw; height: 40vw;
    background: radial-gradient(circle, var(--cor-primaria) 0%, transparent 60%);
    opacity: 0.15;
    filter: blur(100px);
    animation: pulseGlow 10s infinite alternate ease-in-out;
    will-change: transform, opacity;
}

.shape-blob {
    position: absolute;
    bottom: -20%; left: -10%;
    width: 50vw; height: 50vw;
    background: radial-gradient(circle, #2563eb 0%, transparent 60%);
    opacity: 0.1;
    filter: blur(120px);
}

@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.1; }
    100% { transform: scale(1.1); opacity: 0.2; }
}

/* ==========================================
   3. TIPOGRAFIA E TEXTOS
========================================== */
h1, h2, h3 { color: var(--cor-texto-escuro); letter-spacing: -0.02em; font-weight: 900; }
.section-title { font-size: 0.85rem; font-weight: 900; border-bottom: 1px solid var(--cor-borda); padding-bottom: 0.75rem; margin-bottom: 1.25rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--cor-texto-claro); }
.subtitle-dark { color: rgba(255,255,255,0.5); font-size: 0.85rem; font-weight: 500; margin-bottom: 1.5rem; }

/* ==========================================
   3B. UTILITÁRIOS (faltavam — usados em painel.js e no HTML) 
========================================== */
.font-black   { font-weight: 900; }
.font-bold    { font-weight: 700; }
.font-mono    { font-family: 'Courier New', Courier, monospace; }

.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-white   { color: #fff; }
.text-slate-500 { color: #64748b; }

/* Cores de status usadas no histórico/fila/CRM via JS */
.text-red-500    { color: var(--perigo); }
.text-emerald-600 { color: var(--sucesso); }

/* Botões de confirmação (modal genérico) trocam de cor via JS */
.bg-red-500     { background: var(--perigo) !important; box-shadow: 0 8px 20px -6px rgba(239, 68, 68, 0.5) !important; }
.hover\:bg-red-600:hover { filter: brightness(1.1); }

.relative { position: relative; }
.hidden   { display: none !important; }

.w-full  { width: 100%; }
.w-auto  { width: auto; }
.flex-1  { flex: 1 1 0%; }

/* Classe para labels acessíveis que não devem aparecer visualmente,
   mas continuam disponíveis para leitores de tela */
.campo-label-oculto {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ==========================================
   4. LAYOUT PRINCIPAL (DASHBOARD)
========================================== */
.layout-dashboard {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

@media (min-width: 768px) {
    .layout-dashboard { flex-direction: row; }
}

/* SIDEBAR */
.sidebar {
    background: rgba(2, 6, 23, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--cor-borda);
    width: 100%;
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .sidebar { width: 280px; height: 100vh; }
}

.sidebar-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--cor-borda);
}

.loja-info { display: flex; align-items: center; gap: 1rem; }
.loja-logo-mini { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; border: 1px solid var(--cor-borda); background: #fff; }
.loja-textos h2 { font-size: 1.1rem; font-weight: 900; color: #fff; }
.loja-textos p { font-size: 0.65rem; text-transform: uppercase; font-weight: 800; color: var(--cor-primaria); letter-spacing: 0.1em; }

.btn-menu-mobile {
    background: none; border: none; font-size: 1.5rem; color: var(--cor-texto-claro); cursor: pointer;
}
@media (min-width: 768px) { .btn-menu-mobile { display: none; } }

.sidebar-nav {
    flex: 1; padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem;
}
.hidden-mobile { display: none !important; }
@media (min-width: 768px) { .hidden-mobile { display: flex !important; } }

.nav-label { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #475569; margin: 0.5rem 0 0.5rem 0.5rem; }
.mt-ext { margin-top: 2rem; }

.nav-item {
    padding: 1rem 1.25rem; border-radius: 12px; font-size: 0.85rem; font-weight: 700; color: var(--cor-texto-claro);
    cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.75rem;
}
.nav-item:hover { background: rgba(255,255,255,0.03); color: white; }
.nav-item:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.nav-item.active { background: rgba(255,255,255,0.08); color: white; border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }

.sidebar-footer { padding: 1.5rem; border-top: 1px solid var(--cor-borda); background: rgba(0,0,0,0.2); }
.user-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.user-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--cor-borda); display: flex; align-items: center; justify-content: center; border: 1px solid var(--glass-border); font-size: 1.2rem; }
.user-details p:first-child { font-weight: 900; font-size: 0.9rem; color: #fff; }
.user-details p:last-child { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; color: var(--cor-texto-claro); }

/* CONTEÚDO (MAIN) */
.main-content {
    flex: 1; height: calc(100vh - 80px); overflow-y: auto; position: relative; z-index: 10; scroll-behavior: smooth;
}
@media (min-width: 768px) { .main-content { height: 100vh; } }

.content-wrapper { padding: 1.5rem; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--gap-padrao); }
@media (min-width: 768px) { .content-wrapper { padding: 2.5rem; } }

.aba-conteudo { animation: fadeIn 0.4s ease forwards; }

/* ==========================================
   5. COMPONENTES E CARDS (CORPORATE DARK)
========================================== */
.card-base {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-card);
    padding: 1.5rem; box-shadow: var(--sombra-suave); position: relative; overflow: hidden;
}
@media (min-width: 768px) { .card-base { padding: 2.5rem; } }

.bg-dark { background: #020617; border-color: #1e293b; }
.bg-tema { background: var(--cor-primaria); border-color: rgba(255,255,255,0.2); color: white; }
.bg-gradient-roxo { background: linear-gradient(135deg, #4c1d95, #7e22ce); border-color: rgba(255,255,255,0.1); }
.bg-gradient-laranja { background: linear-gradient(135deg, #b45309, #ea580c); border-color: rgba(255,255,255,0.1); }

.mt-gap { margin-top: var(--gap-padrao); }
.mb-gap { margin-bottom: var(--gap-padrao); }
.mb-1   { margin-bottom: 0.25rem; }
.mb-2   { margin-bottom: 0.75rem; }

/* HEADER DASHBOARD */
.header-dashboard { display: flex; justify-content: space-between; align-items: center; border: none; padding: 0 0 1rem 0 !important; background: transparent; box-shadow: none; border-radius: 0; }
.header-logo-group { display: flex; align-items: center; gap: 1.25rem; }
.logo-dashboard { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; background: #fff; padding: 2px; }
.header-text-group h1 { font-size: 2rem; font-weight: 900; line-height: 1; margin-bottom: 0.25rem; }
.badge-info { background: rgba(59, 130, 246, 0.1); color: #60a5fa; padding: 4px 10px; border-radius: 6px; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid rgba(59, 130, 246, 0.2); }

/* CHECKLIST DE ATIVAÇÃO — guia os primeiros passos do lojista no painel.
   Reaproveita o mesmo padrão visual de card-base; some por completo quando
   os 5 passos são concluídos (controlado via JS, classe .hidden). */
.card-checklist-ativacao { margin-bottom: 1.25rem; padding: 1.25rem 1.5rem !important; }
.checklist-header { margin-bottom: 0.85rem; }
.checklist-titulo { font-size: 0.95rem; font-weight: 900; margin-bottom: 0.2rem; }
.checklist-subtitulo { font-size: 0.7rem; font-weight: 700; color: var(--cor-texto-claro); text-transform: uppercase; letter-spacing: 0.05em; }
.checklist-barra-fundo { width: 100%; height: 6px; background: var(--cor-borda); border-radius: 999px; overflow: hidden; margin-bottom: 1rem; }
.checklist-barra-preenchimento { height: 100%; width: 0%; background: var(--cor-primaria); border-radius: 999px; transition: width 0.5s ease; }
.lista-checklist-ativacao { display: flex; flex-direction: column; gap: 0.5rem; }
.checklist-item {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left;
    background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 12px;
    padding: 0.75rem 0.9rem; cursor: pointer; transition: border-color 0.15s ease; min-height: 44px;
}
.checklist-item:hover { border-color: var(--cor-primaria); }
.checklist-item.feito { opacity: 0.55; }
.checklist-item-icone {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cor-texto-claro);
    display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 900; color: var(--cor-texto-claro);
}
.checklist-item.feito .checklist-item-icone { border-color: var(--sucesso); background: var(--sucesso); color: #fff; }
.checklist-item-texto { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.checklist-item-titulo { font-size: 0.78rem; font-weight: 800; }
.checklist-item.feito .checklist-item-titulo { text-decoration: line-through; }
.checklist-item-desc { font-size: 0.68rem; color: var(--cor-texto-claro); }

/* KPIs GRID */
.grid-kpis { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .grid-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-kpis { grid-template-columns: repeat(4, 1fr); } }

.card-kpi {
    background: var(--cor-superficie); border-radius: 20px; padding: 1.5rem; border: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-suave); border-top-width: 4px; border-top-style: solid; border-top-color: var(--cor-borda);
}

.kpi-tema { border-top-color: var(--cor-primaria); }
.kpi-destaque { background: linear-gradient(135deg, #1e293b, #0f172a); border-top-color: #f59e0b; }
.kpi-positivo { border-top-color: var(--sucesso); }
.kpi-alerta { border-top-color: var(--alerta); }

.kpi-label { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cor-texto-claro); margin-bottom: 0.75rem; }
.kpi-valor { font-size: 2.25rem; font-weight: 900; line-height: 1; letter-spacing: -0.05em; color: #fff; }
.kpi-sublabel { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.5rem; color: #64748b; }

.kpi-positivo .kpi-valor { color: var(--sucesso); }
.kpi-alerta .kpi-valor { color: var(--alerta); }

/* GRIDS GERAIS */
.grid-duas-colunas { display: grid; grid-template-columns: 1fr; gap: var(--gap-padrao); }
@media (min-width: 1024px) { .grid-duas-colunas { grid-template-columns: repeat(2, 1fr); } }

.grid-tres-colunas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }

.grid-layout-balcao { display: grid; grid-template-columns: 1fr; gap: var(--gap-padrao); }
@media (min-width: 1280px) { .grid-layout-balcao { grid-template-columns: 2fr 1fr; } }
.col-filas { display: flex; flex-direction: column; gap: var(--gap-padrao); }
.col-sidebar-balcao { display: flex; flex-direction: column; gap: var(--gap-padrao); }

/* ==========================================
   6. FILAS E LISTAGENS (CRM E CAIXA)
========================================== */
.card-header { padding: 1.5rem; border-bottom: 1px solid var(--cor-borda); display: flex; align-items: center; gap: 1rem; background: rgba(0,0,0,0.1); }
.header-alerta { background: rgba(245, 158, 11, 0.05); border-bottom-color: rgba(245, 158, 11, 0.1); }
.header-destaque { background: transparent; }

.header-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; background: var(--cor-fundo); border: 1px solid var(--cor-borda); }
.header-alerta .header-icon { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border-color: rgba(245, 158, 11, 0.2); }

.header-text h2 { font-size: 1.25rem; font-weight: 900; color: #fff; }
.header-text p { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; color: var(--cor-texto-claro); margin-top: 0.25rem; letter-spacing: 0.05em;}

.card-body { padding: 1.5rem; flex: 1; }
.listagem-dinamica { display: flex; flex-direction: column; gap: 1rem; }

.card-fila-item {
    background: #020617; padding: 1.25rem; border-radius: 16px; border: 1px solid var(--cor-borda);
    display: flex; flex-direction: column; gap: 1rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
@media (min-width: 768px) { .card-fila-item { flex-direction: row; align-items: center; justify-content: space-between; } }
.border-l-destaque { border-left: 4px solid var(--alerta); }

.fila-info p:first-child { margin-bottom: 0.25rem; }
.seta-direcional { font-size: 1.5rem; color: #334155; display: none; }
@media (min-width: 768px) { .seta-direcional { display: block; } }

.actions-row { display: flex; gap: 0.5rem; width: 100%; }
@media (min-width: 768px) { .actions-row { width: auto; } }

/* HISTÓRICO */
.card-historico { height: 400px; display: flex; flex-direction: column; }
.card-historico h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--cor-borda); padding-bottom: 1rem; margin-bottom: 1rem; color: var(--cor-texto-claro); }
.listagem-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.historico-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: #020617; border: 1px solid var(--cor-borda); border-radius: 12px; }

/* TABELA CRM */
.card-header-flex { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--cor-borda); padding-bottom: 1.5rem; }
@media (min-width: 640px) { .card-header-flex { flex-direction: row; align-items: center; justify-content: space-between; } }

.actions-flex { display: flex; gap: 0.75rem; width: 100%; }
@media (min-width: 640px) { .actions-flex { width: auto; } }

.table-container { overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: 16px; background: #020617; }
.table-dados { width: 100%; border-collapse: collapse; text-align: left; }
.table-dados th { background: rgba(15, 23, 42, 0.8); padding: 1.25rem; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cor-texto-claro); border-bottom: 1px solid var(--cor-borda); }
.table-dados td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cor-borda); font-size: 0.85rem; color: #fff; }
.table-dados tr:hover { background: rgba(255,255,255,0.02); }

/* ==========================================
   7. FORMULÁRIOS, INPUTS E BOTÕES
========================================== */
.form-group { display: flex; flex-direction: column; gap: 1rem; }
.form-group-vertical { display: flex; flex-direction: column; gap: 1.25rem; }
.input-row { display: flex; gap: 0.75rem; align-items: center; }

.input-padrao {
    width: 100%; padding: 1.25rem; border-radius: var(--raio-input); border: 1px solid var(--cor-borda);
    background: #020617; font-size: 0.9rem; font-weight: 700; color: #fff;
    outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.input-padrao:focus { border-color: var(--cor-primaria); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 0 0 2px rgba(147, 51, 234, 0.2); }
.input-padrao::placeholder { color: #475569; font-weight: 600; }

.input-escuro {
    width: 100%; padding: 1.25rem; border-radius: var(--raio-input); border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.4); font-size: 0.9rem; font-weight: 700; color: white; outline: none;
}
.input-escuro::placeholder { color: rgba(255,255,255,0.3); font-weight: 500; }
.input-escuro:focus { border-color: rgba(255,255,255,0.3); }

.input-escuro-transparent {
    width: 100%; background: transparent; border: none; font-size: 0.85rem; font-weight: 900; color: white; outline: none;
}

.input-color { width: 56px; height: 56px; padding: 0; border: 1px solid var(--cor-borda); border-radius: var(--raio-input); cursor: pointer; background: #020617; }
.input-color::-webkit-color-swatch-wrapper { padding: 0; }
.input-color::-webkit-color-swatch { border: none; border-radius: calc(var(--raio-input) - 2px); }

.textarea-large { min-height: 120px; resize: vertical; }
.input-sm { width: 80px; text-align: center; }

/* Wrapper de ícone */
.input-busca-wrapper { position: relative; flex: 1; }
.icon-busca { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--cor-texto-claro); }
.input-with-icon { padding-left: 2.75rem; }

/* Toggle Switch (Puro CSS Customizado) */
.toggle-switch {
    appearance: none; -webkit-appearance: none;
    width: 44px; height: 24px; background: #1e293b; border-radius: 12px;
    position: relative; cursor: pointer; outline: none; transition: background 0.3s ease;
    border: 1px solid #334155;
}
.toggle-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; background: #94a3b8; border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.toggle-switch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.toggle-switch:checked { background: var(--sucesso); border-color: var(--sucesso); }
.toggle-switch:checked::after { transform: translateX(20px); background: #fff; }

/* Contraste do toggle sobre fundos coloridos/gradiente (roxo, laranja, tema dinâmico) */
.bg-gradient-roxo .toggle-switch:checked,
.bg-gradient-laranja .toggle-switch:checked,
.bg-tema .toggle-switch:checked,
.bg-dark .toggle-switch:checked {
    background: white;
    border-color: white;
}
.bg-gradient-roxo .toggle-switch:checked::after { background: #7e22ce; }
.bg-gradient-laranja .toggle-switch:checked::after { background: #b45309; }
.bg-tema .toggle-switch:checked::after { background: var(--cor-primaria); }
.bg-dark .toggle-switch:checked::after { background: var(--sucesso); }

/* BOTÕES */
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.btn-primario {
    width: 100%; background: var(--cor-primaria); color: white; padding: 1.25rem;
    border-radius: var(--raio-btn); font-size: 0.8rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.1em; transition: all 0.2s ease; box-shadow: 0 8px 20px -6px var(--cor-primaria);
}
.btn-primario:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-primario:active:not(:disabled) { transform: translateY(0); scale: 0.98; }
.btn-primario:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-large { padding: 1.5rem; font-size: 0.9rem; border-radius: 16px; }

/* Dentro de linhas de ação (ex: modal de confirmação) o botão não deve ocupar 100%,
   e sim dividir o espaço igualmente com o botão vizinho via .flex-1 */
.modal-actions-row .btn-primario,
.modal-actions-row .btn-secundario,
.modal-actions-row .btn-perigo {
    width: auto;
}

.btn-secundario {
    width: 100%; background: transparent; color: var(--cor-texto-claro); padding: 1.25rem;
    border-radius: var(--raio-btn); font-size: 0.75rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.1em; transition: all 0.2s ease; border: 1px solid var(--cor-borda);
}
.btn-secundario:hover { background: rgba(255,255,255,0.05); color: white; border-color: #475569; }

.btn-sucesso { background: var(--sucesso); color: white; padding: 1rem 1.5rem; border-radius: 12px; font-weight: 900; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; flex: 1; transition: 0.2s; box-shadow: 0 4px 10px -2px rgba(16, 185, 129, 0.2); }
.btn-sucesso:hover { background: #059669; }

.btn-perigo { background: rgba(239, 68, 68, 0.1); color: var(--perigo); padding: 1rem 1.5rem; border-radius: 12px; font-weight: 900; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; flex: 1; transition: 0.2s; border: 1px solid rgba(239, 68, 68, 0.2); }
.btn-perigo:hover { background: rgba(239, 68, 68, 0.2); }

.btn-contraste { background: white; color: #0f172a; padding: 1.25rem; border-radius: var(--raio-btn); font-size: 0.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; transition: 0.2s; box-shadow: 0 10px 15px -3px rgba(255,255,255,0.1); border: none; }
.btn-contraste:hover { background: #f1f5f9; }

.btn-acao { background: #3b82f6; color: white; padding: 1.25rem; border-radius: var(--raio-btn); font-size: 0.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; transition: 0.2s; }
.btn-acao:hover { background: #2563eb; }

.btn-acao-icone { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: 0.2s; background: rgba(255,255,255,0.05); border: 1px solid var(--cor-borda); color: var(--cor-texto-claro); }
.btn-acao-icone:hover { background: rgba(255,255,255,0.1); }

.btn-premium { background: linear-gradient(135deg, #a855f7, #6366f1); color: white; padding: 1rem 2rem; border-radius: 12px; font-weight: 900; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; box-shadow: 0 10px 20px -5px rgba(168, 85, 247, 0.3); border: none; margin-top: 1rem; cursor: pointer; transition: transform 0.2s; }
.btn-premium:hover { transform: scale(1.05); }

/* ==========================================
   8. BOXES DE CONFIGURAÇÃO (CRM/MEGA CONTROLE)
========================================== */
.config-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.config-box-dark { background: rgba(0,0,0,0.3); padding: 1.25rem; border-radius: 16px; border: 1px solid var(--cor-borda); margin-bottom: 1rem; }
.config-box-dark label { display: block; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cor-texto-claro); margin-bottom: 0.5rem; }

.config-box-outline { background: transparent; padding: 1.25rem; border-radius: 16px; border: 1px solid var(--cor-borda); }
.config-box-outline label { display: block; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cor-texto-claro); margin-bottom: 0.5rem; }
.input-hint { font-size: 0.6rem; color: #64748b; margin-top: 0.4rem; font-weight: 500; }

.config-box-pro { background: radial-gradient(ellipse at top right, rgba(234, 179, 8, 0.1), transparent); padding: 1.5rem; border-radius: 16px; border: 1px solid rgba(234, 179, 8, 0.2); position: relative; overflow: hidden; }
.badge-pro { position: absolute; top: 0; right: 0; background: #eab308; color: black; font-size: 0.5rem; font-weight: 900; text-transform: uppercase; padding: 4px 10px; border-bottom-left-radius: 12px; }
.config-box-pro p { font-size: 0.65rem; font-weight: 900; color: #fde047; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }

.label-white { font-size: 0.75rem; font-weight: 900; color: white; text-transform: uppercase; letter-spacing: 0.1em; }

.flex-row-between { display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; align-items: center; }
@media (min-width: 768px) { .flex-row-between { flex-direction: row; } }

.status-texto { font-size: 0.75rem; font-weight: 800; color: var(--cor-texto-claro); }

/* Banners (CRM) */
.card-kpi-banner { background: linear-gradient(135deg, #064e3b, #065f46); border-radius: 32px; padding: 2.5rem; color: white; display: flex; flex-direction: column; gap: 1.5rem; justify-content: space-between; align-items: center; position: relative; overflow: hidden; border: 1px solid #047857; }
@media (min-width: 768px) { .card-kpi-banner { flex-direction: row; } }
.banner-text p:first-child { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #6ee7b7; margin-bottom: 0.5rem; }
.banner-text h2 { font-size: 2rem; font-weight: 900; margin-bottom: 0.5rem; color: white; }
.banner-text p:last-child { font-size: 0.85rem; color: #a7f3d0; max-width: 400px; }
.banner-valor { background: rgba(0,0,0,0.3); padding: 1.5rem; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); text-align: center; backdrop-filter: blur(10px); min-width: 200px; }
.banner-valor p:first-child { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #6ee7b7; margin-bottom: 0.5rem; }
.banner-valor h3 { font-size: 2.5rem; font-weight: 900; color: white; }
.badge-alerta { background: rgba(239, 68, 68, 0.2); padding: 6px 12px; border-radius: 8px; font-size: 0.65rem; font-weight: 900; color: #fca5a5; display: inline-block; margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid rgba(239, 68, 68, 0.3); }

.lock-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(2, 6, 23, 0.8); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50; border-radius: inherit; text-align: center; padding: 1.5rem; gap: 0.5rem; }

/* ==========================================
   9. TELA DE LOGIN E BUSCA
========================================== */
.screen-full { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 100; background: var(--cor-fundo); padding: 1rem; }
.card-central { background: var(--cor-superficie); border: 1px solid var(--cor-borda); padding: 3rem 2.5rem; border-radius: 32px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); width: 100%; max-width: 420px; text-align: center; position: relative; overflow: hidden; animation: fadeIn 0.4s ease forwards; }
.faixa-topo { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--cor-primaria); }

.logo-loja-container { width: 96px; height: 96px; margin: 0 auto 2rem auto; background: #fff; border-radius: 24px; padding: 4px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); }
.logo-loja-container img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; }

.icon-loja { width: 80px; height: 80px; margin: 0 auto 2rem auto; background: #1e293b; color: white; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; border: 1px solid #334155; }

.card-central h1 { font-size: 2rem; margin-bottom: 0.5rem; color: #fff; }
.card-central p { font-size: 0.85rem; color: var(--cor-texto-claro); margin-bottom: 2rem; }

.aviso-critico { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); padding: 2rem; border-radius: 24px; margin-bottom: 1.5rem; }
.icon-aviso { font-size: 3rem; margin-bottom: 1rem; }
.aviso-critico h3 { color: #f87171; font-size: 1.25rem; font-weight: 900; margin-bottom: 0.5rem; }
.aviso-critico p { color: #fca5a5; font-size: 0.85rem; margin-bottom: 0; font-weight: 600; line-height: 1.5; }

.msg-erro { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #fca5a5; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; padding: 1rem; border-radius: 12px; margin-top: 1.5rem; }

/* ==========================================
   10. MODAIS E TOASTS
========================================== */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(2, 6, 23, 0.8); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 1.5rem; animation: fadeIn 0.2s ease; }
.modal-box { background: var(--cor-superficie); padding: 2.5rem; border-radius: 32px; width: 100%; max-width: 420px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8); position: relative; animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; border: 1px solid var(--cor-borda); }
.modal-icon-large { font-size: 4rem; margin-bottom: 1.5rem; display: inline-block; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)); }
.icon-whatsapp { background: rgba(16, 185, 129, 0.1); color: #10b981; width: 80px; height: 80px; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 3rem; margin: 0 auto 1.5rem auto; border: 1px solid rgba(16, 185, 129, 0.2); }

.modal-box h3 { font-size: 1.5rem; font-weight: 900; margin-bottom: 0.5rem; color: #fff; }
.modal-box p { font-size: 0.85rem; color: var(--cor-texto-claro); margin-bottom: 2rem; line-height: 1.6; }

.modal-actions-row { display: flex; gap: 1rem; width: 100%; }
.modal-actions-row > * { flex: 1 1 0%; }

.btn-fechar-abs { position: absolute; top: 1.5rem; right: 1.5rem; width: 36px; height: 36px; border-radius: 50%; background: #1e293b; border: 1px solid #334155; font-weight: 900; color: var(--cor-texto-claro); cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.btn-fechar-abs:hover { background: #334155; color: #fff; }

.qr-code-box { width: 260px; height: 260px; margin: 0 auto; background: #fff; border: 4px solid #1e293b; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; position: relative; overflow: hidden; padding: 1rem; }
.qr-code-box img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 10; }
.spinner { width: 50px; height: 50px; border: 4px solid #e2e8f0; border-top-color: #10b981; border-radius: 50%; animation: spin 1s linear infinite; flex-shrink: 0; }
.qr-status-text { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; text-align: center; padding: 0 0.5rem; }

.cartaz-preview-box { width: 100%; min-height: 220px; margin: 0 auto; display: flex; align-items: center; justify-content: center; position: relative; }
.canvas-cartaz { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; border-radius: 20px; box-shadow: 0 20px 35px -10px rgba(0,0,0,0.6); }

.toast-container { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; pointer-events: none; }
.toast-box { background: var(--cor-superficie); color: white; padding: 1rem 1.5rem; border-radius: 16px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5); pointer-events: auto; min-width: 300px; border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-primaria); }
.toast-icon { font-size: 1.25rem; flex-shrink: 0; }
.toast-content h4 { font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin-bottom: 0.25rem; }
.toast-content p { font-size: 0.75rem; font-weight: 500; margin: 0; color: #94a3b8; }
.btn-fechar { background: none; border: none; color: #64748b; cursor: pointer; padding: 0.5rem; font-weight: 900; margin-left: auto; transition: 0.2s; }
.btn-fechar:hover { color: white; }

/* ==========================================
   11. ANIMAÇÕES GERAIS
========================================== */
.fade-in { animation: fadeIn 0.3s ease forwards; }
.toast-anim { animation: slideLeftBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes slideLeftBounce {
    0% { opacity: 0; transform: translateX(100px); }
    60% { opacity: 1; transform: translateX(-10px); }
    100% { transform: translateX(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* CHIPS DE TEXTO */
.text-comum { color: #60a5fa; font-weight: 900; font-size: 0.65rem; letter-spacing: 0.1em; width: 60px; text-transform: uppercase; }
.text-raro { color: #c084fc; font-weight: 900; font-size: 0.65rem; letter-spacing: 0.1em; width: 60px; text-transform: uppercase; }
.text-lendario { color: #fde047; font-weight: 900; font-size: 0.65rem; letter-spacing: 0.1em; width: 60px; text-transform: uppercase; }