/* ═══════════════════════════════════════════════════════════════════════════ MEDAULA DESIGN SYSTEM v1.0 Design system reutilizável extraído do Sistema Grupo MedAula. Portátil: cole em qualquer projeto HTML/PHP. Só depende de: Google Fonts (Inter, Outfit, Space Mono) + Lucide icons (opcional). ═══════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); /* ─── TOKENS ─── */ :root { /* Cores primárias — TROQUE --accent pela cor do seu projeto */ --accent: #0891b2; --accent-soft: rgba(8, 145, 178, .08); --accent-hover: #077995; --accent2: #0094cc; --accent3: #d94800; /* Semânticas */ --sucesso: #10B981; --erro: #DC2626; --aviso: #F59E0B; --info: #3B82F6; --roxo: #8B5CF6; --meta: #2563EB; --whatsapp:#25D366; /* Neutrais (tema claro) */ --bg: #f6f7fb; --bg2: #ffffff; --bg3: #f0f2f7; --border: #dde1ed; --text: #1a1d2e; --text2: #3d4358; --text3: #64708a; /* Status legado (compatibilidade MedAula) */ --pronto: #059669; --warn: #b8860b; /* Elevação */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, .06); --shadow-md: 0 8px 24px rgba(0, 0, 0, .08); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .12); /* Raios */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Densidade (troque data-density no pra ajustar) */ --density-row-y: 11px; --density-row-x: 14px; --density-card-pad: 20px; --density-font: 13px; --density-gap: 14px; --density-kpi-pad: 18px; } :root[data-density="compact"] { --density-row-y: 5px; --density-row-x: 10px; --density-card-pad: 12px; --density-font: 12px; --density-gap: 8px; --density-kpi-pad: 11px; } :root[data-density="comfortable"] { --density-row-y: 18px; --density-row-x: 20px; --density-card-pad: 30px; --density-font: 14px; --density-gap: 22px; --density-kpi-pad: 24px; } /* Dark mode */ [data-theme="dark"] { --bg: #0a0c10; --bg2: #111318; --bg3: #181b22; --border: #1e2330; --accent-soft: rgba(8, 145, 178, .16); --accent-hover: #22b8d8; --accent2: #00b8ff; --accent3: #ff6b35; --text: #e8eaf0; --text2: #a4adc0; --text3: #7c8699; --pronto: #10b981; --warn: #ffd166; --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3); --shadow-md: 0 8px 24px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6); } /* Suporte automático via prefers-color-scheme (opcional) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a0c10; --bg2: #111318; --bg3: #181b22; --border: #1e2330; --text: #e8eaf0; --text2: #a4adc0; --text3: #7c8699; } } /* ─── RESET & BASE ─── */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: var(--density-font); line-height: 1.5; min-height: 100vh; overflow-x: clip; -webkit-font-smoothing: antialiased; transition: background .2s, color .2s; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ─── TIPOGRAFIA ─── */ .h1 { font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.2; } .h2 { font-size: 18px; font-weight: 700; color: var(--text); } .h3 { font-size: 15px; font-weight: 700; color: var(--text); } .text-muted { color: var(--text2); } .text-dim { color: var(--text3); } .text-mono { font-family: 'Space Mono', ui-monospace, monospace; } .pagina-supra { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; } .pagina-titulo { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700; color: var(--text); margin-top: 4px; } /* ─── BOTÕES ─── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: background .15s, border-color .15s, transform .1s; text-decoration: none; line-height: 1.4; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primario { background: var(--accent); color: #fff; } .btn-primario:hover { background: var(--accent-hover); } .btn-secundario { background: var(--bg2); color: var(--text); border: 1px solid var(--border); } .btn-secundario:hover { background: var(--bg3); border-color: var(--text3); } .btn-ghost { background: transparent; color: var(--text2); border: 1px solid transparent; } .btn-ghost:hover { background: var(--bg3); color: var(--text); } .btn-danger { background: transparent; color: var(--erro); border: 1px solid var(--border); } .btn-danger:hover { background: rgba(220, 38, 38, .08); border-color: var(--erro); } .btn-sm { padding: 5px 10px; font-size: 11.5px; } .btn-lg { padding: 12px 22px; font-size: 14px; } .btn-icone { padding: 8px; min-width: 34px; justify-content: center; } /* ─── CARDS ─── */ .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--density-card-pad); } .form-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; } .table-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .table-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .table-title { font-size: 14px; font-weight: 700; color: var(--text); } .table-scroll { overflow-x: auto; } /* ─── TABELA GMAULA ─── */ table.gmaula { width: 100%; border-collapse: collapse; font-size: var(--density-font); } table.gmaula th { padding: 10px var(--density-row-x); text-align: left; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; border-bottom: 1px solid var(--border); background: var(--bg2); white-space: nowrap; } table.gmaula td { padding: var(--density-row-y) var(--density-row-x); border-bottom: 1px solid var(--bg3); color: var(--text); } table.gmaula tr:last-child td { border-bottom: none; } table.gmaula tbody tr:hover { background: var(--bg3); } /* Zebra */ table.gmaula tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg3) 40%, transparent); } table.gmaula tbody tr:nth-child(even):hover { background: var(--bg3); } /* ─── KPI GRID ─── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--density-gap); } .kpi-grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .kpi-grid-4 { grid-template-columns: 1fr; } } .kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--density-kpi-pad); border-left: 3px solid var(--accent); transition: transform .15s, box-shadow .15s; } .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .kpi-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; margin-bottom: 6px; } .kpi-valor { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; font-family: 'Outfit', sans-serif; } .kpi-sub { font-size: 11.5px; color: var(--text3); margin-top: 4px; } /* Variações de cor no KPI */ .kpi.kpi-sucesso { border-left-color: var(--sucesso); } .kpi.kpi-sucesso .kpi-valor { color: var(--sucesso); } .kpi.kpi-info { border-left-color: var(--info); } .kpi.kpi-info .kpi-valor { color: var(--info); } .kpi.kpi-aviso { border-left-color: var(--aviso); } .kpi.kpi-aviso .kpi-valor { color: var(--aviso); } .kpi.kpi-erro { border-left-color: var(--erro); } .kpi.kpi-erro .kpi-valor { color: var(--erro); } .kpi.kpi-roxo { border-left-color: var(--roxo); } .kpi.kpi-roxo .kpi-valor { color: var(--roxo); } /* ─── PILLS / BADGES / CHIPS ─── */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; } .pill-sucesso { background: rgba(16,185,129,.14); color: var(--sucesso); } .pill-erro { background: rgba(220,38,38,.14); color: var(--erro); } .pill-aviso { background: rgba(245,158,11,.14); color: var(--aviso); } .pill-info { background: rgba(59,130,246,.14); color: var(--info); } .pill-roxo { background: rgba(139,92,246,.14); color: var(--roxo); } .pill-neutro { background: var(--bg3); color: var(--text3); } .pill-accent { background: var(--accent-soft); color: var(--accent); } .badge-num { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; line-height: 1.4; min-width: 18px; text-align: center; display: inline-block; } /* ─── FILTER BUTTONS ─── */ .filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; text-decoration: none; background: transparent; color: var(--text2); border: 1px solid var(--border); transition: all .15s; cursor: pointer; font-family: inherit; } .filter-btn:hover { background: var(--bg3); color: var(--text); } .filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* ─── SEGMENTED CONTROL (Todos/Meta/QR estilo) ─── */ .seg-group { display: inline-flex; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px; gap: 2px; } .seg-item { padding: 5px 12px; font-size: 11.5px; font-weight: 600; border-radius: var(--radius-sm); text-decoration: none; color: var(--text2); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: none; background: transparent; font-family: inherit; } .seg-item:hover { color: var(--text); } .seg-item.active { background: var(--accent); color: #fff; } /* ─── INPUTS ─── */ .input, input[type="text"].form-input, input[type="email"].form-input, input[type="tel"].form-input, input[type="number"].form-input, input[type="password"].form-input, textarea.form-input, select.form-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; background: var(--bg2); color: var(--text); font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; line-height: 1.4; } .input:focus, .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(8, 145, 178, .12); } .label { font-size: 11.5px; font-weight: 600; color: var(--text2); display: block; margin-bottom: 5px; } .form-group { margin-bottom: 14px; } /* ─── FLASH MESSAGES ─── */ .flash { padding: 12px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: 13px; border-left: 4px solid; line-height: 1.5; } .flash-sucesso { background: #dcfce7; color: #166534; border-left-color: #22c55e; } .flash-erro { background: #fee2e2; color: #991b1b; border-left-color: #dc2626; } .flash-aviso { background: #fef3c7; color: #92400e; border-left-color: #f59e0b; } .flash-info { background: #dbeafe; color: #1e40af; border-left-color: #3b82f6; } /* ─── EMPTY STATE ─── */ .empty-state { text-align: center; padding: 40px 20px; color: var(--text3); } .empty-state-icon { width: 48px; height: 48px; margin: 0 auto 12px; opacity: .35; } .empty-state-title { font-size: 14px; font-weight: 600; color: var(--text2); margin-bottom: 4px; } .empty-state-desc { font-size: 12.5px; color: var(--text3); max-width: 320px; margin: 0 auto; line-height: 1.5; } /* ─── TOAST ─── */ .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { background: var(--bg2); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 12px 18px; font-size: 13px; color: var(--text); box-shadow: var(--shadow-md); pointer-events: auto; min-width: 220px; max-width: 380px; animation: toast-in .25s ease-out; } .toast-sucesso { border-left-color: var(--sucesso); } .toast-erro { border-left-color: var(--erro); } .toast-aviso { border-left-color: var(--aviso); } @keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ─── MODAL (customizado, sem depender do confirm() nativo) ─── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 9998; display: none; align-items: center; justify-content: center; animation: fade-in .15s ease-out; } .modal-backdrop.aberto { display: flex; } @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } .modal { background: var(--bg2); border-radius: var(--radius-xl); padding: 22px 24px; min-width: 320px; max-width: 480px; width: 90vw; box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .modal-titulo { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--text); } .modal-corpo { font-size: 13.5px; color: var(--text2); line-height: 1.55; margin-bottom: 18px; } .modal-acoes { display: flex; justify-content: flex-end; gap: 8px; } /* ─── SIDEBAR ─── */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 300; } .sidebar-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--border); } .sidebar-logo { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 6px; } .sidebar-logo .accent { color: var(--accent); } .sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; } .sidebar-cat { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text3); font-weight: 600; padding: 14px 10px 6px; } .sidebar-item { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--radius); font-size: 12px; color: var(--text2); text-decoration: none; font-weight: 500; transition: background .15s, color .15s; position: relative; } .sidebar-item:hover { background: var(--bg3); color: var(--text); } .sidebar-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .sidebar-item.active::before { content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; background: var(--accent); border-radius: 0 3px 3px 0; } .main-wrap { margin-left: 240px; min-height: 100vh; overflow-x: clip; } .content { padding: 20px 30px; min-width: 0; } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform .25s; } .sidebar.aberta { transform: translateX(0); } .main-wrap { margin-left: 0; } } /* ─── TOPBAR ─── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 30px; background: var(--bg2); border-bottom: 1px solid var(--border); } /* ─── SCROLLBAR SLIM ─── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text3); } /* ─── UTILITIES ─── */ .d-flex { display: flex; } .d-grid { display: grid; } .d-inline-flex { display: inline-flex; } .d-none { display: none; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .text-center { text-align: center; } .text-right { text-align: right; } .w-100 { width: 100%; }