/* ===================================================================== Sistema Inova — Design System Estrutura herdada do padrão ITMB (tokens, componentes, motion), repaginada na marca Inova (azul) e com TEMA CLARO/ESCURO alternável. O tema é controlado por [data-theme="light|dark"] no (theme.js). ===================================================================== */ /* ---------- Tipografia ---------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700&display=swap'); /* ===================================================================== TOKENS — tema CLARO (padrão) ===================================================================== */ :root, [data-theme="light"] { /* Marca Inova */ --primary: #1f56e0; --primary-hover: #1642b8; --accent: #22a3ff; /* azul claro de brilho/detalhe */ --navy: #0a1b3d; /* Superfícies (claro) */ --bg: #f4f6fb; --bg-soft: #eef2f8; --surface: #ffffff; --surface-2: #f8fafc; /* Texto (claro) */ --text: #0e1b2c; --text-soft: #4a5a70; --text-muted:#8493a8; /* Bordas (claro) */ --border: #e3e9f2; --border-strong: #cdd7e6; /* Estados */ --erro: #dc2626; --erro-bg: #fee2e2; --ok: #16a34a; --ok-bg: #dcfce7; --warning: #d97706; /* Fundo das telas "cheias" (login, construção) */ --hero-bg: linear-gradient(135deg, #0a1b3d 0%, #0f2a5c 55%, #1642b8 100%); /* Sombras (claro) */ --shadow-sm: 0 1px 2px rgba(16,30,54,.06); --shadow-md: 0 8px 24px rgba(16,30,54,.08); --shadow-lg: 0 20px 48px rgba(16,30,54,.12); /* Forma e ritmo */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; --font-display: 'Sora','Inter',system-ui,sans-serif; --font-body: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --dur-micro: 150ms; --dur-base: 250ms; --ease: cubic-bezier(.4,0,.2,1); color-scheme: light; } /* ===================================================================== TOKENS — tema ESCURO ===================================================================== */ [data-theme="dark"] { --primary: #4f85ff; --primary-hover: #6f9bff; --accent: #22a3ff; --navy: #060f22; --bg: #0a1120; --bg-soft: #0f1a30; --surface: #131f38; --surface-2: #182747; --text: #eaf0fa; --text-soft: #b5c2d4; --text-muted:#7f8fa8; --border: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.18); --erro: #f87171; --erro-bg: rgba(220,38,38,.18); --ok: #4ade80; --ok-bg: rgba(22,163,74,.18); --warning: #fbbf24; --hero-bg: linear-gradient(135deg, #060f22 0%, #0c1e3f 60%, #12356e 100%); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.5); --shadow-lg: 0 20px 48px rgba(0,0,0,.6); color-scheme: dark; } /* ===================================================================== Base ===================================================================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } h1,h2,h3 { font-family: var(--font-display); letter-spacing: -.01em; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--text-muted); } .inline { display: inline; } /* ---------- Botões ---------- */ .btn { display: inline-block; border: 1px solid transparent; border-radius: var(--radius-pill); padding: 12px 22px; font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; transition: background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31,86,224,.35); } .btn-primario { background: var(--primary); color: #fff; width: 100%; box-shadow: var(--shadow-sm); } .btn-primario:hover { background: var(--primary-hover); transform: translateY(-1px); text-decoration: none; } .btn-secundario { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-secundario:hover { background: var(--bg-soft); text-decoration: none; } .btn-link { background: none; border: 0; color: var(--text-muted); padding: 4px 8px; font-weight: 500; cursor: pointer; font: inherit; } .btn-link:hover { color: var(--primary); text-decoration: underline; } /* ---------- Alertas ---------- */ .alerta { border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; font-size: 14px; } .alerta-erro { background: var(--erro-bg); color: var(--erro); } .alerta-ok { background: var(--ok-bg); color: var(--ok); } /* ---------- Botão de tema (claro/escuro) ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-soft); cursor: pointer; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); } .theme-toggle:hover { color: var(--primary); border-color: var(--primary); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .ico-sun { display: none; } [data-theme="dark"] .theme-toggle .ico-sun { display: block; } [data-theme="dark"] .theme-toggle .ico-moon { display: none; } /* variação flutuante para telas cheias (login/construção) */ .theme-toggle--float { position: fixed; top: 18px; right: 18px; z-index: 20; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(6px); } .theme-toggle--float:hover { background: rgba(255,255,255,.22); color: #fff; border-color: #fff; } /* ===================================================================== Telas de autenticação (login / recuperar) ===================================================================== */ .tela-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--hero-bg); } .auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 36px 32px; } .auth-brand { text-align: center; margin-bottom: 22px; } .auth-logo { max-height: 56px; margin-bottom: 10px; } .auth-title { font-size: 22px; margin: 0; color: var(--text); } .auth-sub { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; } .auth-form label { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: .02em; } .auth-form label span { display: block; margin-bottom: 6px; } .auth-form input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; font: inherit; font-weight: 400; background: var(--surface-2); color: var(--text); } .auth-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,86,224,.15); } .auth-links { text-align: center; margin-top: 18px; font-size: 14px; } /* ===================================================================== Página em construção ===================================================================== */ .construcao { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--hero-bg); color: #fff; text-align: center; } .construcao-box { max-width: 520px; } .construcao-logo { max-height: 72px; margin-bottom: 20px; } .construcao h1 { font-size: 34px; margin: 0 0 12px; } .construcao-msg { font-size: 18px; margin: 0 0 6px; } .construcao-sub { color: rgba(255,255,255,.7); } .construcao-sub a { color: #fff; text-decoration: underline; } /* ===================================================================== Casca do sistema logado ===================================================================== */ .app-shell { display: flex; min-height: 100vh; } .app-side { width: 240px; flex-shrink: 0; background: var(--navy); color: #fff; display: flex; flex-direction: column; } .app-side-brand { display: flex; align-items: center; gap: 10px; padding: 20px; font-weight: 700; font-size: 18px; font-family: var(--font-display); border-bottom: 1px solid rgba(255,255,255,.08); } .app-side-logo { max-height: 30px; } .app-nav { padding: 12px; display: flex; flex-direction: column; gap: 4px; } .app-nav-item { color: rgba(255,255,255,.8); padding: 10px 14px; border-radius: 8px; font-size: 15px; transition: background var(--dur-micro) var(--ease); } .app-nav-item:hover { background: rgba(255,255,255,.08); text-decoration: none; } .app-nav-item.ativo { background: var(--primary); color: #fff; } .app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .app-top { display: flex; align-items: center; justify-content: space-between; background: var(--surface); padding: 14px 24px; border-bottom: 1px solid var(--border); } .app-top-title { font-weight: 700; font-size: 18px; color: var(--text); font-family: var(--font-display); } .app-top-user { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-soft); } .app-content { padding: 24px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); } .card h2 { margin: 0 0 8px; color: var(--text); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } @media (max-width: 720px) { .app-shell { flex-direction: column; } .app-side { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; } .app-nav { flex-direction: row; } }