@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,700&display=swap"); /* ============================================================ PALETA DE CORES — PORTAL DIAMANTE ============================================================ */ :root { /* Cores institucionais */ --sidebar-bg: #1d1a40; --sidebar-bg-hover: #2a2654; --sidebar-text: #e8e6f5; --sidebar-text-dim: #8a85b0; --accent: #ff730e; --accent-hover: #e6650a; --accent-soft: #ffe5d1; /* Cores neutras */ --ink-900: #0f1e2e; --ink-700: #2e3f57; --ink-500: #5d708f; --ink-300: #9aaac5; --line: #e4e9f2; --line-soft: #eef1f7; /* Backgrounds */ --bg-page: #f5f6fa; --surface: #ffffff; /* Status */ --success: #1e7a43; --success-soft: #e9f8ef; --warning: #b8860b; --warning-soft: #fff5de; --danger: #b12f2f; --danger-soft: #fdebec; --info: #1f4d9f; --info-soft: #edf2ff; /* Variações */ --radius-xl: 16px; --radius-lg: 12px; --radius-md: 8px; --radius-sm: 6px; --shadow-sm: 0 2px 8px rgba(15, 30, 46, 0.05); --shadow-md: 0 6px 18px rgba(15, 30, 46, 0.08); --shadow-lg: 0 16px 32px rgba(15, 30, 46, 0.1); } body.theme-dark { color-scheme: dark; --sidebar-bg: #15152d; --sidebar-bg-hover: #242447; --sidebar-text: #f3f1ff; --sidebar-text-dim: #a7a3ca; --accent: #ff8a33; --accent-hover: #ff9b52; --accent-soft: #3b2518; --ink-900: #f4f7fb; --ink-700: #dbe3ef; --ink-500: #9aa8bb; --ink-300: #687891; --line: #263348; --line-soft: #1b2534; --bg-page: #0c1220; --surface: #111827; --success: #68d391; --success-soft: #123322; --warning: #f6c453; --warning-soft: #352812; --danger: #f87171; --danger-soft: #3a181c; --info: #7aa7ff; --info-soft: #142746; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.22); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.28); --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.34); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } /* Cor de fundo no para eliminar o flash branco que o browser exibe entre a saída e a entrada de páginas */ html { background-color: #f5f6fa; } html[data-theme="dark"] { background-color: #0c1220; } body { font-family: "Manrope", "Segoe UI", Tahoma, sans-serif; color: var(--ink-900); background: var(--bg-page); font-size: 14px; line-height: 1.5; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ============================================================ LAYOUT PRINCIPAL — SIDEBAR + CONTEÚDO ============================================================ */ .app { display: flex; min-height: 100vh; } /* Só o conteúdo principal é escondido até o JS renderizar. O sidebar permanece visível via placeholder durante a troca de páginas. */ .main { opacity: 0; transition: opacity 160ms var(--ease-fluid, ease); } body.page-ready .main { opacity: 1; } /* SIDEBAR ===================================================== */ .sidebar { width: 240px; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 0; height: 100vh; } .sidebar-brand { padding: 1.4rem 1.3rem; display: flex; align-items: center; gap: 0.7rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .sidebar-brand-logo { width: 38px; height: 38px; border-radius: 10px; background: transparent; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.1rem; } .sidebar-brand-text strong { display: block; font-size: 0.98rem; font-weight: 700; letter-spacing: 0.2px; } .sidebar-brand-text span { font-size: 0.74rem; color: var(--sidebar-text-dim); } .sidebar-section-label { padding: 1.4rem 1.3rem 0.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 1.4px; color: var(--sidebar-text-dim); text-transform: uppercase; } .sidebar-menu { list-style: none; margin: 0; padding: 0 0.6rem; flex: 1; } .sidebar-menu li a { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; border-radius: var(--radius-md); color: var(--sidebar-text); font-size: 0.88rem; font-weight: 500; margin-bottom: 0.2rem; transition: background 160ms ease, color 160ms ease; } .sidebar-menu li a:hover { background: var(--sidebar-bg-hover); } .sidebar-menu li a.active { background: var(--sidebar-bg-hover); color: var(--accent); font-weight: 700; } .sidebar-menu .icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-user { padding: 1rem 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; gap: 0.7rem; } .sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sidebar-bg-hover); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; } .sidebar-user-info strong { display: block; font-size: 0.85rem; font-weight: 600; } .sidebar-user-info span { font-size: 0.74rem; color: var(--sidebar-text-dim); } /* CONTEÚDO PRINCIPAL ========================================= */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 0.9rem 1.8rem; display: flex; justify-content: space-between; align-items: center; } .topbar-context { font-size: 0.92rem; color: var(--ink-700); font-weight: 500; } .topbar-actions { display: flex; align-items: center; gap: 0.7rem; } .topbar-icon { position: relative; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-500); transition: background 160ms ease; background: transparent; border: none; } .topbar-icon:hover { background: var(--line-soft); } .theme-toggle { gap: 0.45rem; width: auto; min-width: 36px; padding: 0 0.7rem; border-radius: var(--radius-md); font-weight: 700; font-size: 0.78rem; } .theme-toggle span { display: inline-block; } .topbar-icon .badge-count { position: absolute; top: 4px; right: 4px; background: #e63946; color: #fff; font-size: 0.65rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .content { flex: 1; padding: 2rem 1.8rem; } /* ============================================================ CABEÇALHO DE PÁGINA ============================================================ */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.6rem; gap: 1rem; flex-wrap: wrap; } .page-title { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 1.85rem; font-weight: 700; color: var(--ink-900); } .page-subtitle { margin: 0.3rem 0 0; color: var(--ink-500); font-size: 0.92rem; } /* ============================================================ BOTÕES ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 0; background: var(--accent); color: #fff; border-radius: var(--radius-md); padding: 0.7rem 1.1rem; font-weight: 700; font-size: 0.88rem; letter-spacing: 0.2px; cursor: pointer; text-decoration: none; transition: background 160ms ease, transform 160ms ease; } .btn:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn.secondary { background: var(--surface); color: var(--ink-700); border: 1px solid var(--line); } .btn.secondary:hover { background: var(--line-soft); border-color: var(--ink-300); } .btn.danger { background: var(--danger); } .btn.danger:hover { background: #911e1e; } /* ============================================================ CARDS DE MÉTRICAS ============================================================ */ .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .metric-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.2rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow-sm); } .metric-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .metric-icon.info { background: var(--info-soft); color: var(--info); } .metric-icon.warning { background: var(--warning-soft); color: var(--warning); } .metric-icon.danger { background: var(--danger-soft); color: var(--danger); } .metric-icon.success { background: var(--success-soft); color: var(--success); } .metric-icon.accent { background: var(--accent-soft); color: var(--accent); } .metric-value { margin: 0; font-size: 1.85rem; font-weight: 800; color: var(--ink-900); line-height: 1; } .metric-label { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--ink-500); } /* ============================================================ GRAFICOS DE DASHBOARD ============================================================ */ .dashboard-grid { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr); gap: 1rem; margin-bottom: 1.5rem; } .chart-panel { min-height: 100%; } .chart-panel .panel-header { align-items: flex-start; } .panel-kicker { margin: 0.25rem 0 0; color: var(--ink-500); font-size: 0.82rem; } .donut-layout { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 1.2rem; } .donut-chart { width: 180px; height: 180px; border-radius: 50%; background: var(--line-soft); position: relative; box-shadow: inset 0 0 0 1px var(--line); } .donut-chart::after { content: ""; position: absolute; inset: 34px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line); } body.theme-dark .donut-chart::after { background: var(--surface); } .donut-total { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .donut-total strong { font-size: 2rem; line-height: 1; } .donut-total span { margin-top: 0.25rem; color: var(--ink-500); font-size: 0.78rem; font-weight: 700; } .chart-legend { display: grid; gap: 0.65rem; } .legend-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; font-size: 0.84rem; color: var(--ink-700); } .legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-300); } .legend-value { color: var(--ink-500); font-weight: 700; } .bar-chart { display: grid; gap: 0.8rem; } .bar-row { display: grid; grid-template-columns: minmax(110px, 170px) 1fr auto; align-items: center; gap: 0.8rem; } .bar-label { color: var(--ink-700); font-size: 0.84rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; } .bar-fill { height: 100%; width: var(--bar-width, 0%); min-width: 4px; border-radius: inherit; background: var(--bar-color, var(--accent)); transition: width 500ms ease; } .bar-value { min-width: 44px; text-align: right; color: var(--ink-500); font-size: 0.82rem; font-weight: 700; } .filter-panel { margin-bottom: 1rem; } .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; align-items: end; } .filter-grid .filter-field:first-child { grid-column: span 2; } .filter-field label { margin-bottom: 0.3rem; } .filter-actions { display: flex; align-items: end; } /* Variação para destaque com cabeçalho de seção */ .section-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-500); margin: 1.4rem 0 0.7rem; } /* ============================================================ PAINEL / CONTAINER GENÉRICO ============================================================ */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem; box-shadow: var(--shadow-sm); } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; } .panel-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 0.5rem; } /* ============================================================ TABELAS ============================================================ */ .table-wrap { overflow-x: auto; border-radius: var(--radius-md); } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 0.85rem 0.9rem; font-size: 0.88rem; border-bottom: 1px solid var(--line-soft); } th { font-weight: 600; color: var(--ink-500); font-size: 0.82rem; text-transform: none; background: transparent; } tbody tr:hover { background: var(--line-soft); } td strong { color: var(--ink-900); font-weight: 600; } td.protocol { color: var(--ink-500); font-family: "Manrope", monospace; font-size: 0.82rem; } /* ============================================================ BADGES / STATUS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2px; } .badge.status-aberta, .badge.status-em-aberto { background: var(--info-soft); color: var(--info); } .badge.status-em-analise { background: var(--warning-soft); color: var(--warning); } .badge.status-em-atendimento { background: var(--accent-soft); color: var(--accent); } .badge.status-aguardando { background: var(--danger-soft); color: var(--danger); } .badge.status-concluida { background: var(--success-soft); color: var(--success); } .badge.status-cancelada { background: var(--line-soft); color: var(--ink-500); } .badge.priority-alta { background: var(--danger-soft); color: var(--danger); } .badge.priority-media { background: var(--warning-soft); color: var(--warning); } .badge.priority-baixa { background: var(--success-soft); color: var(--success); } .badge.tipo-unidade { background: var(--info-soft); color: var(--info); } .badge.tipo-matriz { background: var(--accent-soft); color: var(--accent); } .badge.tipo-master { background: #efe6fb; color: #6a3bbd; } body.theme-dark .badge.tipo-master { background: #281f43; color: #c7b5ff; } body.theme-dark .badge.origem-unidade { background: var(--info-soft); color: var(--info); } body.theme-dark .badge.origem-matriz { background: #281f43; color: #c7b5ff; } body.theme-dark .metric-icon[style*="#efe6fb"] { background: #281f43 !important; color: #c7b5ff !important; } .badge-status-ativo { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--success); font-size: 0.78rem; font-weight: 600; } .badge-status-inativo { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--danger); font-size: 0.78rem; font-weight: 600; } .badge-status-ativo::before, .badge-status-inativo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ============================================================ FORMULÁRIOS ============================================================ */ label { display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--ink-700); } input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.65rem 0.8rem; font: inherit; font-size: 0.9rem; color: var(--ink-900); background: var(--surface); transition: border-color 160ms ease, box-shadow 160ms ease; } input::placeholder, textarea::placeholder { color: var(--ink-300); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 115, 14, 0.15); } textarea { min-height: 120px; resize: vertical; font-family: inherit; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .form-grid .full { grid-column: 1 / -1; } .form-help { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--ink-500); } .form-error { display: none; margin-top: 0.6rem; color: var(--danger); font-size: 0.84rem; font-weight: 600; padding: 0.6rem 0.8rem; background: var(--danger-soft); border-radius: var(--radius-sm); } .form-success { display: none; margin-top: 0.6rem; color: var(--success); font-size: 0.84rem; font-weight: 600; padding: 0.6rem 0.8rem; background: var(--success-soft); border-radius: var(--radius-sm); } .file-upload { border: 1px dashed var(--line); border-radius: var(--radius-md); padding: 1rem; background: var(--line-soft); } .file-upload input[type="file"] { background: var(--surface); } .file-list { display: grid; gap: 0.55rem; margin-top: 0.8rem; } .file-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8rem; padding: 0.75rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } .file-item strong { display: block; color: var(--ink-900); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-item span { color: var(--ink-500); font-size: 0.78rem; } .file-link { white-space: nowrap; color: var(--accent); font-size: 0.82rem; font-weight: 800; } .file-link:hover { text-decoration: underline; } /* ============================================================ TOAST GLOBAL ============================================================ */ .app-toast { position: fixed; top: 1rem; right: 1rem; z-index: 80; min-width: min(340px, calc(100vw - 2rem)); max-width: 420px; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1rem; border-radius: var(--radius-md); border: 1px solid rgba(30, 122, 67, 0.25); background: #2ecc71; color: #073b1d; box-shadow: var(--shadow-lg); transform: translateX(calc(100% + 1.5rem)); opacity: 0; transition: transform 220ms ease, opacity 220ms ease; } .app-toast.show { transform: translateX(0); opacity: 1; } .app-toast-icon { width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .app-toast-body { flex: 1; min-width: 0; } .app-toast-title { margin: 0; font-weight: 800; font-size: 0.9rem; } .app-toast-message { margin: 0.15rem 0 0; font-size: 0.82rem; color: inherit; opacity: 0.86; } .app-toast-close { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; opacity: 0.75; padding: 0.15rem; } .app-toast-close:hover { opacity: 1; } body.theme-dark .app-toast { background: #2fbf71; color: #062814; } /* ============================================================ TELA DE LOGIN ============================================================ */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: radial-gradient(circle at 0% 0%, rgba(29, 26, 64, 0.06) 0%, transparent 45%), radial-gradient(circle at 100% 100%, rgba(255, 115, 14, 0.07) 0%, transparent 45%), var(--bg-page); } body.theme-dark .auth-page { background: radial-gradient(circle at 0% 0%, rgba(122, 167, 255, 0.08) 0%, transparent 42%), radial-gradient(circle at 100% 100%, rgba(255, 138, 51, 0.1) 0%, transparent 42%), var(--bg-page); } .auth-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius-xl); padding: 2.4rem 2rem; box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: rise 500ms ease; } .auth-brand { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem; margin-bottom: 1.8rem; } .auth-logo { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--sidebar-bg) 0%, #2f2a6e 100%); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; font-weight: 800; box-shadow: 0 8px 18px rgba(29, 26, 64, 0.25); } .auth-logo span { background: linear-gradient(135deg, var(--accent) 0%, #ffa356 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-title { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 1.6rem; font-weight: 700; text-align: center; } .auth-subtitle { margin: 0.3rem 0 0; color: var(--ink-500); font-size: 0.9rem; text-align: center; } .auth-form { display: grid; gap: 1rem; } .auth-form .btn { width: 100%; padding: 0.85rem; font-size: 0.95rem; } .auth-link { text-align: center; margin: 0.8rem 0 0; font-size: 0.86rem; } .auth-link a { color: var(--accent); font-weight: 600; } .auth-link a:hover { text-decoration: underline; } .auth-footer { text-align: center; margin-top: 1.6rem; color: var(--ink-500); font-size: 0.78rem; } /* ============================================================ UTILITÁRIOS ============================================================ */ .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-sm { gap: 0.5rem; } .gap-md { gap: 1rem; } .text-muted { color: var(--ink-500); } .text-small { font-size: 0.82rem; } .font-bold { font-weight: 700; } .space-top { margin-top: 1rem; } .space-top-lg { margin-top: 1.5rem; } .mb-0 { margin-bottom: 0; } /* Ajustes para estilos locais das paginas */ body.theme-dark .config-card, body.theme-dark .notif-item, body.theme-dark .modal-content { background: var(--surface) !important; border-color: var(--line) !important; } body.theme-dark .notif-item.nao-lida { background: #1f2635 !important; } body.theme-dark .export-btn { background: var(--line-soft); border-color: var(--line); color: var(--ink-700); } body.theme-dark .export-btn:hover { background: var(--line); color: var(--ink-900); } /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width: 920px) { .sidebar { width: 64px; } .sidebar-brand-text, .sidebar-section-label, .sidebar-menu li a span:not(.icon), .sidebar-user-info { display: none; } .sidebar-menu li a { justify-content: center; } .form-grid { grid-template-columns: 1fr; } .dashboard-grid, .donut-layout, .filter-grid { grid-template-columns: 1fr; } .filter-grid .filter-field:first-child { grid-column: auto; } .donut-chart { margin: 0 auto; } .bar-row { grid-template-columns: 1fr; gap: 0.35rem; } .bar-value { text-align: left; } .page-header { flex-direction: column; align-items: stretch; } .content { padding: 1.2rem 1rem; } } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .main { /* animação removida — a transição é controlada pelo fade do .app via page-ready */ } @keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ iOS 26 LIQUID GLASS — DESIGN SYSTEM ============================================================ */ /* --- Variáveis de vidro e spring --- */ :root { --glass-bg: rgba(255, 255, 255, 0.58); --glass-border: rgba(255, 255, 255, 0.68); --glass-blur: 22px; --glass-shadow: 0 8px 32px rgba(15, 30, 46, 0.07), 0 2px 6px rgba(15, 30, 46, 0.04); --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.9); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-fluid: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Raios mais arredondados no estilo iOS */ --radius-xl: 28px; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; } body.theme-dark { --glass-bg: rgba(17, 24, 39, 0.62); --glass-border: rgba(255, 255, 255, 0.07); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2); --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* --- Fundo com gradiente — necessário para o vidro funcionar --- */ body { background: radial-gradient(ellipse at 15% 50%, rgba(255, 115, 14, 0.13) 0%, transparent 55%), radial-gradient(ellipse at 85% 15%, rgba(29, 26, 64, 0.14) 0%, transparent 55%), radial-gradient(ellipse at 60% 88%, rgba(31, 77, 159, 0.08) 0%, transparent 50%), linear-gradient(145deg, #eef0ff 0%, #f5f6fa 45%, #fff4ee 100%); } body.theme-dark { background: radial-gradient(ellipse at 15% 50%, rgba(255, 115, 14, 0.07) 0%, transparent 55%), radial-gradient(ellipse at 85% 15%, rgba(122, 167, 255, 0.09) 0%, transparent 55%), radial-gradient(ellipse at 60% 88%, rgba(31, 77, 159, 0.07) 0%, transparent 50%), linear-gradient(145deg, #080c1a 0%, #0c1220 100%); } /* --- Placeholder do sidebar: evita flash antes do JS renderizar --- */ #sidebar-placeholder { width: 240px; flex-shrink: 0; background: #0d0a2a; position: sticky; top: 0; height: 100vh; } /* --- Sidebar — sólida (backdrop-filter aqui causaria travamento na troca de páginas) --- */ .sidebar { background: #0d0a2a; border-right: 1px solid rgba(255, 255, 255, 0.06); } body.theme-dark .sidebar { background: #06051a; } body.theme-dark #sidebar-placeholder { background: #06051a; } .sidebar-menu li a { transition: background 200ms var(--ease-fluid), color 200ms var(--ease-fluid), transform 260ms var(--spring); } .sidebar-menu li a:hover { transform: translateX(3px); } .sidebar-menu li a.active { background: rgba(255, 115, 14, 0.15); box-shadow: inset 3px 0 0 var(--accent); } /* --- Topbar com vidro claro --- */ .topbar { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--glass-border); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), var(--glass-shadow); } body.theme-dark .topbar { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), var(--glass-shadow); } .topbar-icon { transition: background 200ms var(--ease-fluid), transform 260ms var(--spring); } .topbar-icon:hover { transform: scale(1.1); } /* --- Panels e Cards com vidro --- */ .panel, .metric-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-inner); transition: transform 300ms var(--spring), box-shadow 300ms var(--ease-fluid); will-change: transform; } .panel:hover, .metric-card:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(15, 30, 46, 0.11), 0 4px 12px rgba(15, 30, 46, 0.06), var(--glass-inner); } body.theme-dark .panel:hover, body.theme-dark .metric-card:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25), var(--glass-inner); } /* --- Botões com spring e brilho --- */ .btn { box-shadow: 0 2px 10px rgba(255, 115, 14, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: background 200ms var(--ease-fluid), transform 300ms var(--spring), box-shadow 280ms var(--ease-fluid); } .btn:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 10px 26px rgba(255, 115, 14, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .btn:active { transform: translateY(0) scale(0.975); transition-duration: 100ms; } .btn.secondary { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-inner); } .btn.secondary:hover { background: rgba(255, 255, 255, 0.82); box-shadow: 0 10px 26px rgba(15, 30, 46, 0.1), var(--glass-inner); } body.theme-dark .btn.secondary { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); box-shadow: var(--glass-shadow); } body.theme-dark .btn.secondary:hover { background: rgba(255, 255, 255, 0.1); } /* --- Inputs com vidro sutil --- */ input, select, textarea { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(195, 208, 228, 0.7); transition: border-color 200ms var(--ease-fluid), box-shadow 200ms var(--ease-fluid), background 200ms var(--ease-fluid); } input:focus, select:focus, textarea:focus { background: rgba(255, 255, 255, 0.92); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 115, 14, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6); } body.theme-dark input, body.theme-dark select, body.theme-dark textarea { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color-scheme: dark; } body.theme-dark input:focus, body.theme-dark select:focus, body.theme-dark textarea:focus { background: rgba(255, 255, 255, 0.08); } /* Dropdown nativo do