/* ========================================================= KLURO — STYLE.CSS (GLOBAL) ✅ FINAL LIMPO (SEM BRIGA) Light: não quebra nada Dark: só quando ========================================================= */ * { box-sizing: border-box; } html, body { height: 100%; } /* ========================================================= DARK TOKENS (UM ÚNICO PADRÃO) ========================================================= */ html.theme-dark{ color-scheme: dark; --dk-bg: #070B14; --dk-bg-2: #0B1222; --dk-surface: rgba(15,23,42,.72); --dk-surface-2: rgba(15,23,42,.55); --dk-surface-strong: rgba(15,23,42,.92); --dk-border: rgba(148,163,184,.16); --dk-border-2: rgba(148,163,184,.12); --dk-text: #e5e7eb; --dk-muted: rgba(148,163,184,.90); --dk-muted-2: rgba(148,163,184,.60); --dk-ring: rgba(59,130,246,.25); --dk-shadow: 0 18px 55px rgba(0,0,0,.45); } /* ========================================================= FUNDO FIXO (evita “bandas” no scroll) - IMPORTANTÍSSIMO: NÃO colocar fundo sólido no #dashboard-root ========================================================= */ html.theme-dark body{ background: transparent !important; } html.theme-dark::before{ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 600px at 10% 0%, rgba(16,185,129,.10), transparent 55%), radial-gradient(900px 520px at 100% 20%, rgba(59,130,246,.10), transparent 55%), linear-gradient(180deg, var(--dk-bg), var(--dk-bg)); transform: translateZ(0); will-change: transform; } /* FIX: remove o “paredão” atrás do dashboard (deixa o ::before aparecer) */ html.theme-dark main, html.theme-dark #dashboard-root{ background: transparent !important; } /* Se tiver wrappers SPA, mantém transparent pra não criar bloco sólido */ html.theme-dark #app, html.theme-dark #app-content{ background: transparent !important; } /* ========================================================= TEXTOS tailwind (slate) no dark ========================================================= */ html.theme-dark .text-slate-900, html.theme-dark .text-slate-800, html.theme-dark .text-slate-700{ color: var(--dk-text) !important; } html.theme-dark .text-slate-600, html.theme-dark .text-slate-500{ color: var(--dk-muted) !important; } html.theme-dark .text-slate-400{ color: var(--dk-muted-2) !important; } html.theme-dark .placeholder\:text-slate-300::placeholder{ color: var(--dk-muted-2) !important; } /* ========================================================= BORDAS / DIVISORES ========================================================= */ html.theme-dark .border-slate-200, html.theme-dark .border-slate-100, html.theme-dark .border-slate-300, html.theme-dark .border-blue-100, html.theme-dark .border-emerald-100, html.theme-dark .border-emerald-200, html.theme-dark .border-rose-100, html.theme-dark .border-red-200, html.theme-dark .border-dashed{ border-color: var(--dk-border) !important; } /* divisores (bg-slate-100 usado como barra/linha) */ html.theme-dark .bg-slate-100{ background: var(--dk-border-2) !important; } /* ========================================================= CARDS base (o “padrão bonitinho”) ========================================================= */ html.theme-dark .dashboard-card{ background: var(--dk-surface) !important; border: 1px solid var(--dk-border) !important; box-shadow: 0 12px 35px rgba(0,0,0,.30) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Quando algo estiver usando bg-white como “card”, no dark vira surface (NÃO é nuclear, é só o básico pra não estourar branco) */ html.theme-dark .bg-white{ background: var(--dk-surface) !important; } /* Cabeçalhos leves (bg-slate-50/50, bg-slate-50/60 etc) no dark */ html.theme-dark .bg-slate-50, html.theme-dark .bg-slate-50\/50, html.theme-dark .bg-slate-50\/60, html.theme-dark .bg-blue-50, html.theme-dark .bg-blue-50\/60, html.theme-dark .bg-emerald-50, html.theme-dark .bg-emerald-50\/60, html.theme-dark .bg-rose-50{ background: var(--dk-surface-2) !important; } /* ========================================================= INPUTS/SELECT/TEXTAREA (dark consistente) - Base: campos “normais” ficam com fundo leve (não transparente) - Campos “clean” (search/topbar) ficam transparentes via IDs/classes ========================================================= */ html.theme-dark input, html.theme-dark textarea, html.theme-dark select{ background: rgba(11,18,34,.75) !important; color: var(--dk-text) !important; border: 1px solid rgba(148,163,184,.18) !important; outline: none !important; box-shadow: none !important; } html.theme-dark input::placeholder, html.theme-dark textarea::placeholder{ color: var(--dk-muted-2) !important; opacity: 1; } html.theme-dark input:hover, html.theme-dark textarea:hover, html.theme-dark select:hover{ background: rgba(15,23,42,.78) !important; border-color: rgba(148,163,184,.26) !important; } html.theme-dark input:focus, html.theme-dark textarea:focus, html.theme-dark select:focus{ background: rgba(15,23,42,.82) !important; border-color: rgba(59,130,246,.65) !important; box-shadow: 0 0 0 3px var(--dk-ring) !important; } /* Autofill Chrome */ html.theme-dark input:-webkit-autofill, html.theme-dark textarea:-webkit-autofill, html.theme-dark select:-webkit-autofill{ -webkit-text-fill-color: var(--dk-text) !important; -webkit-box-shadow: 0 0 0px 1000px rgba(11,18,34,.75) inset !important; box-shadow: 0 0 0px 1000px rgba(11,18,34,.75) inset !important; border: 1px solid rgba(148,163,184,.18) !important; } html.theme-dark select option{ background: var(--dk-bg-2) !important; color: var(--dk-text) !important; } /* ========================================================= HOVERS comuns (evita “brancão”) ========================================================= */ html.theme-dark .hover\:bg-slate-50:hover{ background: rgba(11,18,34,.45) !important; } html.theme-dark .hover\:bg-slate-100:hover{ background: rgba(148,163,184,.10) !important; } html.theme-dark .hover\:text-slate-700:hover{ color: var(--dk-text) !important; } /* ========================================================= TOPBAR PRODUTOS (sem retângulo interno) ========================================================= */ html.theme-dark #search-produtos{ background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; color: var(--dk-text) !important; } html.theme-dark #btn-clear-search{ background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--dk-muted) !important; } html.theme-dark #btn-clear-search:hover{ color: var(--dk-text) !important; } html.theme-dark #filtro-status, html.theme-dark #sort-produtos{ background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; color: var(--dk-text) !important; -webkit-appearance: none !important; appearance: none !important; } /* ========================================================= PRODUTOS — CARDS ========================================================= */ html.theme-dark .product-card{ background: var(--dk-surface) !important; border: 1px solid var(--dk-border) !important; box-shadow: var(--dk-shadow) !important; } html.theme-dark .product-card .bg-slate-50, html.theme-dark .product-card .bg-slate-100, html.theme-dark .product-card .bg-white{ background: rgba(11,18,34,.55) !important; border-color: var(--dk-border-2) !important; } /* Pills */ .kluro-pill-neutral{ background: rgba(15, 23, 42, 0.04); border-color: rgba(148,163,184,0.30); color: rgba(71,85,105,0.95); } .kluro-pill-success{ background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.28); color: rgba(5,150,105,0.95); } html.theme-dark .kluro-pill-neutral{ background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.18); color: rgba(226,232,240,0.92); } html.theme-dark .kluro-pill-success{ background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.28); color: #34d399; } /* Botão disabled */ html.theme-dark .product-card button[disabled]{ background: rgba(148,163,184,.10) !important; color: rgba(148,163,184,.70) !important; border-color: rgba(148,163,184,.14) !important; } /* ========================================================= LUCRO ESTIMADO (.lucro-box) ========================================================= */ html.theme-dark .lucro-box{ background: linear-gradient(180deg, rgba(11,18,34,.92), rgba(2,6,23,.92)) !important; border: 1px solid rgba(148,163,184,.14) !important; color: var(--dk-text) !important; box-shadow: none !important; } html.theme-dark .lucro-box .kicker{ color: rgba(148,163,184,.85) !important; } html.theme-dark .lucro-box .valor{ color: #34d399 !important; } html.theme-dark .lucro-box .percent{ background: rgba(11,18,34,.70) !important; border: 1px solid rgba(148,163,184,.18) !important; color: #34d399 !important; } /* ========================================================= MODAIS (um sistema só) ========================================================= */ #modal-backdrop{ position: fixed !important; inset: 0 !important; z-index: 9998 !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } html.theme-dark #modal-backdrop{ background: rgba(2, 6, 23, .72) !important; } html:not(.theme-dark) #modal-backdrop{ background: rgba(15, 23, 42, .35) !important; } #modal-novo-produto, #modal-venda, #modal-repor, #modal-confirm, #modal-editar-produto, #modal-meta{ position: fixed !important; inset: 0 !important; z-index: 9999 !important; background: transparent !important; } #modal-novo-produto.hidden, #modal-venda.hidden, #modal-repor.hidden, #modal-confirm.hidden, #modal-editar-produto.hidden, #modal-meta.hidden{ pointer-events: none !important; } html.theme-dark #modal-novo-produto > div, html.theme-dark #modal-venda > div, html.theme-dark #modal-repor > div, html.theme-dark #modal-editar-produto > div, html.theme-dark #modal-meta > div, html.theme-dark #modal-confirm > div > div{ background: linear-gradient(180deg, rgba(15,23,42,.94), rgba(2,6,23,.96)) !important; color: var(--dk-text) !important; border: 1px solid rgba(148,163,184,.16) !important; box-shadow: 0 30px 90px rgba(0,0,0,.60) !important; } html:not(.theme-dark) #modal-novo-produto > div, html:not(.theme-dark) #modal-venda > div, html:not(.theme-dark) #modal-repor > div, html:not(.theme-dark) #modal-editar-produto > div, html:not(.theme-dark) #modal-meta > div, html:not(.theme-dark) #modal-confirm > div > div{ background: #fff !important; color: #0f172a !important; border: 1px solid rgba(226,232,240,1) !important; box-shadow: 0 30px 90px rgba(0,0,0,.25) !important; } /* ========================================================= MODAL VENDA — detalhes (mantém bonito e legível) ========================================================= */ html.theme-dark #modal-venda > div > div:first-child{ background: transparent !important; border-bottom-color: rgba(148,163,184,.14) !important; } html.theme-dark #modal-venda h3{ color:#fff !important; } html.theme-dark #modal-venda p{ color: rgba(226,232,240,.72) !important; } html.theme-dark #modal-venda .bg-emerald-50{ background: rgba(16,185,129,.12) !important; border: 1px solid rgba(16,185,129,.22) !important; } /* Caixa do produto (bg-blue-50/60) */ html.theme-dark #modal-venda .bg-blue-50\/60{ background: linear-gradient(180deg, #0b172a 0%, #091426 100%) !important; border-color: rgba(148,163,184,.16) !important; } /* badge estoque (bg-white + text-blue-700) */ html.theme-dark #modal-venda .text-blue-700.bg-white{ background: rgba(2,6,23,.40) !important; border-color: rgba(148,163,184,.16) !important; color: rgba(226,232,240,.92) !important; } html.theme-dark #modal-venda .text-orange-600{ color: #fb923c !important; } html.theme-dark #modal-venda .text-emerald-600{ color: #34d399 !important; } /* Resultado financeiro (bg-rose-50) */ html.theme-dark #modal-venda .bg-rose-50{ background: linear-gradient(180deg, rgba(15,23,42,.60), rgba(2,6,23,.55)) !important; border-color: rgba(148,163,184,.16) !important; } html.theme-dark #modal-venda #venda-res-total{ color: #fff !important; } html.theme-dark #modal-venda #venda-res-lucro{ color: #fb7185 !important; } html.theme-dark #modal-venda #venda-res-margem.bg-white{ background: rgba(2,6,23,.40) !important; border-color: rgba(148,163,184,.16) !important; color: rgba(226,232,240,.86) !important; } /* Inputs do modal-venda não ficam brancos */ html.theme-dark #modal-venda input, html.theme-dark #modal-venda select{ background: rgba(2,6,23,.35) !important; border-color: rgba(148,163,184,.16) !important; color: #e5e7eb !important; } html.theme-dark #modal-venda select{ -webkit-appearance: none !important; appearance: none !important; } /* botão cancelar (hover:bg-slate-50) */ html.theme-dark #modal-venda .hover\:bg-slate-50:hover{ background: rgba(148,163,184,.10) !important; } /* ========================================================= CATÁLOGO ONLINE (dark padrão bonito) ========================================================= */ html.theme-dark #app-content .dashboard-card{ background: linear-gradient(180deg, #0b172a 0%, #091426 100%) !important; border-color: rgba(148,163,184,.16) !important; } html.theme-dark #app-content .kluro-card, html.theme-dark #app-content .kluro-preview{ background: rgba(15,23,42,.55) !important; border-color: rgba(148,163,184,.16) !important; color: rgba(226,232,240,.92) !important; } html.theme-dark #cat-search{ background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; color: rgba(226,232,240,.92) !important; } html.theme-dark #cat-search::placeholder{ color: rgba(148,163,184,.55) !important; } html.theme-dark #cat-clear-search{ background: transparent !important; border: 1px solid rgba(148,163,184,.14) !important; color: rgba(148,163,184,.85) !important; } html.theme-dark #cat-clear-search:hover{ background: rgba(2,6,23,.28) !important; } html.theme-dark #cat-status{ background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; color: rgba(226,232,240,.92) !important; -webkit-appearance: none !important; appearance: none !important; } html.theme-dark #cat-status option{ background: #0b1222 !important; color: #e5e7eb !important; } html.theme-dark #cat-list > div, html.theme-dark #cat-empty .kluro-card, html.theme-dark #cat-loading .kluro-card{ background: rgba(15,23,42,.62) !important; border-color: rgba(148,163,184,.14) !important; } /* hover que virava branco */ html.theme-dark #app-content .hover\:bg-slate-50:hover, html.theme-dark #app-content .hover\:bg-slate-100:hover{ background: rgba(2,6,23,.25) !important; } /* preview */ html.theme-dark #preview-frame-wrap, html.theme-dark #modal-preview-frame{ background: rgba(2,6,23,.22) !important; } html.theme-dark #preview-frame, html.theme-dark #modal-preview-frame{ background: rgba(15,23,42,.72) !important; border-color: rgba(148,163,184,.16) !important; } html.theme-dark #pv-desktop, html.theme-dark #m-pv-desktop, html.theme-dark #pv-open-link, html.theme-dark #pv-copy-link, html.theme-dark #pv-share, html.theme-dark #m-copy-link, html.theme-dark #m-open-link{ background: rgba(2,6,23,.28) !important; border-color: rgba(148,163,184,.16) !important; color: rgba(226,232,240,.90) !important; } html.theme-dark #pv-desktop:hover, html.theme-dark #m-pv-desktop:hover, html.theme-dark #pv-open-link:hover, html.theme-dark #pv-share:hover, html.theme-dark #m-open-link:hover{ background: rgba(2,6,23,.42) !important; } /* ativo */ html.theme-dark #pv-mobile, html.theme-dark #m-pv-mobile{ background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.26) !important; color: #34d399 !important; } html.theme-dark #pv-mobile:hover, html.theme-dark #m-pv-mobile:hover{ background: rgba(16,185,129,.16) !important; } /* modal catálogo */ html.theme-dark #modal-cat > div{ background: linear-gradient(180deg, #0b172a 0%, #091426 100%) !important; border-color: rgba(148,163,184,.18) !important; } html.theme-dark #modal-cat .sticky.top-0, html.theme-dark #modal-cat .sticky.bottom-0{ background: rgba(15,23,42,.82) !important; border-color: rgba(148,163,184,.16) !important; } html.theme-dark #modal-cat input, html.theme-dark #modal-cat textarea, html.theme-dark #modal-cat select{ background: rgba(2,6,23,.35) !important; border: 1px solid rgba(148,163,184,.16) !important; color: #e5e7eb !important; box-shadow: none !important; } html.theme-dark #modal-cat input::placeholder, html.theme-dark #modal-cat textarea::placeholder{ color: rgba(148,163,184,.55) !important; } html.theme-dark #modal-cat select option{ background: #0b1222 !important; color: #e5e7eb !important; } /* bolinhas fundo da página (white/dark/brand) */ html.theme-dark .ct-bgbtn[data-bg="white"]{ background: #ffffff !important; border: 1px solid rgba(148,163,184,.30) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset !important; } html.theme-dark .ct-bgbtn[data-bg="dark"]{ background: #0b1222 !important; border-color: rgba(148,163,184,.22) !important; } html.theme-dark .ct-bgbtn[data-bg="brand"]{ background: #10b981 !important; border-color: rgba(16,185,129,.35) !important; } html.theme-dark .ct-bgbtn[data-bg="white"]::before, html.theme-dark .ct-bgbtn[data-bg="white"]::after{ content: none !important; } /* ========================================================= BACKDROPS extras (se existirem) ========================================================= */ html.theme-dark #cat-backdrop, html.theme-dark #vendas-backdrop{ background: rgba(2,6,23,.72) !important; backdrop-filter: blur(10px); } /* ========================================================= Tabelas hover (vendas recentes etc) ========================================================= */ html.theme-dark tr.hover\:bg-slate-50:hover{ background: rgba(11,18,34,.45) !important; } /* ícones não “lavarem” */ html.theme-dark svg, html.theme-dark i{ color: inherit; } /* ========================================================= DASHBOARD — FIX: cards “inteligentes” brancos no DARK (mini-alert + Insights .ins-card) Cole NO FINAL do style.css ========================================================= */ /* Base dos cards do Dashboard que estão hardcoded como white */ html.theme-dark .ins-card, html.theme-dark .mini-alert{ background: rgba(15,23,42,.62) !important; /* azul escuro “card” */ border: 1px solid rgba(148,163,184,.16) !important; box-shadow: 0 14px 34px rgba(0,0,0,.30) !important; } /* Hover mantendo padrão (sem virar branco/cinza claro) */ html.theme-dark .ins-card:hover, html.theme-dark .mini-alert:hover{ background: rgba(15,28,58,.62) !important; border-color: rgba(148,163,184,.24) !important; box-shadow: 0 18px 44px rgba(0,0,0,.38) !important; } /* Textos dentro dos insights */ html.theme-dark .ins-kicker{ color: rgba(148,163,184,.78) !important; } html.theme-dark .ins-title{ color: rgba(226,232,240,.95) !important; } html.theme-dark .ins-sub{ color: rgba(148,163,184,.78) !important; } /* Textos dentro dos mini alerts */ html.theme-dark .mini-title{ color: rgba(226,232,240,.95) !important; } html.theme-dark .mini-sub{ color: rgba(148,163,184,.78) !important; } /* Ícones quadradinhos/bolinhas dentro dos cards (evita fundo claro) */ html.theme-dark .mini-ic{ background: rgba(2,6,23,.35) !important; border-color: rgba(148,163,184,.16) !important; } /* Card do Health Score (a bolinha/caixinha que usa bg-slate-100 + border-slate-200) */ html.theme-dark #ins-score{ background: rgba(2,6,23,.35) !important; border: 1px solid rgba(148,163,184,.16) !important; color: rgba(226,232,240,.95) !important; } /* Badges do topo do Insights (ex: “últimos 30 dias”) */ html.theme-dark #insights-range-badge{ background: rgba(2,6,23,.35) !important; border-color: rgba(148,163,184,.16) !important; color: rgba(226,232,240,.86) !important; } /* Caso alguma parte ainda esteja branca por “bg-white” hardcoded dentro do dashboard */ html.theme-dark #dashboard-root .bg-white{ background: rgba(15,23,42,.62) !important; border-color: rgba(148,163,184,.16) !important; } /* ========================================================= DASH RANGE (Hoje / 7d / 30d / Mês) — DARK Alvo real: #dash-range + .dash-pill + .dash-pill.is-active ========================================================= */ html.theme-dark #dash-range{ background: rgba(15,23,42,.55) !important; border-color: rgba(148,163,184,.16) !important; box-shadow: 0 12px 30px rgba(0,0,0,.35) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* botões (inativos) */ html.theme-dark #dash-range .dash-pill{ background: transparent !important; color: rgba(148,163,184,.90) !important; border-color: rgba(148,163,184,.18) !important; box-shadow: none !important; } /* hover */ html.theme-dark #dash-range .dash-pill:hover{ background: rgba(15,28,58,.55) !important; color: rgba(226,232,240,.95) !important; border-color: rgba(148,163,184,.26) !important; box-shadow: 0 10px 22px rgba(0,0,0,.25) !important; } /* ativo */ html.theme-dark #dash-range .dash-pill.is-active{ background: linear-gradient(180deg, rgba(30,64,175,.45), rgba(2,6,23,.85)) !important; color: #ffffff !important; border-color: rgba(59,130,246,.45) !important; box-shadow: 0 12px 26px rgba(0,0,0,.40) !important; } /* Evita o layout “pular” quando o scrollbar some ao abrir modal */ html { scrollbar-gutter: stable; } /* fallback pra browsers que não suportam scrollbar-gutter */ body { overflow-y: scroll; } /* garante que sidebar/fixed não “quebre” por causa de altura */ .sidebar, #sidebar, aside { height: 100dvh; top: 0; } /* =========================================== FIX: tira as 2 barras internas (Busca + Todos) VENDAS TOPBAR (dark) =========================================== */ html.theme-dark #busca-vendas, html.theme-dark #busca-vendas:focus, html.theme-dark #busca-vendas:focus-visible{ background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } /* botão "Todos" (select) sem retângulo/linhas internas */ html.theme-dark #filtro-pagamento, html.theme-dark #filtro-pagamento:focus, html.theme-dark #filtro-pagamento:focus-visible{ background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; background-image: none !important; /* remove seta “fake” do chrome */ } /* quando abre as opções, não ficar branco */ html.theme-dark #filtro-pagamento option{ background: #0b1222 !important; color: #e5e7eb !important; } /* =========================================== FIX: Preview do Resultado (Nova Venda) DARK =========================================== */ /* container principal */ html.theme-dark #modal-nova-venda .bg-emerald-50\/60{ background: rgba(16, 185, 129, 0.08) !important; border-color: rgba(16, 185, 129, 0.18) !important; } /* cards internos (Investimento / Faturamento / Lucro) */ html.theme-dark #modal-nova-venda .bg-white\/70{ background: rgba(15, 23, 42, 0.65) !important; border-color: rgba(148, 163, 184, 0.18) !important; backdrop-filter: blur(12px); } /* textos */ html.theme-dark #modal-nova-venda .bg-white\/70 p:first-child{ color: rgba(148,163,184,0.65) !important; } html.theme-dark #modal-nova-venda .bg-white\/70 p:last-child{ color: #e5e7eb !important; } /* badge "Neutro" */ html.theme-dark #nv-prev-badge{ background: rgba(15,23,42,0.75) !important; border-color: rgba(16,185,129,0.25) !important; color: #10b981 !important; } /* barra de progresso fundo */ html.theme-dark #modal-nova-venda .bg-emerald-100{ background: rgba(16,185,129,0.12) !important; } /* ========================================================= TROCAS — FIX DEFINITIVO (dark) - tira barras internas da topbar - selecionador do estoque azul escuro ========================================================= */ /* -------- 1) TOPBAR Trocas (buscar + filtro) sem barras internas -------- */ html.theme-dark #trocas-search, html.theme-dark #trocas-filter, html.theme-dark #trocas-search input, html.theme-dark #trocas-filter select{ background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; } html.theme-dark #trocas-search, html.theme-dark #trocas-filter{ color: #e5e7eb !important; } html.theme-dark #trocas-filter select option{ background: #0b1222 !important; color: #e5e7eb !important; } html.theme-dark #troca-modal .bg-white, html.theme-dark #troca-modal .bg-slate-50, html.theme-dark #troca-modal .bg-slate-50\/40, html.theme-dark #troca-modal .bg-slate-50\/60{ background: rgba(15, 23, 42, 0.62) !important; border-color: rgba(148, 163, 184, 0.18) !important; } html.theme-dark #troca-modal .text-slate-900, html.theme-dark #troca-modal .text-slate-800, html.theme-dark #troca-modal .text-slate-700{ color: #e5e7eb !important; } html.theme-dark #troca-modal .text-slate-600, html.theme-dark #troca-modal .text-slate-500, html.theme-dark #troca-modal .text-slate-400{ color: rgba(148,163,184,0.75) !important; } html.theme-dark #troca-estoque{ background: rgba(2, 6, 23, 0.55) !important; border: 1px solid rgba(148,163,184,0.18) !important; color: #e5e7eb !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; background-image: none !important; } html.theme-dark #troca-estoque option{ background: #0b1222 !important; color: #e5e7eb !important; } html.theme-dark #troca-estoque:focus{ border-color: rgba(16,185,129,0.45) !important; box-shadow: 0 0 0 4px rgba(16,185,129,0.10) !important; } html.theme-dark .bg-white\/90, html.theme-dark .bg-white\/80, html.theme-dark .bg-white\/70, html.theme-dark .bg-white\/60, html.theme-dark .bg-white\/50, html.theme-dark .bg-white\/40, html.theme-dark .bg-white\/30, html.theme-dark .bg-white\/20{ background: var(--dk-surface) !important; border-color: var(--dk-border) !important; } html.theme-dark #fiado-search, html.theme-dark #fiado-search:focus, html.theme-dark #fiado-search:focus-visible{ background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } html.theme-dark #fiado-status, html.theme-dark #fiado-status:focus, html.theme-dark #fiado-status:focus-visible{ background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } html.theme-dark #fiado-status option{ background: var(--dk-bg-2) !important; color: var(--dk-text) !important; } html.theme-dark [data-page="fiado"] .bg-blue-100, html.theme-dark [data-page="fiado"] .bg-orange-100, html.theme-dark [data-page="fiado"] .bg-emerald-100, html.theme-dark [data-page="fiado"] .bg-purple-100{ background: rgba(2,6,23,.35) !important; border: 1px solid var(--dk-border) !important; } html.theme-dark .sidebar a:hover, html.theme-dark #sidebar a:hover, html.theme-dark aside a:hover, html.theme-dark nav a:hover, html.theme-dark .sidebar button:hover, html.theme-dark #sidebar button:hover, html.theme-dark aside button:hover{ background: transparent !important; box-shadow: none !important; filter: none !important; } html.theme-dark .sidebar a[aria-current="page"], html.theme-dark #sidebar a[aria-current="page"], html.theme-dark aside a[aria-current="page"], html.theme-dark .sidebar a.is-active, html.theme-dark #sidebar a.is-active, html.theme-dark aside a.is-active, html.theme-dark .sidebar .active > a, html.theme-dark #sidebar .active > a, html.theme-dark aside .active > a{ background: linear-gradient(135deg, #10b981, #16a34a) !important; color: #fff !important; box-shadow: 0 14px 34px rgba(16,185,129,.18) !important; border-color: rgba(16,185,129,.25) !important; } html.theme-dark .sidebar a[aria-current="page"]:hover, html.theme-dark #sidebar a[aria-current="page"]:hover, html.theme-dark aside a[aria-current="page"]:hover, html.theme-dark .sidebar a.is-active:hover, html.theme-dark #sidebar a.is-active:hover, html.theme-dark aside a.is-active:hover, html.theme-dark .sidebar .active > a:hover, html.theme-dark #sidebar .active > a:hover, html.theme-dark aside .active > a:hover{ background: linear-gradient(135deg, #10b981, #16a34a) !important; } html.theme-dark .sidebar a:hover, html.theme-dark #sidebar a:hover, html.theme-dark aside a:hover{ color: rgba(226,232,240,.95) !important; } #btn-empty-nova-divida{ opacity: 1 !important; visibility: visible !important; transform: none !important; } html.theme-dark #btn-novo-produto, html.theme-dark #btn-nova-troca, html.theme-dark #btn-nova-venda, html.theme-dark #btn-abrir-nova-divida{ box-shadow: 0 14px 34px rgba(16,185,129,.18) !important; } html.theme-dark .ct-bgbtn[data-bg="white"]{ background-color: #fff !important; background: #fff !important; background-image: none !important; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; border: 2px solid rgba(255,255,255,.95) !important; box-shadow: 0 0 0 2px rgba(2,6,23,.85), 0 0 0 3px rgba(255,255,255,.10) inset !important; } html.theme-dark .ct-bgbtn[data-bg="white"]::before, html.theme-dark .ct-bgbtn[data-bg="white"]::after{ content: none !important; display: none !important; } html.theme-dark input, html.theme-dark select{ background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; } html.theme-dark input:focus, html.theme-dark select:focus{ outline: none !important; box-shadow: none !important; } .kluro-table{ width: 100%; border-collapse: collapse; } .kluro-table thead th{ text-align: left; font-weight: 800; font-size: 12px; color: rgba(148,163,184,0.85); padding: 14px 18px; border-bottom: 1px solid rgba(148,163,184,0.12); } .kluro-table tbody td{ padding: 16px 18px; border-bottom: 1px solid rgba(148,163,184,0.10); color: rgba(226,232,240,0.92); font-weight: 600; } .kluro-table tbody tr:last-child td{ border-bottom: none; } .kluro-table tbody tr{ background: transparent !important; } /* ============================ KLURO ENTERPRISE SIDEBAR ============================ */ .sidebar { width: 260px; height: 100vh; background: linear-gradient( 180deg, #020617, #020617 60%, #020617ee ); border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; } /* HEADER */ .sidebar-header { padding: 18px; border-bottom: 1px solid rgba(255,255,255,0.06); } .logo-wrap { display: flex; align-items: center; gap: 12px; } .logo-icon { width: 42px; height: 42px; background: linear-gradient( 135deg, #10b981, #059669 ); border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 25px rgba(16,185,129,0.35); } .logo-title { font-weight: 700; color: white; } .logo-sub { font-size: 11px; color: #64748b; } /* NAV */ .sidebar-nav { padding: 12px; flex: 1; } /* ITEM */ .nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: all .2s ease; } .nav-item:hover { background: rgba(255,255,255,0.05); } .nav-item.active { background: linear-gradient( 90deg, rgba(16,185,129,0.18), transparent ); } /* INDICATOR */ .nav-indicator { position: absolute; left: 0; width: 3px; height: 60%; background: #10b981; border-radius: 10px; opacity: 0; } .nav-item.active .nav-indicator { opacity: 1; } /* ICON */ .nav-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } /* COLORS */ .nav-icon.emerald { background: rgba(16,185,129,0.15); color: #10b981; } .nav-icon.blue { background: rgba(59,130,246,0.15); color: #3b82f6; } .nav-icon.purple { background: rgba(168,85,247,0.15); color: #a855f7; } .nav-icon.orange { background: rgba(249,115,22,0.15); color: #f97316; } .nav-icon.red { background: rgba(239,68,68,0.15); color: #ef4444; } .nav-icon.yellow { background: rgba(234,179,8,0.15); color: #eab308; } .nav-icon.cyan { background: rgba(6,182,212,0.15); color: #06b6d4; } /* USER */ .sidebar-user { padding: 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 12px; } .user-avatar { width: 38px; height: 38px; background: #1e293b; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; } .user-name { color: white; font-weight: 600; } .user-role { font-size: 12px; color: #64748b; } /* ========================================================= MODAL NOVA VENDA — aplica o MESMO skin dos modais premium (cole no FINAL do style.css) ========================================================= */ /* garante mesmo comportamento dos outros modais */ #modal-nova-venda{ position: fixed !important; inset: 0 !important; z-index: 9999 !important; background: transparent !important; } #modal-nova-venda.hidden{ pointer-events: none !important; } /* DARK: mesma pegada do #modal-venda / #modal-novo-produto */ html.theme-dark #modal-nova-venda > div{ background: linear-gradient(180deg, rgba(15,23,42,.94), rgba(2,6,23,.96)) !important; color: var(--dk-text) !important; border: 1px solid rgba(148,163,184,.16) !important; box-shadow: 0 30px 90px rgba(0,0,0,.60) !important; } /* Header/bordas internas no dark */ html.theme-dark #modal-nova-venda .border-slate-200{ border-color: rgba(148,163,184,.14) !important; } /* Inputs do modal (não ficar “lavado” nem transparente demais) */ html.theme-dark #modal-nova-venda input, html.theme-dark #modal-nova-venda select, html.theme-dark #modal-nova-venda textarea{ background: rgba(2,6,23,.35) !important; border: 1px solid rgba(148,163,184,.16) !important; color: #e5e7eb !important; box-shadow: none !important; } /* placeholder no dark */ html.theme-dark #modal-nova-venda input::placeholder, html.theme-dark #modal-nova-venda textarea::placeholder{ color: rgba(148,163,184,.55) !important; } /* opções do select no dark */ html.theme-dark #modal-nova-venda select option{ background: #0b1222 !important; color: #e5e7eb !important; } /* cards da prévia: “vidro” mais premium */ html.theme-dark #modal-nova-venda .bg-white\/70{ background: rgba(15, 23, 42, 0.65) !important; border-color: rgba(148, 163, 184, 0.18) !important; backdrop-filter: blur(12px); } /* badge neutro no dark (não ficar branco estourado) */ html.theme-dark #nv-prev-badge{ background: rgba(2,6,23,.40) !important; border-color: rgba(148,163,184,.16) !important; color: rgba(226,232,240,.90) !important; } html, body { height: auto; } body { min-height: 0; overflow-x: hidden; } footer { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* se você tiver um wrapper geral do landing */ .kluro-auth-bg, .kluro-container { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* ===== Input da Meta: mais contraste + borda premium ===== */ html.theme-dark #modal-meta #input-meta, body.theme-dark #modal-meta #input-meta, html.dark #modal-meta #input-meta, body.dark #modal-meta #input-meta, html[data-theme="dark"] #modal-meta #input-meta, body[data-theme="dark"] #modal-meta #input-meta{ /* fundo mais claro (pra não “sumir”) */ background: rgba(30,41,59,.62) !important; /* slate-800 */ color: rgba(255,255,255,.96) !important; /* borda visível */ border: 1px solid rgba(226,232,240,.16) !important; /* “embed” premium */ border-radius: 14px !important; padding: 14px 14px !important; font-weight: 900 !important; letter-spacing: .02em; /* profundidade */ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.22) !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease; } html.theme-dark #modal-meta #input-meta::placeholder, body.theme-dark #modal-meta #input-meta::placeholder, html.dark #modal-meta #input-meta::placeholder, body.dark #modal-meta #input-meta::placeholder, html[data-theme="dark"] #modal-meta #input-meta::placeholder, body[data-theme="dark"] #modal-meta #input-meta::placeholder{ color: rgba(226,232,240,.55) !important; } html.theme-dark #modal-meta #input-meta:hover, body.theme-dark #modal-meta #input-meta:hover, html.dark #modal-meta #input-meta:hover, body.dark #modal-meta #input-meta:hover, html[data-theme="dark"] #modal-meta #input-meta:hover, body[data-theme="dark"] #modal-meta #input-meta:hover{ border-color: rgba(226,232,240,.22) !important; background: rgba(30,41,59,.70) !important; } html.theme-dark #modal-meta #input-meta:focus, body.theme-dark #modal-meta #input-meta:focus, html.dark #modal-meta #input-meta:focus, body.dark #modal-meta #input-meta:focus, html[data-theme="dark"] #modal-meta #input-meta:focus, body[data-theme="dark"] #modal-meta #input-meta:focus{ border-color: rgba(16,185,129,.62) !important; box-shadow: 0 0 0 4px rgba(16,185,129,.14), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.25), 0 16px 34px rgba(0,0,0,.28) !important; } /* ✅ bônus: “borda com gradiente” sem mexer no HTML */ html.theme-dark #modal-meta #input-meta, body.theme-dark #modal-meta #input-meta, html.dark #modal-meta #input-meta, body.dark #modal-meta #input-meta, html[data-theme="dark"] #modal-meta #input-meta, body[data-theme="dark"] #modal-meta #input-meta{ background-clip: padding-box; } html.theme-dark #modal-meta #input-meta{ outline: 1px solid transparent; /* ajuda o anti-alias */ } /* ========================= KLuro — Logout Modal FIX ========================= */ /* overlay escuro */ #kluro-logout-modal, .kluro-logout-modal, [role="dialog"] { background: rgba(2, 6, 23, 0.85) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } /* card */ #kluro-logout-modal > div, .kluro-logout-modal > div, [role="dialog"] > div { background: linear-gradient( 180deg, #0f172a, #020617 ) !important; border: 1px solid rgba(148,163,184,.18) !important; border-radius: 24px !important; box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 28px 26px !important; max-width: 420px !important; width: 92vw !important; } /* título */ [role="dialog"] h1, [role="dialog"] h2, [role="dialog"] h3, [role="dialog"] div:first-child { font-weight: 800 !important; letter-spacing: -0.02em; } /* texto */ [role="dialog"] p { color: rgba(148,163,184,.85) !important; font-size: 14px !important; } /* botões container */ [role="dialog"] button { height: 46px !important; border-radius: 14px !important; font-weight: 700 !important; font-size: 14px !important; } /* cancelar */ [role="dialog"] button:first-of-type { border: 1px solid rgba(148,163,184,.18) !important; background: rgba(255,255,255,.03) !important; color: rgba(226,232,240,.85) !important; } /* sair */ [role="dialog"] button:last-of-type { background: linear-gradient( 135deg, #10b981, #34d399 ) !important; color: #022c22 !important; border: 1px solid rgba(16,185,129,.35) !important; box-shadow: 0 10px 25px rgba(16,185,129,.25) !important; } /* hover */ [role="dialog"] button:last-of-type:hover { filter: brightness(1.05); } /* botão empty-state padrão */ .kl-empty-btn{ min-width: 260px; height: 50px; padding: 0 26px; border-radius: 16px; border: 1px solid rgba(148,163,184,.18); background: rgba(15,23,42,.35); color: #f8fafc; font-size: 1rem; font-weight: 800; transition: all .2s ease; } .kl-empty-btn:hover{ background: rgba(15,23,42,.55); border-color: rgba(148,163,184,.28); } /* ========================= GRID DE PRODUTOS ========================= */ #grid-produtos.grid-mode-normal{ grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 768px){ #grid-produtos.grid-mode-normal{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px){ #grid-produtos.grid-mode-normal{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px){ #grid-produtos.grid-mode-normal{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* modo compacto */ #grid-produtos.grid-mode-compact{ grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 768px){ #grid-produtos.grid-mode-compact{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px){ #grid-produtos.grid-mode-compact{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px){ #grid-produtos.grid-mode-compact{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ========================================= KLURO — FIADO MODAL INPUTS (FORCE OVERRIDE) Cola no FINAL do style.css ========================================= */ html body #modal-nova-divida input, html body #modal-nova-divida textarea, html body #modal-nova-divida select{ background: #0b1a33 !important; border: 1px solid rgba(96, 165, 250, 0.34) !important; border-radius: 16px !important; color: #f8fafc !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 0 0 1px rgba(15,23,42,.24) !important; outline: none !important; } html body #modal-nova-divida input::placeholder, html body #modal-nova-divida textarea::placeholder{ color: rgba(148,163,184,.58) !important; } html body #modal-nova-divida input:hover, html body #modal-nova-divida textarea:hover, html body #modal-nova-divida select:hover{ background: #0d1d39 !important; border-color: rgba(96, 165, 250, 0.46) !important; } html body #modal-nova-divida input:focus, html body #modal-nova-divida textarea:focus, html body #modal-nova-divida select:focus{ background: #0e1f3d !important; border: 1px solid rgba(52,211,153,.58) !important; box-shadow: 0 0 0 4px rgba(16,185,129,.10), inset 0 1px 0 rgba(255,255,255,.02) !important; outline: none !important; } /* remove aparência estranha de date/select */ html body #modal-nova-divida input[type="date"], html body #modal-nova-divida select{ -webkit-appearance: none !important; appearance: none !important; } /* contador de parcelas */ html body #modal-nova-divida #fd-parc-num{ background: #0b1a33 !important; border: 1px solid rgba(96, 165, 250, 0.34) !important; border-radius: 16px !important; color: #f8fafc !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 0 0 1px rgba(15,23,42,.24) !important; } /* botões - e + */ html body #modal-nova-divida #fd-parc-dec, html body #modal-nova-divida #fd-parc-inc{ background: #0b1a33 !important; border: 1px solid rgba(96, 165, 250, 0.34) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 0 0 1px rgba(15,23,42,.24) !important; } html body #modal-nova-divida #fd-parc-dec:hover, html body #modal-nova-divida #fd-parc-inc:hover{ background: #0d1d39 !important; border-color: rgba(96, 165, 250, 0.46) !important; } html body #modal-nova-divida #fd-parc-dec i, html body #modal-nova-divida #fd-parc-inc i{ color: #cbd5e1 !important; } /* caixas internas do modal */ html body #modal-nova-divida .rounded-2xl.border, html body #modal-nova-divida .rounded-3xl.border{ border-color: rgba(51,65,85,.95) !important; } /* bloco de impacto */ html body #modal-nova-divida #fd-impacta{ accent-color: #10b981 !important; } /* ========================================= FIADO EMPTY — FORCE PADRÃO KLURO cola no FINAL do style.css ========================================= */ #fiado-empty{ display: none; padding: 24px !important; width: 100% !important; text-align: initial !important; color: inherit !important; } #fiado-empty:not(.hidden){ display: block !important; } #fiado-empty > .kl-empty-state{ width: 100% !important; max-width: 42rem !important; /* max-w-2xl */ margin: 0 auto !important; padding: 80px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; border: 1px dashed rgba(148,163,184,.18) !important; border-radius: 32px !important; background: linear-gradient(180deg, rgba(6,15,32,.96) 0%, rgba(7,18,38,.96) 100%) !important; box-shadow: none !important; } #fiado-empty .kl-empty-icon{ width: 76px !important; height: 76px !important; margin: 0 0 24px 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.03) !important; border: 1px solid rgba(148,163,184,.14) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; } #fiado-empty .kl-empty-icon-inner{ width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 0 !important; border-radius: inherit !important; } #fiado-empty .kl-empty-icon i{ width: 40px !important; height: 40px !important; color: rgba(226,232,240,.92) !important; } #fiado-empty .kl-empty-title{ margin: 0 0 14px 0 !important; font-size: 2rem !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -.02em !important; color: #f8fafc !important; } #fiado-empty .kl-empty-text{ max-width: 470px !important; margin: 0 auto 30px auto !important; font-size: 1rem !important; line-height: 1.7 !important; font-weight: 400 !important; color: rgba(148,163,184,.78) !important; } #fiado-empty .kl-empty-btn{ min-width: 260px !important; height: 50px !important; padding: 0 26px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 16px !important; border: 1px solid rgba(59,130,246,.20) !important; background: rgba(15,23,42,.42) !important; color: #f8fafc !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; box-shadow: none !important; transition: all .22s ease !important; } #fiado-empty .kl-empty-btn:hover{ transform: translateY(-1px) !important; background: rgba(15,23,42,.58) !important; border-color: rgba(96,165,250,.30) !important; box-shadow: none !important; } #fiado-empty .kl-empty-btn i, #fiado-empty .kl-empty-state p.mt-4, #fiado-empty .kl-empty-state .text-xs{ display: none !important; } /* DESPESAS EMPTY */ #desp-empty .kl-empty-state{ width:100%; max-width:42rem; margin:0 auto; padding:80px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } /* ========================================= DESPESAS EMPTY — FORCE PADRÃO KLURO ========================================= */ #desp-empty{ display:none; padding:24px !important; width:100% !important; } #desp-empty:not(.hidden){ display:block !important; } #desp-empty > .kl-empty-state{ width:100% !important; max-width:42rem !important; margin:0 auto !important; padding:80px 24px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; border:1px dashed rgba(148,163,184,.18) !important; border-radius:32px !important; background:linear-gradient( 180deg, rgba(6,15,32,.96) 0%, rgba(7,18,38,.96) 100% ) !important; box-shadow:none !important; } /* icone */ #desp-empty .kl-empty-icon{ width:76px !important; height:76px !important; margin-bottom:24px !important; border-radius:999px !important; background:rgba(255,255,255,.03) !important; border:1px solid rgba(148,163,184,.14) !important; display:flex !important; align-items:center !important; justify-content:center !important; } #desp-empty .kl-empty-icon-inner{ width:100% !important; height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; } #desp-empty .kl-empty-icon i{ width:40px !important; height:40px !important; color:rgba(226,232,240,.92) !important; } /* titulo */ #desp-empty .kl-empty-title{ font-size:2rem !important; font-weight:800 !important; line-height:1.1 !important; letter-spacing:-.02em !important; color:#f8fafc !important; margin-bottom:14px !important; } /* texto */ #desp-empty .kl-empty-text{ max-width:470px !important; margin:0 auto 30px !important; font-size:1rem !important; line-height:1.7 !important; color:rgba(148,163,184,.78) !important; } /* botão */ #desp-empty .kl-empty-btn{ min-width:260px !important; height:50px !important; padding:0 26px !important; border-radius:16px !important; border:1px solid rgba(59,130,246,.20) !important; background:rgba(15,23,42,.42) !important; color:#f8fafc !important; font-size:1rem !important; font-weight:700 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; transition:all .22s ease !important; } #desp-empty .kl-empty-btn:hover{ transform:translateY(-1px) !important; background:rgba(15,23,42,.58) !important; border-color:rgba(96,165,250,.30) !important; } /* ===================================== VENDAS EMPTY PADRÃO KLURO ===================================== */ #vendas-empty{ min-height:520px; display:flex; align-items:center; justify-content:center; } #vendas-empty.hidden{ display:none; } #vendas-empty .kl-empty-state{ width:100%; max-width:42rem; margin:0 auto; } /* ===================================== VENDAS EMPTY — FORCE PADRÃO KLURO ===================================== */ #vendas-empty{ min-height:520px !important; width:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:24px !important; } #vendas-empty.hidden{ display:none !important; } /* card */ #vendas-empty .kl-empty-state{ width:100% !important; max-width:42rem !important; margin:0 auto !important; padding:80px 24px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; border:1px dashed rgba(148,163,184,.18) !important; border-radius:32px !important; background:linear-gradient( 180deg, rgba(6,15,32,.96) 0%, rgba(7,18,38,.96) 100% ) !important; box-shadow:none !important; } /* icone */ #vendas-empty .kl-empty-icon{ width:76px !important; height:76px !important; margin-bottom:24px !important; border-radius:999px !important; background:rgba(255,255,255,.03) !important; border:1px solid rgba(148,163,184,.14) !important; display:flex !important; align-items:center !important; justify-content:center !important; } #vendas-empty .kl-empty-icon-inner{ width:100% !important; height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; } #vendas-empty .kl-empty-icon i{ width:40px !important; height:40px !important; color:rgba(226,232,240,.92) !important; } /* titulo */ #vendas-empty .kl-empty-title{ font-size:2rem !important; font-weight:800 !important; line-height:1.1 !important; letter-spacing:-.02em !important; color:#f8fafc !important; margin-bottom:14px !important; } /* texto */ #vendas-empty .kl-empty-text{ max-width:470px !important; margin:0 auto 30px !important; font-size:1rem !important; line-height:1.7 !important; color:rgba(148,163,184,.78) !important; } /* botão */ #vendas-empty .kl-empty-btn{ min-width:260px !important; height:50px !important; padding:0 26px !important; border-radius:16px !important; border:1px solid rgba(59,130,246,.20) !important; background:rgba(15,23,42,.42) !important; color:#f8fafc !important; font-size:1rem !important; font-weight:700 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; transition:all .22s ease !important; } #vendas-empty .kl-empty-btn:hover{ transform:translateY(-1px) !important; background:rgba(15,23,42,.58) !important; border-color:rgba(96,165,250,.30) !important; } /* ========================================= MODAL NOVA DESPESA — FORCE PADRÃO PREMIUM ========================================= */ #modal-despesa{ z-index: 9999 !important; } #modal-despesa > div{ background: #ffffff !important; border: 1px solid rgba(226,232,240,1) !important; border-radius: 24px !important; box-shadow: 0 30px 90px rgba(0,0,0,.25) !important; overflow: hidden !important; max-height: 90vh !important; } /* HEADER */ #modal-despesa > div > div:first-child{ padding: 24px 32px !important; background: #ffffff !important; border-bottom: 1px solid rgba(241,245,249,1) !important; position: sticky !important; top: 0 !important; z-index: 10 !important; } #modal-despesa > div > div:first-child h3{ font-size: 24px !important; line-height: 1.1 !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 !important; } #modal-despesa > div > div:first-child p{ font-size: 12px !important; color: #64748b !important; margin-top: 4px !important; } #btn-fechar-despesa{ width: 40px !important; height: 40px !important; border-radius: 999px !important; background: #f8fafc !important; color: #94a3b8 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: .2s !important; } #btn-fechar-despesa:hover{ background: #fef2f2 !important; color: #ef4444 !important; } /* FORM */ #form-despesa{ padding: 20px 24px 24px !important; overflow-y: auto !important; flex: 1 !important; display: block !important; } #form-despesa .grid{ gap: 24px !important; } /* LABELS */ #form-despesa label{ display: block !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #64748b !important; margin-bottom: 8px !important; } /* INPUTS / SELECT / TEXTAREA */ #modal-despesa input, #modal-despesa select, #modal-despesa textarea{ width: 100% !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; padding: 14px 16px !important; color: #0f172a !important; outline: none !important; box-shadow: none !important; font-size: 14px !important; } #modal-despesa input::placeholder, #modal-despesa textarea::placeholder{ color: #cbd5e1 !important; } #modal-despesa input:focus, #modal-despesa select:focus, #modal-despesa textarea:focus{ border-color: #10b981 !important; box-shadow: 0 0 0 4px rgba(16,185,129,.10) !important; } /* BLOCOS INTERNOS */ #form-despesa .bg-slate-50{ background: #f8fafc !important; border: 1px solid #f1f5f9 !important; border-radius: 20px !important; padding: 24px !important; } #form-despesa .bg-orange-50{ background: #fff7ed !important; border: 1px solid #ffedd5 !important; border-radius: 20px !important; padding: 24px !important; } #form-despesa .bg-slate-50 h4{ color: #1e293b !important; font-size: 14px !important; font-weight: 700 !important; margin-bottom: 16px !important; } #form-despesa .bg-orange-50 h4{ color: #9a3412 !important; font-size: 14px !important; font-weight: 700 !important; margin-bottom: 16px !important; } /* FOOTER */ #form-despesa > .flex:last-child{ border-top: 1px solid #f1f5f9 !important; padding-top: 24px !important; margin-top: 24px !important; display: flex !important; justify-content: flex-end !important; gap: 12px !important; } /* BOTÃO CANCELAR */ #btn-cancelar-despesa{ padding: 14px 24px !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; background: #ffffff !important; border-radius: 14px !important; font-size: 14px !important; font-weight: 700 !important; transition: .2s !important; } #btn-cancelar-despesa:hover{ background: #f8fafc !important; } /* BOTÃO SALVAR */ #btn-salvar-despesa{ padding: 12px 32px !important; border: 0 !important; border-radius: 14px !important; background: #10b981 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-shadow: 0 18px 40px rgba(16,185,129,.30) !important; transition: .2s !important; } #btn-salvar-despesa:hover{ background: #059669 !important; } /* ÍCONE DO BOTÃO */ #btn-salvar-despesa > div{ background: rgba(255,255,255,.20) !important; padding: 4px !important; border-radius: 999px !important; } /* RESPONSIVO */ @media (max-width: 640px){ #modal-despesa > div > div:first-child{ padding: 20px 24px !important; } #form-despesa{ padding: 18px 18px 22px !important; } #form-despesa > .flex:last-child{ flex-direction: column !important; } #btn-cancelar-despesa, #btn-salvar-despesa{ width: 100% !important; } } /* ========================================= NOVA DESPESA — DARK BLUE PREMIUM cola no FINAL do style.css ========================================= */ #modal-despesa{ z-index: 9999 !important; } #modal-despesa > div{ background: linear-gradient(180deg, #06152c 0%, #041126 100%) !important; border: 1px solid rgba(51, 65, 85, .85) !important; border-radius: 24px !important; box-shadow: 0 30px 90px rgba(0,0,0,.55) !important; overflow: hidden !important; max-height: 90vh !important; color: #e5e7eb !important; } /* header */ #modal-despesa > div > div:first-child{ background: linear-gradient(180deg, #071a34 0%, #06152c 100%) !important; border-bottom: 1px solid rgba(51,65,85,.75) !important; padding: 24px 32px !important; } #modal-despesa > div > div:first-child h3{ color: #f8fafc !important; font-size: 24px !important; font-weight: 800 !important; margin: 0 !important; } #modal-despesa > div > div:first-child p{ color: #94a3b8 !important; font-size: 12px !important; margin-top: 6px !important; } #btn-fechar-despesa{ width: 40px !important; height: 40px !important; border-radius: 999px !important; background: transparent !important; color: #94a3b8 !important; border: 1px solid transparent !important; } #btn-fechar-despesa:hover{ background: rgba(15,23,42,.55) !important; color: #e2e8f0 !important; } /* form */ #form-despesa{ background: transparent !important; padding: 22px 20px 24px !important; color: #e5e7eb !important; } #form-despesa label{ color: #94a3b8 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; margin-bottom: 8px !important; } /* campos */ #modal-despesa input, #modal-despesa select, #modal-despesa textarea{ background: #071528 !important; border: 1px solid rgba(51,65,85,.9) !important; color: #e5e7eb !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important; } #modal-despesa input::placeholder, #modal-despesa textarea::placeholder{ color: #64748b !important; opacity: 1 !important; } #modal-despesa input:focus, #modal-despesa select:focus, #modal-despesa textarea:focus{ border-color: rgba(16,185,129,.45) !important; box-shadow: 0 0 0 4px rgba(16,185,129,.10) !important; outline: none !important; } /* bloco financeiro */ #form-despesa .bg-slate-50{ background: linear-gradient(180deg, #06152c 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.85) !important; border-radius: 20px !important; } #form-despesa .bg-slate-50 h4{ color: #f8fafc !important; } #form-despesa .bg-slate-50 .text-slate-800{ color: #f8fafc !important; } /* bloco info adicional */ #form-despesa .bg-orange-50{ background: linear-gradient(180deg, #0a1930 0%, #071528 100%) !important; border: 1px solid rgba(51,65,85,.85) !important; border-radius: 20px !important; } #form-despesa .bg-orange-50 h4{ color: #f8fafc !important; } #form-despesa .bg-orange-50 label{ color: #94a3b8 !important; } #form-despesa .bg-orange-50 textarea{ background: #071528 !important; border-color: rgba(51,65,85,.9) !important; } /* textos slate dentro do modal */ #modal-despesa .text-slate-900{ color: #f8fafc !important; } #modal-despesa .text-slate-800{ color: #e2e8f0 !important; } #modal-despesa .text-slate-700{ color: #cbd5e1 !important; } #modal-despesa .text-slate-600, #modal-despesa .text-slate-500, #modal-despesa .text-slate-400{ color: #94a3b8 !important; } /* footer */ #form-despesa > .flex:last-child{ border-top: 1px solid rgba(51,65,85,.65) !important; padding-top: 24px !important; margin-top: 24px !important; } /* cancelar */ #btn-cancelar-despesa{ background: transparent !important; border: 1px solid rgba(51,65,85,.9) !important; color: #e2e8f0 !important; border-radius: 14px !important; } #btn-cancelar-despesa:hover{ background: rgba(15,23,42,.55) !important; } /* salvar */ #btn-salvar-despesa{ background: #10b981 !important; color: #ffffff !important; border-radius: 14px !important; box-shadow: 0 18px 40px rgba(16,185,129,.28) !important; } #btn-salvar-despesa:hover{ background: #059669 !important; } #btn-salvar-despesa > div{ background: rgba(255,255,255,.18) !important; border-radius: 999px !important; } /* ========================================= NOVA DÍVIDA — OVERRIDE NUCLEAR DARK BLUE cola no FINAL do style.css ========================================= */ #modal-nova-divida{ z-index: 9999 !important; } #modal-nova-divida > div{ background: linear-gradient(180deg, #07162d 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.88) !important; border-radius: 24px !important; box-shadow: 0 30px 90px rgba(0,0,0,.58) !important; overflow: hidden !important; max-height: 90vh !important; color: #e5e7eb !important; } /* HEADER */ #modal-nova-divida > div > div:first-child{ padding: 24px 32px !important; background: linear-gradient(180deg, #081b35 0%, #07162d 100%) !important; border-bottom: 1px solid rgba(51,65,85,.78) !important; position: sticky !important; top: 0 !important; z-index: 10 !important; } #modal-nova-divida > div > div:first-child h3{ color: #f8fafc !important; font-size: 24px !important; line-height: 1.1 !important; font-weight: 800 !important; margin: 0 !important; } #modal-nova-divida > div > div:first-child p{ color: #94a3b8 !important; font-size: 12px !important; margin-top: 6px !important; } /* BOTÃO FECHAR */ #btn-fechar-nova-divida{ width: 40px !important; height: 40px !important; border-radius: 999px !important; background: transparent !important; border: 1px solid rgba(51,65,85,.55) !important; color: #94a3b8 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: .2s !important; } #btn-fechar-nova-divida:hover{ background: rgba(15,23,42,.55) !important; color: #e2e8f0 !important; border-color: rgba(71,85,105,.95) !important; } /* FORM */ #form-nova-divida{ background: transparent !important; padding: 22px 20px 24px !important; color: #e5e7eb !important; } #form-nova-divida label{ display: block !important; color: #94a3b8 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; margin-bottom: 8px !important; } /* INPUTS / SELECT / TEXTAREA */ #modal-nova-divida input, #modal-nova-divida select, #modal-nova-divida textarea{ width: 100% !important; background: #071528 !important; border: 1px solid rgba(51,65,85,.92) !important; border-radius: 14px !important; padding: 14px 16px !important; color: #e5e7eb !important; outline: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important; font-size: 14px !important; } #modal-nova-divida input::placeholder, #modal-nova-divida textarea::placeholder{ color: #64748b !important; opacity: 1 !important; } #modal-nova-divida input:focus, #modal-nova-divida select:focus, #modal-nova-divida textarea:focus{ border-color: rgba(16,185,129,.48) !important; box-shadow: 0 0 0 4px rgba(16,185,129,.10) !important; outline: none !important; } /* TEXTOS SLATE DENTRO DO MODAL */ #modal-nova-divida .text-slate-900{ color: #f8fafc !important; } #modal-nova-divida .text-slate-800{ color: #e2e8f0 !important; } #modal-nova-divida .text-slate-700{ color: #cbd5e1 !important; } #modal-nova-divida .text-slate-600, #modal-nova-divida .text-slate-500, #modal-nova-divida .text-slate-400{ color: #94a3b8 !important; } /* ÍCONE QUADRADINHO DO HEADER */ #modal-nova-divida .bg-emerald-50{ background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.24) !important; color: #34d399 !important; } /* CARD IMPACTO / BLOCOS SLATE */ #modal-nova-divida .bg-slate-50, #modal-nova-divida .bg-slate-50\/40, #modal-nova-divida .bg-slate-50\/50, #modal-nova-divida .bg-slate-50\/60{ background: linear-gradient(180deg, #06152c 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.86) !important; border-radius: 20px !important; } /* BLOCO LARANJA / CONFIGS */ #modal-nova-divida .bg-orange-50{ background: linear-gradient(180deg, #0a1930 0%, #071528 100%) !important; border: 1px solid rgba(51,65,85,.86) !important; border-radius: 20px !important; } #modal-nova-divida .border-orange-100, #modal-nova-divida .border-orange-200{ border-color: rgba(51,65,85,.86) !important; } #modal-nova-divida .text-orange-800{ color: #f8fafc !important; } #modal-nova-divida .text-orange-700\/70{ color: #94a3b8 !important; } /* BLOCO RESUMO / PREVIEW */ #modal-nova-divida .bg-emerald-50.border-emerald-100, #modal-nova-divida .mt-5.rounded-2xl{ background: linear-gradient(180deg, #06152c 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.86) !important; border-radius: 20px !important; } #modal-nova-divida .text-emerald-800{ color: #f8fafc !important; } #modal-nova-divida .text-emerald-600\/70{ color: #94a3b8 !important; } #fd-prev-total{ color: #f8fafc !important; } #fd-prev-entrada{ color: #34d399 !important; } #fd-prev-receber{ color: #fb923c !important; } /* PARCELAS */ #fd-parc-dec, #fd-parc-inc{ background: #071528 !important; border: 1px solid rgba(51,65,85,.92) !important; border-radius: 14px !important; box-shadow: none !important; } #fd-parc-dec:hover, #fd-parc-inc:hover{ background: #0a1a30 !important; border-color: rgba(71,85,105,.95) !important; } #fd-parc-dec i, #fd-parc-inc i{ color: #cbd5e1 !important; } #fd-parc-num{ background: #071528 !important; border: 1px solid rgba(51,65,85,.92) !important; border-radius: 14px !important; color: #f8fafc !important; box-shadow: none !important; } /* CHECKBOX */ #fd-impacta{ accent-color: #10b981 !important; } /* FOOTER */ #form-nova-divida > .flex:last-child{ border-top: 1px solid rgba(51,65,85,.68) !important; padding-top: 24px !important; margin-top: 24px !important; } /* BOTÃO CANCELAR */ #btn-cancelar-nova-divida{ padding: 14px 24px !important; border: 1px solid rgba(51,65,85,.92) !important; color: #e2e8f0 !important; background: transparent !important; border-radius: 14px !important; font-size: 14px !important; font-weight: 700 !important; transition: .2s !important; } #btn-cancelar-nova-divida:hover{ background: rgba(15,23,42,.55) !important; } /* BOTÃO SALVAR */ #btn-salvar-nova-divida{ padding: 12px 32px !important; border: 0 !important; border-radius: 14px !important; background: #10b981 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-shadow: 0 18px 40px rgba(16,185,129,.28) !important; transition: .2s !important; } #btn-salvar-nova-divida:hover{ background: #059669 !important; } /* RESPONSIVO */ @media (max-width: 640px){ #modal-nova-divida > div > div:first-child{ padding: 20px 24px !important; } #form-nova-divida{ padding: 18px 18px 22px !important; } #form-nova-divida > .flex:last-child{ flex-direction: column !important; } #btn-cancelar-nova-divida, #btn-salvar-nova-divida{ width: 100% !important; } } /* ========================================= MODAL NOVA VENDA — DARK PREMIUM PADRÃO ========================================= */ #modal-nova-venda{ z-index: 9999 !important; } #modal-nova-venda > div{ background: linear-gradient(180deg, #07162d 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.88) !important; border-radius: 24px !important; box-shadow: 0 30px 90px rgba(0,0,0,.58) !important; overflow: hidden !important; max-height: 90vh !important; color: #e5e7eb !important; } /* HEADER */ #modal-nova-venda > div > div:first-child{ padding: 24px 32px !important; background: linear-gradient(180deg, #081b35 0%, #07162d 100%) !important; border-bottom: 1px solid rgba(51,65,85,.78) !important; position: sticky !important; top: 0 !important; z-index: 10 !important; } #modal-nova-venda h3{ color: #f8fafc !important; font-size: 24px !important; line-height: 1.1 !important; font-weight: 800 !important; margin: 0 !important; } #modal-nova-venda .text-slate-500, #modal-nova-venda .text-slate-400{ color: #94a3b8 !important; } /* FECHAR */ #btn-fechar-nova-venda{ width: 40px !important; height: 40px !important; border-radius: 999px !important; background: transparent !important; border: 1px solid rgba(51,65,85,.55) !important; color: #94a3b8 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: .2s !important; } #btn-fechar-nova-venda:hover{ background: rgba(15,23,42,.55) !important; color: #e2e8f0 !important; border-color: rgba(71,85,105,.95) !important; } /* FORM */ #form-nova-venda{ background: transparent !important; padding: 22px 20px 24px !important; color: #e5e7eb !important; } #form-nova-venda label{ display: block !important; color: #94a3b8 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; margin-bottom: 8px !important; } /* CAMPOS */ #modal-nova-venda input, #modal-nova-venda select, #modal-nova-venda textarea{ width: 100% !important; background: #071528 !important; border: 1px solid rgba(51,65,85,.92) !important; border-radius: 16px !important; padding: 14px 16px !important; color: #e5e7eb !important; outline: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important; font-size: 14px !important; } #modal-nova-venda input::placeholder, #modal-nova-venda textarea::placeholder{ color: #64748b !important; opacity: 1 !important; } #modal-nova-venda input:focus, #modal-nova-venda select:focus, #modal-nova-venda textarea:focus{ border-color: rgba(16,185,129,.48) !important; box-shadow: 0 0 0 4px rgba(16,185,129,.10) !important; outline: none !important; } /* ÍCONE/CALENDÁRIO */ #modal-nova-venda .text-slate-900{ color: #f8fafc !important; } #modal-nova-venda .text-slate-800{ color: #e2e8f0 !important; } #modal-nova-venda .text-slate-700{ color: #cbd5e1 !important; } #modal-nova-venda .text-emerald-700{ color: #34d399 !important; } /* CARD PRÉVIA */ #modal-nova-venda .bg-emerald-50\/60, #modal-nova-venda .bg-emerald-50{ background: linear-gradient(180deg, rgba(4,40,52,.92) 0%, rgba(4,31,42,.96) 100%) !important; border: 1px solid rgba(16,185,129,.16) !important; border-radius: 22px !important; box-shadow: none !important; } #modal-nova-venda .bg-white\/70, #modal-nova-venda .bg-white\/60, #modal-nova-venda .bg-white\/80{ background: rgba(7,21,40,.88) !important; border: 1px solid rgba(51,65,85,.85) !important; border-radius: 18px !important; box-shadow: none !important; } #modal-nova-venda #nv-prev-badge{ background: rgba(7,21,40,.88) !important; border: 1px solid rgba(51,65,85,.85) !important; color: #e2e8f0 !important; border-radius: 999px !important; } #modal-nova-venda #nv-prev-invest, #modal-nova-venda #nv-prev-fat{ color: #f8fafc !important; } #modal-nova-venda #nv-prev-lucro{ color: #10b981 !important; } #modal-nova-venda #nv-prev-margem{ color: #cbd5e1 !important; } #modal-nova-venda #nv-prev-bar{ background: linear-gradient(90deg, #10b981, #059669) !important; border-radius: 999px !important; } /* FOOTER */ #form-nova-venda > .flex:last-child{ border-top: 1px solid rgba(51,65,85,.68) !important; padding-top: 24px !important; margin-top: 24px !important; } /* BOTÕES */ #btn-cancelar-nova-venda{ padding: 14px 24px !important; border: 1px solid rgba(51,65,85,.92) !important; color: #e2e8f0 !important; background: transparent !important; border-radius: 16px !important; font-size: 14px !important; font-weight: 700 !important; transition: .2s !important; } #btn-cancelar-nova-venda:hover{ background: rgba(15,23,42,.55) !important; } #btn-salvar-nova-venda{ padding: 12px 28px !important; border: 0 !important; border-radius: 16px !important; background: #10b981 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-shadow: 0 18px 40px rgba(16,185,129,.28) !important; transition: .2s !important; } #btn-salvar-nova-venda:hover{ background: #059669 !important; } /* RESPONSIVO */ @media (max-width: 640px){ #modal-nova-venda > div > div:first-child{ padding: 20px 24px !important; } #form-nova-venda{ padding: 18px 18px 22px !important; } #form-nova-venda > .flex:last-child{ flex-direction: column !important; } #btn-cancelar-nova-venda, #btn-salvar-nova-venda{ width: 100% !important; } } /* ========================================= MODAL NOVA VENDA — DARK PREMIUM PADRÃO ========================================= */ #modal-nova-venda{ z-index: 9999 !important; } #modal-nova-venda > div{ background: linear-gradient(180deg, #07162d 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.88) !important; border-radius: 24px !important; box-shadow: 0 30px 90px rgba(0,0,0,.58) !important; overflow: hidden !important; max-height: 90vh !important; color: #e5e7eb !important; } /* HEADER */ #modal-nova-venda > div > div:first-child{ padding: 24px 32px !important; background: linear-gradient(180deg, #081b35 0%, #07162d 100%) !important; border-bottom: 1px solid rgba(51,65,85,.78) !important; position: sticky !important; top: 0 !important; z-index: 10 !important; } #modal-nova-venda h3{ color: #f8fafc !important; font-size: 24px !important; line-height: 1.1 !important; font-weight: 800 !important; margin: 0 !important; } #modal-nova-venda .text-slate-500, #modal-nova-venda .text-slate-400{ color: #94a3b8 !important; } /* FECHAR */ #btn-fechar-nova-venda{ width: 40px !important; height: 40px !important; border-radius: 999px !important; background: transparent !important; border: 1px solid rgba(51,65,85,.55) !important; color: #94a3b8 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: .2s !important; } #btn-fechar-nova-venda:hover{ background: rgba(15,23,42,.55) !important; color: #e2e8f0 !important; border-color: rgba(71,85,105,.95) !important; } /* FORM */ #form-nova-venda{ background: transparent !important; padding: 22px 20px 24px !important; color: #e5e7eb !important; } #form-nova-venda label{ display: block !important; color: #94a3b8 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; margin-bottom: 8px !important; } /* CAMPOS */ #modal-nova-venda input, #modal-nova-venda select, #modal-nova-venda textarea{ width: 100% !important; background: #071528 !important; border: 1px solid rgba(51,65,85,.92) !important; border-radius: 16px !important; padding: 14px 16px !important; color: #e5e7eb !important; outline: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important; font-size: 14px !important; } #modal-nova-venda input::placeholder, #modal-nova-venda textarea::placeholder{ color: #64748b !important; opacity: 1 !important; } #modal-nova-venda input:focus, #modal-nova-venda select:focus, #modal-nova-venda textarea:focus{ border-color: rgba(16,185,129,.48) !important; box-shadow: 0 0 0 4px rgba(16,185,129,.10) !important; outline: none !important; } /* ÍCONE/CALENDÁRIO */ #modal-nova-venda .text-slate-900{ color: #f8fafc !important; } #modal-nova-venda .text-slate-800{ color: #e2e8f0 !important; } #modal-nova-venda .text-slate-700{ color: #cbd5e1 !important; } #modal-nova-venda .text-emerald-700{ color: #34d399 !important; } /* CARD PRÉVIA */ #modal-nova-venda .bg-emerald-50\/60, #modal-nova-venda .bg-emerald-50{ background: linear-gradient(180deg, rgba(4,40,52,.92) 0%, rgba(4,31,42,.96) 100%) !important; border: 1px solid rgba(16,185,129,.16) !important; border-radius: 22px !important; box-shadow: none !important; } #modal-nova-venda .bg-white\/70, #modal-nova-venda .bg-white\/60, #modal-nova-venda .bg-white\/80{ background: rgba(7,21,40,.88) !important; border: 1px solid rgba(51,65,85,.85) !important; border-radius: 18px !important; box-shadow: none !important; } #modal-nova-venda #nv-prev-badge{ background: rgba(7,21,40,.88) !important; border: 1px solid rgba(51,65,85,.85) !important; color: #e2e8f0 !important; border-radius: 999px !important; } #modal-nova-venda #nv-prev-invest, #modal-nova-venda #nv-prev-fat{ color: #f8fafc !important; } #modal-nova-venda #nv-prev-lucro{ color: #10b981 !important; } #modal-nova-venda #nv-prev-margem{ color: #cbd5e1 !important; } #modal-nova-venda #nv-prev-bar{ background: linear-gradient(90deg, #10b981, #059669) !important; border-radius: 999px !important; } /* FOOTER */ #form-nova-venda > .flex:last-child{ border-top: 1px solid rgba(51,65,85,.68) !important; padding-top: 24px !important; margin-top: 24px !important; } /* BOTÕES */ #btn-cancelar-nova-venda{ padding: 14px 24px !important; border: 1px solid rgba(51,65,85,.92) !important; color: #e2e8f0 !important; background: transparent !important; border-radius: 16px !important; font-size: 14px !important; font-weight: 700 !important; transition: .2s !important; } #btn-cancelar-nova-venda:hover{ background: rgba(15,23,42,.55) !important; } #btn-salvar-nova-venda{ padding: 12px 28px !important; border: 0 !important; border-radius: 16px !important; background: #10b981 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-shadow: 0 18px 40px rgba(16,185,129,.28) !important; transition: .2s !important; } #btn-salvar-nova-venda:hover{ background: #059669 !important; } /* RESPONSIVO */ @media (max-width: 640px){ #modal-nova-venda > div > div:first-child{ padding: 20px 24px !important; } #form-nova-venda{ padding: 18px 18px 22px !important; } #form-nova-venda > .flex:last-child{ flex-direction: column !important; } #btn-cancelar-nova-venda, #btn-salvar-nova-venda{ width: 100% !important; } } /* ========================================= NOVA VENDA — SCROLL MOBILE FIX ========================================= */ #modal-nova-venda{ overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; touch-action: pan-y !important; } #modal-nova-venda > div{ margin: auto !important; max-height: min(90vh, 820px) !important; } #form-nova-venda{ overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } @media (max-width: 640px){ #modal-nova-venda{ align-items: flex-start !important; padding: 12px !important; } #modal-nova-venda > div{ width: 100% !important; max-height: calc(100vh - 24px) !important; margin: 0 auto !important; } #form-nova-venda{ max-height: calc(100vh - 120px) !important; padding-bottom: 28px !important; } } /* ===================================== CLIENTES EMPTY — FORCE PADRÃO KLURO ===================================== */ #clientes-empty{ min-height: 520px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; } #clientes-empty.hidden{ display: none !important; } #clientes-empty > .kl-empty-state{ width: 100% !important; max-width: 42rem !important; margin: 0 auto !important; padding: 80px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; border: 1px dashed rgba(148,163,184,.18) !important; border-radius: 32px !important; background: linear-gradient( 180deg, rgba(6,15,32,.96) 0%, rgba(7,18,38,.96) 100% ) !important; box-shadow: none !important; } /* ícone */ #clientes-empty .kl-empty-icon{ width: 76px !important; height: 76px !important; margin-bottom: 24px !important; border-radius: 999px !important; background: rgba(255,255,255,.03) !important; border: 1px solid rgba(148,163,184,.14) !important; display: flex !important; align-items: center !important; justify-content: center !important; } #clientes-empty .kl-empty-icon-inner{ width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } #clientes-empty .kl-empty-icon i{ width: 40px !important; height: 40px !important; color: rgba(226,232,240,.92) !important; } /* título */ #clientes-empty .kl-empty-title{ font-size: 2rem !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -.02em !important; color: #f8fafc !important; margin-bottom: 14px !important; } /* texto */ #clientes-empty .kl-empty-text{ max-width: 470px !important; margin: 0 auto 30px !important; font-size: 1rem !important; line-height: 1.7 !important; color: rgba(148,163,184,.78) !important; } /* botão */ #clientes-empty .kl-empty-btn{ min-width: 260px !important; height: 50px !important; padding: 0 26px !important; border-radius: 16px !important; border: 1px solid rgba(59,130,246,.20) !important; background: rgba(15,23,42,.42) !important; color: #f8fafc !important; font-size: 1rem !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all .22s ease !important; } #clientes-empty .kl-empty-btn:hover{ transform: translateY(-1px) !important; background: rgba(15,23,42,.58) !important; border-color: rgba(96,165,250,.30) !important; } /* ========================================= MODAL CLIENTE — FORCE PADRÃO KLURO vence tudo ========================================= */ #modal-cliente{ z-index: 9999 !important; } #modal-cliente > div{ background: linear-gradient(180deg, #07162d 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.88) !important; border-radius: 24px !important; box-shadow: 0 30px 90px rgba(0,0,0,.58) !important; overflow: hidden !important; max-height: 90vh !important; color: #e5e7eb !important; } /* header */ #modal-cliente > div > div:first-child{ padding: 24px 32px !important; background: linear-gradient(180deg, #081b35 0%, #07162d 100%) !important; border-bottom: 1px solid rgba(51,65,85,.78) !important; position: sticky !important; top: 0 !important; z-index: 10 !important; } #modal-cliente #clientes-modal-title{ color: #f8fafc !important; font-size: 24px !important; line-height: 1.1 !important; font-weight: 800 !important; margin: 0 !important; } #modal-cliente #clientes-modal-subtitle{ color: #94a3b8 !important; font-size: 12px !important; margin-top: 6px !important; } /* fechar */ #btn-fechar-cliente{ width: 40px !important; height: 40px !important; border-radius: 999px !important; background: transparent !important; border: 1px solid rgba(51,65,85,.55) !important; color: #94a3b8 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: .2s !important; } #btn-fechar-cliente:hover{ background: rgba(15,23,42,.55) !important; color: #e2e8f0 !important; border-color: rgba(71,85,105,.95) !important; } /* form */ #form-cliente{ background: transparent !important; padding: 22px 20px 24px !important; color: #e5e7eb !important; } /* labels */ #form-cliente label{ display: block !important; color: #94a3b8 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; margin-bottom: 8px !important; } /* campos */ #modal-cliente input, #modal-cliente select, #modal-cliente textarea{ width: 100% !important; background: #071528 !important; border: 1px solid rgba(51,65,85,.92) !important; border-radius: 16px !important; padding: 14px 16px !important; color: #e5e7eb !important; outline: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important; font-size: 14px !important; } #modal-cliente input::placeholder, #modal-cliente textarea::placeholder{ color: #64748b !important; opacity: 1 !important; } #modal-cliente input:focus, #modal-cliente select:focus, #modal-cliente textarea:focus{ border-color: rgba(16,185,129,.48) !important; box-shadow: 0 0 0 4px rgba(16,185,129,.10) !important; outline: none !important; } /* textos slate dentro do modal */ #modal-cliente .text-slate-900{ color: #f8fafc !important; } #modal-cliente .text-slate-800{ color: #e2e8f0 !important; } #modal-cliente .text-slate-700{ color: #cbd5e1 !important; } #modal-cliente .text-slate-600, #modal-cliente .text-slate-500, #modal-cliente .text-slate-400{ color: #94a3b8 !important; } /* bloco observações */ #modal-cliente .bg-slate-50{ background: linear-gradient(180deg, #06152c 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.86) !important; border-radius: 20px !important; } #modal-cliente .border-slate-100{ border-color: rgba(51,65,85,.68) !important; } #modal-cliente .bg-slate-50 h4{ color: #f8fafc !important; } /* ajuda abaixo do telefone */ #modal-cliente .text-xs.text-slate-400{ color: #94a3b8 !important; } /* footer */ #form-cliente > .flex:last-child{ border-top: 1px solid rgba(51,65,85,.68) !important; padding-top: 24px !important; margin-top: 24px !important; } /* botão cancelar */ #btn-cancelar-cliente{ padding: 14px 24px !important; border: 1px solid rgba(51,65,85,.92) !important; color: #e2e8f0 !important; background: transparent !important; border-radius: 16px !important; font-size: 14px !important; font-weight: 700 !important; transition: .2s !important; } #btn-cancelar-cliente:hover{ background: rgba(15,23,42,.55) !important; } /* botão salvar */ #btn-salvar-cliente{ padding: 12px 28px !important; border: 0 !important; border-radius: 16px !important; background: #10b981 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-shadow: 0 18px 40px rgba(16,185,129,.28) !important; transition: .2s !important; } #btn-salvar-cliente:hover{ background: #059669 !important; } #btn-salvar-cliente > div{ background: rgba(255,255,255,.18) !important; border-radius: 999px !important; } /* mobile */ @media (max-width: 640px){ #modal-cliente > div > div:first-child{ padding: 20px 24px !important; } #form-cliente{ padding: 18px 18px 22px !important; } #form-cliente > .flex:last-child{ flex-direction: column !important; } #btn-cancelar-cliente, #btn-salvar-cliente{ width: 100% !important; } } /* ========================================= CLIENTES LISTA/TABELA — FORCE DARK MODE vence tudo ========================================= */ /* card externo da lista */ #clientes-desktop .rounded-2xl.border.border-slate-200, #clientes-mobile .rounded-2xl.border.border-slate-200{ background: linear-gradient(180deg, #07162d 0%, #041126 100%) !important; border-color: rgba(51,65,85,.88) !important; box-shadow: 0 20px 60px rgba(0,0,0,.25) !important; } /* tabela */ #clientes-desktop .clientes-table{ background: transparent !important; } /* cabeçalho da tabela */ #clientes-desktop .clientes-table thead th{ background: rgba(255,255,255,.03) !important; color: #94a3b8 !important; border-bottom: 1px solid rgba(51,65,85,.88) !important; } /* linhas/células */ #clientes-desktop .clientes-table tbody td{ background: transparent !important; color: #e5e7eb !important; border-bottom: 1px solid rgba(51,65,85,.68) !important; } /* hover */ #clientes-desktop .clientes-table tbody tr:hover{ background: rgba(255,255,255,.02) !important; } /* textos internos */ #clientes-desktop .text-slate-900, #clientes-mobile .text-slate-900{ color: #f8fafc !important; } #clientes-desktop .text-slate-800, #clientes-mobile .text-slate-800{ color: #e2e8f0 !important; } #clientes-desktop .text-slate-700, #clientes-mobile .text-slate-700{ color: #cbd5e1 !important; } #clientes-desktop .text-slate-600, #clientes-desktop .text-slate-500, #clientes-desktop .text-slate-400, #clientes-mobile .text-slate-600, #clientes-mobile .text-slate-500, #clientes-mobile .text-slate-400{ color: #94a3b8 !important; } /* avatar */ #clientes-desktop .cl-avatar, #clientes-mobile .cl-avatar{ background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(59,130,246,.14)) !important; border: 1px solid rgba(51,65,85,.88) !important; color: #e2e8f0 !important; } /* chips */ #clientes-desktop .cl-chip, #clientes-mobile .cl-chip{ background: rgba(255,255,255,.04) !important; border-color: rgba(51,65,85,.88) !important; color: #cbd5e1 !important; } #clientes-desktop .cl-chip-ok, #clientes-mobile .cl-chip-ok{ background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.26) !important; color: #34d399 !important; } #clientes-desktop .cl-chip-warn, #clientes-mobile .cl-chip-warn{ background: rgba(251,146,60,.10) !important; border-color: rgba(251,146,60,.22) !important; color: #fb923c !important; } /* botões de ação */ #clientes-desktop .cl-action-btn, #clientes-mobile .cl-action-btn{ background: #071528 !important; border: 1px solid rgba(51,65,85,.92) !important; color: #94a3b8 !important; box-shadow: none !important; } #clientes-desktop .cl-action-btn:hover, #clientes-mobile .cl-action-btn:hover{ background: #0a1a30 !important; border-color: rgba(71,85,105,.95) !important; } #clientes-desktop .cl-action-btn-wa:hover, #clientes-mobile .cl-action-btn-wa:hover{ background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.26) !important; color: #34d399 !important; } #clientes-desktop .cl-action-btn-edit:hover, #clientes-mobile .cl-action-btn-edit:hover{ background: rgba(59,130,246,.12) !important; border-color: rgba(59,130,246,.24) !important; color: #60a5fa !important; } #clientes-desktop .cl-action-btn-del:hover, #clientes-mobile .cl-action-btn-del:hover{ background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.24) !important; color: #f87171 !important; } /* mobile cards */ #clientes-mobile > div{ background: linear-gradient(180deg, #07162d 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.88) !important; box-shadow: 0 20px 60px rgba(0,0,0,.25) !important; } #clientes-mobile .bg-slate-50\/60{ background: rgba(255,255,255,.03) !important; border-color: rgba(51,65,85,.82) !important; } /* ========================================= FORNECEDORES — FORCE PADRÃO KLURO DARK cola no FINAL do style.css ========================================= */ #fornecedores-root{ color-scheme: dark; } /* BUSCA */ #fornecedores-root #forn-busca{ background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; color: #e5e7eb !important; } #fornecedores-root #forn-busca::placeholder{ color: #94a3b8 !important; } /* FILTROS */ #fornecedores-root .forn-filter-pill{ display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(51,65,85,.9); background: #071528; color: #e2e8f0; font-size: 13px; font-weight: 800; transition: .2s ease; } #fornecedores-root .forn-filter-pill:hover{ background: #0a1a30; border-color: rgba(71,85,105,.95); } #fornecedores-root .forn-filter-pill.is-active{ background: linear-gradient(135deg, #22c55e, #16a34a); color: white; border-color: transparent; box-shadow: 0 14px 30px rgba(34,197,94,.22); } /* EMPTY */ #forn-empty{ min-height: 520px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; } #forn-empty.hidden{ display: none !important; } #forn-empty > .kl-empty-state{ width: 100% !important; max-width: 42rem !important; margin: 0 auto !important; padding: 80px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; border: 1px dashed rgba(148,163,184,.18) !important; border-radius: 32px !important; background: linear-gradient(180deg, rgba(6,15,32,.96) 0%, rgba(7,18,38,.96) 100%) !important; box-shadow: none !important; } /* TABELA */ #fornecedores-root .forn-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, #07162d 0%, #041126 100%) !important; border-color: rgba(51,65,85,.88) !important; } #fornecedores-root .forn-table{ width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; } #fornecedores-root .forn-table thead th{ text-align: left; font-size: 12px; font-weight: 800; color: #94a3b8 !important; padding: 14px 16px; border-bottom: 1px solid rgba(51,65,85,.88) !important; background: rgba(255,255,255,.03) !important; white-space: nowrap; } #fornecedores-root .forn-table tbody td{ padding: 16px; color: #e5e7eb !important; border-bottom: 1px solid rgba(51,65,85,.68) !important; background: transparent !important; vertical-align: middle; } #fornecedores-root .forn-table tbody tr:hover{ background: rgba(255,255,255,.02) !important; } /* MOBILE CARDS */ #forn-mobile > div{ background: linear-gradient(180deg, #07162d 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.88) !important; box-shadow: 0 20px 60px rgba(0,0,0,.25) !important; } #forn-mobile .bg-slate-50\/60{ background: rgba(255,255,255,.03) !important; border-color: rgba(51,65,85,.82) !important; } /* CHIPS */ #fornecedores-root .forn-status-chip{ display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid rgba(51,65,85,.88); } #fornecedores-root .forn-status-ativo{ background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.26); color: #34d399; } #fornecedores-root .forn-status-pendente{ background: rgba(251,146,60,.10); border-color: rgba(251,146,60,.22); color: #fb923c; } #fornecedores-root .forn-status-inativo{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.24); color: #f87171; } /* ACTIONS */ #fornecedores-root .forn-action-btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(51,65,85,.92); background: #071528; color: #e2e8f0; font-size: 13px; font-weight: 800; transition: .2s ease; } #fornecedores-root .forn-action-btn:hover{ background: #0a1a30; border-color: rgba(71,85,105,.95); } #fornecedores-root .forn-action-edit:hover{ color: #60a5fa; } #fornecedores-root .forn-action-view:hover{ color: #34d399; } #fornecedores-root .forn-action-del:hover{ color: #f87171; } /* MODAL FORNECEDOR */ #modal-fornecedor, #modal-view-fornecedor, #modal-confirm-del-fornecedor{ z-index: 9999 !important; } #modal-fornecedor > div, #modal-view-fornecedor > div, #modal-confirm-del-fornecedor > div{ background: linear-gradient(180deg, #07162d 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.88) !important; border-radius: 24px !important; box-shadow: 0 30px 90px rgba(0,0,0,.58) !important; color: #e5e7eb !important; } /* HEADER MODAL */ #modal-fornecedor > div > div:first-child, #modal-view-fornecedor > div > div:first-child{ background: linear-gradient(180deg, #081b35 0%, #07162d 100%) !important; border-bottom: 1px solid rgba(51,65,85,.78) !important; } #modal-fornecedor h3, #modal-view-fornecedor h3, #modal-confirm-del-fornecedor h3{ color: #f8fafc !important; } #modal-fornecedor .text-slate-500, #modal-fornecedor .text-slate-400, #modal-view-fornecedor .text-slate-500, #modal-view-fornecedor .text-slate-400, #modal-confirm-del-fornecedor .text-slate-500, #modal-confirm-del-fornecedor .text-slate-400{ color: #94a3b8 !important; } /* INPUTS */ #modal-fornecedor input, #modal-fornecedor select, #modal-fornecedor textarea{ width: 100% !important; background: #071528 !important; border: 1px solid rgba(51,65,85,.92) !important; border-radius: 16px !important; padding: 14px 16px !important; color: #e5e7eb !important; outline: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important; font-size: 14px !important; } #modal-fornecedor input::placeholder, #modal-fornecedor textarea::placeholder{ color: #64748b !important; opacity: 1 !important; } #modal-fornecedor input:focus, #modal-fornecedor select:focus, #modal-fornecedor textarea:focus{ border-color: rgba(16,185,129,.48) !important; box-shadow: 0 0 0 4px rgba(16,185,129,.10) !important; } /* LABELS */ #modal-fornecedor .forn-label{ display: block; color: #94a3b8; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; } #modal-fornecedor .forn-help{ color: #94a3b8; font-size: 12px; line-height: 1.5; } #modal-fornecedor .forn-panel-card{ background: linear-gradient(180deg, #06152c 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.86) !important; border-radius: 22px !important; padding: 22px !important; } #modal-fornecedor .forn-section-title{ color: #f8fafc; font-size: 18px; font-weight: 800; margin: 0 0 20px 0; } /* stepper */ #modal-fornecedor .forn-stepper{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; padding: 4px; background: rgba(255,255,255,.02); border: 1px solid rgba(51,65,85,.86); border-radius: 20px; } #modal-fornecedor .forn-step{ display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; } #modal-fornecedor .forn-step-circle{ width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #071528; border: 1px solid rgba(51,65,85,.92); color: #cbd5e1; font-size: 13px; font-weight: 800; flex-shrink: 0; } #modal-fornecedor .forn-step-title{ color: #f8fafc; font-size: 14px; font-weight: 800; margin: 0; } #modal-fornecedor .forn-step-sub{ color: #94a3b8; font-size: 12px; margin: 2px 0 0 0; } #modal-fornecedor .forn-step.is-active .forn-step-circle, #modal-fornecedor .forn-step.is-done .forn-step-circle{ background: linear-gradient(135deg, #22c55e, #16a34a); border-color: transparent; color: #fff; box-shadow: 0 12px 24px rgba(34,197,94,.22); } /* tipo/status */ #modal-fornecedor .forn-choice, #modal-fornecedor .forn-status-pill{ display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(51,65,85,.92); background: #071528; color: #e2e8f0; font-size: 13px; font-weight: 800; transition: .2s ease; } #modal-fornecedor .forn-choice.is-active, #modal-fornecedor .forn-status-pill.is-active{ background: linear-gradient(135deg, #22c55e, #16a34a); color: white; border-color: transparent; box-shadow: 0 14px 30px rgba(34,197,94,.22); } /* produtos temp */ #modal-fornecedor .forn-add-btn{ min-height: 50px; border-radius: 16px; background: linear-gradient(135deg, #22c55e, #16a34a); color: white; font-weight: 800; border: 0; box-shadow: 0 18px 40px rgba(16,185,129,.28); } #modal-fornecedor .forn-products-box{ border: 1px solid rgba(51,65,85,.86); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.02); } #modal-fornecedor .forn-products-head{ display: grid; grid-template-columns: 1fr 180px 100px; gap: 12px; padding: 14px 16px; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(51,65,85,.68); color: #94a3b8; font-size: 12px; font-weight: 800; } #modal-fornecedor .forn-products-list{ padding: 0; } #modal-fornecedor .forn-products-row{ display: grid; grid-template-columns: 1fr 180px 100px; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(51,65,85,.68); } #modal-fornecedor .forn-products-row:last-child{ border-bottom: 0; } #modal-fornecedor .forn-products-empty{ padding: 18px 16px; color: #94a3b8; font-size: 14px; } #modal-fornecedor .forn-mini-del{ width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(51,65,85,.92); background: #071528; color: #f87171; display: inline-flex; align-items: center; justify-content: center; } /* footer modal */ #modal-fornecedor .forn-footer{ border-top: 1px solid rgba(51,65,85,.68); padding-top: 24px; margin-top: 8px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } #modal-fornecedor .forn-footer-step{ color: #94a3b8; font-size: 13px; font-weight: 700; } #modal-fornecedor .forn-btn-secondary{ padding: 14px 24px; border: 1px solid rgba(51,65,85,.92); color: #e2e8f0; background: transparent; border-radius: 16px; font-size: 14px; font-weight: 700; } #modal-fornecedor .forn-btn-primary{ padding: 14px 24px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 18px 40px rgba(16,185,129,.28); } /* view modal */ #modal-view-fornecedor .forn-view-box{ background: linear-gradient(180deg, #06152c 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.86) !important; border-radius: 20px !important; padding: 18px !important; } #modal-view-fornecedor .forn-view-head, #modal-view-fornecedor .forn-view-row{ display: grid; grid-template-columns: 1fr 180px; gap: 12px; align-items: center; } #modal-view-fornecedor .forn-view-head{ color: #94a3b8; font-size: 12px; font-weight: 800; padding-bottom: 12px; border-bottom: 1px solid rgba(51,65,85,.68); } #modal-view-fornecedor .forn-view-row{ padding: 12px 0; border-bottom: 1px solid rgba(51,65,85,.68); } #modal-view-fornecedor .forn-view-row:last-child{ border-bottom: 0; } #modal-view-fornecedor .forn-view-empty{ color: #94a3b8; font-size: 14px; padding-top: 12px; } #modal-view-fornecedor .forn-view-title{ color: #f8fafc; font-size: 14px; font-weight: 800; margin: 0 0 12px 0; } #modal-view-fornecedor .forn-view-text{ color: #cbd5e1; line-height: 1.7; white-space: pre-wrap; } /* confirm delete */ #modal-confirm-del-fornecedor .bg-red-50{ background: rgba(239,68,68,.12) !important; color: #f87171 !important; } #btn-cancel-del-fornecedor{ background: transparent !important; border-color: rgba(51,65,85,.92) !important; color: #e2e8f0 !important; } #btn-cancel-del-fornecedor:hover{ background: rgba(15,23,42,.55) !important; } #btn-confirm-del-fornecedor{ background: #ef4444 !important; color: #fff !important; } /* RESPONSIVO */ @media (max-width: 900px){ #modal-fornecedor .forn-stepper{ grid-template-columns: 1fr; } #modal-fornecedor .forn-products-head, #modal-fornecedor .forn-products-row{ grid-template-columns: 1fr 120px 80px; } } @media (max-width: 640px){ #modal-fornecedor > div, #modal-view-fornecedor > div, #modal-confirm-del-fornecedor > div{ max-height: calc(100vh - 16px) !important; } #modal-fornecedor .forn-footer{ flex-direction: column; align-items: stretch; } #modal-fornecedor .forn-btn-secondary, #modal-fornecedor .forn-btn-primary{ width: 100%; } } /* ========================================= FORNECEDORES — FIX GERAL FORTE cola no FINAL do style.css ========================================= */ /* remove qualquer resto dos filtros */ #fornecedores-root .forn-filter-pill, #fornecedores-root [data-forn-filter]{ display: none !important; } /* busca fica no topo e bonita */ #fornecedores-root #forn-busca{ background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; color: #e5e7eb !important; } #fornecedores-root #forn-busca::placeholder{ color: #94a3b8 !important; } /* wrappers principais */ #fornecedores-root #forn-desktop, #fornecedores-root #forn-mobile{ width: 100% !important; } /* tabela */ #fornecedores-root .forn-table-wrap{ width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 20px !important; border: 1px solid rgba(51,65,85,.88) !important; background: linear-gradient(180deg, #07162d 0%, #041126 100%) !important; } /* tabela base */ #fornecedores-root .forn-table{ width: 100% !important; min-width: 1100px !important; border-collapse: separate !important; border-spacing: 0 !important; table-layout: fixed !important; } /* colunas */ #fornecedores-root .forn-table thead th:nth-child(1), #fornecedores-root .forn-table tbody td:nth-child(1){ width: 25% !important; } #fornecedores-root .forn-table thead th:nth-child(2), #fornecedores-root .forn-table tbody td:nth-child(2){ width: 16% !important; } #fornecedores-root .forn-table thead th:nth-child(3), #fornecedores-root .forn-table tbody td:nth-child(3){ width: 16% !important; } #fornecedores-root .forn-table thead th:nth-child(4), #fornecedores-root .forn-table tbody td:nth-child(4){ width: 16% !important; } #fornecedores-root .forn-table thead th:nth-child(5), #fornecedores-root .forn-table tbody td:nth-child(5){ width: 12% !important; } #fornecedores-root .forn-table thead th:nth-child(6), #fornecedores-root .forn-table tbody td:nth-child(6){ width: 15% !important; } /* header da tabela */ #fornecedores-root .forn-table thead th{ background: rgba(255,255,255,.03) !important; color: #94a3b8 !important; font-size: 12px !important; font-weight: 800 !important; text-align: left !important; padding: 16px 18px !important; border-bottom: 1px solid rgba(51,65,85,.88) !important; white-space: nowrap !important; } /* linhas */ #fornecedores-root .forn-table tbody td{ padding: 18px !important; color: #e5e7eb !important; font-size: 14px !important; font-weight: 600 !important; border-bottom: 1px solid rgba(51,65,85,.68) !important; background: transparent !important; vertical-align: middle !important; word-break: break-word !important; } #fornecedores-root .forn-table tbody tr:hover{ background: rgba(255,255,255,.02) !important; } #fornecedores-root .forn-table tbody tr:last-child td{ border-bottom: 0 !important; } /* status */ #fornecedores-root .forn-status-chip{ display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 30px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 800 !important; border: 1px solid rgba(51,65,85,.88) !important; white-space: nowrap !important; } #fornecedores-root .forn-status-ativo{ background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.26) !important; color: #34d399 !important; } #fornecedores-root .forn-status-pendente{ background: rgba(251,146,60,.10) !important; border-color: rgba(251,146,60,.22) !important; color: #fb923c !important; } #fornecedores-root .forn-status-inativo{ background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.24) !important; color: #f87171 !important; } /* ações */ #fornecedores-root .forn-action-btn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 0 14px !important; border-radius: 12px !important; border: 1px solid rgba(51,65,85,.92) !important; background: #071528 !important; color: #e2e8f0 !important; font-size: 13px !important; font-weight: 800 !important; transition: .2s ease !important; white-space: nowrap !important; } #fornecedores-root .forn-action-btn:hover{ background: #0a1a30 !important; border-color: rgba(71,85,105,.95) !important; } #fornecedores-root .forn-action-edit:hover{ color: #60a5fa !important; } #fornecedores-root .forn-action-view:hover{ color: #34d399 !important; } #fornecedores-root .forn-action-del:hover{ color: #f87171 !important; } /* força o alinhamento da área de ações */ #fornecedores-root .forn-table tbody td:last-child{ text-align: right !important; } #fornecedores-root .forn-table tbody td:last-child > div{ display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; justify-content: flex-end !important; } /* mobile cards */ #forn-mobile > div{ background: linear-gradient(180deg, #07162d 0%, #041126 100%) !important; border: 1px solid rgba(51,65,85,.88) !important; box-shadow: 0 20px 60px rgba(0,0,0,.25) !important; } #forn-mobile .bg-slate-50\/60{ background: rgba(255,255,255,.03) !important; border-color: rgba(51,65,85,.82) !important; } /* ========================================= FORNECEDORES — TABELA FORCE ABSOLUTO passa por cima de tudo ========================================= */ #forn-desktop{ display: block !important; width: 100% !important; padding: 24px !important; } #forn-desktop.hidden{ display: none !important; } #forn-desktop .forn-table-wrap{ width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border: 1px solid rgba(51,65,85,.88) !important; border-radius: 22px !important; background: linear-gradient(180deg, #07162d 0%, #041126 100%) !important; box-shadow: 0 20px 60px rgba(0,0,0,.25) !important; } /* tabela inteira */ #forn-desktop .forn-table{ width: 100% !important; min-width: 1100px !important; border-collapse: separate !important; border-spacing: 0 !important; table-layout: fixed !important; background: transparent !important; } /* header */ #forn-desktop .forn-table thead{ display: table-header-group !important; } #forn-desktop .forn-table thead tr{ display: table-row !important; } #forn-desktop .forn-table thead th{ display: table-cell !important; padding: 16px 18px !important; background: rgba(255,255,255,.03) !important; color: #94a3b8 !important; font-size: 12px !important; font-weight: 800 !important; text-align: left !important; border-bottom: 1px solid rgba(51,65,85,.88) !important; white-space: nowrap !important; vertical-align: middle !important; } /* body */ #forn-desktop .forn-table tbody{ display: table-row-group !important; } #forn-desktop .forn-table tbody tr{ display: table-row !important; background: transparent !important; } #forn-desktop .forn-table tbody td{ display: table-cell !important; padding: 18px !important; background: transparent !important; color: #e5e7eb !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.45 !important; border-bottom: 1px solid rgba(51,65,85,.68) !important; vertical-align: middle !important; text-align: left !important; word-break: break-word !important; overflow-wrap: anywhere !important; white-space: normal !important; } #forn-desktop .forn-table tbody tr:last-child td{ border-bottom: 0 !important; } #forn-desktop .forn-table tbody tr:hover{ background: rgba(255,255,255,.02) !important; } /* larguras reais */ #forn-desktop .forn-table thead th:nth-child(1), #forn-desktop .forn-table tbody td:nth-child(1){ width: 27% !important; } #forn-desktop .forn-table thead th:nth-child(2), #forn-desktop .forn-table tbody td:nth-child(2){ width: 16% !important; } #forn-desktop .forn-table thead th:nth-child(3), #forn-desktop .forn-table tbody td:nth-child(3){ width: 16% !important; } #forn-desktop .forn-table thead th:nth-child(4), #forn-desktop .forn-table tbody td:nth-child(4){ width: 16% !important; } #forn-desktop .forn-table thead th:nth-child(5), #forn-desktop .forn-table tbody td:nth-child(5){ width: 11% !important; } #forn-desktop .forn-table thead th:nth-child(6), #forn-desktop .forn-table tbody td:nth-child(6){ width: 14% !important; } /* primeira coluna mais bonita */ #forn-desktop .forn-table tbody td:first-child{ font-weight: 800 !important; color: #f8fafc !important; } #forn-desktop .forn-table tbody td:first-child .text-slate-500, #forn-desktop .forn-table tbody td:first-child .text-slate-400{ color: #94a3b8 !important; } /* status */ #forn-desktop .forn-status-chip{ display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 30px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 800 !important; border: 1px solid rgba(51,65,85,.88) !important; white-space: nowrap !important; } #forn-desktop .forn-status-ativo{ background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.26) !important; color: #34d399 !important; } #forn-desktop .forn-status-pendente{ background: rgba(251,146,60,.10) !important; border-color: rgba(251,146,60,.22) !important; color: #fb923c !important; } #forn-desktop .forn-status-inativo{ background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.24) !important; color: #f87171 !important; } /* coluna ações */ #forn-desktop .forn-table tbody td:last-child{ text-align: right !important; } #forn-desktop .forn-table tbody td:last-child > div{ display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; flex-wrap: wrap !important; } /* botões */ #forn-desktop .forn-action-btn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 0 14px !important; border-radius: 12px !important; border: 1px solid rgba(51,65,85,.92) !important; background: #071528 !important; color: #e2e8f0 !important; font-size: 13px !important; font-weight: 800 !important; transition: .2s ease !important; white-space: nowrap !important; box-shadow: none !important; } #forn-desktop .forn-action-btn:hover{ background: #0a1a30 !important; border-color: rgba(71,85,105,.95) !important; } #forn-desktop .forn-action-edit:hover{ color: #60a5fa !important; } #forn-desktop .forn-action-view:hover{ color: #34d399 !important; } #forn-desktop .forn-action-del:hover{ color: #f87171 !important; } /* ===================================== FORNECEDORES EMPTY — FORCE PADRÃO KLURO ===================================== */ #forn-empty{ min-height: 520px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; } #forn-empty.hidden{ display: none !important; } #forn-empty > .kl-empty-state{ width: 100% !important; max-width: 42rem !important; margin: 0 auto !important; padding: 80px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; border: 1px dashed rgba(148,163,184,.18) !important; border-radius: 32px !important; background: linear-gradient( 180deg, rgba(6,15,32,.96) 0%, rgba(7,18,38,.96) 100% ) !important; box-shadow: none !important; } /* ícone */ #forn-empty .kl-empty-icon{ width: 76px !important; height: 76px !important; margin-bottom: 24px !important; border-radius: 999px !important; background: rgba(255,255,255,.03) !important; border: 1px solid rgba(148,163,184,.14) !important; display: flex !important; align-items: center !important; justify-content: center !important; } #forn-empty .kl-empty-icon-inner{ width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } #forn-empty .kl-empty-icon i{ width: 40px !important; height: 40px !important; color: rgba(226,232,240,.92) !important; } /* título */ #forn-empty .kl-empty-title{ font-size: 2rem !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -.02em !important; color: #f8fafc !important; margin-bottom: 14px !important; } /* texto */ #forn-empty .kl-empty-text{ max-width: 520px !important; margin: 0 auto 30px !important; font-size: 1rem !important; line-height: 1.7 !important; color: rgba(148,163,184,.78) !important; } /* botão */ #forn-empty .kl-empty-btn{ min-width: 290px !important; height: 50px !important; padding: 0 26px !important; border-radius: 16px !important; border: 1px solid rgba(59,130,246,.20) !important; background: rgba(15,23,42,.42) !important; color: #f8fafc !important; font-size: 1rem !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all .22s ease !important; } #forn-empty .kl-empty-btn:hover{ transform: translateY(-1px) !important; background: rgba(15,23,42,.58) !important; border-color: rgba(96,165,250,.30) !important; }