/* ============================================================ app.css — Design System Base Micro apps operacionais — Destak / rzt.digital ============================================================ Estrutura: 1. Design Tokens (CSS custom properties) 2. Reset utilitário 3. Botões 4. Inputs e Labels 5. Cards 6. Badges 7. Alertas 8. Sidebar / Navegação 9. Tipografia de página 10. Empty States 11. Utilitários de tabela 12. Divisor 13. Correções de plataforma ============================================================ */ /* ============================================================ 1. DESIGN TOKENS Fonte de verdade para cores, superfícies e bordas. Modo escuro: sobrescreve via classe .dark no . ============================================================ */ :root { /* --- Brand (azul) --- */ --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-200: #bfdbfe; --brand-500: #3b82f6; --brand-600: #2563eb; --brand-700: #1d4ed8; --brand-800: #1e40af; --brand-900: #1e3a8a; /* --- Superfície e fundo --- */ --surface: #ffffff; --surface-hover: #f9fafb; --surface-input: #ffffff; /* --- Bordas --- */ --border: #e5e7eb; --border-input: #e5e7eb; /* --- Texto --- */ --text-primary: #111827; --text-secondary: #374151; --text-muted: #6b7280; --text-placeholder: #9ca3af; --text-label: #4b5563; /* --- Sombra padrão --- */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* --- Raio de borda --- */ --radius-sm: 0.375rem; /* rounded */ --radius-md: 0.5rem; /* rounded-lg */ --radius-lg: 0.75rem; /* rounded-xl */ --radius-full: 9999px; /* --- Transição padrão --- */ --transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); /* --- Cores semânticas (light) --- */ --error-bg: #fef2f2; --error-border: #fecaca; --error-text: #b91c1c; --error-icon: #dc2626; --warning-bg: #fff7ed; --warning-border: #fed7aa; --warning-text: #c2410c; --warning-icon: #ea580c; --success-bg: #ecfdf5; --success-border: #a7f3d0; --success-text: #065f46; --success-icon: #059669; --info-bg: #eff6ff; --info-border: #bfdbfe; --info-text: #1d4ed8; --info-icon: #2563eb; } /* --- Modo escuro: sobrescreve os tokens --- */ .dark { --surface: #1e293b; /* slate-800 */ --surface-hover: #334155; /* slate-700 */ --surface-input: #1e293b; --border: #334155; --border-input: #475569; /* slate-600 */ --text-primary: #f1f5f9; --text-secondary: #e2e8f0; --text-muted: #94a3b8; --text-placeholder: #64748b; --text-label: #94a3b8; --error-bg: rgb(127 29 29 / 0.2); --error-border: #991b1b; --error-text: #fca5a5; --error-icon: #f87171; --warning-bg: rgb(124 45 18 / 0.2); --warning-border: #9a3412; --warning-text: #fdba74; --warning-icon: #fb923c; --success-bg: rgb(6 78 59 / 0.2); --success-border: #065f46; --success-text: #6ee7b7; --success-icon: #34d399; --info-bg: rgb(30 58 138 / 0.2); --info-border: #1e40af; --info-text: #93c5fd; --info-icon: #60a5fa; } /* ============================================================ 2. RESET UTILITÁRIO ============================================================ */ [x-cloak] { display: none !important; } *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ 3. BOTÕES ============================================================ */ /* Base — compartilhado por todas as variantes */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; cursor: pointer; border: none; text-decoration: none; transition: var(--transition); white-space: nowrap; } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn:active:not(:disabled) { transform: scale(0.95); } /* Primário */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: var(--transition); white-space: nowrap; background-color: var(--brand-600); color: #ffffff; padding: 0.5rem 1rem; box-shadow: var(--shadow-sm); } .btn-primary:hover { background-color: var(--brand-700); } .btn-primary:active { transform: scale(0.95); } .btn-primary:disabled, .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Secundário */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: var(--transition); white-space: nowrap; background-color: var(--surface); color: var(--text-secondary); border: 1px solid var(--border); padding: 0.5rem 1rem; box-shadow: var(--shadow-sm); } .btn-secondary:hover { background-color: var(--surface-hover); } .btn-secondary:active { transform: scale(0.95); } .btn-secondary:disabled, .btn-secondary[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Ghost */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; cursor: pointer; background: transparent; border: none; text-decoration: none; transition: var(--transition); padding: 0.375rem 0.75rem; color: var(--text-muted); } .btn-ghost:hover { background-color: var(--surface-hover); } .btn-ghost:active { transform: scale(0.95); } .dark .btn-ghost:hover { background-color: var(--surface-hover); } /* Danger */ .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: var(--transition); white-space: nowrap; background-color: #dc2626; color: #ffffff; padding: 0.5rem 1rem; box-shadow: var(--shadow-sm); } .btn-danger:hover { background-color: #b91c1c; } .btn-danger:active { transform: scale(0.95); } .btn-danger:disabled, .btn-danger[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ============================================================ 4. INPUTS E LABELS ============================================================ */ .input-base { width: 100%; display: block; border-radius: var(--radius-md); border: 1px solid var(--border-input); background-color: var(--surface-input); padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.5rem; color: var(--text-primary); transition: var(--transition); outline: none; font-family: inherit; appearance: none; -webkit-appearance: none; } .input-base::placeholder { color: var(--text-placeholder); } .input-base:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--brand-500); } .input-error { border-color: #f87171 !important; } .input-error:focus { box-shadow: 0 0 0 2px #f87171 !important; } .label { display: block; font-size: 0.75rem; line-height: 1.25rem; font-weight: 500; color: var(--text-label); margin-bottom: 0.25rem; } /* ============================================================ 5. CARDS ============================================================ */ .card { background-color: var(--surface); border-radius: 1rem; /* rounded-2xl — matches form card structure */ box-shadow: var(--shadow-sm); border: 1px solid var(--border); padding: 1.25rem; } .card-sm { background-color: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border); padding: 1rem; } /* ============================================================ 6. BADGES ============================================================ */ /* Base */ .badge { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.5rem; white-space: nowrap; } /* Variantes — light */ .badge-red { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.5rem; white-space: nowrap; background-color: #fee2e2; color: #b91c1c; } .badge-orange { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.5rem; white-space: nowrap; background-color: #ffedd5; color: #c2410c; } .badge-green { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.5rem; white-space: nowrap; background-color: #d1fae5; color: #065f46; } .badge-blue { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.5rem; white-space: nowrap; background-color: #dbeafe; color: #1d4ed8; } .badge-gray { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.5rem; white-space: nowrap; background-color: #f3f4f6; color: #4b5563; } /* Variantes — dark */ .dark .badge-red { background-color: rgb(127 29 29 / 0.4); color: #fca5a5; } .dark .badge-orange { background-color: rgb(124 45 18 / 0.4); color: #fdba74; } .dark .badge-green { background-color: rgb(6 78 59 / 0.4); color: #6ee7b7; } .dark .badge-blue { background-color: rgb(30 58 138 / 0.4); color: #93c5fd; } .dark .badge-gray { background-color: #334155; color: #cbd5e1; } /* ============================================================ 7. ALERTAS ============================================================ */ /* Base */ .alert { display: flex; align-items: flex-start; gap: 0.75rem; border-radius: var(--radius-md); border: 1px solid; padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.5rem; } /* Variantes */ .alert-error { display: flex; align-items: flex-start; gap: 0.75rem; border-radius: var(--radius-md); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.5rem; background-color: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); } .alert-warning { display: flex; align-items: flex-start; gap: 0.75rem; border-radius: var(--radius-md); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.5rem; background-color: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-text); } .alert-success { display: flex; align-items: flex-start; gap: 0.75rem; border-radius: var(--radius-md); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.5rem; background-color: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); } .alert-info { display: flex; align-items: flex-start; gap: 0.75rem; border-radius: var(--radius-md); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.5rem; background-color: var(--info-bg); border: 1px solid var(--info-border); color: var(--info-text); } /* ============================================================ 8. SIDEBAR / NAVEGAÇÃO A sidebar tem fundo sempre escuro (slate-900) independente do tema. ============================================================ */ .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: #94a3b8; /* slate-400 */ text-decoration: none; transition: var(--transition); cursor: pointer; } .nav-item:hover { color: #ffffff; background-color: rgba(51, 65, 85, 0.6); /* slate-700/60 */ } .nav-item-active { background-color: var(--brand-600) !important; color: #ffffff !important; } .nav-item-active:hover { background-color: var(--brand-700) !important; } .nav-section { display: block; font-size: 0.6875rem; /* 11px */ font-weight: 600; color: #64748b; /* slate-500 */ text-transform: uppercase; letter-spacing: 0.1em; padding: 0 0.75rem; margin-bottom: 0.25rem; } /* ============================================================ 9. TIPOGRAFIA DE PÁGINA ============================================================ */ .page-title { font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; color: var(--text-primary); } .page-subtitle { font-size: 0.875rem; line-height: 1.5rem; color: var(--text-muted); margin-top: 0.125rem; } .section-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; color: var(--text-secondary); } /* Bolinha numérica ao lado do título de seção */ .section-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem; border-radius: var(--radius-full); background-color: var(--brand-100); color: var(--brand-700); font-size: 0.6875rem; font-weight: 700; line-height: 1; } .dark .section-badge { background-color: var(--brand-900); color: #93c5fd; /* brand-300 */ } /* ============================================================ 10. EMPTY STATES ============================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; text-align: center; } .empty-state-icon { width: 3rem; height: 3rem; color: #d1d5db; /* gray-300 */ margin-bottom: 0.75rem; } .dark .empty-state-icon { color: #475569; } /* slate-600 */ .empty-state-title { font-size: 0.875rem; font-weight: 600; color: var(--text-muted); } .empty-state-text { font-size: 0.75rem; color: #9ca3af; /* gray-400 */ margin-top: 0.25rem; } .dark .empty-state-text { color: #64748b; } /* slate-500 */ /* ============================================================ 11. TABELA UTILITÁRIA ============================================================ */ .th { font-size: 0.75rem; /* 12px */ font-weight: 600; color: #9ca3af; /* gray-400 */ text-transform: uppercase; letter-spacing: 0.04em; } .dark .th { color: #64748b; } /* slate-500 */ /* ============================================================ 12. DIVISOR ============================================================ */ .divider { border: none; border-top: 1px solid var(--border); margin: 0; } /* ============================================================ 13. CORREÇÕES DE PLATAFORMA ============================================================ */ /* Previne zoom automático em inputs no iOS */ @media screen and (max-width: 767px) { input, select, textarea { font-size: 16px !important; } } /* Scrollbar fina (usada na sidebar) */ #sidebar { scrollbar-width: thin; scrollbar-color: #334155 transparent; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: #334155; border-radius: 4px; } /* ============================================================ 14. APP LAUNCHER (HOME) ============================================================ */ .app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 1rem 0; } @media (min-width: 640px) { /* sm */ .app-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } } @media (min-width: 1024px) { /* lg */ .app-grid { grid-template-columns: repeat(6, 1fr); gap: 2.5rem; } } .app-btn { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.75rem; transition: opacity 0.2s; cursor: pointer; text-decoration: none; } .app-btn:active .app-icon-wrapper { transform: scale(0.92); } .app-btn.disabled { opacity: 0.5; cursor: not-allowed; } .app-btn.disabled:active .app-icon-wrapper { transform: scale(1); /* no scale if disabled */ } .app-icon-wrapper { width: 4rem; height: 4rem; border-radius: 1.25rem; /* iOS-like squircle */ display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform; } @media (min-width: 640px) { .app-icon-wrapper { width: 4.5rem; height: 4.5rem; border-radius: 1.35rem; } } .app-btn-label { font-size: 0.75rem; font-weight: 500; color: var(--text); text-align: center; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(255,255,255,0.8); } .dark .app-btn-label { text-shadow: 0 1px 2px rgba(0,0,0,0.8); } /* App Colors */ .app-color-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .app-color-orange { background: linear-gradient(135deg, #fb923c, #c2410c); } .app-color-gray { background: linear-gradient(135deg, #9ca3af, #4b5563); } /* ============================================================ 15. COMPONENTES DE TABELA ============================================================ */ /* Wrapper com scroll horizontal em telas pequenas */ .table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Célula de dado padrão */ .td { padding: 0.625rem 1rem; font-size: 0.875rem; line-height: 1.5rem; color: var(--text-secondary); border-bottom: 1px solid var(--border); } /* Linha com hover interativo */ .tr-hover { transition: background-color 150ms ease; } .tr-hover:hover > td, .tr-hover:hover > th { background-color: var(--surface-hover); } /* Linha selecionada */ .tr-selected > td, .tr-selected > th { background-color: #eff6ff; } .dark .tr-selected > td, .dark .tr-selected > th { background-color: rgb(30 58 138 / 0.12); } /* Botão de ordenação em cabeçalho */ .th-sort { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; user-select: none; white-space: nowrap; background: none; border: none; padding: 0; font-size: inherit; font-weight: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; transition: color 150ms; } .th-sort:hover { color: var(--text-secondary); }