/* ========================================================== B4 System — Design System Suporta: dark mode (padrão) e light mode Toggle via: ou ========================================================== */ /* ---------- Tokens ---------- */ :root, [data-theme="dark"] { --b4-primary: #3b82f6; --b4-primary-dim: rgba(59,130,246,.18); --b4-primary-hover: #60a5fa; --b4-accent: #06b6d4; --b4-bg: #0d1117; --b4-bg-2: #161b22; --b4-bg-3: #1c2430; --b4-card-bg: #161b22; --b4-card-border: rgba(255,255,255,.08); --b4-text: #e6edf3; --b4-text-2: #8b949e; --b4-text-3: #6e7681; --b4-border: rgba(255,255,255,.10); --b4-border-input: rgba(255,255,255,.14); --b4-input-bg: #0d1117; --b4-shadow: 0 4px 24px rgba(0,0,0,.40); --b4-shadow-sm: 0 2px 8px rgba(0,0,0,.30); --b4-radius-card: 12px; --b4-radius-input: 8px; --b4-radius-btn: 8px; --b4-topbar-bg: #0d1117; --b4-topbar-border: rgba(255,255,255,.08); --b4-navbar-bg: #161b22; --b4-navbar-border: rgba(255,255,255,.07); --b4-badge-ok-bg: rgba(34,197,94,.18); --b4-badge-ok-border:rgba(34,197,94,.35); --b4-badge-ok-text: #86efac; --b4-badge-err-bg: rgba(239,68,68,.18); --b4-badge-err-border:rgba(239,68,68,.35); --b4-badge-err-text: #fca5a5; --b4-badge-muted-bg: rgba(107,114,128,.18); --b4-badge-muted-border:rgba(107,114,128,.30); --b4-badge-muted-text:rgba(230,237,243,.75); --b4-table-head-bg: #0d1117; --b4-table-hover: rgba(59,130,246,.10); --b4-table-border: rgba(255,255,255,.07); --b4-phone-bg: rgba(8,18,26,.90); --b4-bubble-bg: rgba(0,168,132,.16); --b4-bubble-border: rgba(0,168,132,.28); color-scheme: dark; } [data-theme="light"] { --b4-primary: #1d6ac8; --b4-primary-dim: rgba(29,106,200,.10); --b4-primary-hover: #1a5fb4; --b4-accent: #0891b2; --b4-bg: #f0f4f8; --b4-bg-2: #ffffff; --b4-bg-3: #f8fafc; --b4-card-bg: #ffffff; --b4-card-border: rgba(0,0,0,.08); --b4-text: #111827; --b4-text-2: #4b5563; --b4-text-3: #9ca3af; --b4-border: rgba(0,0,0,.10); --b4-border-input: #d1d5db; --b4-input-bg: #ffffff; --b4-shadow: 0 4px 24px rgba(0,0,0,.08); --b4-shadow-sm: 0 1px 4px rgba(0,0,0,.06); --b4-topbar-bg: #1a2744; --b4-topbar-border: rgba(255,255,255,.10); --b4-navbar-bg: #1e3163; --b4-navbar-border: rgba(255,255,255,.08); --b4-badge-ok-bg: rgba(22,163,74,.12); --b4-badge-ok-border:rgba(22,163,74,.30); --b4-badge-ok-text: #166534; --b4-badge-err-bg: rgba(220,38,38,.12); --b4-badge-err-border:rgba(220,38,38,.30); --b4-badge-err-text: #991b1b; --b4-badge-muted-bg: rgba(107,114,128,.10); --b4-badge-muted-border:rgba(107,114,128,.22); --b4-badge-muted-text:#374151; --b4-table-head-bg: #f8fafc; --b4-table-hover: rgba(29,106,200,.06); --b4-table-border: rgba(0,0,0,.07); --b4-phone-bg: rgba(240,248,255,.95); --b4-bubble-bg: rgba(0,168,132,.12); --b4-bubble-border: rgba(0,168,132,.25); color-scheme: light; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } body.b4-body { margin: 0; font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; background: var(--b4-bg); color: var(--b4-text); font-size: 15px; line-height: 1.55; min-height: 100dvh; } /* ========================================================== Layout global — Container + alinhamento Padrão: conteúdo centralizado, max-width inteligente ========================================================== */ /* Variáveis de layout */ :root { --b4-content-max: 1440px; --b4-px-mobile: 16px; --b4-px-tablet: 24px; --b4-px-desktop: 40px; --b4-page-gap: 20px; /* gap entre cards */ --b4-card-px: 20px; /* padding horizontal dos cards */ --b4-card-py: 16px; /* padding vertical dos cards */ } .b4-body .container, .b4-body .container-fluid { width: 100%; max-width: var(--b4-content-max); margin-left: auto; margin-right: auto; padding-left: var(--b4-px-mobile); padding-right: var(--b4-px-mobile); } @media (min-width: 768px) { .b4-body .container, .b4-body .container-fluid { padding-left: var(--b4-px-tablet); padding-right: var(--b4-px-tablet); } } @media (min-width: 1200px) { .b4-body .container, .b4-body .container-fluid { padding-left: var(--b4-px-desktop); padding-right: var(--b4-px-desktop); } } /* Row gap padrão */ .b4-body .row { --bs-gutter-x: var(--b4-page-gap); --bs-gutter-y: var(--b4-page-gap); } /* ---------- Cards ---------- */ .b4-body .card { background: var(--b4-card-bg); border: 1px solid var(--b4-card-border); border-radius: var(--b4-radius-card); box-shadow: var(--b4-shadow-sm); overflow: hidden; /* garante que border-radius funcione em headers coloridos */ } .b4-body .card-header { background: transparent; border-bottom: 1px solid var(--b4-card-border); color: var(--b4-text); padding: 10px var(--b4-card-px) !important; /* override Bootstrap py-2 */ display: flex !important; align-items: center; gap: 8px; min-height: 44px; } .b4-body .card-body { padding: var(--b4-card-py) var(--b4-card-px); } .b4-body .card-footer { background: transparent; border-top: 1px solid var(--b4-card-border); padding: 10px var(--b4-card-px); } .b4-body .card-header h1,.b4-body .card-header h2, .b4-body .card-header h3,.b4-body .card-header h4, .b4-body .card-header h5 { font-weight: 700; color: var(--b4-text); margin: 0; } /* Header icon: ícone colorido padronizado no card-header */ .b4-body .card-header > i[class*="bi-"] { font-size: 1rem; flex-shrink: 0; } .b4-body .card-header > strong, .b4-body .card-header > .card-title { font-size: .9rem; font-weight: 700; color: var(--b4-text); letter-spacing: -.01em; } /* ---------- Espaçamento após navbar (consistente em todas as pages) ---------- */ .b4-body > .container, .b4-body > .container-fluid { padding-top: 24px; padding-bottom: 40px; } /* Quando o container está dentro de uma div com py-* do Bootstrap, respeitamos */ .b4-body .container.py-3, .b4-body .container-fluid.py-3 { padding-top: 20px !important; padding-bottom: 20px !important; } .b4-body .container.py-4, .b4-body .container-fluid.py-4 { padding-top: 24px !important; padding-bottom: 24px !important; } /* ---------- Cabeçalho de página padrão ---------- */ /* Funciona tanto com .b4-page-header quanto com o padrão Bootstrap já existente nas views */ .b4-body .b4-page-header, .b4-body .container > .d-flex.mb-3, .b4-body .container > .d-flex.mb-4, .b4-body .container-fluid > .d-flex.mb-3, .b4-body .container-fluid > .d-flex.mb-4, .b4-body .container > .row.mb-3 > .col h4, .b4-body .container-fluid > .row.mb-3 > .col h4 { --page-header: 1; } .b4-body .b4-page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } /* Título h4 principal de página */ .b4-body .container > .d-flex h4, .b4-body .container-fluid > .d-flex h4, .b4-body .b4-page-header h4, .b4-body .b4-page-header h3 { font-size: 1.15rem; font-weight: 700; color: var(--b4-text); margin: 0; line-height: 1.25; } /* Subtítulo small após h4 de página */ .b4-body .container > .d-flex small, .b4-body .container-fluid > .d-flex small, .b4-body .b4-page-header small, .b4-body .b4-page-header .b4-page-sub { font-size: .82rem; color: var(--b4-text-2); display: block; margin-top: 2px; } /* ---------- Contraste garantido em cards ---------- */ .b4-body .card, .b4-body .card-body, .b4-body .card-header, .b4-body .card-footer { color: var(--b4-text); } /* fw-bold/semibold dentro de card sempre usa cor de texto principal */ .b4-body .card .fw-bold, .b4-body .card .fw-semibold { color: var(--b4-text); } /* text-muted dentro de card usa text-2 (nunca some) */ .b4-body .card .text-muted { color: var(--b4-text-2) !important; } .b4-body .card small { color: var(--b4-text-2); } /* ---------- Grid e espaçamento de seções ---------- */ /* g-3 usa o gap padrão da aplicação */ .b4-body .row.g-3 { --bs-gutter-x: 20px; --bs-gutter-y: 20px; } .b4-body .row.g-4 { --bs-gutter-x: 24px; --bs-gutter-y: 24px; } .b4-body .row.g-2 { --bs-gutter-x: 12px; --bs-gutter-y: 12px; } /* Seção mb-3/mb-4 como separador visual em forms */ .b4-body .card-body .mb-3 { margin-bottom: 16px !important; } .b4-body .card-body .mb-4 { margin-bottom: 20px !important; } /* ---------- Labels & Form ---------- */ .b4-body label, .b4-body .form-label { font-size: .85rem; color: var(--b4-text-2); font-weight: 500; } .b4-body .form-control, .b4-body .form-select, .b4-body textarea.form-control { border-radius: var(--b4-radius-input) !important; border: 1px solid var(--b4-border-input) !important; background: var(--b4-input-bg) !important; color: var(--b4-text) !important; transition: border-color .15s, box-shadow .15s; } .b4-body .form-control:focus, .b4-body .form-select:focus { border-color: var(--b4-primary) !important; box-shadow: 0 0 0 3px rgba(59,130,246,.20) !important; outline: none; } .b4-body .form-control::placeholder, .b4-body textarea::placeholder { color: var(--b4-text-3) !important; opacity: 1 !important; } .b4-body .input-group-text { background: var(--b4-bg-3); border: 1px solid var(--b4-border-input); color: var(--b4-text-2); } .b4-body .form-text { font-size: .80rem; color: var(--b4-text-3); } .b4-body .form-check-input { background-color: var(--b4-input-bg); border-color: var(--b4-border-input); } .b4-body .form-check-input:checked { background-color: var(--b4-primary); border-color: var(--b4-primary); } /* ---------- Buttons ---------- */ .b4-body .btn { border-radius: var(--b4-radius-btn) !important; font-weight: 500; transition: all .15s; } .b4-body .btn-primary { background: var(--b4-primary) !important; border-color: var(--b4-primary) !important; color: #fff !important; } .b4-body .btn-primary:hover { background: var(--b4-primary-hover) !important; } .b4-body .btn-outline-primary { color: var(--b4-primary) !important; border-color: var(--b4-primary) !important; } .b4-body .btn-outline-primary:hover { background: var(--b4-primary-dim) !important; } .b4-body .btn-outline-secondary { color: var(--b4-text-2) !important; border-color: var(--b4-border) !important; } .b4-body .btn-outline-secondary:hover { background: rgba(255,255,255,.06) !important; } .b4-body .btn-outline-danger { color: #f87171 !important; border-color: rgba(239,68,68,.35) !important; } .b4-body .btn-outline-danger:hover { background: rgba(239,68,68,.12) !important; } .b4-body .btn-outline-warning { color: #fbbf24 !important; border-color: rgba(251,191,36,.35) !important; } .b4-body .btn-outline-warning:hover { background: rgba(251,191,36,.12) !important; } .b4-body .btn-outline-success { color: #4ade80 !important; border-color: rgba(74,222,128,.35) !important; } .b4-body .btn-outline-success:hover { background: rgba(74,222,128,.12) !important; } .b4-body .btn-outline-info { color: #67e8f9 !important; border-color: rgba(103,232,249,.35) !important; } .b4-body .btn-outline-info:hover { background: rgba(103,232,249,.10) !important; } [data-theme="light"] .b4-body .btn-outline-secondary:hover { background: rgba(0,0,0,.06) !important; } /* ---------- Tables ---------- */ .b4-body .table-responsive { border-radius: var(--b4-radius-card); overflow: hidden; border: 1px solid var(--b4-table-border); } .b4-body table.table { --bs-table-color: var(--b4-text); --bs-table-bg: var(--b4-card-bg); --bs-table-border-color: var(--b4-table-border); --bs-table-hover-bg: var(--b4-table-hover); --bs-table-hover-color: var(--b4-text); border-radius: var(--b4-radius-card); overflow: hidden; margin-bottom: 0; } .b4-body .table > :not(caption) > * > * { background-color: transparent; } .b4-body .table thead th { background: var(--b4-table-head-bg) !important; color: var(--b4-text-2) !important; font-size: .80rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; border-bottom: 1px solid var(--b4-table-border) !important; padding: 10px 12px; } .b4-body .table tbody td, .b4-body .table tbody th { border-color: var(--b4-table-border) !important; padding: 10px 12px; } .b4-body .table td, .b4-body .table th { vertical-align: middle; } .b4-body .table .b4-td-truncate { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Alerts ---------- */ .b4-body .alert { border-radius: var(--b4-radius-card); border: 1px solid; } .b4-body .alert-info { background: rgba(6,182,212,.10); border-color: rgba(6,182,212,.25); color: var(--b4-text); } .b4-body .alert-warning { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.25); color: var(--b4-text); } .b4-body .alert-danger { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25); color: var(--b4-text); } .b4-body .alert-success { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.25); color: var(--b4-text); } .b4-body .alert-secondary { background: var(--b4-bg-3); border-color: var(--b4-border); color: var(--b4-text-2); } [data-theme="light"] .b4-body .alert-info { color: #164e63; } [data-theme="light"] .b4-body .alert-warning { color: #78350f; } [data-theme="light"] .b4-body .alert-danger { color: #7f1d1d; } [data-theme="light"] .b4-body .alert-success { color: #14532d; } /* ---------- Badges ---------- */ .b4-badge-ok { background: var(--b4-badge-ok-bg) !important; border: 1px solid var(--b4-badge-ok-border) !important; color: var(--b4-badge-ok-text) !important; } .b4-badge-err { background: var(--b4-badge-err-bg) !important; border: 1px solid var(--b4-badge-err-border) !important; color: var(--b4-badge-err-text) !important; } .b4-badge-muted { background: var(--b4-badge-muted-bg) !important; border: 1px solid var(--b4-badge-muted-border) !important; color: var(--b4-badge-muted-text) !important; } .b4-chip { background: rgba(255,255,255,.08) !important; border: 1px solid var(--b4-border) !important; color: var(--b4-text) !important; font-size: .75rem; } [data-theme="light"] .b4-chip { background: rgba(0,0,0,.06) !important; color: var(--b4-text-2) !important; } .b4-body .badge.text-bg-success { background: var(--b4-badge-ok-bg) !important; color: var(--b4-badge-ok-text) !important; border: 1px solid var(--b4-badge-ok-border); } .b4-body .badge.text-bg-secondary { background: var(--b4-badge-muted-bg) !important; color: var(--b4-badge-muted-text) !important; border: 1px solid var(--b4-badge-muted-border); } /* ---------- Code ---------- */ .b4-body code { color: var(--b4-accent); background: var(--b4-primary-dim); border: 1px solid var(--b4-border); padding: 1px 6px; border-radius: 6px; font-size: .88em; } .b4-pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .86rem; background: var(--b4-bg-3); border: 1px solid var(--b4-border); padding: 12px; border-radius: 10px; color: var(--b4-text); } .b4-pre-err { border-color: var(--b4-badge-err-border); background: var(--b4-badge-err-bg); } /* ---------- HR ---------- */ .b4-body hr { border-color: var(--b4-border); opacity: 1; } /* ---------- Misc helpers ---------- */ .b4-body .text-muted { color: var(--b4-text-2) !important; } .b4-body .small { font-size: .85rem; } .b4-inf { font-weight: 900; color: var(--b4-primary); } /* ========================================================== Drawer mobile — overlay lateral (não empurra conteúdo) ========================================================== */ .b4-drawer-backdrop { display: none; position: fixed; inset: 0; z-index: 1040; background: rgba(0,0,0,0); transition: background .25s ease; } .b4-backdrop-open { display: block !important; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); } .b4-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 88vw); z-index: 1050; background: var(--b4-navbar-bg); border-right: 1px solid var(--b4-border); box-shadow: 4px 0 32px rgba(0,0,0,.45); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); overflow-y: auto; } .b4-drawer-open { transform: translateX(0) !important; } .b4-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--b4-border); flex-shrink: 0; } .b4-drawer-close { background: none; border: none; color: var(--b4-text-2); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background .12s, color .12s; } .b4-drawer-close:hover { background: rgba(255,255,255,.08); color: var(--b4-text); } .b4-drawer-nav { display: flex; flex-direction: column; padding: 8px 8px; flex: 1; } .b4-drawer-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 8px; font-size: .9rem; font-weight: 500; color: var(--b4-text-2); text-decoration: none; transition: background .12s, color .12s; } .b4-drawer-link i { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; } .b4-drawer-link:hover, .b4-drawer-link.active { background: var(--b4-primary-dim); color: var(--b4-primary); } .b4-drawer-link.active { font-weight: 700; } .b4-drawer-logout { color: #ef4444 !important; margin-top: 4px; } .b4-drawer-logout:hover { background: rgba(239,68,68,.10) !important; color: #ef4444 !important; } .b4-drawer-divider { font-size: .70rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--b4-text-3); padding: 12px 14px 4px; } .b4-drawer-impersonate { background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.25); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: .80rem; color: #fbbf24; } /* Esconder hamburger no desktop */ .b4-hamburger { display: none !important; } @media (max-width: 991px) { .b4-hamburger { display: flex !important; } } /* ========================================================== Topbar B4 System ========================================================== */ .b4-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 20px; background: var(--b4-topbar-bg); border-bottom: 1px solid var(--b4-topbar-border); position: sticky; top: 0; z-index: 1030; box-shadow: 0 1px 12px rgba(0,0,0,.25); } .b4-topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .b4-topbar-right { display: flex; align-items: center; gap: 10px; white-space: nowrap; flex-shrink: 0; } /* Logo */ .b4-logo-mark { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1d6ac8 0%, #06b6d4 100%); box-shadow: 0 2px 10px rgba(29,106,200,.45); flex-shrink: 0; } .b4-logo-mark svg { width: 22px; height: 22px; fill: #fff; } .b4-topbar-titles { line-height: 1.15; min-width: 0; } .b4-sysname { font-size: .95rem; font-weight: 700; color: #fff; letter-spacing: -.01em; } .b4-appname { font-size: .78rem; color: rgba(255,255,255,.60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Env badge */ .b4-env-badge { font-size: .68rem; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: rgba(251,191,36,.18); border: 1px solid rgba(251,191,36,.35); color: #fbbf24; text-transform: uppercase; } .b4-env-badge.prod { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35); color: #4ade80; } /* User pill */ .b4-user-pill { display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); } .b4-user-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #8b5cf6); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #fff; } .b4-user-name { font-size: .82rem; color: rgba(255,255,255,.85); font-weight: 500; } /* Theme toggle */ .b4-theme-toggle { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.75); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; font-size: 1rem; } .b4-theme-toggle:hover { background: rgba(255,255,255,.12); color: #fff; } /* ========================================================== Navbar ========================================================== */ .b4-navbar { background: var(--b4-navbar-bg) !important; border-bottom: 1px solid var(--b4-navbar-border); padding: 0 20px !important; } .b4-navbar-brand { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; color: rgba(255,255,255,.92) !important; display: flex; align-items: center; gap: 7px; } .b4-navbar-brand i { color: #25d366; font-size: 1.1rem; } .b4-navbar .nav-link { color: rgba(255,255,255,.65) !important; font-size: .88rem; padding: 12px 14px !important; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; display: flex; align-items: center; gap: 5px; } .b4-navbar .nav-link:hover { color: rgba(255,255,255,.92) !important; } .b4-navbar .nav-link.active, .b4-navbar .nav-link.b4-nav-active { color: #fff !important; border-bottom-color: var(--b4-primary); font-weight: 600; } .b4-navbar .nav-link.disabled { color: rgba(255,255,255,.40) !important; } /* ========================================================== Plan Cards (admin) ========================================================== */ .b4-plan-card { border: 1px solid var(--b4-card-border); transition: border-color .2s, box-shadow .2s; } .b4-plan-card:hover { border-color: var(--b4-primary); box-shadow: 0 0 0 3px var(--b4-primary-dim), var(--b4-shadow-sm); } .b4-plan-inactive { opacity: .55; } /* ========================================================== Mobile List Cards ========================================================== */ .b4-list-card { border: 1px solid var(--b4-card-border); background: var(--b4-card-bg); border-radius: 12px; padding: 12px; } .b4-list-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .b4-list-title { font-size: 1rem; font-weight: 600; color: var(--b4-text); } .b4-list-actions .btn { padding: .28rem .55rem; } .b4-kv { display: flex; gap: 10px; margin-top: 8px; } .b4-k { min-width: 88px; font-size: .80rem; color: var(--b4-text-2); } .b4-v { flex: 1; min-width: 0; color: var(--b4-text); font-weight: 500; } .b4-kv-stack { margin-top: 10px; } .b4-kv-stack .b4-k { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; } .b4-kv-stack .b4-v { line-height: 1.3; } .b4-v-wrap { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } details.b4-list-card > summary::-webkit-details-marker { display: none; } /* ========================================================== Dashboard Metrics ========================================================== */ .b4-metric { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--b4-text); line-height: 1; } .b4-chart-wrap { position: relative; width: 100%; min-height: 220px; } /* ========================================================== WhatsApp Preview ========================================================== */ .phone-frame { border-radius: 24px; border: 1px solid var(--b4-card-border); background: var(--b4-phone-bg); box-shadow: var(--b4-shadow); overflow: hidden; } .phone-header { padding: 10px 14px; font-weight: 600; font-size: .90rem; background: rgba(37,211,102,.10); border-bottom: 1px solid rgba(37,211,102,.20); color: var(--b4-text); display: flex; align-items: center; gap: 8px; } .phone-header::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #25d366; flex-shrink: 0; } .message-area { padding: 14px; background: var(--b4-phone-bg); min-height: 360px; max-height: 520px; overflow: auto; } .message-bubble { display: inline-block; max-width: 92%; padding: 10px 14px; border-radius: 0 14px 14px 14px; background: var(--b4-bubble-bg); border: 1px solid var(--b4-bubble-border); color: var(--b4-text); line-height: 1.4; font-size: .93rem; word-break: break-word; } .message-bubble strong { font-weight: 700; } .message-bubble img { display: block; width: 100%; max-width: 260px; height: auto; border-radius: 10px; margin: 0 0 8px 0; border: 1px solid var(--b4-border); } .message-bubble .placeholder { color: var(--b4-text-3); } /* ========================================================== Responsivo ========================================================== */ /* Tablet */ @media (max-width: 991px) { .b4-body .container-fluid { padding-left: 16px; padding-right: 16px; } .b4-body h4 { font-size: 1.1rem; } .b4-topbar { padding: 8px 16px; } .b4-body .table .b4-td-truncate { max-width: 180px; } } /* Mobile */ @media (max-width: 575px) { .b4-body .container, .b4-body .container-fluid { padding-left: 14px; padding-right: 14px; } .b4-topbar { padding: 8px 14px; } .b4-appname { display: none; } .b4-env-badge { display: none; } .b4-body .btn { padding: .42rem .70rem; } .b4-body .form-control, .b4-body .form-select { min-height: 44px; } .b4-body .form-check { min-width: 46%; } .phone-frame { max-width: 100% !important; transform: none !important; } .b4-chart-wrap { min-height: 200px; } .b4-body h4 { font-size: 1.05rem; } } /* ========================================================== Histórico — Agrupamento por data e período ========================================================== */ .b4-date-divider { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 8px 4px 6px; border-bottom: 1px solid var(--b4-border); margin-top: 20px; margin-bottom: 8px; } .b4-date-divider:first-child { margin-top: 0; } .b4-date-label { font-weight: 700; font-size: .88rem; color: var(--b4-text); text-transform: capitalize; } .b4-date-count { font-size: .80rem; color: var(--b4-text-2); } .b4-periodo-header { font-weight: 600; font-size: .82rem; color: var(--b4-text-2); padding: 10px 4px 4px; border-left: 3px solid var(--b4-primary); padding-left: 10px; margin: 12px 0 6px; } /* Paginação */ .b4-body .pagination .page-link { background: var(--b4-bg-3); border-color: var(--b4-border); color: var(--b4-text-2); border-radius: 6px !important; margin: 0 2px; } .b4-body .pagination .page-item.active .page-link { background: var(--b4-primary) !important; border-color: var(--b4-primary) !important; color: #fff !important; } .b4-body .pagination .page-item.disabled .page-link { opacity: .4; } .b4-body .pagination .page-link:hover:not(.disabled) { background: var(--b4-primary-dim); color: var(--b4-primary); } /* ========================================================== Master — Banner de impersonação ========================================================== */ .b4-impersonating-bar { background: linear-gradient(90deg, rgba(251,191,36,.18), rgba(251,191,36,.08)); border-bottom: 1px solid rgba(251,191,36,.35); padding: 6px 20px; font-size: .82rem; color: #fbbf24; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* KPIs Master / Stat boxes adicionais */ .b4-stat-box { border-radius: 10px; } /* ========================================================== B4Modal — Substitui prompt/confirm/alert nativos ========================================================== */ #b4modal-container { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } .b4m-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0); backdrop-filter: blur(0px); transition: background .22s ease, backdrop-filter .22s ease; pointer-events: all; } .b4m-overlay.b4m-visible { background: rgba(0,0,0,.65); backdrop-filter: blur(6px); } .b4m-box { background: var(--b4-card-bg, #161b22); border: 1px solid var(--b4-card-border, rgba(255,255,255,.10)); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.55); padding: 32px 28px 24px; width: 100%; max-width: 420px; text-align: center; opacity: 0; transform: scale(.92) translateY(10px); transition: opacity .22s ease, transform .22s ease; } .b4m-box.b4m-visible { opacity: 1; transform: scale(1) translateY(0); } .b4m-icon-wrap { font-size: 2.4rem; line-height: 1; margin-bottom: 14px; } .b4m-title { font-size: 1.05rem; font-weight: 700; color: var(--b4-text, #e6edf3); margin-bottom: 10px; } .b4m-msg { font-size: .88rem; color: var(--b4-text-2, #8b949e); line-height: 1.55; margin-bottom: 18px; } .b4m-detalhe { font-size: .80rem; color: var(--b4-text-3, #6e7681); background: var(--b4-bg-3, #1c2430); border: 1px solid var(--b4-border, rgba(255,255,255,.10)); border-radius: 8px; padding: 8px 12px; margin-bottom: 18px; text-align: left; line-height: 1.5; } .b4m-input { width: 100%; background: var(--b4-input-bg, #0d1117) !important; border: 1px solid var(--b4-border-input, rgba(255,255,255,.14)) !important; border-radius: 8px !important; color: var(--b4-text, #e6edf3) !important; padding: 10px 14px; font-size: .95rem; margin-bottom: 8px; outline: none; transition: border-color .15s, box-shadow .15s; } .b4m-input:focus { border-color: var(--b4-primary, #3b82f6) !important; box-shadow: 0 0 0 3px rgba(59,130,246,.20) !important; } .b4m-dica { font-size: .78rem; color: var(--b4-text-3, #6e7681); margin-bottom: 16px; text-align: left; } .b4m-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } .b4m-btn { padding: 9px 20px; border-radius: 8px; font-size: .88rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .15s; } .b4m-btn-ghost { background: transparent; border-color: var(--b4-border, rgba(255,255,255,.10)); color: var(--b4-text-2, #8b949e); } .b4m-btn-ghost:hover { background: rgba(255,255,255,.06); color: var(--b4-text, #e6edf3); } .b4m-btn-primary { background: var(--b4-primary, #3b82f6); border-color: var(--b4-primary, #3b82f6); color: #fff; } .b4m-btn-primary:hover { background: #2563eb; box-shadow: 0 0 12px rgba(59,130,246,.4); } .b4m-btn-danger { background: #ef4444; border-color: #ef4444; color: #fff; } .b4m-btn-danger:hover { background: #dc2626; box-shadow: 0 0 12px rgba(239,68,68,.4); } /* Light mode */ [data-theme="light"] .b4m-box { background: #ffffff; border-color: rgba(0,0,0,.08); box-shadow: 0 24px 64px rgba(0,0,0,.18); } [data-theme="light"] .b4m-title { color: #0f172a; } [data-theme="light"] .b4m-msg { color: #475569; } [data-theme="light"] .b4m-input { background: #f8fafc !important; border-color: #d1d5db !important; color: #0f172a !important; } [data-theme="light"] .b4m-detalhe { background: #f8fafc; border-color: rgba(0,0,0,.08); color: #64748b; } [data-theme="light"] .b4m-btn-ghost { color: #64748b; border-color: #d1d5db; } [data-theme="light"] .b4m-btn-ghost:hover { background: rgba(0,0,0,.05); color: #0f172a; } /* ========================================================== Cards de resultado de envio (no editor) ========================================================== */ .b4-send-result { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 10px; border: 1px solid; font-size: .88rem; line-height: 1.5; } .b4-send-result > i { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; } .b4-send-result > div { flex: 1; min-width: 0; color: var(--b4-text); } .b4-send-ok { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.30); } .b4-send-ok > i { color: #22c55e; } .b4-send-err { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.30); } .b4-send-err > i { color: #ef4444; } .b4-send-result ol { margin: 8px 0 0; color: var(--b4-text-2); } .b4-send-result .btn { margin-top: 10px; } .b4-send-falhas { font-size: .82rem; color: var(--b4-text-2); } .b4-send-falhas summary { user-select: none; } .b4-send-falhas ul { color: var(--b4-text-2); padding-left: 16px; } .b4-send-falhas li { margin-bottom: 3px; } /* ========================================================== Zona de Anexo — Drag & Drop + botões por tipo ========================================================== */ /* Botões de tipo de anexo */ .b4-attach-type-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--b4-border); background: var(--b4-bg-3); color: var(--b4-text-2); font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; } .b4-attach-type-btn i { font-size: .95rem; } .b4-attach-type-btn:hover { border-color: var(--b4-primary); background: var(--b4-primary-dim); color: var(--b4-primary); } /* Zona de drag & drop */ .b4-attach-drop { border: 2px dashed var(--b4-border); border-radius: 12px; background: var(--b4-bg-3); min-height: 100px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, background .2s; position: relative; } .b4-attach-drop:hover { border-color: var(--b4-primary); background: var(--b4-primary-dim); } .b4-attach-drop.b4-attach-drop-over { border-color: var(--b4-primary); background: var(--b4-primary-dim); border-style: solid; } /* Filhos nunca interceptam drag — apenas o container recebe dragenter/dragleave */ .b4-attach-drop-idle, .b4-attach-drop-over, .b4-attach-drop-icon, .b4-attach-drop-label, .b4-attach-drop-hint { pointer-events: none; } .b4-attach-drop.b4-attach-drop-has-file { min-height: auto; padding: 12px; cursor: default; } .b4-attach-drop-idle, .b4-attach-drop-over { text-align: center; padding: 20px; pointer-events: none; } .b4-attach-drop-icon { font-size: 2rem; color: var(--b4-text-3); display: block; margin-bottom: 8px; } .b4-attach-drop-label { font-size: .88rem; color: var(--b4-text-2); font-weight: 500; } .b4-attach-drop-hint { font-size: .76rem; color: var(--b4-text-3); margin-top: 4px; } /* Preview dentro da zona */ .b4-attach-preview { display: flex; align-items: center; gap: 12px; width: 100%; } .b4-attach-img-preview { max-width: 120px; max-height: 100px; border-radius: 8px; border: 1px solid var(--b4-border); object-fit: cover; } .b4-attach-file-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .b4-attach-file-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; } .b4-attach-remove { margin-left: auto; flex-shrink: 0; background: none; border: 1px solid var(--b4-border); border-radius: 6px; padding: 4px 8px; color: var(--b4-text-3); cursor: pointer; transition: all .12s; } .b4-attach-remove:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #ef4444; } /* Aviso de link inválido */ .b4-link-warn { font-size: .78rem; color: #f59e0b; padding: 5px 10px; border-radius: 6px; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.25); } .b4-link-warn code { background: rgba(251,191,36,.15); color: #f59e0b; border: none; font-size: .78rem; } /* ========================================================== Modal de Variáveis Dinâmicas — design B4 compacto ========================================================== */ .b4-var-modal { background: var(--b4-card-bg); border: 1px solid var(--b4-card-border); border-radius: 16px; overflow: hidden; box-shadow: var(--b4-shadow); } .b4-var-modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--b4-border); background: var(--b4-bg-3); } .b4-var-modal-title { font-size: .95rem; font-weight: 700; color: var(--b4-text); } .b4-var-modal-sub { font-size: .76rem; color: var(--b4-text-3); margin-top: 2px; } .b4-var-close { background: none; border: none; color: var(--b4-text-2); font-size: 1rem; cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: all .12s; } .b4-var-close:hover { background: rgba(255,255,255,.08); color: var(--b4-text); } .b4-var-modal-body { padding: 14px 20px; display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; scrollbar-width: thin; } .b4-var-group-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--b4-text-3); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .b4-var-chips { display: flex; flex-wrap: wrap; gap: 8px; } .b4-var-chip { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--b4-border); border-radius: 10px; background: var(--b4-bg-3); cursor: pointer; transition: all .15s; text-align: left; min-width: 0; } .b4-var-chip:hover { border-color: var(--b4-primary); background: var(--b4-primary-dim); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59,130,246,.2); } .b4-var-chip:active { transform: scale(.97); } .b4-var-chip-code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem; font-weight: 700; color: var(--b4-accent); line-height: 1.2; } .b4-var-chip:hover .b4-var-chip-code { color: var(--b4-primary); } .b4-var-chip-desc { font-size: .70rem; color: var(--b4-text-3); margin-top: 2px; line-height: 1.2; } .b4-var-chip:hover .b4-var-chip-desc { color: var(--b4-text-2); } .b4-var-modal-footer { padding: 10px 20px; font-size: .75rem; color: var(--b4-text-3); border-top: 1px solid var(--b4-border); background: var(--b4-bg-3); } /* ========================================================== Barra de formatação WhatsApp (negrito, itálico, etc.) ========================================================== */ .b4-fmt-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; background: var(--b4-bg-3); border: 1px solid var(--b4-border); border-bottom: none; border-radius: 8px 8px 0 0; } .b4-fmt-bar + .form-control, .b4-fmt-bar + textarea { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .b4-fmt-btn { width: 30px; height: 28px; border: 1px solid transparent; background: none; border-radius: 6px; cursor: pointer; font-size: .82rem; color: var(--b4-text-2); display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s, border-color .12s; flex-shrink: 0; line-height: 1; } .b4-fmt-btn b { font-weight: 900; font-size: .9rem; } .b4-fmt-btn i { font-style: italic; font-size: .9rem; } .b4-fmt-btn s { text-decoration: line-through; font-size: .85rem; } .b4-fmt-btn code { font-family: monospace; font-size: .80rem; } .b4-fmt-btn:hover { background: var(--b4-primary-dim); color: var(--b4-primary); border-color: rgba(59,130,246,.3); } .b4-fmt-btn:active { transform: scale(.92); } .b4-fmt-sep { width: 1px; height: 18px; background: var(--b4-border); margin: 0 4px; flex-shrink: 0; } /* ========================================================== Emoji Picker — popup flutuante estilo WhatsApp ========================================================== */ /* Botão de abrir o picker */ .b4-emoji-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--b4-border); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; transition: background .15s, border-color .15s, transform .15s; flex-shrink: 0; } .b4-emoji-toggle:hover { background: var(--b4-primary-dim); border-color: var(--b4-primary); } .b4-emoji-toggle.active { background: var(--b4-primary-dim); border-color: var(--b4-primary); transform: scale(1.05); } /* Container do picker */ .b4-emoji-picker { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 500; width: 320px; max-width: calc(100vw - 32px); background: var(--b4-card-bg); border: 1px solid var(--b4-border); border-radius: 14px; box-shadow: var(--b4-shadow); overflow: hidden; animation: emojiPickerIn .18s ease; } @keyframes emojiPickerIn { from { opacity: 0; transform: scale(.95) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Abas de categorias */ .b4-emoji-picker-header { display: flex; border-bottom: 1px solid var(--b4-border); background: var(--b4-bg-3); padding: 0 4px; gap: 2px; } .b4-emoji-cat { flex: 1; padding: 8px 4px; font-size: .72rem; font-weight: 600; text-align: center; color: var(--b4-text-2); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .12s, border-color .12s; user-select: none; } .b4-emoji-cat:hover { color: var(--b4-text); } .b4-emoji-cat.active { color: var(--b4-primary); border-bottom-color: var(--b4-primary); } /* Grid de emojis */ .b4-emoji-grid { padding: 8px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--b4-border) transparent; } /* Grupo de emojis por categoria */ .b4-emoji-group { display: flex; flex-wrap: wrap; gap: 2px; } /* Botão individual de emoji */ .b4-emoji-btn { width: 36px; height: 36px; border: none; background: none; border-radius: 8px; font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .1s, transform .1s; flex-shrink: 0; } .b4-emoji-btn:hover { background: var(--b4-primary-dim); transform: scale(1.2); } .b4-emoji-btn:active { transform: scale(1.0); } /* ========================================================== Card de erro inline com orientações ========================================================== */ .b4-error-card-inline { border: 1px solid rgba(239,68,68,.35); border-left: 4px solid #ef4444; border-radius: 10px; background: rgba(239,68,68,.06); overflow: hidden; } .b4-error-card-header { padding: 10px 16px; background: rgba(239,68,68,.10); border-bottom: 1px solid rgba(239,68,68,.20); font-size: .9rem; color: var(--b4-text); } .b4-error-card-body { padding: 14px 16px; color: var(--b4-text-2); font-size: .88rem; line-height: 1.6; } .b4-error-card-body ol li a { color: var(--b4-primary); } /* ========================================================== Painel de disparo em background (tempo real) ========================================================== */ .b4-dispatch-panel { background: var(--b4-bg-3); border: 1px solid var(--b4-border); border-left: 3px solid var(--b4-primary); border-radius: 10px; padding: 14px 16px; } /* ========================================================== Barra global de status de disparo (todas as páginas) ========================================================== */ #globalDispatchBar { position: sticky; top: 64px; /* logo abaixo do topbar */ z-index: 1020; width: 100%; } .b4-global-dispatch { background: linear-gradient(135deg, rgba(14,30,50,.97), rgba(10,20,40,.97)); border-bottom: 1px solid rgba(59,130,246,.3); backdrop-filter: blur(8px); padding: 6px 0; } .b4-global-dispatch-inner { max-width: var(--b4-content-max, 1440px); margin: 0 auto; padding: 0 var(--b4-px-desktop, 40px); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #e6edf3; } @media (max-width: 768px) { .b4-global-dispatch-inner { padding: 0 16px; } } /* ========================================================== Barra flutuante de reenvio (histórico) ========================================================== */ .b4-reenvio-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1000; animation: slideUp .22s ease; } @keyframes slideUp { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .b4-reenvio-bar-inner { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-radius: 40px; background: var(--b4-bg-2); border: 1px solid var(--b4-border); box-shadow: 0 8px 32px rgba(0,0,0,.45); white-space: nowrap; } .b4-reenvio-count { font-size: .88rem; font-weight: 600; color: var(--b4-text); } /* ========================================================== Anti-ban ========================================================== */ .b4-antiban-box { background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25); border-radius: 12px; padding: 14px 16px; } .b4-antiban-title { font-size:.88rem; font-weight:700; color:var(--b4-text); margin-bottom:4px; } .b4-antiban-tip { font-size:.78rem; color:var(--b4-text-2); line-height:1.5; } .b4-antiban-presets { display:flex; align-items:center; flex-wrap:wrap; gap:6px; } .b4-preset-btn { padding:4px 12px; border-radius:20px; border:1px solid var(--b4-border); background:var(--b4-bg-3); color:var(--b4-text-2); font-size:.78rem; cursor:pointer; transition:all .15s; } .b4-preset-btn:hover { border-color:var(--b4-primary); color:var(--b4-primary); background:var(--b4-primary-dim); } /* Indicadores de entrega WhatsApp */ .b4-delivery { font-size:.80rem; display:inline-flex; align-items:center; gap:3px; white-space:nowrap; } .b4-delivery-sent { color: var(--b4-text-3); } .b4-delivery-delivered { color: var(--b4-text-2); } .b4-delivery-read { color: #3b82f6; } .b4-delivery-failed { color: #ef4444; } /* ========================================================== Biblioteca de Mídia ========================================================== */ .b4-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .b4-media-item { border: 1px solid var(--b4-border); border-radius: 10px; overflow: hidden; background: var(--b4-bg-3); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; position: relative; } .b4-media-item:hover { border-color: var(--b4-primary); box-shadow: 0 0 0 2px var(--b4-primary-dim); transform: translateY(-2px); } .b4-media-item-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--b4-bg-3); } .b4-media-item-icon { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; } .b4-media-item-name { font-size: .68rem; color: var(--b4-text-2); padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--b4-border); } .b4-media-item-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(239,68,68,.85); color: #fff; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: .72rem; line-height: 1; transition: background .12s; } .b4-media-item:hover .b4-media-item-del { display: flex; } .b4-media-item-del:hover { background: #dc2626; } /* ========================================================== Nav active marker ========================================================== */ .b4-nav-active { font-weight: 700 !important; } /* ========================================================== Página Minha Conta ========================================================== */ /* Avatar grande */ .b4-avatar-lg { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--b4-primary), var(--b4-accent)); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: #fff; flex-shrink: 0; box-shadow: 0 4px 16px rgba(59,130,246,.35); } /* Badge primary */ .b4-badge-primary { background: var(--b4-primary-dim) !important; border: 1px solid var(--b4-primary) !important; color: var(--b4-primary) !important; font-size: .72rem; } [data-theme="light"] .b4-badge-primary { color: var(--b4-primary-hover) !important; } /* Stat boxes */ .b4-stat-box { background: var(--b4-bg-3); border: 1px solid var(--b4-border); border-radius: 10px; padding: 10px 8px; } .b4-stat-num { font-size: 1.35rem; font-weight: 800; color: var(--b4-text); line-height: 1; } .b4-stat-label { font-size: .72rem; color: var(--b4-text-3); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; } /* Status dot */ .b4-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--b4-text-3); } .b4-status-dot.dot-ok { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.6); } .b4-status-dot.dot-err { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.5); } .b4-status-dot.dot-idle { background: #f59e0b; } /* QR frame */ .b4-qr-frame { display: inline-flex; align-items: center; justify-content: center; background: var(--b4-bg-3); border: 1px solid var(--b4-border); border-radius: 12px; padding: 12px; min-width: 180px; min-height: 180px; } /* ========================================================== Painel — Card de status Conexão WhatsApp ========================================================== */ .b4-status-card { border-left: 3px solid var(--b4-border); transition: border-color .3s; color: var(--b4-text) !important; } .b4-status-card * { color: inherit; } .b4-status-card .fw-bold, .b4-status-card .fw-semibold { color: var(--b4-text) !important; } .b4-status-card .small, .b4-status-card .text-muted { color: var(--b4-text-2) !important; } .b4-card-warn { border-left-color: #ef4444 !important; } .b4-evo-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(37,211,102,.12); border: 1px solid rgba(37,211,102,.25); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #25d366; flex-shrink: 0; } /* Atalhos rápidos */ .b4-shortcut-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; border-radius: 12px; border: 1px solid var(--b4-border); background: var(--b4-bg-3); color: var(--b4-text-2); transition: border-color .15s, background .15s, color .15s; text-align: center; } .b4-shortcut-card:hover { border-color: var(--b4-primary); background: var(--b4-primary-dim); color: var(--b4-primary); } .b4-shortcut-icon { font-size: 1.5rem; line-height: 1; } .b4-shortcut-label { font-size: .78rem; font-weight: 600; } /* ========================================================== Toggle de Tipo de Campanha ========================================================== */ .b4-tipo-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .b4-tipo-status { font-size: .82rem; color: var(--b4-text-3); font-weight: 400; user-select: none; } .b4-tipo-status strong { color: var(--b4-text-2); font-weight: 600; } /* Switch menor e mais discreto */ .b4-tipo-toggle-row .form-check-input { width: 2.2em; height: 1.15em; cursor: pointer; background-color: var(--b4-border-input) !important; border-color: var(--b4-border-input) !important; margin-top: 0; } .b4-tipo-toggle-row .form-check-input:checked { background-color: var(--b4-primary) !important; border-color: var(--b4-primary) !important; } .b4-tipo-geral-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: var(--b4-bg-3); border: 1px solid var(--b4-border); color: var(--b4-text-3); font-size: .82rem; }