/* =========================================================== Tokens — paleta viva, dois temas (clara/escura), nenhum com branco ou preto puro. Veio da exploração no canvas de Design ("app todo, vida e cor") — mesma lógica de sempre (cores sólidas + par "-bg" de fundo, contraste conferido WCAG AA >= 4.5:1 pra texto), só que mais saturada que a paleta pastel original. Escuro "tinta": azul quase-preto com identidade violeta/teal. Claro "névoa clara": lavanda bem suave, textos e cores profundos. Tema escolhido em ; sem atributo, segue o sistema (js/tema.js). =========================================================== */ :root { color-scheme: light; --bg: #eef0f8; --surface: #fafbfd; --surface-2: #e1e3ec; --border: #c7c9d5; --text: #141833; --text-muted: #575d80; --accent: #0a6d51; --accent-contrast: #ffffff; --ok: #0b7d5c; --q1: #7a241c; /* faça imediatamente - urgente/importante (coral) */ --q1-bg: #e8d7dc; --q2: #4526a8; /* decida quando - importante (violeta) */ --q2-bg: #dcd8f6; --q3: #5c3c00; /* delegue - urgente (âmbar) */ --q3-bg: #e1dbd5; --q4: #333850; /* faça depois (slate) */ --q4-bg: #d7dae5; --overlay: rgba(20, 24, 51, 0.42); --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --shadow: 0 1px 2px rgba(20, 24, 51, 0.07), 0 3px 10px rgba(20, 24, 51, 0.05); --shadow-alto: 0 12px 40px rgba(20, 24, 51, 0.22); --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0d1020; --surface: #171d35; --surface-2: #1d2442; --border: #242d50; --text: #eef0fb; --text-muted: #8b90b8; --accent: #22e0a0; --accent-contrast: #0d1020; --ok: #22e0a0; --q1: #ff9c92; --q1-bg: #311e29; --q2: #c4b6ff; --q2-bg: #222141; --q3: #ffd280; --q3-bg: #312820; --q4: #b7bcdb; --q4-bg: #1e2237; --overlay: rgba(13, 16, 32, 0.6); --shadow: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-alto: 0 12px 40px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0d1020; --surface: #171d35; --surface-2: #1d2442; --border: #242d50; --text: #eef0fb; --text-muted: #8b90b8; --accent: #22e0a0; --accent-contrast: #0d1020; --ok: #22e0a0; --q1: #ff9c92; --q1-bg: #311e29; --q2: #c4b6ff; --q2-bg: #222141; --q3: #ffd280; --q3-bg: #312820; --q4: #b7bcdb; --q4-bg: #1e2237; --overlay: rgba(13, 16, 32, 0.6); --shadow: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-alto: 0 12px 40px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } /* Fundo em degradê suave, atrás dos painéis "vidro". Bem discreto — a função é dar profundidade, não colorir a tela; cada painel garante seu próprio contraste de texto por cima, então o fundo pode ser fraco. */ body { margin: 0; background-color: var(--bg); background-image: radial-gradient(at 12% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0px, transparent 55%), radial-gradient(at 100% 0%, color-mix(in srgb, var(--q2) 10%, transparent) 0px, transparent 55%), radial-gradient(at 100% 100%, color-mix(in srgb, var(--q3) 8%, transparent) 0px, transparent 50%), radial-gradient(at 0% 100%, color-mix(in srgb, var(--q1) 6%, transparent) 0px, transparent 50%); background-attachment: fixed; color: var(--text); font-family: var(--font-body); font-variant-numeric: tabular-nums; } h1, h2, h3, .quadrant-nome, .capacidade-numero, .metrica { font-family: var(--font-display); letter-spacing: -0.01em; } .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .app-shell[hidden] { display: none; } /* =========================================================== Vidro — painéis translúcidos com desfoque, flutuando sobre o degradê do fundo. Cai pra fundo sólido em navegadores sem suporte a backdrop-filter (progressive enhancement, não quebra nada). =========================================================== */ .glass { background: var(--surface); border: 1px solid var(--border); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .glass { background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-color: color-mix(in srgb, var(--border) 70%, transparent); } .glass-flat { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); } } .glass-flat { background: var(--surface); } /* Foco visível pra quem navega pelo teclado */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* =========================================================== Topbar / navegação =========================================================== */ .topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--border); position: sticky; /* Normalmente 0. Com a faixa de demo visível (mesma posição sticky, ambas top:0 colidiriam), js/app.js mede a altura real da faixa e empurra o topbar pra baixo dela — funciona mesmo se a faixa quebrar em duas linhas no celular. */ top: var(--topo-deslocado, 0px); z-index: 10; } .topbar-title { display: flex; align-items: center; gap: 10px; } .topbar-title h1 { font-size: 17px; margin: 0; font-weight: 700; } .topbar-actions { display: flex; gap: 6px; align-items: center; } .user-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 3px 8px; border-radius: 999px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } .tabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 10px; } .tab-btn { border: none; background: transparent; color: var(--text-muted); padding: 8px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s ease, color 0.15s ease; } .tab-btn svg { flex-shrink: 0; opacity: 0.8; } .tab-btn.active svg { opacity: 1; color: var(--accent); } .tab-btn:hover { color: var(--text); } .tab-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } @media (max-width: 760px) { .topbar { padding: 12px 16px; } .tabs { order: 3; width: 100%; } .tab-btn { flex: 1; padding: 8px 6px; } } /* =========================================================== Layout geral de conteúdo =========================================================== */ .content { padding: 24px; max-width: 1180px; margin: 0 auto; width: 100%; flex: 1; } @media (max-width: 760px) { .content { padding: 18px 16px; } } .tab-panel { display: none; } .tab-panel.active { display: block; } .panel-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .panel-header h2 { margin: 0 0 4px; font-size: 20px; display: flex; align-items: center; gap: 8px; } .subtitle { margin: 0; color: var(--text-muted); font-size: 13.5px; max-width: 60ch; line-height: 1.45; } .header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .header-actions .filtro-select { width: auto; min-width: 160px; max-width: 280px; text-overflow: ellipsis; } @media (max-width: 760px) { .header-actions { width: 100%; } .header-actions .filtro-select { flex: 1; min-width: 0; max-width: none; } } .badge-tool { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 2px 8px; border-radius: 999px; } /* =========================================================== Botões =========================================================== */ .btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 9px 16px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; font-family: inherit; text-decoration: none; /* .btn também é usado em , ex: "Sair da demonstração" */ cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .btn:hover { border-color: var(--accent); } .btn:active { transform: scale(0.97); } /* .btn agora declara display: inline-flex, o que por si vence o `display: none` que o navegador dá de graça pro atributo hidden — sem isso, um