/* ============================================================================ * MGConnect Design System — mgconnect.css * v0.1.0 — 2026-05-22 * * Filosofia: industrial, operacional, telemetria. * Baixa distração, alta densidade informacional, leitura rápida, * foco em monitoramento. * * Convenções: * - Todas as classes usam prefixo `mgc-` para coexistir com CSS legado * durante a migração página-a-página. * - Tema dark é ativado por `` (compatível com * Albert View atual). Light é o default. * - Tokens são variáveis CSS semânticas, NÃO valores literais. Nunca * hard-code `#fff` em código de aplicação — use `var(--mgc-surface)`. * - Acessibilidade: respeita `prefers-reduced-motion` e safe-area iOS. * ========================================================================= */ /* ============================================================================ * 1. TOKENS * ========================================================================= */ :root { /* ---------- Superfícies ---------- */ --mgc-bg: #f0f2f5; --mgc-bg-gradient: linear-gradient(150deg, #d6e4f7 0%, #edf0f5 45%, #e8dff5 100%); --mgc-surface: #ffffff; --mgc-surface-2: #f4f6f9; --mgc-surface-sunken: #ecedf0; --mgc-card-bg: linear-gradient(145deg, #ffffff, #f4f6f9); --mgc-input-bg: #ffffff; --mgc-overlay: rgba(0, 0, 0, 0.55); /* ---------- Header (cromo industrial) ---------- */ --mgc-header-bg: linear-gradient(90deg, #2f3640, #57606f); --mgc-header-text: #ffffff; /* ---------- Texto ---------- */ --mgc-text: #2f3640; --mgc-text-2: #555555; --mgc-text-3: #888888; --mgc-text-faint: #b0b6c0; --mgc-text-on-accent: #ffffff; --mgc-text-link: #2563eb; /* ---------- Bordas ---------- */ --mgc-border: #dcdde1; --mgc-border-subtle: rgba(0, 0, 0, 0.07); --mgc-border-strong: #b8bdc4; /* ---------- Sombras ---------- */ --mgc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --mgc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --mgc-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12); --mgc-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.25); /* ---------- Cores semânticas de status ---------- * Use estas para sinalização — nunca para decoração arbitrária. * --success: estado bom, conectado, ok * --danger: destrutivo (delete, abort, offline), erros críticos * --warning: atenção, degradação, OTA em curso * --info: informação neutra, destaque suave * --neutral: estado indeterminado, loading */ --mgc-success: #2ecc71; --mgc-success-tint: #ecfdf5; --mgc-success-text: #065f46; --mgc-danger: #e74c3c; --mgc-danger-tint: #fef2f2; --mgc-danger-text: #991b1b; --mgc-warning: #f59e0b; --mgc-warning-tint: #fffbeb; --mgc-warning-text: #92400e; --mgc-info: #3b82f6; --mgc-info-tint: #eff6ff; --mgc-info-text: #1e40af; --mgc-neutral: #94a3b8; --mgc-neutral-tint: #f1f5f9; --mgc-neutral-text: #475569; /* ---------- Raios ---------- * Escala fixa. Nunca use valores ad-hoc. * xs: pills internos, badges pequenos * sm: botões, inputs, toolbar * md: cards pequenos, panels * lg: cards principais, alerts * xl: cards grandes em destaque * 2xl: modais * pill: full pill (status, tags) */ --mgc-radius-xs: 3px; --mgc-radius-sm: 6px; --mgc-radius-md: 8px; --mgc-radius-lg: 12px; --mgc-radius-xl: 16px; --mgc-radius-2xl: 18px; --mgc-radius-pill: 999px; /* ---------- Espaçamento (escala 4px) ---------- */ --mgc-space-0: 0; --mgc-space-1: 4px; --mgc-space-2: 6px; --mgc-space-3: 8px; --mgc-space-4: 10px; --mgc-space-5: 12px; --mgc-space-6: 16px; --mgc-space-7: 20px; --mgc-space-8: 24px; --mgc-space-9: 32px; --mgc-space-10: 48px; /* ---------- Tipografia ---------- */ --mgc-font-sans: "Segoe UI", Roboto, Arial, sans-serif; --mgc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --mgc-text-xs: 10px; --mgc-text-sm: 11px; --mgc-text-base: 12px; --mgc-text-md: 13px; --mgc-text-lg: 15px; --mgc-text-xl: 18px; --mgc-text-2xl: 22px; --mgc-text-3xl: 28px; --mgc-leading-tight: 1.15; --mgc-leading-base: 1.35; --mgc-leading-loose: 1.6; --mgc-weight-regular: 400; --mgc-weight-medium: 600; --mgc-weight-bold: 700; /* ---------- Transições ---------- * Regra: 120ms para hovers e mudanças de estado pequenas. * 200ms para painéis e composições. * 250ms para transformações elásticas (cards levantando). */ --mgc-trans-fast: 120ms ease; --mgc-trans-base: 200ms ease; --mgc-trans-slow: 250ms ease; /* ---------- Z-index ---------- */ --mgc-z-base: 1; --mgc-z-toolbar: 100; --mgc-z-header: 200; --mgc-z-overlay: 2000; --mgc-z-modal: 3000; --mgc-z-tooltip: 9000; --mgc-z-toast: 9999; } /* ---------- Dark mode ---------- * Compatível com a classe `dark-mode` que Albert View já usa hoje. * Apenas redefine as MESMAS variáveis. Nenhum componente abaixo * precisa saber se está em dark ou light. */ body.dark-mode { --mgc-bg: #1c1c1c; --mgc-bg-gradient: linear-gradient(150deg, #162033 0%, #1e1e1e 48%, #251528 100%); --mgc-surface: #2c2c2c; --mgc-surface-2: #363636; --mgc-surface-sunken: #1e1e1e; --mgc-card-bg: #505050; --mgc-input-bg: #363636; --mgc-overlay: rgba(0, 0, 0, 0.68); --mgc-header-bg: linear-gradient(90deg, #1f2630, #353e48); --mgc-header-text: #dde1e7; --mgc-text: #dde1e7; --mgc-text-2: #a0a8b4; --mgc-text-3: #6e7685; --mgc-text-faint: #555c66; --mgc-text-on-accent: #ffffff; --mgc-text-link: #60a5fa; --mgc-border: #444444; --mgc-border-subtle: rgba(255, 255, 255, 0.08); --mgc-border-strong: #5a5a5a; --mgc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --mgc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.28); --mgc-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.45); --mgc-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6); /* status: cores mantêm matiz, tints ficam escuros com mesma família */ --mgc-success-tint: #1a3826; --mgc-success-text: #4ade80; --mgc-danger-tint: #3a1818; --mgc-danger-text: #fca5a5; --mgc-warning-tint: #3a2c18; --mgc-warning-text: #fcd34d; --mgc-info-tint: #102a4d; --mgc-info-text: #93c5fd; --mgc-neutral-tint: #2a2f37; --mgc-neutral-text: #cbd5e1; } /* ============================================================================ * 2. RESET / BASE * ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--mgc-font-sans); font-size: var(--mgc-text-base); line-height: var(--mgc-leading-base); color: var(--mgc-text); background: var(--mgc-bg-gradient) fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Body com layout vertical full-height */ body.mgc-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; } img { max-width: 100%; display: block; } button { font-family: inherit; font-size: inherit; color: inherit; } a { color: var(--mgc-text-link); text-decoration: none; } a:hover { text-decoration: underline; } /* Scrollbar industrial — fino, discreto */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--mgc-border-strong); border-radius: var(--mgc-radius-xs); } ::-webkit-scrollbar-thumb:hover { background: var(--mgc-text-3); } * { scrollbar-color: var(--mgc-border-strong) transparent; scrollbar-width: thin; } /* ============================================================================ * 3. APP SHELL * ========================================================================= */ .mgc-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: var(--mgc-space-5) var(--mgc-space-8); background: var(--mgc-header-bg); color: var(--mgc-header-text); gap: var(--mgc-space-5); z-index: var(--mgc-z-header); } .mgc-header .mgc-logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; } .mgc-header .mgc-logo { height: 88px; width: auto; object-fit: contain; margin-top: -14px; margin-bottom: -6px; } .mgc-header .mgc-brand { font-size: 1.1em; font-weight: var(--mgc-weight-bold); letter-spacing: .4px; line-height: 1; } .mgc-header .mgc-title { font-size: 1.2em; font-weight: var(--mgc-weight-medium); letter-spacing: .3px; text-align: center; } .mgc-header .mgc-header-right { display: flex; align-items: center; gap: var(--mgc-space-7); justify-content: flex-end; } .mgc-main { flex: 1; padding: var(--mgc-space-6); display: flex; flex-direction: column; min-height: 0; } .mgc-footer { text-align: center; padding: var(--mgc-space-4); font-size: var(--mgc-text-base); opacity: 0.6; } /* ============================================================================ * 4. TOOLBAR * ========================================================================= */ .mgc-toolbar { display: flex; gap: var(--mgc-space-4); align-items: center; padding: var(--mgc-space-4) var(--mgc-space-8); overflow-x: auto; -webkit-overflow-scrolling: touch; z-index: var(--mgc-z-toolbar); } .mgc-toolbar button { padding: var(--mgc-space-2) var(--mgc-space-4); border-radius: var(--mgc-radius-sm); border: 1px solid var(--mgc-border); background: var(--mgc-surface); color: var(--mgc-text); cursor: pointer; flex-shrink: 0; transition: background var(--mgc-trans-fast), border-color var(--mgc-trans-fast), color var(--mgc-trans-fast); } .mgc-toolbar button:hover { background: var(--mgc-surface-2); } .mgc-toolbar button.is-active { background: var(--mgc-text); color: var(--mgc-text-on-accent); border-color: transparent; } /* ============================================================================ * 5. CARDS * ========================================================================= */ .mgc-card { background: var(--mgc-card-bg); border-radius: var(--mgc-radius-xl); padding: var(--mgc-space-6); border: 1px solid var(--mgc-border-subtle); box-shadow: var(--mgc-shadow-md); display: flex; flex-direction: column; gap: var(--mgc-space-5); transition: transform var(--mgc-trans-slow), box-shadow var(--mgc-trans-slow); } .mgc-card.is-interactive { cursor: pointer; } .mgc-card.is-interactive:hover { transform: translateY(-6px); box-shadow: var(--mgc-shadow-lg); } /* Card highlight (chamada de atenção curta) */ .mgc-card.is-highlight { border-color: var(--mgc-info); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), var(--mgc-shadow-md); animation: mgc-card-highlight-fade 2.5s ease forwards; } @keyframes mgc-card-highlight-fade { 0% { border-color: var(--mgc-info); box-shadow: 0 0 0 3px rgba(59,130,246,0.35), var(--mgc-shadow-md); } 70% { border-color: var(--mgc-info); box-shadow: 0 0 0 3px rgba(59,130,246,0.2), var(--mgc-shadow-md); } 100% { border-color: var(--mgc-border-subtle); box-shadow: var(--mgc-shadow-md); } } /* Card head/body helpers */ .mgc-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--mgc-space-4); } .mgc-card-title { font-size: var(--mgc-text-md); font-weight: var(--mgc-weight-medium); margin: 0; color: var(--mgc-text); } .mgc-card-sub { font-size: var(--mgc-text-sm); color: var(--mgc-text-2); } /* ============================================================================ * 6. MINICARD (densidade alta — grid de monitoramento) * ========================================================================= */ .mgc-minicard { background: var(--mgc-card-bg); border: 1px solid var(--mgc-border-subtle); border-radius: var(--mgc-radius-md); padding: 5px 7px; display: flex; flex-direction: column; gap: 0; cursor: pointer; overflow: hidden; transition: transform var(--mgc-trans-fast), box-shadow var(--mgc-trans-fast); } .mgc-minicard:hover { transform: translateY(-2px); box-shadow: var(--mgc-shadow-sm); } .mgc-minicard-top { display: flex; justify-content: space-between; align-items: center; gap: 3px; } .mgc-minicard-id { font-size: var(--mgc-text-xs); font-weight: var(--mgc-weight-bold); color: var(--mgc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .mgc-minicard-info { font-size: var(--mgc-text-xs); color: var(--mgc-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .mgc-minicard-main { margin-top: 5px; display: flex; align-items: flex-start; gap: 5px; flex: 1; min-width: 0; } /* ============================================================================ * 7. GRIDS * ========================================================================= */ .mgc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--mgc-space-8); align-items: start; align-content: start; } .mgc-grid--mini { grid-template-columns: repeat(3, 1fr); gap: var(--mgc-space-3); } @media (min-width: 600px) { .mgc-grid--mini { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); } } /* Stack vertical com gap padrão */ .mgc-stack { display: flex; flex-direction: column; gap: var(--mgc-space-5); } .mgc-stack--sm { gap: var(--mgc-space-3); } .mgc-stack--lg { gap: var(--mgc-space-7); } /* Row horizontal */ .mgc-row { display: flex; flex-direction: row; gap: var(--mgc-space-5); align-items: center; } .mgc-row--sm { gap: var(--mgc-space-3); } .mgc-row--between { justify-content: space-between; } .mgc-row--wrap { flex-wrap: wrap; } /* ============================================================================ * 8. BOTÕES * ========================================================================= */ .mgc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mgc-space-2); padding: var(--mgc-space-2) var(--mgc-space-5); border-radius: var(--mgc-radius-sm); border: 1px solid var(--mgc-border); background: var(--mgc-surface); color: var(--mgc-text); font-size: var(--mgc-text-base); font-weight: var(--mgc-weight-medium); cursor: pointer; transition: background var(--mgc-trans-fast), border-color var(--mgc-trans-fast), color var(--mgc-trans-fast); white-space: nowrap; } .mgc-btn:hover { background: var(--mgc-surface-2); } .mgc-btn:disabled { opacity: 0.35; cursor: default; } .mgc-btn--primary { background: var(--mgc-text); color: var(--mgc-text-on-accent); border-color: transparent; } .mgc-btn--primary:hover { background: #1d2026; } body.dark-mode .mgc-btn--primary:hover { background: #f1f4f8; color: var(--mgc-text); } /* Destrutivo — único uso: ações irreversíveis (delete, abort, reset). * Nunca use vermelho como cor decorativa. */ .mgc-btn--danger { background: var(--mgc-danger); color: var(--mgc-text-on-accent); border-color: transparent; } .mgc-btn--danger:hover { background: #c0392b; } /* Sucesso — confirmação de ação positiva (aplicar, criar, ativar). */ .mgc-btn--success { background: var(--mgc-success); color: var(--mgc-text-on-accent); border-color: transparent; } .mgc-btn--success:hover { background: #27ae60; } .mgc-btn--ghost { background: transparent; border-color: transparent; color: var(--mgc-text-2); } .mgc-btn--ghost:hover { background: var(--mgc-surface-2); color: var(--mgc-text); } .mgc-btn--sm { padding: 4px 8px; font-size: var(--mgc-text-sm); } .mgc-btn--lg { padding: var(--mgc-space-3) var(--mgc-space-6); font-size: var(--mgc-text-md); } /* Icon button — quadrado, monocromático, foco em ação visual */ .mgc-icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--mgc-surface); border: 1px solid var(--mgc-border); border-radius: var(--mgc-radius-md); font-size: var(--mgc-text-xl); color: var(--mgc-text); cursor: pointer; flex-shrink: 0; transition: background var(--mgc-trans-fast), border-color var(--mgc-trans-fast), color var(--mgc-trans-fast); } .mgc-icon-btn:hover { background: var(--mgc-surface-2); } .mgc-icon-btn.is-active { background: var(--mgc-text); color: var(--mgc-text-on-accent); border-color: var(--mgc-text); } .mgc-icon-btn:disabled { opacity: 0.35; cursor: default; } /* ============================================================================ * 9. STATUS BADGES * ========================================================================= */ .mgc-status-badge { width: 120px; min-height: 38px; padding: var(--mgc-space-2) var(--mgc-space-4); border-radius: var(--mgc-radius-md); font-weight: var(--mgc-weight-medium); color: var(--mgc-text-on-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: var(--mgc-leading-tight); text-align: center; flex-shrink: 0; } .mgc-status-badge > div { white-space: nowrap; } .mgc-status-badge > div:last-child { font-family: var(--mgc-font-mono); } .mgc-status-badge--online { background: var(--mgc-success); } .mgc-status-badge--offline { background: var(--mgc-danger); } .mgc-status-badge--warning { background: var(--mgc-warning); } .mgc-status-badge--info { background: var(--mgc-info); } .mgc-status-badge--neutral { background: var(--mgc-neutral); } .mgc-status-badge--loading { background: #fffde7; color: var(--mgc-text-3); } /* Pill — versão minúscula, para tags em listas densas */ .mgc-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: var(--mgc-radius-pill); font-size: 9px; font-weight: var(--mgc-weight-bold); letter-spacing: .3px; white-space: nowrap; border: 1px solid transparent; background: var(--mgc-neutral-tint); color: var(--mgc-neutral-text); } .mgc-pill--success { background: var(--mgc-success-tint); color: var(--mgc-success-text); } .mgc-pill--danger { background: var(--mgc-danger-tint); color: var(--mgc-danger-text); } .mgc-pill--warning { background: var(--mgc-warning-tint); color: var(--mgc-warning-text); } .mgc-pill--info { background: var(--mgc-info-tint); color: var(--mgc-info-text); } /* ============================================================================ * 10. MODAL * ========================================================================= */ .mgc-modal-overlay { position: fixed; inset: 0; background: var(--mgc-overlay); display: none; align-items: center; justify-content: center; z-index: var(--mgc-z-modal); backdrop-filter: blur(2px); } .mgc-modal-overlay.is-open { display: flex; } .mgc-modal-content { background: var(--mgc-surface); color: var(--mgc-text); width: 95%; max-width: 1440px; height: 92%; border-radius: var(--mgc-radius-2xl); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--mgc-shadow-modal); } .mgc-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--mgc-space-5) var(--mgc-space-6); border-bottom: 1px solid var(--mgc-border); flex-shrink: 0; } .mgc-modal-header h2 { font-size: var(--mgc-text-lg); font-weight: var(--mgc-weight-medium); margin: 0; } .mgc-modal-close { background: none; border: none; font-size: var(--mgc-text-xl); cursor: pointer; padding: 4px 8px; color: var(--mgc-text-3); } .mgc-modal-close:hover { color: var(--mgc-text); } .mgc-modal-body { flex: 1; padding: var(--mgc-space-8); overflow-y: auto; } /* ============================================================================ * 11. ALERTS * ========================================================================= */ .mgc-alert { padding: var(--mgc-space-4) var(--mgc-space-5); border-radius: var(--mgc-radius-md); border: 1px solid transparent; font-size: var(--mgc-text-md); display: flex; gap: var(--mgc-space-3); align-items: flex-start; } .mgc-alert-icon { flex-shrink: 0; font-size: var(--mgc-text-lg); line-height: 1; } .mgc-alert-body { flex: 1; } .mgc-alert-title { font-weight: var(--mgc-weight-medium); margin-bottom: 2px; } .mgc-alert--success { background: var(--mgc-success-tint); border-color: var(--mgc-success); color: var(--mgc-success-text); } .mgc-alert--danger { background: var(--mgc-danger-tint); border-color: var(--mgc-danger); color: var(--mgc-danger-text); } .mgc-alert--warning { background: var(--mgc-warning-tint); border-color: var(--mgc-warning); color: var(--mgc-warning-text); } .mgc-alert--info { background: var(--mgc-info-tint); border-color: var(--mgc-info); color: var(--mgc-info-text); } /* ============================================================================ * 12. TABLE * ========================================================================= */ .mgc-table { width: 100%; border-collapse: collapse; font-size: var(--mgc-text-md); background: var(--mgc-surface); border-radius: var(--mgc-radius-md); overflow: hidden; } .mgc-table th, .mgc-table td { padding: var(--mgc-space-3) var(--mgc-space-5); text-align: left; border-bottom: 1px solid var(--mgc-border-subtle); } .mgc-table th { background: var(--mgc-surface-2); font-weight: var(--mgc-weight-medium); color: var(--mgc-text-2); font-size: var(--mgc-text-sm); letter-spacing: .3px; text-transform: uppercase; position: sticky; top: 0; z-index: 1; } .mgc-table tbody tr:hover { background: var(--mgc-surface-2); } .mgc-table tbody tr:last-child td { border-bottom: none; } .mgc-table td.mgc-mono { font-family: var(--mgc-font-mono); } .mgc-table td.mgc-num { font-variant-numeric: tabular-nums; text-align: right; } /* ============================================================================ * 13. TIMELINE (eventos pontuais em linha horizontal) * ========================================================================= */ .mgc-timeline { position: relative; padding: var(--mgc-space-5) 0; border-left: 2px solid var(--mgc-border); margin-left: var(--mgc-space-3); } .mgc-timeline-item { position: relative; padding: 0 0 var(--mgc-space-5) var(--mgc-space-6); } .mgc-timeline-item::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: var(--mgc-radius-pill); background: var(--mgc-info); border: 2px solid var(--mgc-surface); box-shadow: 0 0 0 1px var(--mgc-border); } .mgc-timeline-item--success::before { background: var(--mgc-success); } .mgc-timeline-item--danger::before { background: var(--mgc-danger); } .mgc-timeline-item--warning::before { background: var(--mgc-warning); } .mgc-timeline-time { font-family: var(--mgc-font-mono); font-size: var(--mgc-text-sm); color: var(--mgc-text-3); } .mgc-timeline-title { font-size: var(--mgc-text-md); font-weight: var(--mgc-weight-medium); color: var(--mgc-text); } /* ============================================================================ * 14. OTA PROGRESS BAR * ========================================================================= */ .mgc-ota { display: flex; flex-direction: column; gap: var(--mgc-space-2); padding: var(--mgc-space-4); background: var(--mgc-surface); border: 1px solid var(--mgc-border-subtle); border-radius: var(--mgc-radius-md); } .mgc-ota-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--mgc-text-sm); color: var(--mgc-text-2); } .mgc-ota-label { font-weight: var(--mgc-weight-medium); color: var(--mgc-text); } .mgc-ota-pct { font-family: var(--mgc-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--mgc-weight-bold); color: var(--mgc-text); } .mgc-ota-track { height: 8px; background: var(--mgc-surface-sunken); border-radius: var(--mgc-radius-pill); overflow: hidden; position: relative; } .mgc-ota-fill { height: 100%; background: var(--mgc-info); border-radius: var(--mgc-radius-pill); transition: width var(--mgc-trans-base); } .mgc-ota--success .mgc-ota-fill { background: var(--mgc-success); } .mgc-ota--warning .mgc-ota-fill { background: var(--mgc-warning); } .mgc-ota--danger .mgc-ota-fill { background: var(--mgc-danger); } /* Step markers (OTA-0, OTA-1, …) */ .mgc-ota-steps { display: flex; justify-content: space-between; gap: var(--mgc-space-2); margin-top: var(--mgc-space-2); } .mgc-ota-step { flex: 1; text-align: center; font-size: var(--mgc-text-xs); font-family: var(--mgc-font-mono); color: var(--mgc-text-3); padding: 4px; border-radius: var(--mgc-radius-xs); background: var(--mgc-surface-2); } .mgc-ota-step.is-done { background: var(--mgc-success-tint); color: var(--mgc-success-text); } .mgc-ota-step.is-active { background: var(--mgc-info-tint); color: var(--mgc-info-text); font-weight: var(--mgc-weight-bold); } .mgc-ota-step.is-fail { background: var(--mgc-danger-tint); color: var(--mgc-danger-text); } /* ============================================================================ * 15. TOOLTIP (map hover, label flutuante) * ========================================================================= */ .mgc-tooltip { position: fixed; z-index: var(--mgc-z-tooltip); background: var(--mgc-surface); color: var(--mgc-text); border: 1px solid var(--mgc-border); border-radius: var(--mgc-radius-md); padding: var(--mgc-space-3) var(--mgc-space-5); font-size: var(--mgc-text-base); box-shadow: var(--mgc-shadow-md); pointer-events: none; min-width: 140px; } body.dark-mode .mgc-tooltip { background: rgba(24, 35, 52, 0.97); } /* Mini-label fixo (ex: nome do veículo no mapa) */ .mgc-map-label { background: rgba(47, 54, 64, 0.85); color: #fff; border-radius: var(--mgc-radius-xs); padding: 2px 6px; font-size: var(--mgc-text-sm); font-weight: var(--mgc-weight-medium); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* ============================================================================ * 16. LOADERS * ========================================================================= */ .mgc-spinner { width: 16px; height: 16px; border: 2px solid var(--mgc-border); border-top-color: var(--mgc-info); border-radius: var(--mgc-radius-pill); animation: mgc-spin 0.8s linear infinite; display: inline-block; } @keyframes mgc-spin { to { transform: rotate(360deg); } } .mgc-dots { display: inline-flex; gap: 5px; align-items: center; } .mgc-dots span { width: 7px; height: 7px; border-radius: var(--mgc-radius-pill); background: var(--mgc-warning); animation: mgc-dots-fade 1.2s ease-in-out infinite; } .mgc-dots span:nth-child(2) { animation-delay: .2s; } .mgc-dots span:nth-child(3) { animation-delay: .4s; } @keyframes mgc-dots-fade { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } .mgc-pulse-dot { width: 11px; height: 11px; border-radius: var(--mgc-radius-pill); background: var(--mgc-info); animation: mgc-pulse 1.1s ease-in-out infinite; display: inline-block; } @keyframes mgc-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.65); } } /* Toast central — bloqueante visual mas não interativo */ .mgc-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: var(--mgc-z-toast); background: rgba(10, 10, 10, .78); color: #fff; padding: var(--mgc-space-5) var(--mgc-space-9); border-radius: var(--mgc-radius-lg); font-size: var(--mgc-text-xl); font-weight: var(--mgc-weight-bold); letter-spacing: 1.5px; pointer-events: none; backdrop-filter: blur(4px); } /* ============================================================================ * 17. UTILITIES * ========================================================================= */ .mgc-text-xs { font-size: var(--mgc-text-xs); } .mgc-text-sm { font-size: var(--mgc-text-sm); } .mgc-text-base { font-size: var(--mgc-text-base); } .mgc-text-md { font-size: var(--mgc-text-md); } .mgc-text-lg { font-size: var(--mgc-text-lg); } .mgc-text-xl { font-size: var(--mgc-text-xl); } .mgc-text-muted { color: var(--mgc-text-2); } .mgc-text-faint { color: var(--mgc-text-3); } .mgc-text-success { color: var(--mgc-success-text); } .mgc-text-danger { color: var(--mgc-danger-text); } .mgc-text-warning { color: var(--mgc-warning-text); } .mgc-text-info { color: var(--mgc-info-text); } .mgc-mono { font-family: var(--mgc-font-mono); font-variant-numeric: tabular-nums; } .mgc-num { font-variant-numeric: tabular-nums; } .mgc-weight-medium { font-weight: var(--mgc-weight-medium); } .mgc-weight-bold { font-weight: var(--mgc-weight-bold); } /* ============================================================================ * 18. MOBILE / iOS SAFE-AREA * ========================================================================= */ @media (max-width: 600px) { .mgc-header { padding-top: max(var(--mgc-space-4), env(safe-area-inset-top)); padding-left: max(var(--mgc-space-3), env(safe-area-inset-left)); padding-right: max(var(--mgc-space-3), env(safe-area-inset-right)); padding-bottom: var(--mgc-space-3); gap: var(--mgc-space-2); } .mgc-header .mgc-logo { height: 60px; } .mgc-header .mgc-brand { font-size: 1.0em; } .mgc-header .mgc-title { font-size: 0.9em; } .mgc-toolbar { padding: var(--mgc-space-2) max(var(--mgc-space-3), env(safe-area-inset-left)); gap: var(--mgc-space-2); } .mgc-main { padding: var(--mgc-space-3) max(var(--mgc-space-3), env(safe-area-inset-left)) var(--mgc-space-3) max(var(--mgc-space-3), env(safe-area-inset-left)); } /* Botões de toque: alvo mínimo 44×44 (Apple HIG) */ .mgc-icon-btn { width: 40px; height: 40px; font-size: var(--mgc-text-xl); } .mgc-toolbar button { padding: var(--mgc-space-3) var(--mgc-space-4); } /* Modal vira bottom-sheet em mobile */ .mgc-modal-overlay { align-items: flex-end; padding-top: max(20px, env(safe-area-inset-top)); } .mgc-modal-content { width: 100%; max-width: 100%; height: calc(100dvh - max(20px, env(safe-area-inset-top))); border-radius: var(--mgc-radius-2xl) var(--mgc-radius-2xl) 0 0; padding-bottom: env(safe-area-inset-bottom); } .mgc-footer { padding-bottom: max(var(--mgc-space-4), env(safe-area-inset-bottom)); } } /* ============================================================================ * 19. ACESSIBILIDADE * ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Foco visível em navegação por teclado — não some por design */ :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--mgc-info); outline-offset: 2px; border-radius: var(--mgc-radius-xs); } /* ============================================================================ * 20. FORM PRIMITIVES (v0.2.0 — driven por Albert Admin) * * Inputs e selects de telemetria são pequenos, densos, mono-friendly. * Use `.mgc-field` para wrap label+input com gap consistente. * Use `.mgc-fieldset` para agrupar campos relacionados. * ========================================================================= */ .mgc-input, .mgc-select, .mgc-textarea { font-family: inherit; font-size: var(--mgc-text-md); padding: var(--mgc-space-2) var(--mgc-space-3); border: 1px solid var(--mgc-border); border-radius: var(--mgc-radius-sm); background: var(--mgc-input-bg); color: var(--mgc-text); line-height: 1.3; transition: border-color var(--mgc-trans-fast), box-shadow var(--mgc-trans-fast); box-sizing: border-box; } .mgc-input:focus, .mgc-select:focus, .mgc-textarea:focus { outline: none; border-color: var(--mgc-info); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); } .mgc-input:disabled, .mgc-select:disabled, .mgc-textarea:disabled { opacity: 0.5; cursor: not-allowed; } .mgc-input[readonly] { background: var(--mgc-surface-2); } /* Variante mono — para numSerie, IDs, valores hex */ .mgc-input--mono { font-family: var(--mgc-font-mono); } /* Variante de erro — input que falhou validação */ .mgc-input--error, .mgc-select--error { border-color: var(--mgc-danger); background: var(--mgc-danger-tint); } /* Variante "dirty" — campo editado mas não salvo (ex: tabela inline) */ .mgc-input--dirty { border-color: var(--mgc-warning); background: var(--mgc-warning-tint); } .mgc-textarea { resize: vertical; min-height: 60px; font-family: var(--mgc-font-mono); } /* Label */ .mgc-label { font-size: var(--mgc-text-md); color: var(--mgc-text); font-weight: var(--mgc-weight-medium); margin-right: var(--mgc-space-1); } /* Field — wrap label+input vertical ou horizontal */ .mgc-field { display: flex; flex-direction: column; gap: var(--mgc-space-1); } .mgc-field--inline { flex-direction: row; align-items: center; gap: var(--mgc-space-3); } .mgc-field-hint { font-size: var(--mgc-text-sm); color: var(--mgc-text-3); } .mgc-field-error { font-size: var(--mgc-text-sm); color: var(--mgc-danger-text); } /* Fieldset — agrupa campos sob um título */ .mgc-fieldset { border: 1px solid var(--mgc-border); border-radius: var(--mgc-radius-md); padding: var(--mgc-space-5) var(--mgc-space-6); background: var(--mgc-surface); box-shadow: var(--mgc-shadow-sm); margin: 0; } .mgc-fieldset + .mgc-fieldset { margin-top: var(--mgc-space-6); } .mgc-legend { font-weight: var(--mgc-weight-bold); padding: 0 var(--mgc-space-3); font-size: var(--mgc-text-md); color: var(--mgc-text); } /* Checkbox alinhado com texto */ .mgc-check { display: inline-flex; align-items: center; gap: var(--mgc-space-3); cursor: pointer; font-size: var(--mgc-text-md); color: var(--mgc-text); } .mgc-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; } /* ============================================================================ * 21. MODAL — variante pequena (dialog) * * Para confirmações, edição rápida, fluxos multi-step pequenos. * Difere do modal full-screen padrão: ~440-620px, altura automática, * centrado vertical e horizontalmente. * ========================================================================= */ .mgc-modal-content--sm { width: 95%; max-width: 480px; height: auto; max-height: 90vh; padding: var(--mgc-space-7) var(--mgc-space-8); border-radius: var(--mgc-radius-lg); } .mgc-modal-content--md { width: 95%; max-width: 640px; height: auto; max-height: 90vh; padding: var(--mgc-space-7) var(--mgc-space-8); border-radius: var(--mgc-radius-lg); } /* Em modais pequenos, o conteúdo flui direto — sem header/body separados */ .mgc-modal-content--sm > h3, .mgc-modal-content--md > h3 { margin: 0 0 var(--mgc-space-4); font-size: var(--mgc-text-lg); color: var(--mgc-text); font-weight: var(--mgc-weight-medium); } .mgc-modal-content--sm .mgc-modal-actions, .mgc-modal-content--md .mgc-modal-actions { display: flex; gap: var(--mgc-space-3); justify-content: flex-end; margin-top: var(--mgc-space-6); } /* Em mobile, dialogs viram bottom-sheet também (herda do padrão) */ @media (max-width: 600px) { .mgc-modal-content--sm, .mgc-modal-content--md { max-width: 100%; border-radius: var(--mgc-radius-2xl) var(--mgc-radius-2xl) 0 0; } } /* ============================================================================ * 22. ACTION LIST (lista de ações tipadas, ex: prévia de migração) * * Cada item tem uma cor de stripe que codifica o tipo da ação. * ========================================================================= */ .mgc-actions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--mgc-space-2); } .mgc-actions-item { display: flex; gap: var(--mgc-space-4); align-items: flex-start; padding: var(--mgc-space-3) var(--mgc-space-4); border-radius: var(--mgc-radius-sm); font-size: var(--mgc-text-md); border: 1px solid transparent; } .mgc-actions-desc { font-weight: var(--mgc-weight-medium); } .mgc-actions-detail { color: var(--mgc-text-2); font-size: var(--mgc-text-sm); margin-top: 2px; word-break: break-all; font-family: var(--mgc-font-mono); } /* Tipos — cor = significado, não decoração */ .mgc-actions-item--backup { background: var(--mgc-warning-tint); border-color: var(--mgc-warning); } .mgc-actions-item--move { background: var(--mgc-info-tint); border-color: var(--mgc-info); } .mgc-actions-item--create { background: var(--mgc-success-tint); border-color: var(--mgc-success); } .mgc-actions-item--update { background: var(--mgc-info-tint); border-color: var(--mgc-info); } .mgc-actions-item--db { background: var(--mgc-info-tint); border-color: var(--mgc-info); } .mgc-actions-item--info { background: var(--mgc-surface-2); border-color: var(--mgc-border-subtle); } .mgc-actions-item--conflict { background: var(--mgc-danger-tint); border-color: var(--mgc-danger); } .mgc-actions-item--conflict .mgc-actions-desc { color: var(--mgc-danger-text); } /* ============================================================================ * 23. EDITABLE CELL (célula de tabela com edição inline) * * Estados: idle / hover / dirty (modificado, pendente de salvar). * ========================================================================= */ .mgc-editable { cursor: pointer; display: inline-block; min-width: 24px; min-height: 18px; padding: 2px var(--mgc-space-1); border-radius: var(--mgc-radius-xs); border: 1px dashed transparent; transition: border-color var(--mgc-trans-fast), background var(--mgc-trans-fast); } .mgc-editable:hover { border-color: var(--mgc-info); background: var(--mgc-info-tint); } .mgc-editable.is-dirty { background: var(--mgc-warning-tint); border-color: var(--mgc-warning); border-style: solid; } .mgc-editable.is-saving { opacity: 0.6; pointer-events: none; } /* ============================================================================ * 24. STATE BOX (resultado de busca/operação — found/notfound) * * Diferente de alert: representa estado persistente do dado, não um aviso. * ========================================================================= */ .mgc-state-box { padding: var(--mgc-space-3) var(--mgc-space-5); border-radius: var(--mgc-radius-sm); font-size: var(--mgc-text-md); line-height: 1.7; border: 1px solid var(--mgc-border); background: var(--mgc-surface-2); } .mgc-state-box--found { background: var(--mgc-success-tint); border-color: var(--mgc-success); } .mgc-state-box--notfound { background: var(--mgc-warning-tint); border-color: var(--mgc-warning); } .mgc-state-box--error { background: var(--mgc-danger-tint); border-color: var(--mgc-danger); } /* ============================================================================ * 25. LAYOUT — two-column * * Form à esquerda, preview/resultado à direita. Colapsa em mobile. * ========================================================================= */ .mgc-two-col { display: grid; grid-template-columns: 400px 1fr; gap: var(--mgc-space-7); align-items: start; } @media (max-width: 800px) { .mgc-two-col { grid-template-columns: 1fr; } }