/* ════════════════════════════════════════════════════════════════════════════ vip-premium.css — Missão 4: Padronização de UI/UX Premium (ADITIVO) Carregado por ÚLTIMO no . Apenas realça; não recria componentes. Cuidados: NÃO interfere em .toggle-switch (painel IA / feature flags). ════════════════════════════════════════════════════════════════════════════ */ /* ── 1. BOTÃO UNIVERSAL ───────────────────────────────────────────────────── */ .btn-vip-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: none; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1; color: var(--vc-ink-inverse); background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 4px 14px rgba(99, 102, 241, .28); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .btn-vip-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99, 102, 241, .4); filter: brightness(1.05); } .btn-vip-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(99, 102, 241, .3); } .btn-vip-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; } /* ── 2. ÍCONES BRANCOS DENTRO DE BOTÕES + MICRO-INTERAÇÃO ──────────────────── */ /* Escopo: botões padrão .btn (preserva .btn-tool-config ⚙️ e ícones de status). */ .btn i, .btn svg, .btn-vip-primary i, .btn-vip-primary svg, .btn-primary i, .btn-success i, .btn-danger i, .btn-warning i { color: var(--vc-ink-inverse) !important; fill: var(--vc-ink-inverse) !important; transition: transform .2s ease; } /* Reforço de especificidade — vence regras do tema e cobre o glifo ::before do FontAwesome */ html body .btn i, html body .btn i::before, html body .btn-primary i, html body .btn-primary i::before, html body .btn-secondary i, html body .btn-secondary i::before, html body .btn-success i, html body .btn-danger i, html body .btn-warning i, html body .btn-vip-primary i, html body .btn-vip-primary i::before { color: var(--vc-ink-inverse) !important; fill: var(--vc-ink-inverse) !important; } .btn i, .btn-vip-primary i { will-change: transform; } .btn:hover i, .btn-vip-primary:hover i, .btn-primary:hover i, .btn-success:hover i, .btn-danger:hover i { transform: translateX(3px); } /* ── 3. FORMULÁRIOS DE ALTO PADRÃO (SaaS) ─────────────────────────────────── */ /* Inputs / textareas / selects: tira o aspecto nativo, dá borda suave + glow. */ .modal-body input[type="text"], .modal-body input[type="email"], .modal-body input[type="number"], .modal-body input[type="tel"], .modal-body input[type="search"], .modal-body input[type="url"], .modal-body input:not([type]), .modal-body textarea, .modal-body select, .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="number"], .form-group input[type="tel"], .form-group input:not([type]), .form-group textarea, .form-group select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1.5px solid rgba(128, 132, 160, .28); border-radius: 10px; padding: 11px 14px; font-size: 14px; background-color: var(--vc-layer-alpha-030); color: inherit; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; outline: none; } /* Seta customizada nos selects (substitui a nativa removida) */ .modal-body select, .form-group select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; } /* Focus state moderno: ring/glow suave, sem outline preto */ .modal-body input:focus, .modal-body textarea:focus, .modal-body select:focus, .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129, 140, 248, .25); background-color: rgba(129, 140, 248, .04); } .modal-body input::placeholder, .form-group input::placeholder, .modal-body textarea::placeholder { color: rgba(140, 145, 170, .6); } /* ── 4. CHECKBOXES / RADIOS CUSTOMIZADOS ──────────────────────────────────── */ /* IMPORTANTE: exclui os checkboxes dentro de .toggle-switch (slider do painel). */ input[type="checkbox"]:not(.toggle-switch input), input[type="radio"]:not(.toggle-switch input) { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid rgba(128, 132, 160, .5); background: var(--vc-layer-subtle); cursor: pointer; position: relative; flex: 0 0 auto; vertical-align: middle; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } input[type="checkbox"]:not(.toggle-switch input) { border-radius: 6px; } input[type="radio"]:not(.toggle-switch input) { border-radius: 50%; } input[type="checkbox"]:not(.toggle-switch input):hover, input[type="radio"]:not(.toggle-switch input):hover { border-color: #818cf8; } input[type="checkbox"]:not(.toggle-switch input):focus-visible, input[type="radio"]:not(.toggle-switch input):focus-visible { box-shadow: 0 0 0 3px rgba(129, 140, 248, .3); } input[type="checkbox"]:not(.toggle-switch input):checked, input[type="radio"]:not(.toggle-switch input):checked { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: #6366f1; } /* Check (✓) desenhado em CSS */ input[type="checkbox"]:not(.toggle-switch input):checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transform-origin: center; animation: vipCheckPop .18s ease forwards; } /* Bolinha do radio */ input[type="radio"]:not(.toggle-switch input):checked::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%) scale(0); animation: vipRadioPop .18s ease forwards; } @keyframes vipCheckPop { to { transform: rotate(45deg) scale(1); } } @keyframes vipRadioPop { to { transform: translate(-50%, -50%) scale(1); } } /* ── 6. RESPONSIVIDADE: modais de config em mobile ────────────────────────── */ @media (max-width: 768px) { .modal-overlay .modal.modal-sm, .modal-overlay .modal { width: calc(100vw - 24px) !important; max-width: 520px; } .modal-body textarea { font-size: 16px; } /* evita zoom automático no iOS */ } /* ════════════════════════════════════════════════════════════════════════════ MISSÃO 3 — Sidebar premium (aditivo). Refina o collapse existente. ════════════════════════════════════════════════════════════════════════════ */ /* Curva sofisticada + anti-engasgo na largura */ .sidebar { transition: width .4s cubic-bezier(.25, 1, .5, 1), transform .4s cubic-bezier(.25, 1, .5, 1) !important; } /* Labels nunca quebram linha (fim do "amassado") */ .sidebar .nav-item, .sidebar .nav-section { white-space: nowrap; } /* Fade + colapso de largura do texto ANTES da barra estreitar */ .nav-item-label { display: inline-block; vertical-align: middle; white-space: nowrap; overflow: hidden; opacity: 1; max-width: 220px; transition: opacity .2s ease, max-width .4s cubic-bezier(.25, 1, .5, 1); } .sidebar.collapsed .nav-item-label { opacity: 0; max-width: 0; } /* Não dependemos mais do font-size:0 abrupto — o label-fade cuida do texto */ .sidebar.collapsed .nav-item { font-size: inherit; } .sidebar.collapsed .nav-item .nav-icon i { font-size: 16px; } /* Tooltip flutuante (posicionado via JS em position:fixed → escapa do overflow) */ #vip-tooltip { position: fixed; z-index: 4000; background: #1f2937; color: var(--vc-ink-inverse); padding: 7px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); pointer-events: none; opacity: 0; transform: translateY(-50%); transition: opacity .15s ease; } #vip-tooltip.show { opacity: 1; } /* ── Mobile: off-canvas + overlay ─────────────────────────────────────────── */ @media (max-width: 768px) { .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: var(--sidebar-width) !important; /* ignora "collapsed" no mobile */ transform: translateX(-100%); } .sidebar.open { transform: translateX(0); box-shadow: 4px 0 28px rgba(0, 0, 0, .4); } .sidebar.collapsed .nav-item-label { opacity: 1; max-width: 220px; } /* mostra texto no mobile */ #sidebar-overlay { position: fixed; inset: 0; background: var(--vc-shade-overlay); opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 99; } #sidebar-overlay.show { opacity: 1; visibility: visible; } #vip-tooltip { display: none; } /* sem tooltip no mobile */ } /* ════════════════════════════════════════════════════════════════════════════ MISSÃO 3 — FIX: vazamentos visuais no estado .sidebar.collapsed (nav-section-label, toolbar "Reordenar/Nova Categoria", rodapé de usuário) ════════════════════════════════════════════════════════════════════════════ */ /* 1. Ocultar texto de seções e títulos extras no collapse */ .sidebar.collapsed .nav-section-label, .sidebar.collapsed .nav-section h3, .sidebar.collapsed .sidebar-edit-toolbar span, .sidebar.collapsed .user-info .user-name, .sidebar.collapsed .user-info .user-role { opacity: 0 !important; max-width: 0 !important; display: inline-block; overflow: hidden; white-space: nowrap; transition: opacity .2s ease, max-width .3s ease; } /* Contenção absoluta extra: o próprio .nav-section vira um divisor sem texto. (cobre o caso "Helpde..." cortado, mesmo sem span interno) */ .sidebar.collapsed .nav-section { font-size: 0 !important; color: transparent !important; height: 1px; padding: 6px 0; margin: 6px 12px; overflow: hidden; } /* 2. Barra de ferramentas de reordenar: empilha e centraliza no rail */ .sidebar.collapsed .sidebar-edit-toolbar { padding: 10px 0 !important; display: flex; flex-direction: column; align-items: center; gap: 12px; } /* 3. Botões do rodapé viram círculos só-ícone, centralizados */ .sidebar.collapsed .sidebar-edit-toolbar button { width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50% !important; justify-content: center !important; overflow: hidden; transition: all .3s ease; } /* Esconde QUALQUER texto/label dentro dos botões da toolbar no collapse */ .sidebar.collapsed .sidebar-edit-toolbar button span { display: none !important; } /* Ícones desses botões brancos e centralizados — cobre E (toolbar usa SVG) */ .sidebar.collapsed .sidebar-edit-toolbar button i, .sidebar.collapsed .sidebar-edit-toolbar button svg { margin: 0 !important; color: var(--vc-ink-inverse) !important; stroke: var(--vc-ink-inverse) !important; } /* 4. Rodapé de usuário: avatar perfeitamente centralizado no rail de 68px */ .sidebar.collapsed .sidebar-user { justify-content: center !important; padding: 14px 0 !important; } .sidebar.collapsed .sidebar-user .avatar { margin: 0 !important; } /* ════════════════════════════════════════════════════════════════════════════ MISSÃO 3 — FIX 2: span de texto puro vazando (ex.: "Helpdesk") Causa: itens com Texto (não text-node) não viram .nav-item-label, e eu havia neutralizado o font-size:0. Solução: esconder QUALQUER filho do nav-item que não seja o ícone, no estado colapsado. ════════════════════════════════════════════════════════════════════════════ */ .sidebar.collapsed .nav-item > *:not(.nav-icon):not(.nav-icon-wrap):not(i):not(svg) { opacity: 0 !important; max-width: 0 !important; width: 0 !important; overflow: hidden !important; white-space: nowrap; display: inline-block; padding: 0 !important; margin: 0 !important; } /* Garante o ícone sempre visível e centralizado no rail */ .sidebar.collapsed .nav-item { justify-content: center; } .sidebar.collapsed .nav-item .nav-icon, .sidebar.collapsed .nav-item .nav-icon-wrap { opacity: 1 !important; max-width: none !important; width: auto !important; } /* ── Churn: badge [Cancelado] em vermelho premium ─────────────────────────── */ .badge-cancelled { background: var(--vc-danger-surface) !important; color: #f87171 !important; border: 1px solid var(--vc-danger-strong); font-weight: 700; } /* ════════════════════════════════════════════════════════════════════════════ ④ POLIMENTO TELA-A-TELA (aditivo) — micro-refinamentos premium globais ════════════════════════════════════════════════════════════════════════════ */ /* Fade-in suave ao trocar de página (substitui o "pisca" seco) */ .page.active { animation: vipPageIn .22s ease; } @keyframes vipPageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Tabelas: cabeçalho refinado + hover de linha sutil */ .page table thead th { letter-spacing: .6px; } .page table tbody tr { transition: background-color .15s ease; } .page table tbody tr:hover td { background-color: rgba(129, 140, 248, .055); } /* Cards de métricas: leve elevação no hover */ .metric-card { transition: transform .2s ease, box-shadow .2s ease; } .metric-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); } /* Botões de ação das tabelas: micro-zoom no hover */ .action-btn { transition: transform .15s ease, background-color .15s ease; } .action-btn:hover { transform: scale(1.12); } /* Scrollbar premium fina (WebKit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(129, 140, 248, .25); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(129, 140, 248, .45); } /* ════════════════════════════════════════════════════════════════════════════ POLIMENTO POR TELA — padrão .vip-screen (Tela 1: CLIENTES) Opt-in por tela: adicionar a classe vip-screen ao
ativa este skin SaaS premium sem tocar na lógica de render. ════════════════════════════════════════════════════════════════════════════ */ /* Toolbar respirando: espaçamento generoso e alinhamento fluido */ .vip-screen .toolbar { gap: 12px; margin-bottom: 22px; align-items: center; } /* Busca em formato pill com focus-ring suave */ .vip-screen .search-box input { -webkit-appearance: none; appearance: none; border: 1.5px solid rgba(128, 132, 160, .26); border-radius: 999px; padding: 11px 20px; min-width: 300px; font-size: 14px; background-color: var(--vc-layer-faint); color: inherit; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .vip-screen .search-box input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129, 140, 248, .22); background-color: rgba(129, 140, 248, .05); } .vip-screen .search-box input::placeholder { color: rgba(140, 145, 170, .55); } /* Select de status alinhado ao mesmo padrão */ .vip-screen .glass-select { border: 1.5px solid rgba(128, 132, 160, .26); border-radius: 12px; padding: 10px 14px; background-color: var(--vc-layer-faint); transition: border-color .2s ease, box-shadow .2s ease; } .vip-screen .glass-select:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129, 140, 248, .22); outline: none; } /* Card elevado: sombra MUITO sutil em duas camadas + raio moderno */ .vip-screen > .card { border-radius: 18px; border: 1px solid var(--vc-layer-medium); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 10px 32px rgba(0, 0, 0, .16); overflow: hidden; } /* Tabela limpa: SEM bordas pesadas — apenas divisórias horizontais suaves */ .vip-screen .table-wrapper table { border-collapse: collapse; width: 100%; } .vip-screen .table-wrapper thead th { padding: 14px 16px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; color: var(--vc-ink-inverse) !important; border: none; border-bottom: 1px solid var(--vc-layer-strong); background: var(--vc-layer-alpha-015); text-align: left; } .vip-screen .table-wrapper tbody td { padding: 15px 16px; border: none; border-bottom: 1px solid var(--vc-layer-alpha-050); font-size: .88rem; } .vip-screen .table-wrapper tbody tr:last-child td { border-bottom: none; } /* Botões de ação: cantos modernos + hover fluido com fundo */ .vip-screen .action-btn { border-radius: 10px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease, background-color .15s ease; } .vip-screen .action-btn:hover { background-color: rgba(129, 140, 248, .14); transform: scale(1.1); } /* Badges em pill suave */ .vip-screen .badge { border-radius: 999px; padding: 4px 11px; font-weight: 600; letter-spacing: .2px; } /* Empty state com mais respiro */ .vip-screen .empty-state { padding: 56px 20px; }