/* ═══════════════════════════════════════════════════════════════════════════ Lupion Theme — camada de tema moderno (claro/escuro) por cima do Bootstrap. Carregar DEPOIS de style.css. O tema é controlado por data-bs-theme no (js/tema.js), padrão: dark. ═══════════════════════════════════════════════════════════════════════════ */ :root { --lp-primary: #2D3FE7; --lp-primary-2: #6d7cff; --lp-grad: linear-gradient(135deg, #2D3FE7 0%, #6d7cff 100%); --surface-card: #ffffff; /* usado pelos templates no lugar de "white" */ --lp-nav-bg: rgba(255, 255, 255, 0.82); } /* ── Tema escuro: redefine as variáveis do Bootstrap ─────────────────────── */ html[data-bs-theme="dark"] { --bs-body-bg: #0b1020; --bs-body-color: #eef1fb; --bs-emphasis-color: #ffffff; --bs-secondary-color: #97a2c2; --bs-secondary-bg: #10162e; --bs-tertiary-bg: #0e1428; --bs-border-color: rgba(255, 255, 255, 0.09); --bs-link-color: #8b97ff; --bs-link-hover-color: #aab3ff; --bs-heading-color: #eef1fb; --surface-card: #10162e; --lp-nav-bg: rgba(11, 16, 32, 0.8); --color-navy: #eef1fb; /* tokens antigos do style.css invertidos */ --color-slate: #97a2c2; --color-border: rgba(255, 255, 255, 0.09); --color-surface: #0e1428; --bs-body-color-rgb: 238, 241, 251; } /* ── Correções de classes utilitárias no escuro ──────────────────────────── */ html[data-bs-theme="dark"] .bg-white, html[data-bs-theme="dark"] .bg-light { background-color: var(--surface-card) !important; } html[data-bs-theme="dark"] .text-dark { color: #eef1fb !important; } html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] .text-secondary { color: #97a2c2 !important; } html[data-bs-theme="dark"] .border { border-color: var(--bs-border-color) !important; } html[data-bs-theme="dark"] .table-light, html[data-bs-theme="dark"] .table-light > * { --bs-table-bg: var(--bs-tertiary-bg); --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); } html[data-bs-theme="dark"] .shadow, html[data-bs-theme="dark"] .shadow-sm, html[data-bs-theme="dark"] .shadow-lg { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important; } /* ── Componentes modernizados (valem nos dois temas) ─────────────────────── */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; } .card { border-radius: 16px; border: 1px solid var(--bs-border-color); } html[data-bs-theme="dark"] .card { background-color: rgba(255, 255, 255, 0.045); } .btn { border-radius: 10px; font-weight: 600; } .btn-primary { background: var(--lp-grad) !important; border: none !important; box-shadow: 0 6px 18px rgba(45, 63, 231, 0.3); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(45, 63, 231, 0.45); } .btn-outline-primary { border-radius: 10px; } .form-control, .form-select { border-radius: 10px; padding: 0.6rem 0.85rem; } html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select { background-color: rgba(255, 255, 255, 0.05); border-color: var(--bs-border-color); color: var(--bs-body-color); } html[data-bs-theme="dark"] .form-control::placeholder { color: #6b7694; } html[data-bs-theme="dark"] .input-group-text { background-color: rgba(255, 255, 255, 0.05); border-color: var(--bs-border-color); color: var(--bs-secondary-color); } .alert { border-radius: 12px; } .modal-content { border-radius: 18px; border: 1px solid var(--bs-border-color); } .dropdown-menu { border-radius: 14px; border: 1px solid var(--bs-border-color); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25); } .table { border-color: var(--bs-border-color); } .badge { border-radius: 8px; } html[data-bs-theme="dark"] .progress { background: rgba(255, 255, 255, 0.12); } html[data-bs-theme="dark"] .list-group-item { background: transparent; color: var(--bs-body-color); } html[data-bs-theme="dark"] .list-group-item:hover { background: rgba(109, 124, 255, 0.12); } html[data-bs-theme="dark"] .dropdown-item { color: var(--bs-body-color); } html[data-bs-theme="dark"] .dropdown-item:hover { background: rgba(109, 124, 255, 0.14); color: var(--bs-body-color); } /* ── Navbar Lupion ───────────────────────────────────────────────────────── */ .navbar-lupion { background: var(--lp-nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--bs-border-color); } .navbar-lupion .navbar-brand { font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; } .navbar-lupion .navbar-brand img { height: 36px; width: 36px; border-radius: 10px; } .navbar-lupion .nav-link { font-weight: 500; } /* Botão de alternar tema */ .btn-tema { border: 1px solid var(--bs-border-color); background: transparent; border-radius: 10px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; line-height: 1; transition: background 0.15s; } .btn-tema:hover { background: var(--bs-secondary-bg); } /* ── Páginas de conta (entrar, criar conta, senha) ───────────────────────── */ .auth-wrap { min-height: calc(100vh - 220px); display: flex; align-items: center; justify-content: center; padding: 2.5rem 0; } .auth-card { width: 100%; max-width: 460px; background: var(--surface-card); border: 1px solid var(--bs-border-color); border-radius: 22px; padding: 2.4rem 2.2rem; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12); } html[data-bs-theme="dark"] .auth-card { background: rgba(255, 255, 255, 0.04); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4); } .auth-logo { width: 62px; height: 62px; border-radius: 16px; display: block; margin: 0 auto 1.1rem; } .auth-titulo { font-weight: 800; letter-spacing: -0.02em; text-align: center; margin-bottom: 0.35rem; } .auth-sub { color: var(--bs-secondary-color); text-align: center; font-size: 0.92rem; margin-bottom: 1.8rem; } .auth-card .form-label { font-weight: 600; font-size: 0.88rem; } .auth-card .input-group .input-group-text { border-right: 0; } .auth-card .input-group .form-control { border-left: 0; } .auth-card .input-group:focus-within .input-group-text, .auth-card .input-group:focus-within .form-control { border-color: var(--lp-primary); } .auth-card .form-control:focus { box-shadow: none; } .btn-auth { width: 100%; padding: 0.85rem; font-size: 1rem; } .auth-links { text-align: center; margin-top: 1.4rem; font-size: 0.9rem; color: var(--bs-secondary-color); } .auth-links a { font-weight: 700; text-decoration: none; } .auth-pill { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(45, 63, 231, 0.1); color: var(--lp-primary-2); border-radius: 999px; padding: 7px 14px; font-size: 0.8rem; font-weight: 600; margin-bottom: 1.6rem; } html[data-bs-theme="light"] .auth-pill { color: var(--lp-primary); } /* ── Footer ──────────────────────────────────────────────────────────────── */ .footer-lupion { background: var(--bs-tertiary-bg); border-top: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); } .footer-lupion img { height: 24px; width: 24px; border-radius: 7px; }