/* ========================================================= AZURE PULSE — Tema moderno com azul reforçado + dark mode Compatível com Bootstrap 4.6 e Chart.js ========================================================= */ :root{ --font-sans: ui-sans-serif, system-ui, -apple-system, "Inter", Segoe UI, Roboto, Helvetica, Arial, "Noto Sans"; /* Paleta Azul (reforçada) */ --primary-900:#0b2a6b; --primary-800:#123a88; --primary-700:#1848a6; --primary-600:#1f55c5; --primary:#2563eb; /* cor principal */ --primary-400:#4f83ff; --primary-300:#7aa3ff; --primary-200:#a9c0ff; --primary-100:#d6e2ff; /* Base clara */ --bg:#f2f6fc; --bg-alt:#edf3ff; --card:#ffffff; --text:#0e1628; --text-muted:#5b6680; --border:rgba(20, 33, 61, 0.12); --border-strong:rgba(20, 33, 61, 0.18); /* Estados */ --success:#12a150; --danger:#dc2626; /* Sombras / raios */ --radius-lg:16px; --radius-md:12px; --shadow-sm:0 4px 12px rgba(10, 33, 80, .08); --shadow-md:0 10px 28px rgba(10, 33, 80, .10); --shadow-lg:0 20px 55px rgba(10, 33, 80, .14); } /* Dark mode automático (e também ativável com .dark no ) */ @media (prefers-color-scheme: dark){ :root{ --bg:#0b111d; --bg-alt:#0e1423; --card:#10192b; --text:#e9efff; --text-muted:#a9b4cc; --border:rgba(160, 178, 230, 0.18); --border-strong:rgba(160, 178, 230, 0.28); } } html.dark{ --bg:#0b111d; --bg-alt:#0e1423; --card:#10192b; --text:#e9efff; --text-muted:#a9b4cc; --border:rgba(160, 178, 230, 0.18); --border-strong:rgba(160, 178, 230, 0.28); } /* ===== Base ===== */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:var(--font-sans); color:var(--text); /* Usa 3 camadas: 2 radiais + gradiente/base; sem repetir, fixas e a cobrir */ background-image: radial-gradient(900px 600px at 10% -10%, rgba(37,99,235,.18), transparent 60%), radial-gradient(800px 500px at 110% 0%, rgba(37,99,235,.12), transparent 55%), linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%); background-repeat: no-repeat; background-attachment: fixed; background-size: cover, cover, cover; background-position: center; line-height:1.45; } /* ===== Navbar moderna (adiciona .navbar-azure ao nav) ===== */ .navbar-azure{ background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 60%), linear-gradient(90deg, var(--primary-900), var(--primary-700) 35%, var(--primary) 100%); color:#fff !important; box-shadow:0 10px 30px rgba(12, 28, 70, .35); border-bottom:1px solid rgba(255,255,255,.08); } .navbar-azure .navbar-brand, .navbar-azure .nav-link, .navbar-azure .navbar-text{ color:#fff !important; } .navbar-azure .nav-link:hover{ color:#fff !important; text-decoration:none; } .navbar-azure .nav-link{ position:relative; padding-bottom:.35rem; } .navbar-azure .nav-link::after{ content:""; position:absolute; left:0; bottom:0; width:0%; height:2px; background:#fff; opacity:.9; transition:width .22s ease; } .navbar-azure .nav-link:hover::after, .navbar-azure .nav-item.active .nav-link::after{ width:100%; } .navbar-azure .dropdown-menu{ border:1px solid var(--border-strong); background:linear-gradient(180deg, rgba(255,255,255,.06), transparent), var(--card); box-shadow:var(--shadow-md); } /* Botão tema na navbar */ .btn-theme{ border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff; border-radius:999px; padding:6px 12px; } .btn-theme:hover{ background:rgba(255,255,255,.18); } /* ===== Container principal ===== */ .main-container{ background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.88)), var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:28px; max-width:1400px; margin:32px auto; } html.dark .main-container{ background: linear-gradient(180deg, rgba(16,25,43,.88), rgba(16,25,43,.92)), var(--card); } /* ===== Títulos / herói ===== */ .page-header{ display:grid; gap:6px; place-items:center; margin-bottom:12px; } .title-gradient{ margin:0; font-size:clamp(24px, 3vw, 34px); font-weight:800; letter-spacing:-.02em; background:linear-gradient(90deg, #fff 0%, #cfe0ff 20%, var(--primary-100) 40%, #fff 60%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 1px 0 rgba(0,0,0,.08); } html.dark .title-gradient{ background:linear-gradient(90deg, #cfe0ff 0%, #9ec0ff 35%, #eaf1ff 80%); } /* ===== KPI GRID ===== */ .kpi-grid{ display:grid; gap:16px; margin:16px 0 24px; grid-template-columns:repeat(4, minmax(0,1fr)); } @media (max-width:1100px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .kpi-grid{ grid-template-columns:1fr; } } .kpi-card{ position:relative; background: linear-gradient(180deg, rgba(37,99,235,.08), transparent 70%), var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-md); padding:18px; display:grid; grid-template-columns:54px 1fr; gap:12px; align-items:center; transition:transform .18s ease, box-shadow .18s ease; overflow:hidden; } .kpi-card::before{ content:""; position:absolute; inset:auto -20% -40% -20%; height:120px; background:radial-gradient(120px 60px at 50% 0%, rgba(37,99,235,.18), transparent 60%); transform:rotate(-4deg); } .kpi-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); } .kpi-icon{ width:54px; height:54px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(180deg, rgba(37,99,235,.16), rgba(37,99,235,.08)); color:var(--primary-700); border:1px solid var(--primary-200); font-size:20px; } .kpi-card h4{ margin:0 0 4px; font-size:13px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.02em; font-weight:800; } .kpi-value{ font-size:30px; font-weight:900; color:var(--primary-900); line-height:1.1; } html.dark .kpi-value{ color:var(--primary-200); } .kpi-sub{ font-size:12px; color:var(--text-muted); } /* Estados em cards */ .kpi-success .kpi-icon{ color:#0f8a47; background:linear-gradient(180deg, rgba(18,161,80,.14), rgba(18,161,80,.06)); border-color:rgba(18,161,80,.25); } .kpi-danger .kpi-icon{ color:#ef4444; background:linear-gradient(180deg, rgba(239,68,68,.14), rgba(239,68,68,.06)); border-color:rgba(239,68,68,.25); } /* ===== Painéis / secções ===== */ .panel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:16px; margin:18px 0; } .panel-header{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px dashed var(--border); padding-bottom:10px; margin-bottom:12px; } .panel-header h3{ margin:0; font-size:18px; letter-spacing:.2px; } /* ===== Tabela moderna ===== */ .table-responsive{ width:100%; overflow:auto; } .table.modern{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; background:transparent; } .table.modern thead th{ position:sticky; top:0; z-index:1; background: linear-gradient(180deg, rgba(37,99,235,.10), transparent 90%), var(--card); text-align:left; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); padding:12px; border-bottom:1px solid var(--border-strong); } .table.modern tbody td{ padding:12px; border-bottom:1px solid var(--border); } .table.modern tbody tr:hover{ background:linear-gradient(90deg, rgba(37,99,235,.08), transparent 65%); } /* ===== Botões ===== */ .btn-primary{ background:linear-gradient(180deg, var(--primary), var(--primary-700)); border:1px solid var(--primary-800); box-shadow:0 8px 20px rgba(37,99,235,.25); } .btn-primary:hover{ background:linear-gradient(180deg, var(--primary-400), var(--primary)); border-color:var(--primary-700); transform:translateY(-1px); } .btn{ border-radius:12px; transition:transform .18s ease, box-shadow .18s ease; } .btn:hover{ box-shadow:var(--shadow-sm); } /* ===== Canvas (Chart.js) ===== */ canvas{ width:100% !important; height:360px !important; display:block; } /* ===== Utilitários ===== */ .shadow-xl{ box-shadow:var(--shadow-lg) !important; } .text-center{ text-align:center; } /* ===== Ajustes responsivos ===== */ @media (max-width:768px){ .main-container{ padding:20px; } } /* ============================ DARK MODE FIX PACK (Bootstrap + UI) ============================ */ /* Texto e links */ html.dark body { color: var(--text); } html.dark a { color: var(--primary-300); } html.dark a:hover { color: var(--primary-200); } /* Navbar Azure: garante contraste */ html.dark .navbar-azure { background: linear-gradient(180deg, rgba(16,25,43,.35), transparent 60%), linear-gradient(90deg, var(--primary-900), var(--primary-700) 35%, var(--primary) 100%); color:#fff !important; } html.dark .navbar-azure .navbar-brand, html.dark .navbar-azure .nav-link, html.dark .navbar-azure .navbar-text { color:#fff !important; } html.dark .navbar-azure .dropdown-menu { background: linear-gradient(180deg, rgba(16,25,43,.92), rgba(16,25,43,.96)); border-color: var(--border-strong); } html.dark .navbar-azure .dropdown-item { color: var(--text); } html.dark .navbar-azure .dropdown-item:hover { background: rgba(37,99,235,.18); color: var(--text); } /* Botão tema */ html.dark .btn-theme { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; } /* Cards/painéis */ html.dark .panel, html.dark .main-container, html.dark .kpi-card { background: var(--card); color: var(--text); border-color: var(--border); } html.dark .kpi-value { color: var(--primary-200); } html.dark .kpi-card h4 { color: var(--text-muted); } /* Tabela moderna */ html.dark .table.modern thead th { background: linear-gradient(180deg, rgba(37,99,235,.14), transparent 90%), var(--card); color: var(--text-muted); border-bottom-color: var(--border-strong); } html.dark .table.modern tbody td { color: var(--text); border-bottom-color: var(--border); } html.dark .table.modern tbody tr:hover { background: linear-gradient(90deg, rgba(37,99,235,.10), transparent 65%); } /* Alerts bootstrap */ html.dark .alert.alert-success { background: rgba(18, 161, 80, .15); color: #b5f5cd; border: 1px solid rgba(18,161,80,.35); } html.dark .alert.alert-danger, html.dark .alert.alert-error { background: rgba(220, 38, 38, .18); color: #ffd6d6; border: 1px solid rgba(220,38,38,.35); } /* Modais */ html.dark .modal-content { background: var(--card); color: var(--text); border-color: var(--border); } html.dark .modal-header, html.dark .modal-footer { border-color: var(--border); } /* Botões Bootstrap (contraste) */ html.dark .btn-primary { background: linear-gradient(180deg, var(--primary-400), var(--primary)); border-color: var(--primary-700); color: #fff; } html.dark .btn-danger { background: linear-gradient(180deg, #ef4444, #dc2626); border-color: #b91c1c; color: #fff; } html.dark .btn, html.dark .btn:focus { color: #fff; } /* Utilitários Bootstrap frequentes */ html.dark .bg-light { background: #162235 !important; } html.dark .bg-white { background: var(--card) !important; } html.dark .text-dark { color: var(--text) !important; } html.dark .text-muted { color: var(--text-muted) !important; } html.dark .border { border-color: var(--border) !important; } /* Inputs / forms */ html.dark .form-control, html.dark .custom-select, html.dark input[type="text"], html.dark input[type="number"], html.dark textarea, html.dark select { background: #121a2b; color: var(--text); border: 1px solid var(--border-strong); } html.dark .form-control::placeholder { color: #96a2bb; } /* Toggler hambúrguer */ html.dark .navbar-toggler { border-color: rgba(255,255,255,.3); } html.dark .navbar-toggler-icon::before, html.dark .navbar-toggler-icon::after, html.dark .navbar-toggler-icon span { background: #fff; } /* Chart.js – se por algum motivo herdarem mal */ html.dark .panel canvas, html.dark canvas { background: transparent; } /* Links em tabelas/listas */ html.dark table a, html.dark .list-group a { color: var(--primary-300); } html.dark table a:hover, html.dark .list-group a:hover { color: var(--primary-200); } /* ===== HERO (título topo) ===== */ .page-header.hero { display: grid; place-items: center; gap: 8px; margin: 6px 0 10px; } .hero-title { margin: 0; display: inline-grid; grid-auto-flow: column; align-items: center; gap: 10px; } /* Título com alto contraste + leve “glow” para destacar em qualquer fundo */ .hero-title-main { font-weight: 900; letter-spacing: -0.02em; line-height: 1; /* tamanhos responsivos */ font-size: clamp(28px, 5vw, 44px); /* cor sólida para máxima leitura */ color: var(--text); /* contorno suave e glow para separar do fundo */ text-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 22px rgba(37, 99, 235, .18); /* fundo sutil para reforçar contraste em fundos claros */ background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); -webkit-background-clip: padding-box; background-clip: padding-box; padding: 2px 4px; border-radius: 8px; } /* Ícone grande e visível, alinhado ao título */ .hero-title-icon { font-size: clamp(22px, 4vw, 36px); color: var(--primary); filter: drop-shadow(0 6px 16px rgba(37,99,235,.25)); } /* Subtítulo com contraste suficiente */ .hero-subtitle { margin: 0; font-weight: 600; letter-spacing: .2px; color: var(--text-muted); font-size: clamp(13px, 1.8vw, 16px); opacity: .95; } /* Dark mode: reforça o contraste e reduz o “glow” azul */ html.dark .hero-title-main { color: #e9efff; /* texto claro forte */ text-shadow: 0 1px 0 rgba(0,0,0,.25), 0 8px 24px rgba(37,99,235,.22); background: linear-gradient(180deg, rgba(16,25,43,.55), rgba(16,25,43,0)); } html.dark .hero-title-icon { color: var(--primary-300); filter: drop-shadow(0 6px 18px rgba(37,99,235,.28)); } /* Opcional: separador sutil abaixo do header para “assentar” o título */ .main-container .page-header.hero::after { content: ""; width: min(1200px, 100%); height: 1px; background: linear-gradient(90deg, transparent, rgba(37,99,235,.18), transparent); margin-top: 10px; } /* ===== Pagination fixes ===== */ .pagination-bar{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 2px 2px; } .pagination{ flex-wrap: wrap; /* permite quebrar em várias linhas */ } .pagination .page-item{ margin: 2px; } .pagination .page-link{ border-color: var(--border); background: var(--card); color: var(--text); border-radius: 10px; min-width: 40px; text-align: center; } .page-item.active .page-link{ background: var(--primary); border-color: var(--primary-800); color: #fff; } html.dark .pagination .page-link{ background: var(--card); color: var(--text); border-color: var(--border); } /* ===== Flash Messages Melhoradas ===== */ .flash-messages-container { margin-bottom: 20px; } .flash-alert { border-radius: 12px; border: none; padding: 14px 18px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); animation: slideInDown 0.3s ease-out; } @keyframes slideInDown { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .flash-alert-icon { font-size: 18px; flex-shrink: 0; } .flash-alert-content { flex: 1; line-height: 1.4; } .flash-alert .close { padding: 14px 18px; opacity: 0.7; text-shadow: none; } .flash-alert .close:hover { opacity: 1; } /* Cores dos alertas */ .alert-success { background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.06)); color: #065f46; border-left: 4px solid #10b981; } .alert-danger { background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.06)); color: #991b1b; border-left: 4px solid #ef4444; } .alert-warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.06)); color: #92400e; border-left: 4px solid #f59e0b; } .alert-info { background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.06)); color: #1e40af; border-left: 4px solid #3b82f6; } /* Dark mode para alertas */ html.dark .alert-success { background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.08)); color: #6ee7b7; } html.dark .alert-danger { background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.08)); color: #fca5a5; } html.dark .alert-warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.08)); color: #fcd34d; } html.dark .alert-info { background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.08)); color: #93c5fd; } html.dark .flash-alert .close { color: var(--text); } /* ===== Loading Spinner para Formulários ===== */ .btn-loading { position: relative; pointer-events: none; } .btn-loading::after { content: ''; position: absolute; width: 16px; height: 16px; top: 50%; left: 50%; margin-left: -8px; margin-top: -8px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 0.6s linear infinite; } .btn-loading .btn-text { visibility: hidden; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== Estados Vazios ===== */ .empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); } .empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; color: var(--primary); } .empty-state-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; } .empty-state-text { font-size: 14px; max-width: 400px; margin: 0 auto 16px; } /* ===== Catálogo de Peças – Imagens & Altcodes ===== */ .part-image-container { height: 180px; display: flex; align-items: center; justify-content: center; } .part-image { width: 100%; max-height: 180px; object-fit: contain; } .part-image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 160px; background: linear-gradient(135deg, var(--bg-alt, #f0f4f8) 0%, var(--bg, #e8ecf0) 100%); border-radius: 12px; color: var(--text-muted, #94a3b8); gap: 8px; } .part-image-placeholder i { font-size: 2.5rem; opacity: 0.5; } .part-image-placeholder span { font-size: 0.85rem; } html.dark .part-image-placeholder { background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 100%); } .altcodes-section { font-size: 0.9em; } .altcodes-count { font-size: 0.75em; vertical-align: middle; } .altcodes-toggle { color: var(--primary); cursor: pointer; font-size: 0.85em; text-decoration: none; } .altcodes-toggle:hover { color: var(--primary-700); } .altcodes-toggle i { transition: transform 0.2s ease; } .altcodes-toggle.open i { transform: rotate(180deg); } .altcodes-list { background: var(--bg-alt, #f8f9fa); border-radius: 6px; padding: 6px 10px; font-size: 0.9em; line-height: 1.5; max-height: 120px; overflow-y: auto; } html.dark .altcodes-list { background: rgba(255,255,255,0.05); } .altcode-item { white-space: nowrap; } /* ===== Responsividade Mobile ===== */ @media (max-width: 768px) { /* Tabelas responsivas */ .table-responsive { border: 1px solid var(--border); border-radius: var(--radius-md); margin: -1px; } .table.modern { font-size: 13px; } .table.modern th, .table.modern td { padding: 10px 8px; white-space: nowrap; } /* Formulários em coluna */ .form-row > [class*="col-"] { margin-bottom: 12px; } /* Botões block em mobile */ .btn-mobile-block { display: block; width: 100%; margin-bottom: 8px; } /* KPI Grid */ .kpi-grid { grid-template-columns: 1fr !important; } .kpi-card { padding: 14px; } /* Navbar items */ .navbar-nav .nav-link { padding: 10px 15px; } /* Panels */ .panel { padding: 14px; margin: 12px 0; } .panel-header { flex-direction: column; align-items: flex-start; gap: 8px; } /* Hero title */ .hero-title-main { font-size: 24px !important; } .hero-subtitle { font-size: 13px !important; } } @media (max-width: 576px) { .main-container { padding: 16px; margin: 16px auto; border-radius: 12px; } body { padding-top: 60px; } /* User panel dropdown mais largo em mobile */ .user-panel-dropdown { min-width: 260px; right: -60px; } /* Esconde pesquisa global em mobile pequeno */ .global-search-form { display: none; } } /* ===== Pesquisa Global na Navbar ===== */ .global-search-form { margin: 0; } .global-search-input { background: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; color: #fff !important; border-radius: 20px 0 0 20px !important; padding-left: 14px; width: 180px; transition: width 0.3s ease, background 0.2s; } .global-search-input::placeholder { color: rgba(255, 255, 255, 0.7); } .global-search-input:focus { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.4) !important; width: 240px; box-shadow: none; } .btn-search { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.25); border-left: none; color: #fff; border-radius: 0 20px 20px 0; padding: 0 12px; } .btn-search:hover { background: rgba(255, 255, 255, 0.3); color: #fff; } /* Dark mode */ html.dark .global-search-input { background: rgba(0, 0, 0, 0.3) !important; border-color: rgba(255, 255, 255, 0.15) !important; } html.dark .global-search-input:focus { background: rgba(0, 0, 0, 0.4) !important; } html.dark .btn-search { background: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.15); } /* ===== Resultados de Pesquisa ===== */ .search-results-header { margin-bottom: 24px; } .search-query { color: var(--primary); font-weight: 700; } .search-section { margin-bottom: 32px; } .search-section-title { font-size: 16px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--border); } .search-result-item { display: block; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; text-decoration: none; color: var(--text); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .search-result-item:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); border-color: var(--primary); text-decoration: none; color: var(--text); } .search-result-title { font-weight: 600; margin-bottom: 4px; } .search-result-meta { font-size: 13px; color: var(--text-muted); } .search-result-badge { font-size: 11px; padding: 3px 8px; border-radius: 12px; margin-left: 8px; }