/* ============================================================= CENTRAL POLÍTICA CRM — Estilos complementares ao Tailwind ------------------------------------------------------------- O Tailwind cuida de 95% da interface. Aqui ficam apenas: tokens de cor, ajustes finos de scrollbar, animações e componentes reutilizados em todas as telas. ============================================================= */ :root { /* Paleta da marca */ --cp-primaria: #2563eb; --cp-primaria-escura: #1d4ed8; --cp-secundaria: #0f172a; --cp-sucesso: #16a34a; --cp-alerta: #f59e0b; --cp-erro: #dc2626; --cp-info: #0ea5e9; /* Superfícies — tema claro */ --cp-fundo: #f8fafc; --cp-superficie: #ffffff; --cp-borda: #e2e8f0; --cp-texto: #0f172a; --cp-texto-suave:#64748b; } /* Superfícies — tema escuro */ .dark { --cp-fundo: #0b1120; --cp-superficie: #111827; --cp-borda: #1f2937; --cp-texto: #e5e7eb; --cp-texto-suave:#9ca3af; } /* ------------------------------------------------------------- Base ------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background-color: var(--cp-fundo); color: var(--cp-texto); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; transition: background-color .2s ease, color .2s ease; } /* Evita o "flash" de tema claro antes do JS aplicar o tema salvo */ .sem-transicao * { transition: none !important; } /* ------------------------------------------------------------- Scrollbar discreta ------------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .dark * { scrollbar-color: #374151 transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } .dark ::-webkit-scrollbar-thumb { background-color: #374151; } ::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; } /* ------------------------------------------------------------- Componentes reutilizáveis ------------------------------------------------------------- */ /* Cartão padrão */ .cp-card { background-color: var(--cp-superficie); border: 1px solid var(--cp-borda); border-radius: 1rem; box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 8px 24px -12px rgb(15 23 42 / .12); } /* Etiqueta de status */ .cp-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; line-height: 1.25rem; } /* ------------------------------------------------------------- Sidebar recolhida (apenas em telas grandes) A classe .sidebar-recolhida fica no ------------------------------------------------------------- */ @media (min-width: 1024px) { .sidebar-recolhida #cp-sidebar { width: 4.75rem; } .sidebar-recolhida #cp-sidebar .cp-rotulo { display: none; } .sidebar-recolhida #cp-sidebar nav a, .sidebar-recolhida #cp-sidebar .cp-rodape-sidebar > div { justify-content: center; } .sidebar-recolhida #cp-sidebar .cp-girar-recolher { transform: rotate(180deg); } } #cp-sidebar { transition: width .2s ease, transform .2s ease; } /* Foco acessível consistente */ .cp-foco:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cp-primaria); outline-offset: 2px; } /* Animação de entrada dos blocos */ @keyframes cp-surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .cp-surgir { animation: cp-surgir .28s ease both; } /* Pulso suave para indicadores de carregamento */ @keyframes cp-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .cp-pulso { animation: cp-pulso 1.6s cubic-bezier(.4, 0, .6, 1) infinite; } /* ------------------------------------------------------------- Impressão (relatórios — FASE 8) ------------------------------------------------------------- */ @media print { .cp-nao-imprimir { display: none !important; } body { background: #fff !important; color: #000 !important; } }