/* ================================================================== */ /* CSS MESTRE - ROYAL DARK (COMPLETO) */ /* ================================================================== */ /* Botão Flutuante para voltar ao Admin (Modo Deus) */ .admin-return-btn { position: fixed; bottom: 20px; right: 20px; background: #ff0000; color: white; padding: 15px 25px; border-radius: 50px; font-weight: bold; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); z-index: 99999; cursor: pointer; border: 2px solid white; animation: pulse 2s infinite; display: none; /* Escondido por padrão */ } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); } } :root { --bg-body: #050505; --bg-sidebar: #0a0a0c; --bg-card: #141418; --bg-input: #1f1f25; --primary: #ff9100; --secondary: #bc13fe; --success: #00e054; --danger: #ff3e4e; --warning: #ffb302; --info: #2979ff; --text-main: #ffffff; --text-muted: #888899; --border: 1px solid rgba(255,255,255,0.08); --shadow-neon: 0 0 8px rgba(0, 243, 255, 0.15); } body.light-mode { --bg-body: #f4f5f7; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-input: #f9fafb; --text-main: #111827; --text-muted: #6b7280; --border: 1px solid #e5e7eb; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } html, body, * { scrollbar-width: none; -ms-overflow-style: none; } *::-webkit-scrollbar { width: 0 !important; height: 0 !important; background: transparent !important; } *::-webkit-scrollbar-thumb { background: transparent !important; } body { background-color: var(--bg-body); color: var(--text-main); height: 100vh; overflow: hidden; background-image: radial-gradient(circle at 10% 10%, #150c25 0%, #000000 90%); font-size: 11px; } .hidden { display: none !important; } /* SEÇÕES TELA CHEIA */ .full-screen-section { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-body); z-index: 5000; overflow-y: auto; display: none; flex-direction: column; } .full-screen-section.active { display: flex; } /* LANDING PAGE */ .lp-header { padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(5,5,5,0.9); backdrop-filter: blur(10px); top:0; z-index: 100; } .lp-brand { font-family: 'Rajdhani'; font-size: 26px; font-weight: 700; color: white; display: flex; align-items: center; gap: 10px; } .lp-brand span { color: var(--primary); } .lp-hero { text-align: center; padding: 100px 20px; background: radial-gradient(circle at center, #1a0b2e 0%, #000 70%); } .lp-hero h1 { font-family: 'Rajdhani'; font-size: 52px; line-height: 1.1; margin-bottom: 20px; background: linear-gradient(to right, #fff, #aaa); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .lp-plan-card:hover{ border-color: #ff7b00; /* Cor principal do neon (Ciano) */ /* Camadas de sombra: externa próxima, externa expansiva e interna */ box-shadow: 0 0 10px #ff7b00, 0 0 20px #ff7b00, inset 0 0 8px #ff7b00; } .lp-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 40px 20px; } .lp-plan-card { background: var(--bg-card); border: var(--border); border-radius: 16px; padding: 30px; position: relative; transition: 0.3s; display: flex; flex-direction: column; } .lp-plan-card:hover{ border-color: #ff7b00; /* Cor principal do neon (Ciano) */ /* Camadas de sombra: externa próxima, externa expansiva e interna */ box-shadow: 0 0 10px #ff7b00, 0 0 20px #ff7b00, inset 0 0 8px #ff7b00; } .lp-price { font-size: 42px; font-family: 'Rajdhani'; font-weight: 700; margin: 20px 0; } /* CHECKOUT */ .chk-container { display: flex; height: 100vh; overflow: hidden; } .chk-sidebar { width: 400px; background: #0b0b0b; border-right: var(--border); padding: 40px; display: flex; flex-direction: column; } .chk-content { flex: 1; background: #050505; padding: 40px; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; } .chk-box { width: 100%; max-width: 550px; } .chk-summary { background: #15151a; border-radius: 12px; padding: 20px; border: 1px solid #333; margin-bottom: 20px; } .chk-total { display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: bold; color: var(--success); margin-top: 15px; padding-top: 15px; border-top: 1px dashed #333; } .chk-step-title { font-size: 24px; font-family: 'Rajdhani'; margin-bottom: 5px; color: white; } #paymentBrick_container { width: 100%; min-height: 300px; } /* ADMIN & UTILS */ .sa-layout { display: flex; height: 100%; } .sa-sidebar { width: 240px; background: #080808; border-right: var(--border); padding: 20px; display: flex; flex-direction: column; } .sa-main { flex: 1; padding: 30px; overflow-y: auto; background: #0a0a0a; } .sa-card { background: #111; border: var(--border); padding: 20px; border-radius: 8px; margin-bottom: 20px; } .sa-table { width: 100%; border-collapse: collapse; } .sa-table th { text-align: left; padding: 10px; background: #1a1a1a; color: #aaa; font-size: 10px; text-transform: uppercase; } .sa-table td { padding: 10px; border-bottom: 1px solid #222; font-size: 12px; } .sa-menu-item { padding: 12px; color: #888; cursor: pointer; border-radius: 6px; display: flex; gap: 10px; align-items: center; transition: 0.2s; font-size: 12px; font-weight: 600; margin-bottom: 5px; } .sa-menu-item:hover, .sa-menu-item.active { background: rgba(255, 255, 255, 0.05); color: white; border-left: 3px solid var(--primary); } .input-lg { width: 100%; background: #1a1a1a; border: 1px solid #333; padding: 12px; color: white; border-radius: 6px; margin-bottom: 15px; outline: none; font-size: 14px; } .btn-lg { width: 100%; padding: 15px; background: var(--primary); color: #000; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; text-transform: uppercase; transition: 0.2s; } /* ERP CORE STYLES */ #app-wrapper { display: flex; width: 100vw; height: 100vh; overflow: hidden; } #login-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; } .login-box { background: var(--bg-card); border: 1px solid var(--primary); padding: 30px; border-radius: 12px; width: 350px; text-align: center; } aside { width: 200px; background: var(--bg-sidebar); border-right: var(--border); display: flex; flex-direction: column; padding: 15px; z-index: 100; overflow-y: auto; } .logo { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; color: white; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .logo span { color: var(--primary); text-shadow: var(--shadow-neon); } .menu-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); margin: 15px 0 5px 0; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 2px; } .nav-btn { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; color: var(--text-muted); cursor: pointer; transition: 0.2s; margin-bottom: 2px; font-weight: 500; font-size: 11px; } .nav-btn:hover, .nav-btn.active { background: rgba(0, 243, 255, 0.08); color: var(--primary); border-right: 3px solid var(--primary); } main { flex: 1; padding: 15px; overflow-y: auto; position: relative; } .view { display: none; animation: fadeIn 0.3s ease; } .view.active { display: block; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 15px; } .info-card { background: var(--bg-card); padding: 12px; border-radius: 6px; border: var(--border); } .info-card h4 { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; } .info-card .val { font-size: 18px; font-weight: 700; font-family: 'Rajdhani'; color: #fff; } .dash-row { display: grid; grid-template-columns: 2fr 1fr; gap: 15px; height: 300px; margin-bottom: 15px; } .chart-box { background: var(--bg-card); border: var(--border); border-radius: 8px; padding: 15px; position: relative; } .recent-list { background: var(--bg-card); border: var(--border); border-radius: 8px; padding: 15px; overflow-y: auto; } .recent-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 8px 0; font-size: 11px; } .input-icon-group { position: relative; margin-bottom: 8px; } .input-icon-group label { display: block; color: var(--text-muted); font-size: 9px; text-transform: uppercase; margin-bottom: 2px; font-weight: 600; } .input-icon-group input, .input-icon-group select, .input-icon-group textarea { width: 100%; background: var(--bg-input); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 0 8px; border-radius: 4px; outline: none; font-size: 11px; height: 30px; } .input-icon-group textarea { height: 60px; padding: 5px; } .input-icon-group input:focus { border-color: var(--primary); } .table-container { background: var(--bg-card); border-radius: 6px; border: var(--border); overflow: hidden; width: 100%; } table { width: 100%; border-collapse: collapse; } th { text-align: left; padding: 8px 10px; background: rgba(255,255,255,0.02); color: var(--text-muted); font-size: 10px; text-transform: uppercase; } td { padding: 6px 10px; border-bottom: var(--border); font-size: 11px; } tr:hover td { background: rgba(255,255,255,0.02); } .grid-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; } .prod-card { background: var(--bg-card); border-radius: 6px; border: var(--border); overflow: hidden; cursor: pointer; text-align: center; } .prod-card:hover { border-color: var(--primary); transform: translateY(-2px); } .prod-img { width: 100%; height: 70px; object-fit: cover; background: #222; display: flex; align-items: center; justify-content: center; color: #555;border-radius: 100%; } .prod-info { padding: 5px; } .prod-name { font-weight: 600; color: white; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prod-cat { font-size: 9px; text-transform: uppercase; color: var(--primary); } .cart-container { background: rgba(0,0,0,0.3); border: 1px dashed #333; border-radius: 6px; padding: 5px; min-height: 300px; max-height: 300px; overflow-y: auto; margin-bottom: 10px; } .cart-item { background: var(--bg-input); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 8px; border-radius: 4px; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; } .kanban-mobile-tabs { display: none; } .kanban-board { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; height: calc(100vh - 100px); } .kanban-col { width: 100%; background: rgba(255,255,255,0.02); border-radius: 6px; padding: 8px; border: var(--border); display: flex; flex-direction: column; } .kanban-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 700; font-family: 'Rajdhani'; text-transform: uppercase; color: var(--primary); font-size: 11px; } .kanban-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .kanban-card { background: var(--bg-card); padding: 8px; border-radius: 4px; border: var(--border); transition: 0.2s; border-left: 3px solid var(--primary); font-size: 10px; position: relative; cursor: pointer; } .kanban-card:hover { transform: translateY(-2px); border-color: var(--primary); } .kanban-empty { padding: 18px 12px; border: 1px dashed rgba(255,255,255,0.12); border-radius: 12px; color: #8b8b95; text-align: center; font-size: 12px; background: rgba(255,255,255,0.02); } .clients-mobile-list { display: none; } .clients-empty { display: none; } .client-mobile-card { background: rgba(17,17,21,0.92); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 16px; } .client-mobile-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .client-mobile-copy { min-width: 0; } .client-mobile-name { margin: 0; font-size: 18px; color: #fff; line-height: 1.05; overflow-wrap: anywhere; } .client-mobile-sub { margin-top: 6px; font-size: 12px; color: #8b8b95; overflow-wrap: anywhere; } .client-mobile-limit { flex-shrink: 0; border-radius: 999px; padding: 8px 10px; font-size: 11px; font-weight: 700; color: #d4d4d8; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); text-align: center; } .client-mobile-limit.has-limit { color: #00e054; border-color: rgba(0,224,84,0.28); background: rgba(0,224,84,0.08); } .client-mobile-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .client-mobile-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #c4c4ce; font-size: 12px; text-decoration: none; } .client-mobile-chip span { overflow-wrap: anywhere; } .client-mobile-chip.is-link { color: #ffffff; } .client-mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .client-mobile-btn { width: 100%; min-height: 46px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; } .client-mobile-btn.is-edit { border-color: rgba(0,243,255,0.22); color: #00f3ff; } .client-mobile-btn.is-delete { border-color: rgba(255,62,78,0.24); color: #ff6675; } body.light-mode .client-mobile-card { background: #ffffff; border-color: #d1d5db; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } body.light-mode .client-mobile-name { color: #111827; } body.light-mode .client-mobile-sub { color: #6b7280; } body.light-mode .client-mobile-limit { color: #475569; background: #f8fafc; border-color: #e2e8f0; } body.light-mode .client-mobile-chip { color: #374151; background: #f8fafc; border-color: #e2e8f0; } body.light-mode .client-mobile-chip.is-link { color: #111827; } body.light-mode .client-mobile-btn { background: #ffffff; color: #111827; border-color: #d1d5db; } .products-mobile-list { display: none; } .products-empty { display: none; } .product-mobile-card { background: rgba(17,17,21,0.92); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 14px; } .product-mobile-head { display: flex; gap: 12px; align-items: flex-start; } .product-mobile-thumb { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #8b8b95; } .product-mobile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-mobile-copy { min-width: 0; flex: 1; } .product-mobile-name { margin: 0; font-size: 18px; color: #fff; line-height: 1.05; overflow-wrap: anywhere; } .product-mobile-sub { margin-top: 6px; font-size: 12px; color: #8b8b95; overflow-wrap: anywhere; } .product-mobile-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .product-mobile-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #c4c4ce; font-size: 12px; } .product-mobile-chip span { overflow-wrap: anywhere; } .product-mobile-pricing { min-width: 96px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; } .product-mobile-price { font-size: 18px; line-height: 1; color: #fff; font-weight: 700; } .product-mobile-note { font-size: 11px; color: #8b8b95; font-weight: 700; } .product-mobile-note.has-promo { color: #00f3ff; } .product-mobile-footer { display: grid; gap: 10px; margin-top: 14px; } .product-mobile-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 48px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: #d4d4d8; text-align: left; } .product-mobile-toggle input { width: 18px !important; max-width: 18px !important; height: 18px; accent-color: var(--primary); flex: 0 0 18px; flex-shrink: 0; margin: 0; } .product-mobile-toggle span { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; font-size: 13px; font-weight: 700; line-height: 1.2; } .product-mobile-toggle input:checked + span { color: #ffffff; } .product-mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .product-mobile-btn { width: 100%; min-height: 46px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; } .product-mobile-btn.is-edit { border-color: rgba(0,243,255,0.22); color: #00f3ff; } .product-mobile-btn.is-delete { border-color: rgba(255,62,78,0.24); color: #ff6675; } body.light-mode .product-mobile-card { background: #ffffff; border-color: #d1d5db; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } body.light-mode .product-mobile-thumb { background: #f8fafc; border-color: #e2e8f0; color: #64748b; } body.light-mode .product-mobile-name { color: #111827; } body.light-mode .product-mobile-sub { color: #6b7280; } body.light-mode .product-mobile-chip, body.light-mode .product-mobile-toggle { color: #374151; background: #f8fafc; border-color: #e2e8f0; } body.light-mode .product-mobile-price { color: #111827; } body.light-mode .product-mobile-note { color: #6b7280; } body.light-mode .product-mobile-note.has-promo { color: #0284c7; } body.light-mode .product-mobile-btn { background: #ffffff; color: #111827; border-color: #d1d5db; } .kb-finance-tag { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 700; } .tag-debt { color: var(--danger); } .tag-paid { color: var(--success); } .kb-tag { padding: 2px 5px; border-radius: 3px; font-weight: bold; font-size: 12px; } .variation-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 5px; align-items: center; background: #1f1f25; padding: 5px; border-radius: 4px; margin-bottom: 4px; } .upload-area { border: 1px dashed #444; padding: 10px; text-align: center; border-radius: 4px; cursor: pointer; } .btn { padding: 8px 15px; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; } .btn-primary { background: var(--primary); color: #000; } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-danger { background: rgba(255, 62, 78, 0.2); color: var(--danger); border: 1px solid var(--danger); } .btn-btn-danger { background: rgba(255, 62, 78, 0.2); color: var(--danger); border: 1px solid var(--danger); } .btn-success { background: rgba(0, 224, 84, 0.2); color: var(--success); border: 1px solid var(--success); } .btn-sm { padding: 2px 8px; font-size: 10px; height: 24px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .flex-between { display: flex; justify-content: space-between; align-items: center; } #toast { position: fixed; bottom: 20px; right: 20px; background: #1a1a1a; border-left: 4px solid var(--success); padding: 10px 15px; border-radius: 4px; transform: translateX(150%); transition: 0.3s; z-index: 6000; color: white; font-weight: 700; font-size: 11px; } #toast.show { transform: translateX(0); } .tab-btn { opacity: 0.5; border-bottom: 2px solid transparent; border-radius: 0; padding-bottom: 5px; cursor: pointer; } .tab-btn.active { opacity: 1; border-color: var(--primary); color: var(--primary); } #pdf-overlay-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 100000; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding-top: 20px; } #pdf-page { width: 210mm; min-height: 297mm; background: white; color: black; padding: 15mm; box-shadow: 0 0 20px rgba(0,0,0,0.5); font-family: 'Helvetica', 'Arial', sans-serif; position: relative; } .pdf-header { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 20px; margin-bottom: 20px; } .pdf-logo img { max-height: 80px; max-width: 200px; } .pdf-info { text-align: right; } .pdf-title { font-size: 24px; font-weight: 700; color: #000; text-transform: uppercase; } .pdf-client-box { background: #f0f0f0; padding: 15px; border-radius: 5px; margin-bottom: 20px; border: 1px solid #ccc; } .pdf-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .pdf-table th { background: #000; color: #fff; padding: 8px; text-align: left; font-size: 12px; text-transform: uppercase; } .pdf-table td { padding: 8px; border-bottom: 1px solid #5e5e5e; font-size: 12px; color: #000; } .pdf-table tr:nth-child(even) { background-color: #000000; } .pdf-total { text-align: right; font-size: 18px; font-weight: 700; margin-top: 10px; color: #000; } .pdf-footer { margin-top: 50px; text-align: center; font-size: 10px; color: #666; border-top: 1px solid #ccc; padding-top: 10px; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); backdrop-filter: blur(2px); z-index: 6000; display: none; align-items: center; justify-content: center; } .modal-box { background: var(--bg-card); width: 600px; max-width: 95%; max-height: 95vh; overflow-y: auto; border-radius: 8px; border: 1px solid var(--primary); padding: 20px; } /* ============================================================ CORREÇÃO VISUAL: LANDING PAGE E CHECKOUT ============================================================ */ /* 1. CLASSE MAIS IMPORTANTE (Faz as telas trocarem) */ .hidden { display: none !important; } /* 2. CONFIGURAÇÃO DAS TELAS CHEIAS (Landing Page, Login, Checkout) */ .full-screen-section { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #0f1015; /* Fundo Escuro Profissional */ color: #ffffff; z-index: 9999; /* Fica acima do ERP original */ display: none; /* Começa escondido */ flex-direction: column; align-items: center; justify-content: center; overflow-y: auto; padding: 20px; } /* Quando a tela está ativa, ela aparece */ .full-screen-section.active { display: flex; } /* 3. ESTILO DA LANDING PAGE */ .lp-hero { text-align: center; width: 100%; /* Ocupa a largura toda */ max-width: 1400px; /* Permite ficar bem largo em telas grandes */ margin: 0 auto; /* Centraliza */ margin-bottom: 40px; padding: 0 20px; /* Evita colar nas bordas no celular */ } .lp-hero h1 { font-size: 3rem; margin-bottom: 10px; color: #fff; } .lp-hero p { font-size: 1.2rem; color: #aaa; } .lp-plans-container { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: 30px; } .lp-plan-card { background: #1a1b26; border: 1px solid #333; border-radius: 12px; padding: 30px; width: 300px; text-align: center; transition: transform 0.2s; } .lp-plan-card:hover { transform: translateY(-5px); border-color: #00f3ff; } .lp-plan-card h3 { color: #00f3ff; margin-bottom: 15px; font-size: 1.5rem; } .lp-price { font-size: 2.5rem; font-weight: bold; margin-bottom: 20px; } .lp-price small { font-size: 1rem; color: #888; font-weight: normal; } /* 4. ESTILO DO CHECKOUT E LOGIN */ .auth-box, .checkout-box { background: #1e1e2e; padding: 40px; border-radius: 16px; width: 100%; max-width: 500px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); border: 1px solid #333; } .checkout-steps { margin-bottom: 20px; } .input-group { margin-bottom: 15px; text-align: left; } .input-group label { display: block; margin-bottom: 5px; color: #ccc; } .input-group input { width: 100%; padding: 12px; background: #111; border: 1px solid #444; border-radius: 6px; color: white; font-size: 1rem; } .input-group input:focus { border-color: #00f3ff; outline: none; } /* 5. BOTÕES */ .btn-lg { width: 100%; padding: 15px; background: linear-gradient(45deg, #00f3ff, #0066ff); border: none; border-radius: 8px; color: #000; font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: opacity 0.2s; margin-top: 10px; } .btn-lg:hover { opacity: 0.9; } /* Botões de Ciclo (Mensal/Anual) */ .cycle-selector { margin-bottom: 30px; } .cycle-selector button { background: #333; border: none; padding: 10px 20px; color: white; cursor: pointer; margin: 0 5px; border-radius: 20px; } .cycle-selector button.active { background: #00f3ff; color: #000; } /* --- ASSINATURA & PLANOS --- */ .subs-header::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 200px; background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.05)); pointer-events: none; } .subs-header { background: var(--bg-card); /* Fundo inteligente */ border: var(--border); border-radius: 12px; padding: 30px; margin-bottom: 30px; position: relative; overflow: hidden; color: var(--text-main); /* Cor do texto inteligente */ } .usage-track { width: 100%; height: 6px; background: var(--bg-input); /* Fundo inteligente da barrinha de uso */ border-radius: 3px; overflow: hidden; } /* Barras de Uso */ .usage-item { margin-bottom: 15px; } .usage-info { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 5px; color: #aaa; } .usage-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 1s ease; } /* Grid de Planos */ .plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .plan-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 25px; text-align: center; transition: 0.3s; position: relative; display: flex; flex-direction: column; } .plan-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 10px 30px rgba(0, 243, 255, 0.1); } .plan-card.featured { border-color: var(--primary); background: linear-gradient(180deg, rgba(0, 243, 255, 0.05) 0%, rgba(0,0,0,0) 100%); } .plan-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #000; font-size: 10px; font-weight: bold; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; } .plan-price { font-size: 32px; font-weight: bold; color: white; margin: 15px 0; font-family: 'Rajdhani'; } .plan-price small { font-size: 14px; color: #666; font-weight: normal; } .plan-features { list-style: none; padding: 0; margin: 20px 0; flex: 1; } .plan-features li { font-size: 12px; color: #ccc; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; } .plan-features li i { color: var(--success); } /* Modal Checkout */ .checkout-box { background: #fff; /* Fundo branco para parecer gateway de pagto */ color: #333; width: 450px; border-radius: 10px; overflow: hidden; } .checkout-header { background: #f4f4f4; padding: 20px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; } .checkout-body { padding: 30px; } .cc-input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 15px; font-size: 14px; } /* ========================================= CORREÇÃO DO SELECT (FILTRO DO DASHBOARD) ========================================= */ /* Garante que o texto do select selecionado seja branco */ #dash-period { color: white !important; background-color: transparent; /* Ou a cor de fundo que preferir */ } /* Pinta o fundo das opções de cinza escuro para não ficar branco no branco */ #dash-period option { background-color: #1a1a1a; color: white; padding: 10px; } /* Regra Global: Aplica em todos os selects do sistema para evitar esse erro em outros lugares */ select option { background-color: #1a1a1a; color: white; } /* ========================================= ALERTA DE CONTAS (PISCA-PISCA) ========================================= */ @keyframes blink-alert { 0% { border-color: #ff7675; box-shadow: 0 0 0 transparent; } 50% { border-color: #ffeaa7; box-shadow: 0 0 20px #ffeaa7; transform: scale(1.02); } 100% { border-color: #ff7675; box-shadow: 0 0 0 transparent; } } .blink-warning { animation: blink-alert 1.5s infinite ease-in-out; border: 2px solid #ffeaa7 !important; /* Força a borda amarela */ } /* --- STORE BUILDER (EDITOR DA LOJA) --- */ .store-preview-card { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid #333; background: #000; cursor: pointer; } .store-preview-card:hover .edit-overlay { opacity: 1; } .edit-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: 0.3s; } .edit-btn-circle { width: 40px; height: 40px; border-radius: 50%; background: white; color: black; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } /* Color Picker Customizado */ input[type="color"] { appearance: none; border: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; padding: 0; margin: 0; cursor: pointer; } input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: none; } /* ESTILO PREMIUM PARA ASSINATURA */ .sub-hero { background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(0,0,0,0) 100%); border: 1px solid rgba(124, 58, 237, 0.3); border-radius: 16px; padding: 30px; position: relative; overflow: hidden; margin-bottom: 30px; } .sub-hero::before { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: var(--primary); filter: blur(80px); opacity: 0.3; pointer-events: none; } .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; } .plan-card { background: #141416; border: 1px solid #333; border-radius: 16px; padding: 30px; display: flex; flex-direction: column; position: relative; transition: 0.3s; } .plan-card.pro { border: 1px solid var(--primary); background: linear-gradient(180deg, rgba(20, 20, 22, 1) 0%, rgba(124, 58, 237, 0.05) 100%); box-shadow: 0 0 30px rgba(124, 58, 237, 0.1); } .plan-card:hover { transform: translateY(-5px); } .plan-card.pro:hover { box-shadow: 0 0 40px rgba(124, 58, 237, 0.2); border-color: #a78bfa; } .plan-price { font-family: 'Rajdhani', sans-serif; font-size: 42px; font-weight: 700; color: white; margin: 10px 0; } .plan-price small { font-size: 14px; color: #888; font-weight: 400; } .feature-list { list-style: none; padding: 0; margin: 20px 0; flex: 1; } .feature-list li { margin-bottom: 12px; color: #ccc; font-size: 14px; display: flex; gap: 10px; align-items: center; } .feature-list li i { color: var(--success); } .badge-current { background: rgba(255,255,255,0.1); color: white; padding: 5px 12px; border-radius: 20px; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; } /* Barra de Progresso Neon */ .limit-bar-bg { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; margin-top: 15px; } .limit-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); width: 0%; transition: width 1s ease; border-radius: 10px; } /* ========================================= */ /* 📱 MODO MOBILE (Telas menores que 768px) */ /* ========================================= */ @media (max-width: 768px) { /* 1. Ajuste Geral */ body { overflow-x: hidden; /* Evita rolagem lateral indesejada */ } /* 2. Sidebar (Menu Lateral) - Esconde por padrão */ #sidebar { position: fixed; left: -100%; /* Joga para fora da tela */ top: 0; height: 100vh; width: 80%; /* Ocupa 80% da tela */ z-index: 9999; transition: 0.3s; box-shadow: 10px 0 20px rgba(0,0,0,0.5); } #sidebar.mobile-active { left: 0; /* Traz de volta quando clica */ } /* 3. Conteúdo Principal - Ocupa tudo */ #main-content { margin-left: 0 !important; width: 100% !important; padding: 15px; } /* 4. Grids (Transforma tudo em 1 coluna) */ .grid-2, .grid-3, .grid-4, .dashboard-grid, .lp-plans-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; width: 100%; margin-top: 40px; } /* 5. Tabelas (Permite rolar para o lado com o dedo) */ .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { min-width: 600px; /* Força a tabela a ter tamanho para rolar */ } /* 6. Modais (Janelas Pop-up) */ .modal-box, .checkout-box { width: 95% !important; /* Ocupa a tela toda */ margin: 10px auto; max-height: 90vh; overflow-y: auto; /* Barra de rolagem interna se for muito grande */ } /* 7. Landing Page Cards */ .lp-plan-card { min-width: 100%; margin-bottom: 20px; } /* 8. Botão do Menu (Hambúrguer) - Aparece só no celular */ #mobile-menu-btn { display: block !important; } /* 9. Ajuste de Fontes */ h1 { font-size: 24px !important; } h2 { font-size: 20px !important; } .val { font-size: 28px !important; } /* Números do dashboard */ /* 10. PDV (Vendas) */ #view-loja > div { flex-direction: column; /* Coloca vitrine em cima e carrinho embaixo */ } #vitrine { max-height: 300px; /* Limita altura da vitrine no celular */ } } /* ========================================= */ /* 🚀 LANDING PAGE MAGNÍFICA (NOVO CSS) */ /* ========================================= */ /* Navegação */ .lp-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; position: absolute; top: 0; width: 100%; z-index: 10; } .lp-brand { font-size: 24px; font-weight: 800; color: white; letter-spacing: -1px; } .lp-brand span { color: var(--primary); } /* Hero Section */ .lp-hero-section { min-height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 100px 20px; position: relative; overflow: hidden; } .lp-hero-content { z-index: 2; max-width: 800px; } .lp-badge { background: rgba(124, 58, 237, 0.1); color: var(--primary); border: 1px solid rgba(124, 58, 237, 0.3); padding: 5px 15px; border-radius: 50px; font-size: 12px; font-weight: 700; letter-spacing: 1px; margin-bottom: 20px; display: inline-block; } .lp-hero-section h1 { font-size: 60px; line-height: 1.1; margin-bottom: 20px; color: white; font-family: 'Rajdhani', sans-serif; } .text-gradient { background: linear-gradient(90deg, #fff, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .lp-hero-section p { font-size: 18px; color: #a1a1aa; margin-bottom: 40px; } .lp-hero-btns { display: flex; gap: 15px; justify-content: center; margin-bottom: 60px; } .btn-lg { padding: 15px 30px; font-size: 16px; border-radius: 50px; } .btn-glow { box-shadow: 0 0 20px rgba(124, 58, 237, 0.5); } /* Glow Effect Background */ .lp-glow-effect { position: absolute; width: 600px; height: 600px; background: var(--primary); filter: blur(150px); opacity: 0.15; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; } /* Stats */ .lp-stats { display: flex; justify-content: center; gap: 50px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; } .stat-item b { display: block; font-size: 24px; color: white; } .stat-item small { color: #666; font-size: 12px; text-transform: uppercase; } /* Features */ .lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; padding: 50px 10%; background: #0f0f11; } .feature-card { background: rgba(255,255,255,0.02); padding: 30px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); transition: 0.3s; } .feature-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.04); } .f-icon { width: 50px; height: 50px; background: rgba(124, 58, 237, 0.1); color: var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; } .feature-card h3 { color: white; margin-bottom: 10px; font-family: 'Rajdhani'; } .feature-card p { color: #888; font-size: 14px; line-height: 1.6; } /* Plans Section */ .lp-plans-section { padding: 80px 20px; text-align: center; } .section-header h2 { font-size: 40px; color: white; margin-bottom: 10px; font-family: 'Rajdhani'; } .section-header p { color: #888; margin-bottom: 30px; } .cycle-toggle { background: #18181b; padding: 5px; border-radius: 30px; display: inline-flex; margin-bottom: 50px; border: 1px solid #333; } .toggle-btn { padding: 10px 25px; border-radius: 25px; background: transparent; color: #888; border: none; cursor: pointer; font-weight: 600; transition: 0.3s; } .toggle-btn.active { background: var(--primary); color: white; } /* FORÇA O BOTÃO DO PLANO A SER CLICÁVEL */ .lp-plan-card button { position: relative; z-index: 100 !important; /* Fica na frente de tudo */ cursor: pointer !important; pointer-events: auto !important; /* Garante que aceita clique */ } /* Garante que o container não seja coberto pelo Hero */ .lp-plans-section { position: relative; z-index: 10; } /* --- CORREÇÃO DE LAYOUT DESKTOP (FORÇA BRUTA) --- */ /* 1. O Container Principal TEM que ser Flex */ #app-wrapper { display: flex !important; /* Obriga a ficar lado a lado */ flex-direction: row !important; /* Direção horizontal */ width: 100% !important; height: 100vh !important; min-width: 0 !important; overflow: hidden !important; /* Impede rolagem dupla */ background-color: #000; } /* 2. O Menu Lateral */ #sidebar { width: 260px !important; /* Largura fixa */ min-width: 260px !important; height: 100% !important; overflow-y: auto; border-right: 1px solid #333; background: #111; display: flex !important; flex-direction: column; z-index: 100; } /* 3. O Conteúdo Principal */ #main-content { flex: 1 !important; /* Ocupa todo o espaço que sobra */ width: auto !important; min-width: 0 !important; height: 100% !important; overflow-y: auto !important; /* Rolagem interna */ padding: 20px; position: relative; background-color: #000; } /* 4. Ajuste para Telas Pequenas (Celular) */ @media (max-width: 768px) { #app-wrapper { flex-direction: column !important; /* No celular fica um em cima do outro */ } #sidebar { position: fixed; left: -100%; /* Esconde o menu */ top: 0; bottom: 0; transition: 0.3s; width: 80% !important; } #sidebar.mobile-active { left: 0 !important; /* Mostra o menu quando ativo */ } #main-content { width: 100% !important; padding: 15px; } } /* 5. Correção das "Views" (Telas) */ .view-section, .view { width: 100%; max-width: none; margin: 0; display: none; /* JS controla quem aparece */ } .view-section.active, .view.active { display: block !important; animation: fadeIn 0.3s ease-in-out; } @media (min-width: 769px) { #main-content .view > div[style*="max-width"], #main-content .view-section > div[style*="max-width"] { width: 100% !important; max-width: none !important; } #main-content .view > div[style*="margin:0 auto"], #main-content .view > div[style*="margin: 0 auto"], #main-content .view > div[style*="margin: 40px auto"], #main-content .view-section > div[style*="margin:0 auto"], #main-content .view-section > div[style*="margin: 0 auto"], #main-content .view-section > div[style*="margin: 40px auto"] { margin-left: 0 !important; margin-right: 0 !important; } /* Dash zoom-safe layout */ #tab-visao, #tab-visao * { min-width: 0; } #tab-visao [style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr) !important; align-items: stretch !important; } #tab-visao [style*="max-height:400px"] { max-height: min(58vh, 520px) !important; } #tab-visao [style*="height:300px"] { min-height: 260px !important; } #salesChart { width: 100% !important; max-width: 100% !important; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* --- CORREÇÃO VISUAL DA LANDING PAGE (TELA DE PLANOS) --- */ /* 1. Garante que a seção ocupe a largura toda */ .lp-hero-section, .lp-plans-section { width: 100% !important; max-width: 100vw !important; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* 2. Expande o conteúdo do texto */ .lp-hero-content { width: 100%; max-width: 1200px; /* Deixa largo, mas centralizado */ margin: 0 auto; text-align: center; } /* 3. Arruma a GRID dos planos (O mais importante) */ .lp-plans-grid { display: flex !important; flex-wrap: wrap !important; /* Permite quebrar linha se não couber */ justify-content: center !important; /* Centraliza os cards */ gap: 30px; /* Espaço entre eles */ width: 100%; max-width: 1200px; /* Limite para telas gigantes */ margin-top: 40px; } /* 4. Arruma o CARD individual do plano */ .lp-plan-card { flex: 1; /* Faz todos terem o mesmo tamanho */ min-width: 300px; /* Tamanho mínimo para não ficar "tripa" */ max-width: 380px; /* Tamanho máximo para não ficar gigante */ display: flex; flex-direction: column; justify-content: space-between; } /* 5. Ajuste para Celular (Ficar um embaixo do outro) */ @media (max-width: 768px) { .lp-plans-grid { flex-direction: column; align-items: center; } .lp-plan-card { width: 100%; max-width: 100%; } } /* --- MODAL PANORÂMICO (SEM SCROLL) --- */ #checkout-flow { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.95); z-index: 99999; display: none; align-items: center; justify-content: center; padding: 10px; } .chk-modal-card { background-color: #0f0f10; width: 100%; max-width: 850px; /* BEM LARGO para caber tudo */ border: 1px solid #333; border-radius: 12px; box-shadow: 0 0 50px rgba(0,0,0,0.8); padding: 30px; position: relative; /* Removemos overflow-y auto para evitar scroll, a menos que a tela seja minúscula */ } /* Header Compacto */ .chk-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222; padding-bottom: 15px; margin-bottom: 20px; } /* GRIDS INTELIGENTES (Para colocar 3 ou 4 coisas na mesma linha) */ .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 15px; } .row-address { display: grid; grid-template-columns: 120px 1fr 80px; /* CEP pequeno, Rua grande, Num pequeno */ gap: 15px; margin-bottom: 15px; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; } /* Inputs Compactos */ .form-group { margin-bottom: 0; position: relative; } /* Tira margem do grupo, controla no grid */ .form-label { display: block; color: #888; font-size: 11px; /* Fonte menor */ font-weight: 700; text-transform: uppercase; margin-bottom: 5px; } .form-input { width: 100%; height: 42px; /* Altura compacta (Padrão Desktop) */ padding: 0 12px; background-color: #18181b; border: 1px solid #333; border-radius: 6px; color: white; font-size: 14px; outline: none; transition: 0.2s; } .form-input:focus { border-color: #00f3ff; background-color: #222; } .form-input[readonly] { background-color: #111; color: #555; } /* Área de Endereço sutil */ .address-area { border-top: 1px dashed #333; padding-top: 15px; margin-top: 5px; } /* Botões no final */ .chk-footer { margin-top: 25px; display: flex; justify-content: flex-end; gap: 15px; border-top: 1px solid #222; padding-top: 20px; } /* Responsivo para celular (Aí sim rola) */ @media (max-width: 768px) { .chk-modal-card { overflow-y: auto; max-height: 95vh; } .row-3, .row-address, .row-2 { grid-template-columns: 1fr; gap: 10px; } } /* Estilo do Switch (Botão de Ligar/Desligar) */ .switch { position: relative; display: inline-block; width: 40px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { transform: translateX(20px); } /* --- CORREÇÃO DEFINITIVA DA IMPRESSÃO --- */ /* --- ESTILOS DE IMPRESSÃO (CORREÇÃO DE PÁGINA BRANCA) --- */ /* --- CSS DE IMPRESSÃO (CORREÇÃO FINAL) --- */ /* ============================================================ */ /* 🖨️ CSS DE IMPRESSÃO PROFISSIONAL (CORREÇÃO FINAL) */ /* ============================================================ */ .print-only { display: none !important; } @media print { /* 1. Esconde TODA a interface do sistema */ body > *:not(#print-area) { display: none !important; } /* 2. Configura a folha A4 limpa */ @page { size: A4; margin: 10mm; /* Margem de 1cm */ } html, body { width: 100%; height: auto; margin: 0 !important; padding: 0 !important; background: white !important; color: black !important; overflow: visible !important; } /* 3. Traz o Relatório para frente e força visibilidade */ #print-area { display: block !important; position: relative !important; /* Relative para respeitar o fluxo da página */ width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; background: white !important; color: black !important; font-family: 'Inter', sans-serif !important; z-index: 9999; } /* 4. Estilos Internos do Relatório (Design Bonito) */ .report-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #000; padding-bottom: 15px; margin-bottom: 25px; } .report-header h1 { margin: 0; font-size: 24px; text-transform: uppercase; color: #000; } .report-header p { margin: 5px 0 0 0; color: #666; font-size: 12px; } .kpi-container { display: flex; gap: 15px; margin-bottom: 30px; } .kpi-card { flex: 1; background: #f4f4f4 !important; /* Cinza claro na impressão */ border: 1px solid #ddd; padding: 15px; border-radius: 8px; text-align: center; -webkit-print-color-adjust: exact; /* Força cor de fundo no Chrome */ } .kpi-card small { display: block; font-size: 10px; color: #666; margin-bottom: 5px; text-transform: uppercase; } .kpi-card strong { display: block; font-size: 20px; color: #000; font-weight: 800; } .columns-container { display: flex; gap: 30px; } .col-half { flex: 1; } .col-half h3 { font-size: 14px; text-transform: uppercase; border-bottom: 1px solid #000; margin-bottom: 10px; padding-bottom: 5px; color: #000; } table { width: 100%; border-collapse: collapse; font-size: 11px; } th { text-align: left; border-bottom: 1px solid #000; padding: 5px 0; color: #444; } td { border-bottom: 1px solid #eee; padding: 6px 0; color: #000; } .text-right { text-align: right; } .report-footer { position: fixed; bottom: 0; width: 100%; text-align: center; font-size: 10px; color: #888; border-top: 1px solid #eee; padding-top: 10px; } } /* Barras de Progresso do Dashboard */ .pay-row { margin-bottom: 12px; } .pay-info { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; } .pay-track { background: #f0f2f5; height: 8px; border-radius: 4px; overflow: hidden; } .pay-fill { height: 100%; background: #2c3e50; border-radius: 4px; } /* --- BOTÃO DE AJUDA DISCRETO --- */ #btn-ajuda { position: fixed; bottom: 15px; right: 15px; width: 40px; /* Tamanho pequeno */ height: 40px; border-radius: 50%; background: #333; /* Fundo escuro neutro */ color: #888; /* Ícone cinza */ display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; opacity: 0.5; /* Meio transparente para não incomodar */ transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } /* Quando passa o mouse */ #btn-ajuda:hover { opacity: 1; /* Fica visível */ background: #25D366; /* Fica verde WhatsApp */ color: white; /* Ícone branco */ transform: scale(1.1); /* Cresce um pouquinho */ box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4); }/* --- WIDGET DE CHAT PROFISSIONAL --- */ #chat-widget { position: fixed; bottom: 20px; right: 20px; z-index: 10000; font-family: 'Inter', sans-serif; } /* Botão Redondo */ #chat-btn { width: 55px; height: 55px; background: var(--primary); /* Sua cor principal */ color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.4); transition: transform 0.2s; } #chat-btn:hover { transform: scale(1.1); } .notification-dot { position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: #ff4757; border-radius: 50%; border: 2px solid #1a1a1a; } /* Janela do Chat */ #chat-window { display: none; /* Começa escondido */ position: absolute; bottom: 70px; right: 0; width: 320px; height: 450px; background: #1e1e1e; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); border: 1px solid #333; overflow: hidden; flex-direction: column; animation: slideUp 0.3s ease; } @keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } /* Header */ .chat-header { background: #252525; padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; color: white; } .avatar-support { width: 35px; height: 35px; background: var(--primary); color: black; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .close-chat { cursor: pointer; color: #888; } .close-chat:hover { color: white; } /* Corpo das Mensagens */ #chat-body { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background-color: rgba(0, 0, 0, 0.9) !important; /* Ajuste o 0.5 para mais ou menos transparência */ } /* Bolhas de Mensagem */ .msg-row { display: flex; width: 100%; } .msg-row.user { justify-content: flex-end; } /* Usuário na direita */ .msg-row.admin { justify-content: flex-start; } /* Suporte na esquerda */ .msg-bubble { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.4; word-wrap: break-word; } .msg-row.user .msg-bubble { background: var(--primary); color: black; border-bottom-right-radius: 2px; } .msg-row.admin .msg-bubble { background: #333; color: white; border-bottom-left-radius: 2px; } .chat-date { text-align: center; font-size: 10px; color: #555; margin: 10px 0; } /* Footer (Input) */ .chat-footer { padding: 10px; background: #252525; border-top: 1px solid #333; display: flex; gap: 10px; } #chat-input { flex: 1; background: #111; border: 1px solid #333; padding: 10px; border-radius: 20px; color: white; outline: none; font-size: 13px; } .chat-footer button { background: transparent; border: none; color: var(--primary); font-size: 18px; cursor: pointer; } .grid-fiado { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; } .card-devedor { background: var(--bg-card); /* Fundo inteligente */ border: var(--border); border-radius: 12px; padding: 0; overflow: hidden; transition: all 0.3s ease; color: var(--text-main); /* Cor do texto inteligente */ } .card-devedor:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .devedor-header { background: var(--bg-input); /* Fundo inteligente mais escuro/claro */ padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: var(--border); } .fiado-progress-bg { width: 100%; height: 6px; background: var(--bg-input); /* Fundo inteligente da barrinha */ border-radius: 10px; margin: 15px 0 5px 0; overflow: hidden; } .devedor-body { padding: 20px; } .fiado-status-tag { font-size: 10px; padding: 3px 8px; border-radius: 20px; font-weight: bold; text-transform: uppercase; } .fiado-progress-fill { height: 100%; transition: width 0.5s ease; } .btn-fiado-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; } .btn-action-fiado { padding: 10px; border-radius: 8px; border: 1px solid #444; background: transparent; color: white; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: 0.2s; } .btn-action-fiado:hover { background: #333; } .btn-pay { background: var(--primary) !important; color: black !important; border: none !important; font-weight: bold; } /* --- DROPDOWN PERSONALIZADO DE CLIENTES --- */ .custom-dropdown { position: absolute; top: 100%; /* Fica logo abaixo do input */ left: 0; width: 100%; max-height: 250px; background: #18181b; border: 1px solid #333; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); overflow-y: auto; z-index: 1000; /* Fica na frente de tudo */ display: none; /* Escondido por padrão */ } .dropdown-item { padding: 12px; border-bottom: 1px solid #222; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; } .dropdown-item:hover { background: #27272a; border-left: 3px solid #00f3ff; /* Detalhe azul ao passar mouse */ } .dropdown-item .cli-info { display: flex; flex-direction: column; } .dropdown-item .cli-name { color: white; font-weight: bold; font-size: 13px; } .dropdown-item .cli-meta { color: #888; font-size: 11px; margin-top: 2px; } /* Barra de rolagem escondida */ .custom-dropdown::-webkit-scrollbar { width: 0 !important; height: 0 !important; } .custom-dropdown::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 0; } /* --- LISTA DE CLIENTES PERSONALIZADA (DROPDOWN) --- */ .custom-dropdown { position: absolute; top: 105%; /* Fica logo abaixo do campo */ left: 0; width: 100%; max-height: 250px; /* Altura máxima com rolagem */ background: #18181b; border: 1px solid #333; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); overflow-y: auto; z-index: 10000; /* Fica na frente de tudo */ display: none; /* Começa escondido */ } /* Item da lista */ .dropdown-item { padding: 12px 15px; border-bottom: 1px solid #222; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; } /* Efeito ao passar o mouse */ .dropdown-item:hover { background: #27272a; border-left: 4px solid #00f3ff; /* Detalhe Neon */ padding-left: 11px; /* Compensa a borda para não pular */ } /* Texto do Nome */ .dropdown-item .cli-name { color: white; font-weight: bold; font-size: 13px; display: block; } /* Texto Secundário (Tel/Cidade) */ .dropdown-item .cli-meta { color: #888; font-size: 11px; margin-top: 2px; display: block; } /* Barra de rolagem escondida */ .custom-dropdown::-webkit-scrollbar { width: 0 !important; height: 0 !important; } .custom-dropdown::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 0; } /* --- BARRA DE NAVEGAÇÃO MOBILE (AJUSTADA PRO IPHONE) --- */ .mobile-nav-bar { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; /* AQUI ESTÁ O SEGREDO DO IPHONE: */ height: calc(65px + env(safe-area-inset-bottom)); /* Altura + Área Segura */ padding-bottom: env(safe-area-inset-bottom); /* Empurra os ícones pra cima da barra do iPhone */ background: rgba(24, 24, 27, 0.95); backdrop-filter: blur(15px); /* Vidro mais forte pro iOS */ -webkit-backdrop-filter: blur(15px); /* Compatibilidade Safari */ border-top: 1px solid rgba(255,255,255,0.05); z-index: 9999; /* Fica na frente de tudo, mas atrás do modal */ justify-content: space-around; align-items: center; /* Centraliza verticalmente */ box-shadow: 0 -10px 30px rgba(0,0,0,0.5); } /* Ajuste para o botão central não ficar torto no iPhone */ .nav-center-wrapper { position: relative; top: -25px; margin-bottom: env(safe-area-inset-bottom); /* Compensa a subida */ } /* Ajuste do corpo para o conteúdo não ficar escondido atrás da barra maior */ body { padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important; } /* --- CONTAINER GERAL (GAVETA) --- */ #chat-slide-wrapper { position: fixed; bottom: 100px; /* Altura da gaveta */ right: 0; z-index: 9999; display: flex; align-items: center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Quando ABERTO (classe 'closed' removida), ele fica na posição 0 */ transform: translateX(0); } /* --- ESTADO FECHADO (ESCONDIDO) --- */ #chat-slide-wrapper.closed { /* Empurra o botão 100% para fora da tela */ transform: translateX(100%); } /* --- A SETA (GATILHO) --- */ .chat-trigger-arrow { position: absolute; left: -35px; /* Fica pendurada para fora da gaveta */ width: 35px; height: 50px; background: #333; /* Cor da aba */ border-radius: 12px 0 0 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #00f3ff; box-shadow: -2px 2px 5px rgba(0,0,0,0.3); } /* Animação da setinha girando */ #chat-slide-wrapper:not(.closed) .chat-trigger-arrow i { transform: rotate(180deg); color: #fff; } /* --- AJUSTE DO SEU BOTÃO (Para ficar alinhado) --- */ #chat-inner-content { background: transparent; padding-left: 10px; padding-right: 15px; /* Margem da borda da tela */ } /* Garante que seu botão original fique bonito na gaveta */ #chat-btn { width: 60px; height: 60px; background: linear-gradient(135deg, #00f3ff, #0099ff); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #000; cursor: pointer; box-shadow: 0 5px 15px rgba(0, 243, 255, 0.4); } /* --- POSIÇÃO DA JANELA (Para não quebrar quando abrir) --- */ #chat-window { position: fixed; /* Fixa na tela, independente da gaveta */ bottom: 90px; right: 80px; /* Aparece ao lado do botão */ width: 300px; height: 400px; background: #18181b; border: 1px solid #333; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); display: none; /* Começa fechado */ flex-direction: column; z-index: 10000; } /* Ajuste Mobile para a Janela */ @media (max-width: 768px) { #chat-window { right: 0; left: 0; bottom: 0; top: 0; width: 100%; height: 100%; border-radius: 0; } }/* Container da Vitrine (Grade Segura) */ #vitrine { display:grid; /* Cards pequenos: min 110px e max automático */ grid-template-columns:auto-fill, minmax(110px, 1fr); gap: 10px; /* Espaço entre eles (evita cobrir) */ padding: 10px; padding-bottom: 60px; align-content: start; /* Começa do topo */ } /* O Card (Estilo Slot Compacto) */ .mini-card { position: relative; width: 100%; aspect-ratio: 1 / 1.2; /* Levemente retangular vertical */ background: #101012; border: 1px solid #333; border-radius: 8px; overflow: hidden; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; } /* Hover: Brilho Neon */ .mini-card:hover { border-color: #00f3ff; box-shadow: 0 0 10px rgba(0, 243, 255, 0.3); transform: translateY(-2px); z-index: 10; /* Garante que o hover fique por cima */ } /* Imagem de Fundo */ .mini-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; } .mini-card:hover img { transform: scale(1.1); /* Zoom suave */ } /* Se não tiver imagem */ .no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #444; font-size: 24px; } /* Informações (Rodapé do card) */ .mini-info { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.4), transparent); padding: 8px 5px 5px 5px; display: flex; flex-direction: column; pointer-events: none; /* Deixa clicar na imagem através do texto */ } .mini-name { font-size: 10px; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; margin-bottom: 2px; } .mini-price { font-size: 12px; color: #00f3ff; font-weight: 800; text-shadow: 0 0 5px rgba(0, 243, 255, 0.5); } /* Badge de Estoque (Pequenininho no topo) */ .mini-stock { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.7); color: #fff; font-size: 9px; padding: 2px 5px; border-radius: 3px; border: 1px solid #444; z-index: 2; } /* Container para alinhar os botões */ .action-buttons { display: flex; gap: 200px; /* Espaço entre os botões */ justify-content: flex-end; /* Alinha à direita (opcional) */ } /* Estilo Base do Botão */ .btn-action { border: none; width: 35px; height: 35px; border-radius: 8px; /* Cantos arredondados suaves */ cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.3s ease; backdrop-filter: blur(4px); } /* Botão Editar (Dourado/Royal) */ .btn-edit { background: rgba(212, 175, 55, 0.15); /* Fundo Dourado Transparente */ color: #D4AF37; /* Ícone Dourado */ border: 1px solid rgba(212, 175, 55, 0.3); } .btn-edit:hover { background: #D4AF37; /* Fundo Dourado Sólido */ color: #000; /* Ícone Preto para contraste */ transform: translateY(-2px); /* Leve subida */ box-shadow: 0 4px 10px rgba(212, 175, 55, 0.4); /* Brilho */ } /* Botão Excluir (Vermelho Sofisticado) */ .btn-del { background: rgba(255, 68, 68, 0.15); /* Fundo Vermelho Transparente */ color: #ff4444; /* Ícone Vermelho */ border: 1px solid rgba(255, 68, 68, 0.3); } .btn-del:hover { background: #ff4444; /* Fundo Vermelho Sólido */ color: #fff; /* Ícone Branco */ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255, 68, 68, 0.4); } .btn-action { background: transparent; border: 1px solid #333; /* Borda cinza escura */ color: #888; width: 32px; height: 32px; border-radius: 50%; /* Botão redondo */ cursor: pointer; transition: 0.2s; } .btn-edit:hover { border-color: #ff7300; color: #fffb00; background: rgba(255, 123, 0, 0.432); } .btn-del:hover { border-color: #ff7300; color: #ff0000; background: rgba(255, 123, 0, 0.432); } .img-scr{ width: 50px; height: 50px; border-radius: 100%; overflow: hidden; border: 1px solid #4b4b4b; box-shadow: 0 2px 5px rgba(0,0,0,0.5); } .product-name { font-family: 'Kasa Green'; text-transform: uppercase; font-size: 15px; color: #a7a6a6; letter-spacing: 0.5px; } .product-category { font-family: 'Kasa Green'; text-transform: uppercase; font-size: 15px; color: #a7a6a6; text-transform: uppercase; } .product-variations{ font-family: 'Kasa Green'; text-transform: uppercase; font-size: 15px; color: #a7a6a6; text-transform: uppercase; } .product-preco{ font-family: 'Kasa Green'; text-transform: uppercase; font-size: 15px; color: #a7a6a6; text-transform: uppercase; } .product-desconto{ font-family: 'Kasa Green'; text-transform: uppercase; font-size: 15px; color: #a7a6a6; text-transform: uppercase; } table tr td { vertical-align: middle !important; /* Alinha tudo ao centro verticalmente */ padding: 15px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Linha divisória sutil */ color: #e0e0e0; } .client-name{ font-family: 'Kasa Green'; text-transform: uppercase; font-size: 15px; color: #a7a6a6; text-transform: uppercase; } .client-limite{ font-family: 'Kasa Green'; text-transform: uppercase; font-size: 15px; color: #639702; text-transform: uppercase; } .client-cidade{ font-family: 'Kasa Green'; text-transform: uppercase; font-size: 15px; color: #a7a6a6; text-transform: uppercase; } .client-tel{ font-family: 'Kasa Green'; text-transform: uppercase; font-size: 15px; color: #a7a6a6; text-transform: uppercase; } /* Container para alinhar os botões */ .card-box { background: #1e1e1e; border: 1px solid #333; border-radius: 12px; padding: 0; /* Tiramos o padding pra fazer o header colorido */ overflow: hidden; transition: all 0.3s ease; } .card-box:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }/* --- CORREÇÃO DE PDF (FORÇA TEXTO PRETO) --- */ .pdf-mode { background-color: #ffffff !important; color: #000000 !important; } .pdf-mode * { color: #000000 !important; /* Força TUDO a ficar preto */ border-color: #000000 !important; /* Bordas pretas */ } .pdf-mode table, .pdf-mode th, .pdf-mode td { border: 1px solid #000 !important; /* Grades da tabela bem visíveis */ color: #000000 !important; } .pdf-mode h1, .pdf-mode h2, .pdf-mode h3, .pdf-mode strong { color: #000000 !important; font-weight: 900 !important; /* Deixa o negrito bem forte */ } /* Remove sombras e brilhos que atrapalham a leitura */ .pdf-mode .card, .pdf-mode div { box-shadow: none !important; background: #fff !important; }/* --- CORREÇÃO VISUAL: CAIXAS DE TEXTO SÓLIDAS --- */ /* 1. Aplica em TODOS os inputs dentro do modal de orçamento */ #modal-orcamento input, #modal-orcamento select, #modal-edit-orcamento input, #modal-edit-orcamento select { background-color: #27272a !important; /* Cinza Escuro SÓLIDO (Tapa o fundo) */ color: #ffffff !important; /* Texto Branco */ border: 1px solid #444 !important; /* Borda visível */ opacity: 1 !important; /* Sem transparência */ z-index: 100 !important; /* Força ficar na frente */ position: relative !important; /* Necessário para o z-index funcionar */ box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Sombra leve para destacar do fundo */ } /* 2. Garante que os Labels (títulos) não fiquem escondidos */ #modal-orcamento label, #modal-edit-orcamento label { position: relative !important; z-index: 101 !important; /* Fica acima até do input */ background: transparent !important; text-shadow: 0 1px 2px black; /* Ajuda a ler se o fundo for confuso */ } /* 3. Correção específica para a linha de adicionar itens (fundo mais escuro) */ .mini-form input { background-color: #18181b !important; /* Preto quase puro para diferenciar */ } /* --- CORREÇÃO DE MODAIS SOBREPOSTOS --- */ /* O Modal de Detalhes tem z-index: 999999. Os modais abaixo precisam ser MAIORES que isso. */ #modal-bill, /* Nova Conta */ #modal-mov, /* Nova Movimentação */ #modal-pay-fiado, /* Pagar Fiado */ #modal-recibo-share,/* Compartilhar Recibo */ #modal-print-select,/* Escolher Impressão */ #modal-details { /* Detalhes do Pedido */ z-index: 1000001 !important; /* 1 milhão e 1 (Vence o anterior) */ } /* Opcional: Escurecer um pouco mais o fundo do segundo modal para dar destaque */ #modal-bill, #modal-mov, #modal-pay-fiado { background: rgba(0,0,0,0.95) !important; } .input-lg { border-radius: 8px; padding: 10px; font-size: 14px; transition: all 0.2s; } .input-lg:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.1); /* Sua cor primária */ outline: none; } .preco-final { font-family: 'Kasa Green'; text-transform: uppercase; font-size: 18px; color: #00f3ff; font-weight: 800; text-shadow: 0 0 5px rgba(0, 243, 255, 0.5); } .container-preco { font-family: Arial, sans-serif; } .preco-antigo { line-height: 1.2; font-size: 12px; /* Tamanho pequeno */ text-decoration: line-through; /* Riscado */ color: #888; /* Cor cinza */ margin-right: 10px; } .preco-promocional { line-height: 2.2; font-size: 15px; /* Tamanho grande */ color: #e67e22; /* Cor de destaque (laranja, por exemplo) */ font-weight: bold; /* Negrito */ } .btn-actions { background: transparent; border: 1px solid #333; /* Borda cinza escura */ color: #888; width: 32px; height: 32px; border-radius: 50%; /* Botão redondo */ cursor: pointer; transition: 0.2s; } .btn-actionss { background: transparent; border: 1px solid #333; /* Borda cinza escura */ color: #888; width: 25px; height: 25px; border-radius: 50%; /* Botão redondo */ cursor: pointer; transition: 0.2s; } .btn-delete:hover { background: #ff4444; /* Fundo Vermelho Sólido */ color: #fff; /* Ícone Branco */ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255, 68, 68, 0.4); text-align: right } .btn-whatsapp:hover { background: #09ff00; /* Fundo Verde Sólido */ color: #fff; /* Ícone Branco */ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(60, 255, 0, 0.4); } .btn-approve:hover { background: #09ff00; /* Fundo Verde Sólido */ color: #fff; /* Ícone Branco */ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(60, 255, 0, 0.4); } .btn-actioo{ background:#222; border:0px solid #f39c12; color:#f39c12; padding:10px 80px; border-radius:6px; cursor:pointer; font-weight:bold; justify-self: center; justify-content: center !important; /* Centraliza horizontal */ align-items: center !important; /* Centraliza vertical */ } .container-botoes { display: flex; /* Coloca os elementos lado a lado */ justify-content: center; /* Centraliza horizontalmente */ gap: 15px; /* Cria espaço entre os dois botões */ width: 100%; /* Garante que o container ocupe a largura total */ padding: 20px; } .btn-actio { background:#222; border:1px solid #f39c12; color:#f39c12; padding:10px; border-radius:6px; cursor:pointer; font-weight:bold; } .btn-editar:hover{ background: #ffa600; /* Fundo Vermelho Sólido */ color: #fff; /* Ícone Branco */ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255, 166, 0, 0.4); } .btn-deletar:hover{ background: #e96262; /* Fundo Vermelho Sólido */ color: #fff; /* Ícone Branco */ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255, 0, 0, 0.4); } .btn-print:hover { background: #ffa600; /* Fundo Vermelho Sólido */ color: #fff; /* Ícone Branco */ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255, 166, 0, 0.4); } /* Container da barra (o fundo cinza) */ .progress-h-bg { width: 100%; max-width: 310px; /* Limita o tamanho para não esticar demais */ height: 8px; background-color: #eee; border-radius: 10px; overflow: hidden; margin-top: 10px; display: inline-block; vertical-align: middle; } /* O preenchimento colorido */ .progress-h-bar { height: 100%; background: linear-gradient(90deg, #3498db, #2980b9); border-radius: 10px; transition: width 0.5s ease; } /* Cor variante para status diferentes (opcional) */ .bg-sucesso { background: #2ecc71; } .bg-alerta { background: #f1c40f; } /* === MENU FLUTUANTE KANBAN === */ .kb-menu { position: absolute; background: rgba(25, 25, 25, 0.95); /* Fundo escuro quase sólido */ backdrop-filter: blur(10px); /* Desfoque atrás */ border: 1px solid #333; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); min-width: 200px; z-index: 99999; padding: 8px; animation: menuFadeIn 0.2s ease-out; transform-origin: top left; display: flex; flex-direction: column; gap: 4px; } @keyframes menuFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .kb-menu-header { font-size: 10px; text-transform: uppercase; color: #666; padding: 8px 12px; font-weight: bold; letter-spacing: 1px; } .kb-item { background: transparent; border: none; color: #e0e0e0; padding: 10px 12px; text-align: left; cursor: pointer; border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 10px; transition: all 0.2s; font-family: inherit; } .kb-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; transform: translateX(3px); /* Leve movimento para a direita */ } /* Cores específicas no Hover */ .kb-item.status-opt:hover { border-left: 2px solid var(--primary); } .kb-item.action-view:hover { background: rgba(0, 224, 84, 0.1); color: #00e054; } .kb-item.action-close:hover { background: rgba(255, 71, 87, 0.1); color: #ff4757; } .kb-separator { height: 1px; background: #333; margin: 4px 0; width: 100%; } /* --- BARRA DE NOTIFICAÇÃO PREMIUM --- */ #email-alert-bar { display: none; /* O JS ativa */ /* TRUQUE PARA COLAR NAS BORDAS (Ignora o padding do main) */ width: calc(100% + 40px); /* Compensa o padding lateral */ margin: -20px -20px 20px -20px; /* Puxa para cima e para os lados */ /* Visual */ background: linear-gradient(90deg, #8e0e00, #1f1c18); /* Degradê Preto p/ Vermelho Sangue */ border-bottom: 1px solid #ff4444; padding: 12px 30px; align-items: center; justify-content: space-between; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 100; position: relative; } /* Texto e Ícone */ #email-alert-bar .alert-content { display: flex; align-items: center; gap: 15px; color: white; font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: 0.5px; } #email-alert-bar i { color: #ff4444; font-size: 16px; animation: pulse-red 2s infinite; } /* Botão Transparente Elegante */ #btn-resend-email { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.3); padding: 6px 15px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; } #btn-resend-email:hover { background: white; color: #8e0e00; border-color: white; } @keyframes pulse-red { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .recomendado{ position:absolute; top:0; right:0; background:var(--primary); color:#000; font-size:10px; font-weight:bold; padding:4px 10px; border-bottom-left-radius:8px; border-top-right-radius:12px; } /* --- ANIMAÇÃO ULTRA 3D (EFEITO CINEMA) --- */ /* O Container precisa de perspectiva para o 3D funcionar */ #checkout-flow { perspective: 1500px; /* Dá profundidade */ overflow: hidden; /* Evita barras de rolagem durante o giro */ } /* O Fundo escuro aparece rápido */ @keyframes backdropRush { from { background: rgba(0,0,0,0); backdrop-filter: blur(0px); } to { background: rgba(0,0,0,0.9); backdrop-filter: blur(8px); } } /* A EXPLOSÃO: Vem de trás, gira e bate na tela */ @keyframes superEntrance { 0% { opacity: 0; transform: translate3d(0, 100px, -400px) rotateX(-60deg) scale(0.5); } 60% { opacity: 1; /* Passa um pouco (Overshoot) para dar impacto */ transform: translate3d(0, -20px, 0) rotateX(10deg) scale(1.05); } 80% { transform: translate3d(0, 10px, 0) rotateX(-5deg) scale(0.98); } 100% { transform: translate3d(0, 0, 0) rotateX(0deg) scale(1); } } /* Classes para o JS ativar */ .anim-backdrop-ultra { animation: backdropRush 0.4s ease-out forwards; } .anim-card-ultra { /* Mágica do movimento */ animation: superEntrance 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; transform-origin: center center; box-shadow: 0 25px 50px rgba(0,0,0,0.7) !important; /* Sombra pesada para dar altura */ } .btn-appove { background: #00e05499; border:none; padding:0 15px; border-radius:6px; cursor:pointer; color:black; } .btn-appove:hover { background: #09ff00; /* Fundo Verde Sólido */ color: #fff; /* Ícone Branco */ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(60, 255, 0, 0.4); } .btn-fechar { background: none; border:none; color: #ffbf02a1; font-size:20px; cursor:pointer; } .btn-fechar:hover { color: #fff200; /* Ícone Branco */ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(60, 255, 0, 0.4); } .btn-deel { /* Mantendo o layout base */ background: transparent; border: none; /* Ou sua borda padrão */ cursor: pointer; padding: 10px; border-radius: 8px; color: #666; /* Cor padrão do ícone (cinza) */ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Centralização */ display: flex; align-items: center; justify-content: center; } /* --- O Efeito HOVER (Vermelho + Sombra + Elevação) --- */ .btn-deel:hover { background-color: #fa4b4b; /* Fundo Vermelho */ color: #fff; /* Ícone Branco (Afeta SVG e Papel) */ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(250, 75, 75, 0.4); } .btn-deel:active { transform: translateY(0); box-shadow: none; } /* --- Estrutura da Animação --- */ .trash-animation { width: 20px; height: 20px; position: relative; display: flex; justify-content: center; } /* Partes do Ícone */ .trash-animation .lid { position: absolute; top: 0; width: 20px; height: 20px; z-index: 10; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); /* Recorta só a tampa */ transform-origin: center 25%; } .trash-animation .bin { position: absolute; top: 0; width: 20px; height: 20px; z-index: 20; /* Fica na frente do papel */ clip-path: polygon(0 35%, 100% 35%, 100% 100%, 0 100%); /* Recorta só o corpo */ transition: transform 0.3s; } .trash-animation .paper { width: 5px; height: 5px; background-color: currentColor; /* Pega a cor do texto (Cinza ou Branco) */ border-radius: 50%; position: absolute; top: -15px; left: -10px; opacity: 0; z-index: 15; /* Atrás da parede da lata */ } /* --- A MÁGICA --- */ /* 1. Tampa Abre */ .btn-deel:hover .lid { transform: rotate(-25deg) translateY(-2px); } /* 2. Papel é Arremessado */ .btn-deel:hover .paper { animation: throwTrash 0.6s cubic-bezier(0.17, 0.67, 0.63, 0.94) forwards; } /* 3. Lata "Engole" (Impacto) */ .btn-deel:hover .bin { animation: binImpact 0.4s 0.5s ease forwards; } /* --- Keyframes --- */ @keyframes throwTrash { 0% { opacity: 0; top: -15px; transform: translateX(0) scale(0.5); } 30% { opacity: 1; top: -22px; /* Arco para cima */ transform: translateX(8px) scale(1.1); } 60% { top: 2px; /* Entrando na lata */ transform: translateX(15px) scale(0.8); opacity: 1; } 100% { top: 10px; transform: translateX(15px) scale(0); /* Some */ opacity: 0; } } @keyframes binImpact { 0% { transform: scale(1); } 50% { transform: scale(1.1, 0.9); } /* Achata */ 100% { transform: scale(1); } } /* --- Estilo Base (Igual ao de excluir) --- */ .btn-eddit { background: transparent; border: none; cursor: pointer; padding: 10px; border-radius: 8px; color: #64748b; /* Cinza */ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; align-items: center; justify-content: center; overflow: visible; /* Importante para a tampa voar alto */ } /* --- HOVER: Verde Esmeralda (Contraste com o Vermelho) --- */ .btn-eddit:hover { background-color: #10b981; /* Emerald 500 */ color: #fff; /* Tudo vira branco */ transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); } .btn-eddit:active { transform: translateY(0); } /* --- Container --- */ .pen-wrapper { width: 24px; height: 24px; position: relative; display: flex; flex-direction: column; align-items: center; } /* --- Peças SVG --- */ .pen-cap { width: 20px; height: 10px; /* Metade superior */ position: absolute; top: 2px; z-index: 10; transform-origin: bottom right; /* Pivô para girar */ transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Salto elástico */ } .pen-body { width: 20px; height: 14px; /* Metade inferior */ position: absolute; top: 8px; z-index: 5; transform-origin: top center; transition: transform 0.3s ease; } .ink-splash { width: 24px; height: 24px; position: absolute; bottom: -5px; left: 0; opacity: 0; transform: scale(0); z-index: 1; } /* --- A ANIMAÇÃO (Igual à Lixeira) --- */ /* 1. Tampa Voa (Pop) */ .btn-eddit:hover .pen-cap { /* Gira e sobe, igual à tampa do lixo */ transform: rotate(-100deg) translate(5px, -15px); } /* 2. Caneta se Prepara (Tilt) */ .btn-eddit:hover .pen-body { /* Inclina para escrever e desce um pouco */ transform: rotate(25deg) translateY(4px) translateX(2px); transition-delay: 0.1s; } /* 3. Tinta Aparece (Splash) */ .btn-eddit:hover .ink-splash { animation: inkDraw 0.4s 0.2s cubic-bezier(0.17, 0.67, 0.63, 0.94) forwards; } /* --- Keyframes --- */ @keyframes inkDraw { 0% { opacity: 0; transform: scaleX(0); /* Começa sem largura */ } 50% { opacity: 1; transform: scaleX(1.2); /* Estica um pouco mais */ } 100% { opacity: 1; transform: scaleX(1); /* Normaliza */ } } /* --- Container Principal --- */ .catalog-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: background 0.2s; user-select: none; } .catalog-toggle:hover { background-color: rgba(139, 92, 246, 0.05); } .catalog-toggle input { display: none; } /* --- Texto --- */ .label-text { font-size: 11px; font-weight: 800; color: #94a3b8; /* Slate 400 */ letter-spacing: 0.5px; transition: color 0.3s; } /* --- Área da Animação --- */ .box-animation { width: 24px; height: 24px; position: relative; color: #94a3b8; /* Cor da caixa vazia */ transition: color 0.3s; } /* --- Elementos --- */ .box-body { position: absolute; bottom: 0; width: 100%; height: 100%; z-index: 10; } .flap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; /* Atrás da frente da caixa, mas na frente do produto */ transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .left-flap { transform-origin: 4px 10px; } /* Pivô na dobra esquerda */ .right-flap { transform-origin: 20px 10px; } /* Pivô na dobra direita */ .product { width: 10px; height: 10px; background: #8b5cf6; /* Roxo do Produto */ position: absolute; left: 7px; top: -15px; /* Fora da tela */ border-radius: 2px; z-index: 1; /* Cai dentro da caixa */ opacity: 0; transform: scale(0.8) rotate(45deg); box-shadow: 0 0 4px rgba(139, 92, 246, 0.5); } .tape { position: absolute; width: 0; /* Começa invisível */ height: 2px; background: #8b5cf6; /* Cor da fita */ top: 10px; /* Bem na linha de fechamento */ left: 4px; z-index: 20; /* Fica por cima de tudo */ transition: width 0.2s 0.4s; /* Delay para aparecer só depois de fechar */ } /* --- ESTADOS ATIVOS (CHECKED) --- */ /* 1. Cores Ativam */ .catalog-toggle input:checked ~ .label-text { color: #8b5cf6; } .catalog-toggle input:checked ~ .box-animation { color: #64748b; /* Caixa fica cinza escuro */ } /* 2. O Produto Cai */ .catalog-toggle input:checked ~ .box-animation .product { animation: dropIn 0.5s cubic-bezier(0.5, 0, 0.75, 0) forwards; } /* 3. As Abas Fecham (Slam!) */ .catalog-toggle input:checked ~ .box-animation .left-flap { transform: rotateX(180deg) skewX(-10deg); /* Fecha e ajusta perspectiva */ transition-delay: 0.3s; /* Espera o produto cair */ } .catalog-toggle input:checked ~ .box-animation .right-flap { transform: rotateX(180deg) skewX(10deg); transition-delay: 0.3s; } /* 4. A Caixa Reage (Squash) */ .catalog-toggle input:checked ~ .box-animation .box-body { animation: boxSquash 0.3s 0.3s ease-out; } /* 5. A Fita Sela o Pacote */ .catalog-toggle input:checked ~ .box-animation .tape { width: 16px; /* Estica a fita de ponta a ponta */ } /* --- KEYFRAMES --- */ @keyframes dropIn { 0% { top: -15px; opacity: 0; transform: rotate(45deg) scale(0.5); } 60% { opacity: 1; } 100% { top: 12px; /* Fundo da caixa */ opacity: 1; transform: rotate(45deg) scale(1); } } @keyframes boxSquash { 0% { transform: scale(1); } 50% { transform: scale(1.1, 0.9); } /* Achata quando as abas batem */ 100% { transform: scale(1); } } .plan-card { background: #1a1a1a; /* Fundo escuro */ border: 1px solid #333; border-radius: 16px; padding: 25px; display: flex; /* Mágica do alinhamento */ flex-direction: column; justify-content: space-between; height: 100%; /* Ocupa toda altura disponível */ min-height: 320px; /* Altura mínima para ficar elegante */ transition: transform 0.3s ease, border-color 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.3); } .plan-card:hover { transform: translateY(-5px); border-color: var(--primary); /* Brilha a borda na cor do tema */ box-shadow: 0 10px 20px rgba(0,0,0,0.5); } .plan-header { text-align: center; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; } .plan-name { color: #e0e0e0; font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin: 0; } .plan-price { color: var(--primary); /* Usa a cor principal do seu sistema */ font-size: 2.5rem; font-weight: 800; margin-top: 10px; } .plan-price small { font-size: 1rem; color: #888; font-weight: 400; } /* Estilo da descrição do banco */ .plan-description { color: #b0b0b0; /* Cinza claro para leitura */ font-size: 0.95rem; line-height: 1.6; /* Espaçamento entre linhas */ text-align: left; /* Texto alinhado a esquerda (melhor leitura) */ margin-bottom: 25px; flex-grow: 1; /* Ocupa o espaço vazio empurrando o botão p/ baixo */ white-space: pre-line; /* Respeita as quebras de linha do banco de dados */ } .btn-select-plan { width: 100%; padding: 12px; font-weight: bold; text-transform: uppercase; border-radius: 8px; transition: 0.2s; background-color: var(--primary); border: none; color: #000; /* Texto preto no botão */ } .btn-select-plan:hover { filter: brightness(1.1); box-shadow: 0 0 15px var(--primary); }/* --- CONTAINER PRINCIPAL --- */ .view { width: 100%; height: 100%; position: relative; background: #09090b; display: flex; flex-direction: column; overflow: hidden; } .builder-container { width: 100%; height: 100%; display: flex; flex-direction: column; } /* HEADER */ .builder-header { flex-shrink: 0; padding: 20px 40px; background: #18181b; border-bottom: 1px solid #27272a; display: flex; justify-content: space-between; align-items: center; } .builder-title { font-size: 20px; font-weight: 800; color: #fff; margin: 0; display: flex; align-items: center; gap: 10px; } /* CONTEÚDO (GRID) */ .builder-content { flex-grow: 1; overflow-y: auto; padding: 30px 40px; display: grid; /* Colunas responsivas: tenta colocar 3 lado a lado se der */ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; align-content: start; } /* CARDS */ .builder-card { background: #18181b; border: 1px solid #27272a; border-radius: 12px; padding: 25px; height: fit-content; /* Ajusta altura ao conteúdo */ transition: 0.3s; } .builder-card:hover { border-color: #3f3f46; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .card-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid #27272a; text-transform: uppercase; letter-spacing: 1px; } .card-title i { color: #00f3ff; } /* INPUTS & LABELS */ .builder-label { display: block; font-size: 11px; font-weight: 600; color: #a1a1aa; margin-bottom: 8px; text-transform: uppercase; } .builder-input, textarea { width: 100%; background: #09090b; border: 1px solid #27272a; color: white; padding: 12px; border-radius: 8px; font-size: 13px; outline: none; margin-bottom: 20px; font-family: 'Inter', sans-serif; transition: 0.2s; } .builder-input:focus, textarea:focus { border-color: #00f3ff; background: #000; } /* UPLOADER DE IMAGEM */ .img-uploader { border: 1px dashed #3f3f46; border-radius: 8px; padding: 15px; text-align: center; cursor: pointer; background: rgba(0,0,0,0.2); margin-bottom: 20px; transition: 0.2s; } .img-uploader:hover { border-color: #00f3ff; background: rgba(0, 243, 255, 0.05); } .img-uploader img { max-height: 50px; display: block; margin: 0 auto 8px auto; opacity: 0.8; } .img-uploader span { font-size: 11px; color: #666; font-weight: 600; } /* SLIDER (RANGE) */ input[type=range] { width: 100%; -webkit-appearance: none; background: transparent; margin-bottom: 5px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #00f3ff; cursor: pointer; margin-top: -6px; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: #27272a; border-radius: 2px; } /* RODAPÉ DE AÇÃO */ .action-bar { flex-shrink: 0; background: #18181b; border-top: 1px solid #27272a; padding: 20px 40px; display: flex; justify-content: flex-end; gap: 15px; } .btn-lg-action { padding: 12px 25px; border-radius: 6px; font-weight: 700; font-size: 13px; border: 1px solid #27272a; background: #27272a; color: #fff; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; } .btn-lg-action:hover { background: #3f3f46; } .btn-lg-action.primary { background: #00f3ff; color: #000; border-color: #00f3ff; } .btn-lg-action.primary:hover { box-shadow: 0 0 15px rgba(0, 243, 255, 0.3); transform: translateY(-2px); } /* MOBILE */ @media (max-width: 768px) { .builder-content { grid-template-columns: 1fr; padding: 20px; } .builder-header, .action-bar { padding: 15px 20px; } } /*botao whatsapp*/ /* --- Botão Base (Padrão Unificado) --- */ /*botao pdf*/ /* --- Estilo Base (Simetria Total) --- */ .btn-pdf { background: transparent; border: none; cursor: pointer; padding: 10px; border-radius: 8px; color: #64748b; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; align-items: center; justify-content: center; } /* --- HOVER: Indigo + Sombra --- */ .btn-pdf:hover { background-color: #6366f1; /* Indigo 500 */ color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); } .btn-pdf:active { transform: translateY(0); } /* --- Container --- */ .pdf-animation { width: 30px; height: 30px; position: relative; display: flex; justify-content: center; } /* --- Peças da Pasta --- */ .folder-back, .folder-front, .download-arrow { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; } .folder-back { z-index: 1; opacity: 0.6; } .folder-front { z-index: 10; } .download-arrow { z-index: 11; transform: translateY(-2px); opacity: 0; transition: all 0.2s; } /* --- O Documento PDF --- */ .pdf-document { width: 15px; height: 12px; position: absolute; top: -2px; z-index: 5; /* Fica entre a frente e o fundo da pasta */ transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* --- A MÁGICA (HOVER) --- */ /* 1. O Documento entra na pasta */ .btn-pdf:hover .pdf-document { top: 8px; transform: scale(0.8); opacity: 0.8; } /* 2. A Seta aparece piscando */ .btn-pdf:hover .download-arrow { opacity: 1; animation: arrowDown 0.8s infinite; } /* 3. A Pasta reage ao arquivo (Squash) */ .btn-pdf:hover .folder-front, .btn-pdf:hover .folder-back { animation: folderGulp 0.4s 0.2s ease-out; } /* --- Keyframes --- */ @keyframes arrowDown { 0% { transform: translateY(-4px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(2px); opacity: 0; } } @keyframes folderGulp { 0% { transform: scale(1); } 50% { transform: scale(1.1, 0.9); } /* Estufa para os lados */ 100% { transform: scale(1); } } /*botao aprovar*/ /* --- Estilo Base (Simetria Total) --- */ .btn-approve { background: transparent; border: none; cursor: pointer; padding: 10px; border-radius: 8px; color: #64748b; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; align-items: center; justify-content: center; } /* --- HOVER: Ciano + Sombra --- */ .btn-approve:hover { background-color: #06b6d4; /* Cyan 500 */ color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4); } .btn-approve:active { transform: translateY(0); } /* --- Container --- */ .approve-animation { width: 25px; height: 25px; position: relative; display: flex; justify-content: center; align-items: center; } /* --- Elementos --- */ .check-base { width: 100%; height: 100%; position: absolute; opacity: 0.6; transition: transform 0.3s ease; } .check-mark { width: 19px; height: 19px; z-index: 5; transform: translateY(-15px); /* Começa lá no alto */ opacity: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } /* --- Faíscas (Sparks) --- */ .sparks { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; opacity: 0; } .spark { position: absolute; width: 2px; height: 5px; background: currentColor; border-radius: 2px; } .s1 { transform: rotate(0deg) translateY(-12px); } .s2 { transform: rotate(90deg) translateY(-12px); } .s3 { transform: rotate(180deg) translateY(-12px); } .s4 { transform: rotate(270deg) translateY(-12px); } /* --- A MÁGICA (HOVER) --- */ /* 1. O Check cai "carimbando" */ .btn-approve:hover .check-mark { transform: translateY(0); opacity: 1; } /* 2. O Círculo reage ao golpe (Impacto) */ .btn-approve:hover .check-base { opacity: 1; animation: circleImpact 0.4s 0.1s ease-out; } /* 3. Faíscas explodem */ .btn-approve:hover .sparks { animation: sparkBurst 0.5s 0.2s ease-out forwards; } /* --- Keyframes --- */ @keyframes circleImpact { 0% { transform: scale(1); } 50% { transform: scale(0.85); } /* Comprime com a batida */ 100% { transform: scale(1); } } @keyframes sparkBurst { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.5); } } /* Container para centralizar logo e spinner */ .loader-wrapper { position: relative; width: 130px; /* Um pouco maior que a logo */ height: 130px; display: flex; justify-content: center; align-items: center; } /* A Logo Estática */ .static-logo-center { height: 80px; /* Tamanho bom para o centro */ width: auto; object-fit: contain; z-index: 2; /* Fica na frente do spinner */ filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); /* Sombra suave para destacar do fundo */ } /* O Anel Giratório (As "Setas" de carregamento) */ .loader-ring-spinner { position: absolute; width: 100%; height: 100%; border-radius: 50%; /* Cria o círculo */ border: 4px solid transparent; /* Borda base transparente */ /* A COR DA SUA MARCA (Aqui criamos o arco) */ border-top-color: #ffb800; /* Amarelo/Dourado no topo */ border-right-color: rgba(255, 184, 0, 0.3); /* Um rastro mais fraco na direita (opcional) */ z-index: 1; /* Fica atrás da logo */ animation: spinRingAround 1s linear infinite; /* A animação de giro */ box-shadow: 0 0 20px rgba(255, 184, 0, 0.2); /* Brilho suave no anel */ } /* Animação de rotação */ @keyframes spinRingAround { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ========================================= */ /* MOBILE HARDENING (FINAL LAYER) */ /* ========================================= */ @media (max-width: 768px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; } body { min-height: 100dvh; height: auto !important; } #app-wrapper { width: 100%; min-height: 100dvh !important; height: auto !important; overflow: visible !important; } #main-content { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 100dvh; padding: 14px !important; overflow-x: hidden !important; overflow-y: auto !important; } #sidebar { top: 0 !important; bottom: 0 !important; height: 100dvh !important; max-height: 100dvh !important; box-sizing: border-box; padding-top: calc(18px + env(safe-area-inset-top)) !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 10001 !important; } #mobile-overlay { z-index: 10000 !important; } .view, .view-section { width: 100% !important; max-width: 100% !important; } .grid-2, .grid-3, .grid-4, .dashboard-grid, .grid-fiado, .grid-shop { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } .table-container { width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .table-container table { min-width: 600px !important; } .modal-overlay, .modal { padding: 10px !important; align-items: flex-end !important; } .modal-overlay > div, .modal > div, .modal-content, .modal-box, .checkout-box, .chk-modal-card { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 20px) !important; margin: 0 !important; border-radius: 14px !important; overflow-y: auto !important; } .btn, button, input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; font-size: 16px !important; } .kpi-container, #lista-aprovacoes { grid-template-columns: 1fr !important; } /* Neutraliza estilos inline comuns que travam a UX no celular */ [style*="height:calc(100vh"] { height: auto !important; max-height: none !important; min-height: 0 !important; } [style*="grid-template-columns: 2fr 1fr"], [style*="grid-template-columns: 1.5fr 1fr"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns: 1fr 2fr"], [style*="grid-template-columns: 1fr 1fr 1fr"], [style*="grid-template-columns: 2fr 1fr 1fr 0.7fr auto"], [style*="grid-template-columns: 3fr 1fr"] { grid-template-columns: 1fr !important; } [style*="max-width:800px"], [style*="max-width: 800px"], [style*="max-width:900px"], [style*="max-width: 900px"] { max-width: 100% !important; width: 100% !important; } /* PDV mobile sem vitrine: foco total na busca + carrinho */ #view-loja #vitrine { display: none !important; } #pdv-mobile-results { display: block !important; max-height: 230px; overflow-y: auto; -webkit-overflow-scrolling: touch; } #view-loja > div > div[style*="min-width:340px"] { min-width: 0 !important; max-width: 100% !important; width: 100% !important; } #main-content { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; } } /* Dashboard hero mobile / iPhone polish */ @media (max-width: 980px), (hover: none) and (pointer: coarse) { #view-dash.dashboard-view { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; } #view-dash .dash-hero-shell { padding: calc(18px + (env(safe-area-inset-top) * 0.2)) 16px 16px !important; border-radius: 24px !important; gap: 16px !important; align-items: flex-start !important; } #view-dash .dash-hero-copy, #view-dash .dash-hero-controls { width: 100%; min-width: 0; } #view-dash .dash-hero-kicker { font-size: 11px !important; letter-spacing: 0.18em !important; } #view-dash .dash-hero-title { font-size: clamp(34px, 8vw, 56px) !important; line-height: 0.92 !important; } #view-dash .dash-hero-controls { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; align-items: stretch !important; } #view-dash .dash-period-pill { width: 100%; min-width: 0; padding: 10px 12px !important; border-radius: 22px !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; } #view-dash .dash-period-pill > label, #view-dash .dash-period-label { width: 100%; font-size: 11px !important; letter-spacing: 0.16em; text-transform: uppercase; color: #8b8b95 !important; } #view-dash .dash-period-pill > div, #view-dash .dash-period-inline { width: 100%; min-width: 0; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; } #view-dash #dash-period { flex: 1 1 100%; width: 100%; min-height: 52px; padding: 0 18px !important; border-radius: 18px; background: #18181b !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2; appearance: none; -webkit-appearance: none; } #view-dash .dash-date-range { width: 100%; min-width: 0; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } #view-dash .dash-date-range .dash-date-input, #view-dash .dash-date-range input { width: 100%; min-height: 46px; padding: 0 12px !important; border-radius: 14px !important; } #view-dash .dash-date-range span { align-self: flex-start; padding: 0 2px; } #view-dash .dash-date-range .btn-actionss, #view-dash .dash-refresh-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; } #view-dash .dash-refresh-btn { width: 56px !important; height: 56px !important; margin-left: 0 !important; border-radius: 18px !important; align-self: stretch !important; } #view-dash .dash-quick-actions { grid-column: 1 / -1; width: 100%; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } #view-dash .dash-quick-actions .btn-wrapper { width: 100% !important; height: auto !important; min-width: 0; } #view-dash .dash-quick-actions .btn-slide-left { position: relative !important; top: auto !important; right: auto !important; width: 100% !important; height: 56px !important; border-radius: 18px !important; flex-direction: row !important; justify-content: flex-start !important; gap: 8px !important; padding: 0 14px 0 12px !important; overflow: visible !important; white-space: normal !important; } #view-dash .dash-quick-actions .btn-slide-left i { min-width: 24px !important; text-align: left !important; font-size: 16px !important; } #view-dash .dash-quick-actions .btn-slide-left span { opacity: 1 !important; transform: none !important; padding-left: 0 !important; font-size: 12px !important; line-height: 1.1; text-align: left; } #view-dash .dash-quick-actions .btn-slide-left:hover, #view-dash .dash-quick-actions .btn-cat:hover, #view-dash .dash-quick-actions .btn-sale:hover, #view-dash .dash-quick-actions .btn-rep:hover { width: 100% !important; } } @media (max-width: 430px) { #view-dash .dash-hero-shell { padding-left: 14px !important; padding-right: 14px !important; } #view-dash .dash-hero-controls { grid-template-columns: 1fr !important; } #view-dash .dash-refresh-btn { width: 100% !important; height: 48px !important; border-radius: 16px !important; } #view-dash .dash-quick-actions { grid-template-columns: 1fr !important; } #view-dash .dash-quick-actions .btn-slide-left { height: 52px !important; } } /* Products mobile / iPhone polish */ @media (max-width: 980px), (hover: none) and (pointer: coarse) { #view-produtos.products-view { padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important; } #view-produtos .products-hero { width: 100%; max-width: calc(100% - 74px - env(safe-area-inset-right)); margin-left: auto !important; margin-right: auto !important; padding: 16px !important; border-radius: 24px !important; } #view-produtos .products-hero-inner { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; } #view-produtos .products-hero-copy { width: 100%; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px; } #view-produtos .products-hero-copy h2, #view-produtos .products-hero-copy p { text-align: center !important; } #view-produtos .products-hero-copy h2 { font-size: clamp(24px, 6.8vw, 34px) !important; line-height: 1 !important; } #view-produtos .products-toolbar { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; align-items: stretch !important; } #view-produtos .products-search-wrap { grid-column: 1 / -1; width: 100% !important; } #view-produtos .products-search-input { width: 100% !important; min-height: 50px; border-radius: 14px !important; } #view-produtos .products-add-btn, #view-produtos .products-ranking-btn { width: 100%; min-height: 50px; padding: 0 14px !important; justify-content: center; border-radius: 14px !important; text-align: center; white-space: normal; } #view-produtos .products-table-wrap { display: none !important; } #view-produtos .products-mobile-list { display: grid !important; gap: 12px; width: 100%; max-width: calc(100% - 74px - env(safe-area-inset-right)); margin-left: auto; margin-right: auto; } #view-produtos .products-empty { width: 100%; max-width: calc(100% - 74px - env(safe-area-inset-right)); margin-left: auto; margin-right: auto; padding: 28px 18px !important; border-radius: 20px; background: rgba(17,17,21,0.82); border: 1px dashed rgba(255,255,255,0.08); } } @media (max-width: 430px) { #view-produtos .products-hero, #view-produtos .products-mobile-list, #view-produtos .products-empty { max-width: 100%; } #view-produtos .products-toolbar { grid-template-columns: 1fr; } #view-produtos .product-mobile-head { flex-direction: column; } #view-produtos .product-mobile-thumb { width: 100%; height: 160px; } #view-produtos .product-mobile-pricing { width: 100%; min-width: 0; align-items: flex-start; text-align: left; } #view-produtos .product-mobile-actions { grid-template-columns: 1fr; } } /* Clients mobile / iPhone polish */ @media (max-width: 980px), (hover: none) and (pointer: coarse) { #view-clientes.clients-view { padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important; } #view-clientes .clients-hero { width: 100%; max-width: calc(100% - 74px - env(safe-area-inset-right)); margin-left: auto !important; margin-right: auto !important; padding: 16px !important; border-radius: 24px !important; flex-direction: column !important; align-items: stretch !important; gap: 14px !important; } #view-clientes .clients-hero-copy { width: 100%; align-items: center !important; } #view-clientes .clients-hero-copy h2, #view-clientes .clients-hero-copy p { text-align: center !important; } #view-clientes .clients-toolbar { width: 100%; display: grid !important; grid-template-columns: 1fr auto; gap: 10px !important; align-items: stretch !important; } #view-clientes .clients-search-wrap { width: 100%; } #view-clientes .clients-search-input { width: 100% !important; min-height: 50px; border-radius: 14px !important; } #view-clientes .clients-add-btn { min-width: 116px; min-height: 50px; justify-content: center; border-radius: 14px !important; } #view-clientes .clients-table-wrap { display: none !important; } #view-clientes .clients-mobile-list { display: grid !important; gap: 12px; width: 100%; max-width: calc(100% - 74px - env(safe-area-inset-right)); margin-left: auto; margin-right: auto; } #view-clientes .clients-empty { width: 100%; max-width: calc(100% - 74px - env(safe-area-inset-right)); margin-left: auto; margin-right: auto; padding: 28px 18px !important; border-radius: 20px; background: rgba(17,17,21,0.82); border: 1px dashed rgba(255,255,255,0.08); } } @media (max-width: 430px) { #view-clientes .clients-hero, #view-clientes .clients-mobile-list, #view-clientes .clients-empty { max-width: 100%; } #view-clientes .clients-toolbar { grid-template-columns: 1fr; } #view-clientes .clients-add-btn { width: 100%; } #view-clientes .client-mobile-head { flex-direction: column; align-items: stretch; } #view-clientes .client-mobile-limit { width: 100%; } #view-clientes .client-mobile-actions { grid-template-columns: 1fr; } } /* Kanban mobile / iPhone polish */ @media (max-width: 980px), (hover: none) and (pointer: coarse) { #view-producao { padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important; } #view-producao .kanban-mobile-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; width: 100%; max-width: calc(100% - 74px - env(safe-area-inset-right)); padding-bottom: 6px; margin: 0 auto 14px auto; box-sizing: border-box; } #view-producao .kanban-mobile-tab { width: 100%; min-width: 0; min-height: 50px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); background: rgba(17,17,17,0.92); color: #d4d4d8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; } #view-producao .kanban-mobile-tab span { font-size: 11px; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.08em; } #view-producao .kanban-mobile-tab strong { font-family: 'Rajdhani', sans-serif; font-size: 24px; line-height: 1; color: #ffffff; } #view-producao .kanban-mobile-tab.active { border-color: var(--primary); background: rgba(255,145,0,0.14); box-shadow: inset 0 0 0 1px rgba(255,145,0,0.14); color: #ffffff; } #view-producao .kanban-mobile-tab[data-col="entregue"] { grid-column: 1 / -1; } #view-producao .production-hero { padding: 16px !important; width: 100%; max-width: calc(100% - 74px - env(safe-area-inset-right)); margin-left: auto !important; margin-right: auto !important; margin-bottom: 16px !important; border-radius: 24px !important; } #view-producao .production-hero > div { justify-content: center !important; align-items: center !important; } #view-producao .production-hero h2 { font-size: clamp(24px, 6.8vw, 34px) !important; line-height: 0.95 !important; letter-spacing: 0.03em !important; text-align: center !important; } #view-producao .production-hero p { max-width: 28ch; font-size: 13px !important; line-height: 1.35 !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } #view-producao .kanban-board { display: block !important; height: auto !important; overflow: visible !important; padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important; } #view-producao .kanban-col { width: 100% !important; display: none !important; min-width: 0 !important; min-height: 0 !important; max-height: none !important; border-radius: 18px !important; padding: 12px !important; margin-bottom: 12px; } #view-producao[data-mobile-kanban="pendente"] #col-pendente, #view-producao[data-mobile-kanban="processo"] #col-processo, #view-producao[data-mobile-kanban="acabamento"] #col-acabamento, #view-producao[data-mobile-kanban="concluido"] #col-concluido, #view-producao[data-mobile-kanban="entregue"] #col-entregue, #view-producao:not([data-mobile-kanban]) #col-pendente { display: flex !important; } #view-producao .kanban-header { margin-bottom: 10px !important; font-size: 15px !important; line-height: 1.05 !important; gap: 8px; flex-wrap: wrap; align-items: center; } #view-producao .kanban-header span { font-size: 15px !important; flex-shrink: 0; } #view-producao .kanban-body { overflow: visible !important; max-height: none !important; } #view-producao .kanban-card { min-height: 76px; padding: 12px !important; border-radius: 14px !important; font-size: 12px !important; } #view-producao .kanban-card > div:first-child { font-size: 16px !important; line-height: 1.05; overflow-wrap: anywhere; } #view-producao .kanban-card > div:nth-child(2) { margin-top: 6px; font-size: 14px !important; } #view-producao .kanban-card > div:nth-child(3) { margin-top: 4px; font-size: 11px !important; color: #81818b !important; word-break: break-word; } } @media (max-width: 430px) { #view-producao .kanban-col { padding: 10px !important; } #view-producao .kanban-header { font-size: 14px !important; } #view-producao .kanban-mobile-tab { min-width: 0; padding-left: 10px; padding-right: 10px; } #view-producao .kanban-mobile-tabs, #view-producao .production-hero { max-width: 100%; } #view-producao .kanban-mobile-tab strong { font-size: 22px; } } /* iOS/Safari tuning */ @supports (-webkit-touch-callout: none) { @media (max-width: 768px) { html, body { min-height: -webkit-fill-available; -webkit-text-size-adjust: 100%; } body { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: manipulation; } .modal-overlay > div, .modal > div, .modal-content, .modal-box, .checkout-box, .chk-modal-card { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 14px) !important; margin-bottom: env(safe-area-inset-bottom) !important; } } } /* ========================================= */ /* MOBILE OVERFLOW GUARD (ALL TABS) */ /* ========================================= */ @media (max-width: 768px) { #main-content, #main-content .view, #main-content .view-section { overflow-x: hidden !important; } #main-content *, #app-wrapper * { min-width: 0; box-sizing: border-box; } /* Headers/barras: quebra linha sem achatar os elementos */ #main-content [style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } #main-content [style*="display: flex"][style*="justify-content: space-between"] { flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } /* Reduz larguras fixas, sem esmagar */ #main-content [style*="width: 250px"], #main-content [style*="width:250px"], #main-content .search-box { width: min(100%, 260px) !important; min-width: 0 !important; max-width: 260px !important; } #main-content [style*="min-width:340px"], #main-content [style*="min-width: 340px"] { min-width: 0 !important; width: 100% !important; max-width: 100% !important; } /* Crediario (iPhone): evita estouro lateral no header sem achatar botoes */ #view-fiado .view-header { display: grid !important; grid-template-columns: 1fr !important; align-items: stretch !important; gap: 10px !important; } #view-fiado .view-header > div:last-child { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; } #view-fiado .view-header .search-box { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #view-fiado .view-header .search-box input { width: 100% !important; } #view-fiado .view-header .btn-actio { width: auto !important; min-width: 124px !important; justify-content: center !important; white-space: nowrap !important; padding-inline: 12px !important; } #view-fiado [style*="margin-left: 16px"] { margin-left: 0 !important; } /* Linhas de ação com botões: mantém proporção e legibilidade */ #main-content [style*="display:flex"][style*="gap:10px"] > button, #main-content [style*="display: flex"][style*="gap: 10px"] > button { flex: 1 1 140px; min-height: 42px; white-space: nowrap; } #main-content .btn, #main-content .btn-actio, #main-content .btn-actions, #main-content button { min-height: 42px; } /* Inputs e selects nunca passam da tela */ #main-content input:not([type="checkbox"]):not([type="radio"]), #main-content select, #main-content textarea, #main-content .form-input, #main-content .input-lg { width: 100% !important; max-width: 100% !important; } } @media (max-width: 420px) { #view-fiado .view-header > div:last-child { grid-template-columns: 1fr !important; } #view-fiado .view-header .btn-actio { width: 100% !important; } } /* ================================================================== */ /* ☀️ MODO CLARO PREMIUM - CREDIÁRIO, LOJA E CONFIGURAÇÕES */ /* ================================================================== */ /* --- 1. CARD DO CREDIÁRIO (FIADO) --- */ body.light-mode .card-devedor, body.light-mode .card-box { background-color: var(--bg-card); /* Fundo branco/off-white suave */ border: var(--border); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); /* Sombra elegante que dá volume */ } /* Cabeçalho do Card de Crediário (Tom gelo diferenciado) */ body.light-mode .devedor-header { background-color: #f1f5f9; /* Cinza azulado bem sofisticado */ border-bottom: var(--border); color: var(--text-main); } body.light-mode .devedor-body { color: var(--text-main); } /* --- 2. LOJA ONLINE E CONFIGURAÇÕES (BUILDER) --- */ /* Cabeçalho (Parte Superior) */ body.light-mode .builder-header { background-color: #f8fafc; /* Gelo/Off-white para não cansar a vista */ border-bottom: var(--border); } /* Títulos do Cabeçalho e Cards */ body.light-mode .builder-title, body.light-mode .card-title { color: var(--text-main); border-bottom-color: #e2e8f0; } /* Os Cards de Configuração */ body.light-mode .builder-card { background-color: var(--bg-card); border: var(--border); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); } /* Textos descritivos */ body.light-mode .builder-label { color: var(--text-muted); } /* Caixas de Texto (Inputs) nas Configurações */ body.light-mode .builder-input, body.light-mode .builder-content textarea { background-color: var(--bg-input); border: var(--border); color: var(--text-main); } body.light-mode .builder-input:focus, body.light-mode .builder-content textarea:focus { background-color: #ffffff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 145, 0, 0.15); /* Brilho laranja suave ao clicar */ } /* Rodapé (Action Bar) */ body.light-mode .action-bar { background-color: #f8fafc; /* Acompanha a cor do cabeçalho */ border-top: var(--border); } /* Botões Secundários no Rodapé (Ex: Cancelar/Voltar) */ body.light-mode .btn-lg-action:not(.primary) { background-color: #e2e8f0; border-color: #cbd5e1; color: #334155; } body.light-mode .btn-lg-action:not(.primary):hover { background-color: #cbd5e1; } /* ================================================================== */ /* ☀️ CORREÇÃO FORÇADA: MODO CLARO - ASSINATURA E CREDIÁRIO */ /* ================================================================== */ /* --- 1. MINHA ASSINATURA (O painel grande preto) --- */ body.light-mode .subs-header { background: #ffffff !important; border: 1px solid #e5e7eb !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; } /* Remove aquele "foco de luz neon" do modo escuro na assinatura */ body.light-mode .subs-header::after { display: none !important; } /* Força os textos lá dentro a ficarem escuros para dar leitura */ body.light-mode .subs-header * { color: #1f2937 !important; } /* O fundo da barra de progresso (Volume de Pedidos) */ body.light-mode .usage-track { background: #e5e7eb !important; } /* Devolve a cor original pro botão do painel, se ele bugar com a regra acima */ body.light-mode .subs-header .btn-outline { background: #ffffff !important; color: var(--primary) !important; border-color: var(--border) !important; } /* --- 2. GESTÃO DE CREDIÁRIO (O card do Jeferson) --- */ body.light-mode .card-devedor { background: #ffffff !important; border: 1px solid #e5e7eb !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; } /* Cabeçalho do Card (onde ficaria o nome, se o layout usar header separado) */ body.light-mode .devedor-header { background: #f8fafc !important; border-bottom: 1px solid #e5e7eb !important; } /* Força TODOS os textos normais do card a ficarem escuros */ body.light-mode .card-devedor { color: #1f2937 !important; } body.light-mode .card-devedor span, body.light-mode .card-devedor div, body.light-mode .card-devedor p, body.light-mode .card-devedor h1, body.light-mode .card-devedor h2, body.light-mode .card-devedor h3 { color: #1f2937 !important; } /* Exceções: Garante que os botões verde e WhatsApp não fiquem com texto cinza */ body.light-mode .card-devedor .btn-pay { color: #000000 !important; } body.light-mode .card-devedor .btn-action-fiado { color: #1f2937 !important; border-color: #d1d5db !important; } body.light-mode .card-devedor .btn-action-fiado:hover { background: #f1f5f9 !important; } /* Fundo da barrinha de progresso do crediário */ body.light-mode .fiado-progress-bg { background: #e5e7eb !important; } /* ================================================================== */ /* 🚀 MODO CLARO: DESTRUIDOR DE FUNDOS ESCUROS */ /* ================================================================== */ /* Limpa gradientes e cores fixas forçando o fundo inteligente */ body.light-mode .subs-header, body.light-mode .card-devedor, body.light-mode .devedor-header, body.light-mode .builder-card, body.light-mode .builder-header, body.light-mode .action-bar, body.light-mode .card-box { background: var(--bg-card) !important; background-image: none !important; /* Arranca o gradiente à força */ border: 1px solid var(--border) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important; } /* Deixa o fundo do cabeçalho do crediário com um gelo mais destacado */ body.light-mode .devedor-header, body.light-mode .builder-header, body.light-mode .action-bar { background: #f8fafc !important; } /* Fundo das barras de progresso (Volume de Pedidos / Fiado) */ body.light-mode .usage-track, body.light-mode .fiado-progress-bg { background: #e2e8f0 !important; } /* Garante que os textos não fiquem brancos no fundo claro */ body.light-mode .subs-header, body.light-mode .card-devedor, body.light-mode .builder-card { color: var(--text-main) !important; } body.light-mode .subs-header p, body.light-mode .subs-header span:not(.usage-fill), body.light-mode .card-devedor span, body.light-mode .card-devedor div { color: var(--text-main); } /* ================================================================== */ /* 👓 MODO CLARO: ALTO CONTRASTE E LEITURA (TEXTOS) */ /* ================================================================== */ /* 1. Textos Principais: Preto Puro para contraste máximo */ body.light-mode { --text-main: #000000 !important; --text-muted: #374151 !important; /* Cinza chumbo escuro */ } body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode h5, body.light-mode p, body.light-mode th, body.light-mode td, body.light-mode .val, body.light-mode .cli-name, body.light-mode .prod-name, body.light-mode [style*="color:white"], body.light-mode [style*="color: white"], body.light-mode [style*="color:#fff"], body.light-mode [style*="color: #fff"] { color: #000000 !important; } /* 2. Textos Secundários (Legendas, Datas, Labels) */ body.light-mode label, body.light-mode small, body.light-mode span, body.light-mode [style*="color:#ccc"], body.light-mode [style*="color: #ccc"], body.light-mode [style*="color:#aaa"], body.light-mode [style*="color: #aaa"], body.light-mode [style*="color:#888"], body.light-mode [style*="color: #888"], body.light-mode [style*="color:#666"], body.light-mode [style*="color: #666"] { color: #374151 !important; /* Chumbo bem escuro e legível */ font-weight: 600 !important; /* Deixa a letra levemente mais gordinha */ } /* 3. Ajuste de Contraste para Inputs e Selects */ body.light-mode input, body.light-mode select, body.light-mode textarea { color: #000000 !important; font-weight: 500 !important; } body.light-mode input::placeholder, body.light-mode textarea::placeholder { color: #6b7280 !important; /* Placeholder legível, mas não preto */ opacity: 1 !important; } /* Preserva as cores de status (Verde, Vermelho, Laranja, etc) */ body.light-mode [style*="color:#00e054"], body.light-mode [style*="color: #00e054"], body.light-mode [style*="color:var(--success)"] { color: #10b981 !important; } body.light-mode [style*="color:#ff4757"], body.light-mode [style*="color: #ff4757"], body.light-mode [style*="color:var(--danger)"] { color: #dc2626 !important; } body.light-mode [style*="color:#f39c12"], body.light-mode [style*="color: #f39c12"], body.light-mode [style*="color:var(--warning)"] { color: #d97706 !important; } body.light-mode [style*="color:#00f3ff"], body.light-mode [style*="color: #00f3ff"], body.light-mode [style*="color:var(--primary)"] { color: #0284c7 !important; } /* ================================================================== */ /* 🔳 MODO CLARO: ALTO CONTRASTE EM BORDAS E TABELAS */ /* ================================================================== */ /* 1. Bordas gerais mais nítidas e marcadas */ body.light-mode { --border: 1px solid #cbd5e1 !important; /* Slate 300 - mais escuro que o padrão */ } /* Captura as bordas escuras fixadas no HTML e escurece no modo claro */ body.light-mode [style*="border:1px solid #333"], body.light-mode [style*="border: 1px solid #333"], body.light-mode [style*="border:1px solid #444"], body.light-mode [style*="border: 1px solid #444"], body.light-mode [style*="border-bottom:1px solid #333"], body.light-mode [style*="border-bottom: 1px solid #333"], body.light-mode [style*="border-top:1px solid #333"], body.light-mode [style*="border-top: 1px solid #333"], body.light-mode [style*="border:1px solid #222"], body.light-mode [style*="border: 1px solid #222"] { border-color: #cbd5e1 !important; } /* Captura as linhas tracejadas (muito usadas em recibos e listas) */ body.light-mode [style*="border-bottom:1px dashed #333"], body.light-mode [style*="border-bottom: 1px dashed #333"], body.light-mode [style*="border-top:1px dashed #333"], body.light-mode [style*="border-top: 1px dashed #333"] { border-color: #94a3b8 !important; /* Um tom ainda mais forte para o tracejado não sumir */ } /* 2. Tabelas - Cabeçalho com fundo de destaque */ body.light-mode table thead, body.light-mode table th, body.light-mode .sa-table th { background-color: #e2e8f0 !important; /* Fundo cinza mais encorpado */ color: #0f172a !important; /* Texto preto bem forte */ border-bottom: 2px solid #94a3b8 !important; /* Linha dupla marcando o fim do cabeçalho */ font-weight: 700 !important; } /* 3. Divisórias das linhas da tabela */ body.light-mode table td, body.light-mode .sa-table td { border-bottom: 1px solid #cbd5e1 !important; } /* 4. Efeito Hover de Leitura (Zebra dinâmica) */ body.light-mode tr:hover td { background-color: #f8fafc !important; /* Fundo super suave para não ofuscar o texto */ cursor: default; } /* ================================================================== */ /* 📅 MODO CLARO: FILTRO DE PERÍODO E DATAS (DASHBOARD) */ /* ================================================================== */ body.light-mode #dash-period, body.light-mode #dash-date-start, body.light-mode #dash-date-end { color: #000000 !important; } /* Força as opções que abrem na caixinha a ficarem com fundo branco e texto preto */ body.light-mode #dash-period option { background-color: #ffffff !important; color: #000000 !important; } /* Opcional: clarear o fundo dos inputs de data se eles estiverem escuros */ body.light-mode #dash-date-start, body.light-mode #dash-date-end { background-color: #f8fafc !important; border-color: #cbd5e1 !important; } /* ================================================================== */ /* 🖱️ MODO CLARO: BOTÕES ANIMADOS (CATÁLOGO, NOVA VENDA, RELATÓRIO) */ /* ================================================================== */ /* 1. Fundo padrão do botão em repouso */ body.light-mode .btn-slide-left { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; } /* 2. O ícone principal quando o botão está fechado (precisa ser escuro no fundo branco) */ body.light-mode .btn-slide-left i { color: #4b5563 !important; } /* ========================================================= */ /* --- EFEITOS HOVER ADAPTADOS PARA MODO CLARO (Tons Pastel) */ /* ========================================================= */ /* Botão Catálogo (Roxo) */ body.light-mode .btn-slide-left.btn-cat:hover { background: #f3e8ff !important; /* Roxo super clarinho */ border-color: #a855f7 !important; } body.light-mode .btn-slide-left.btn-cat:hover i, body.light-mode .btn-slide-left.btn-cat:hover span { color: #9333ea !important; /* Texto e Ícone Roxo forte */ } /* Botão Nova Venda (Verde) */ body.light-mode .btn-slide-left.btn-sale:hover { background: #dcfce7 !important; /* Verde super clarinho */ border-color: #22c55e !important; } body.light-mode .btn-slide-left.btn-sale:hover i, body.light-mode .btn-slide-left.btn-sale:hover span { color: #16a34a !important; /* Texto e Ícone Verde forte */ } /* Botão Relatório (Azul) */ body.light-mode .btn-slide-left.btn-rep:hover { background: #e0f2fe !important; /* Azul super clarinho */ border-color: #0ea5e9 !important; } body.light-mode .btn-slide-left.btn-rep:hover i, body.light-mode .btn-slide-left.btn-rep:hover span { color: #0284c7 !important; /* Texto e Ícone Azul forte */ } /* ================================================================== */ /* 💬 CONTROLE DE VISIBILIDADE DO CHAT (ESCONDE NA LANDING PAGE) */ /* ================================================================== */ .btn-nfe { background: #6366f1 !important; /* Roxo Indigo */ color: white !important; } .btn-nfe:hover { box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); transform: translateY(-2px); } /* Container Principal da View */ .view.aba-funcionario { padding: 20px; color: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Cabeçalho da Página */ .cabecalho-aba { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid #333; padding-bottom: 15px; } .cabecalho-aba h2 { color: #ff9800; /* Laranja padrão do seu sistema */ font-size: 1.5rem; display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-weight: bold; } /* Barra de Busca e Filtros */ .area-filtros { margin-bottom: 20px; display: flex; gap: 10px; } .input-busca { background: #1a1a1a; border: 1px solid #333; color: #fff; padding: 10px 15px; border-radius: 8px; width: 300px; outline: none; } .input-busca:focus { border-color: #ff9800; } /* Botão Principal */ .btn-novo { background-color: transparent; color: #ff9800; border: 1px solid #ff9800; padding: 8px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: 0.3s; text-transform: uppercase; } .btn-novo:hover { background: #ff9800; color: #000; } /* Grid de Cards (Seguindo o estilo do Crediário) */ .grid-funcionarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .card-func { background: #111; /* Fundo escuro igual seus cards */ border: 1px solid #333; border-radius: 12px; padding: 20px; position: relative; transition: transform 0.2s; } .card-func:hover { border-color: #ff9800; transform: translateY(-5px); } .card-func .status-badge { position: absolute; top: 15px; right: 15px; font-size: 0.7rem; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; background: #2ecc71; /* Verde Ativo */ color: #fff; } .card-func h3 { margin: 0 0 5px 0; font-size: 1.1rem; color: #fff; } .card-func p { margin: 5px 0; color: #aaa; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; } /* Rodapé do Card com Ações */ .card-func-acoes { margin-top: 15px; display: flex; gap: 10px; } .btn-card { flex: 1; padding: 8px; border-radius: 6px; border: none; cursor: pointer; font-weight: bold; font-size: 0.8rem; } .btn-edit { background: #333; color: #fff; } .btn-whatsapp { background: #25d366; color: #fff; } /* Modal Estilizado */ .modal-conteudo { background-color: #1a1a1a; border: 1px solid #ff9800; color: #fff; } .form-grupo input, .form-grupo select { background: #000; border: 1px solid #333; color: #fff; } /* Fundo do Modal (a parte preta que cobre a tela) */ #modalFuncionario { display: none; position: fixed !important; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); } /* Caixa do Formulário */ #modalFuncionario .modal-conteudo { background-color: #111 !important; /* Fundo igual seus cards */ margin: 10vh auto; padding: 25px; border: 1px solid #ff9800; /* Borda laranja */ border-radius: 12px; width: 90%; max-width: 400px; box-shadow: 0 0 20px rgba(255, 152, 0, 0.1); color: #fff; } /* Título e Botão Fechar */ #modalFuncionario h3 { color: #ff9800; margin-top: 0; font-size: 1.2rem; text-transform: uppercase; } .fechar-modal { float: right; cursor: pointer; font-size: 20px; color: #aaa; } /* Campos de Entrada (Inputs) */ .form-grupo { margin-top: 15px; text-align: left; } .form-grupo label { display: block; font-size: 0.8rem; color: #aaa; margin-bottom: 5px; } .form-grupo input, .form-grupo select { width: 100%; padding: 12px; background: #1a1a1a; /* Fundo mais escuro que o card */ border: 1px solid #333; border-radius: 6px; color: #fff; box-sizing: border-box; /* Garante que não passe da largura */ } .form-grupo input:focus { border-color: #ff9800; outline: none; } /* Botão Salvar (Estilo o seu de Receber/Imprimir) */ .btn-salvar-registro { width: 100%; padding: 12px; margin-top: 20px; background-color: #ff9800; color: #000; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; text-transform: uppercase; } .btn-salvar-registro:hover { background-color: #e68a00; } /* Adicione isso ao seu CSS de funcionário */ .modal-scroll::-webkit-scrollbar { width: 6px; } .modal-scroll::-webkit-scrollbar-thumb { background: #ff9800; border-radius: 10px; } .modal-scroll::-webkit-scrollbar-track { background: #1a1a1a; } #modalFuncionario .form-grupo input, #modalFuncionario .form-grupo select { margin-bottom: 5px; /* Ajuste para não ficar colado */ } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: none; /* Controlado pelo JS */ align-items: center; justify-content: center; z-index: 9999; } .modal-overlay.active { display: flex; } .modal-overlay.hidden { display: none !important; } .modal-dialog { background: #fff; border-radius: 12px; width: 90%; max-width: 650px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2); animation: modalSlideUp 0.3s ease-out; } @keyframes modalSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* No seu arquivo CSS ou dentro de