/* ============================================================
MEDQUEST ZERO — Design system stylesheet
v2 · gerado a partir do protótipo MEDQUEST ZERO.html
------------------------------------------------------------
COMO USAR:
1. Importe este arquivo no entry point do seu app:
import './medquest.css'
OU adicione no :
...
4. Para alternar tema/densidade/cards, mude atributos em :
document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.setAttribute('data-density', 'compact');
document.documentElement.setAttribute('data-cardstyle', 'shadow');
5. Para mudar a paleta primária em runtime, sobrescreva as
CSS variables --c-accent, --c-accent-l, --c-accent-d,
--c-sb, --c-sb-2 (sidebar) no :root.
Classes principais (prefixo .mq-):
.mq-card — card padrão
.mq-btn — botão (variantes: --primary, --secondary, --ghost, --lg, --sm)
.mq-badge — chip semântico (variantes: --info, --green, --red, --amber, --violet)
.mq-opt — alternativa de questão (data-state: selected|correct|wrong|discarded)
.mq-progress — barra de progresso
.mq-nav-item — item de sidebar
.mq-callout — bloco de comentário/aviso (variantes: --green, --red, --amber, --neutral)
.mq-stat — stat tile
.mq-mode — card de modo (variantes: --featured, --audit)
.mq-seg — segmented control
.mq-tabs / .mq-tab
.mq-eyebrow — label uppercase
.mq-num — número em serif tabular
.mq-mono — texto monoespaçado
============================================================ */
/* MEDQUEST ZERO — design tokens */
:root {
/* Palette — Azul Profundo (default) */
--c-bg: #F1F5F9;
--c-card: #FFFFFF;
--c-alt: #F8FAFC;
--c-border: #E2E8F0;
--c-border-l: #F1F5F9;
--c-sb: #1E3A5F;
--c-sb-2: #152B47;
--c-sb-text: #CBD5E1;
--c-sb-mute: #94A3B8;
--c-text: #0F172A;
--c-muted: #64748B;
--c-light: #94A3B8;
--c-accent: #1D4ED8;
--c-accent-l: #EFF6FF;
--c-accent-m: #3B82F6;
--c-accent-d: #1E40AF;
--c-green: #059669;
--c-green-bg: #ECFDF5;
--c-red: #DC2626;
--c-red-bg: #FEF2F2;
--c-amber: #D97706;
--c-amber-bg: #FFFBEB;
--c-violet: #7C3AED;
--c-violet-bg: #F5F3FF;
--c-slate-bg: #F1F5F9;
--c-gold: #D4A843;
/* Type */
--f-display: "Lora", Georgia, "Times New Roman", serif;
--f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-logo: "Playfair Display", Georgia, serif;
--f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* Spacing density (overridden by Tweaks) */
--d-pad-card: 22px 26px;
--d-pad-cardsm: 16px 18px;
--d-gap: 18px;
--d-row-h: 56px;
/* Card style (overridden by Tweaks: outline | shadow | inset) */
--card-bg: var(--c-card);
--card-border: 1px solid var(--c-border);
--card-shadow: none;
--card-radius: 12px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
/* Hit target (mobile) */
--hit-target: 38px;
/* Tweakable */
--fs-statement: 17px;
}
/* Mobile hit-target boost */
[data-viewport="mobile"] .mq-btn { min-height: 44px; }
[data-viewport="mobile"] .mq-btn--sm { min-height: 36px; }
/* DARK MODE */
[data-theme="dark"] {
--c-bg: #0B1220;
--c-card: #111A2E;
--c-alt: #0F1729;
--c-border: #1F2B45;
--c-border-l: #16203A;
--c-sb: #0B1220;
--c-sb-2: #060B17;
--c-sb-text: #94A3B8;
--c-sb-mute: #475569;
--c-text: #F1F5F9;
--c-muted: #94A3B8;
--c-light: #64748B;
--c-accent-l: rgba(29,78,216,.16);
--c-green-bg: rgba(5,150,105,.12);
--c-red-bg: rgba(220,38,38,.12);
--c-amber-bg: rgba(217,119,6,.14);
--c-violet-bg:rgba(124,58,237,.14);
--c-slate-bg: rgba(255,255,255,.04);
}
[data-theme="dark"] .mq-opt-letter { background: var(--c-alt); }
[data-theme="dark"] kbd { background: var(--c-alt) !important; border-color: var(--c-border) !important; color: var(--c-muted) !important; }
/* Card style: shadow */
[data-cardstyle="shadow"] {
--card-border: 1px solid transparent;
--card-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 14px rgba(15,23,42,0.06);
}
/* Card style: inset (subtle inner separation) */
[data-cardstyle="inset"] {
--card-bg: var(--c-alt);
--card-border: 1px solid var(--c-border);
--card-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.6);
}
/* Density */
[data-density="compact"] {
--d-pad-card: 16px 20px;
--d-pad-cardsm: 12px 14px;
--d-gap: 12px;
--d-row-h: 46px;
}
[data-density="comfortable"] {
--d-pad-card: 26px 30px;
--d-pad-cardsm: 18px 22px;
--d-gap: 22px;
--d-row-h: 64px;
}
/* Resets & globals */
*, *::before, *::after { box-sizing: border-box; }
.mq-app, .mq-app * { font-family: var(--f-body); }
.mq-app {
color: var(--c-text);
background: var(--c-bg);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.mq-app button { font: inherit; color: inherit; }
.mq-app h1, .mq-app h2, .mq-app h3, .mq-app h4 {
font-family: var(--f-display);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--c-text);
margin: 0;
}
.mq-app p { margin: 0; }
.mq-app a { color: inherit; text-decoration: none; }
/* utility */
.mq-num { font-family: var(--f-display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mq-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.mq-eyebrow {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--c-muted);
font-family: var(--f-body);
}
.mq-divider { height: 1px; background: var(--c-border); border: 0; margin: 0; }
/* card */
.mq-card {
background: var(--card-bg);
border: var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}
/* scrollbars (subtle) */
.mq-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.mq-scroll::-webkit-scrollbar-thumb {
background: rgba(15,23,42,.12); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
.mq-scroll::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.22); background-clip: padding-box; border: 2px solid transparent; }
/* focus */
.mq-app :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }
/* button bases */
.mq-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 38px; padding: 0 18px;
border-radius: var(--radius-sm);
font-size: 13px; font-weight: 600;
cursor: pointer; transition: background .14s, border-color .14s, color .14s, transform .12s;
border: 1px solid transparent;
white-space: nowrap;
}
.mq-btn:active { transform: translateY(0.5px); }
.mq-btn--primary { background: var(--c-accent); color: #fff; }
.mq-btn--primary:hover { background: var(--c-accent-d); }
.mq-btn--primary[disabled] { background: #BFDBFE; cursor: not-allowed; }
.mq-btn--secondary { background: transparent; border-color: var(--c-border); color: var(--c-text); }
.mq-btn--secondary:hover { background: var(--c-alt); border-color: #CBD5E1; }
.mq-btn--ghost { background: transparent; color: var(--c-muted); }
.mq-btn--ghost:hover { background: var(--c-alt); color: var(--c-text); }
.mq-btn--lg { height: 46px; padding: 0 22px; font-size: 14px; }
.mq-btn--sm { height: 30px; padding: 0 12px; font-size: 12px; }
/* badges — square by default (clinical), pill as variant */
.mq-badge {
display: inline-flex; align-items: center; gap: 6px;
height: 22px; padding: 0 8px; border-radius: 4px;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.04em; text-transform: uppercase;
background: var(--c-slate-bg); color: var(--c-muted);
white-space: nowrap;
font-family: var(--f-body);
}
.mq-badge--pill { border-radius: 999px; padding: 0 10px; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11px; }
.mq-badge--info { background: var(--c-accent-l); color: var(--c-accent); }
.mq-badge--green { background: var(--c-green-bg); color: var(--c-green); }
.mq-badge--red { background: var(--c-red-bg); color: var(--c-red); }
.mq-badge--amber { background: var(--c-amber-bg); color: var(--c-amber); }
.mq-badge--violet { background: var(--c-violet-bg); color: var(--c-violet); }
.mq-badge--solid-red { background: var(--c-red); color:#fff; }
.mq-badge--solid-green { background: var(--c-green); color:#fff; }
.mq-badge--solid-amber { background: var(--c-amber); color:#fff; }
.mq-badge--square { border-radius: 4px; }
.mq-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
/* progress */
.mq-progress { height: 5px; background: var(--c-border-l); border-radius: 999px; overflow: hidden; }
.mq-progress > span { display: block; height: 100%; background: var(--c-accent); border-radius: 999px; transition: width .4s; }
/* desempenho por área (home) */
.area-performance { margin-top: 18px; }
.area-perf-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.area-perf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.area-perf-name { font-weight: 600; }
.area-perf-pct { font-size: 1.05rem; }
.area-perf-bar { margin: 6px 0 4px; }
.area-perf-sub { display: block; }
/* alternativa */
.mq-opt {
display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: flex-start;
padding: 14px 18px;
border: 1.5px solid var(--c-border);
background: var(--c-card);
border-radius: 10px;
cursor: pointer;
transition: border-color .15s, background .15s, transform .12s;
user-select: none;
}
.mq-opt:hover { border-color: #94A3B8; background: var(--c-alt); }
.mq-opt[data-state="selected"] { border-color: var(--c-accent); background: var(--c-accent-l); }
.mq-opt[data-state="correct"] { border-color: rgba(5,150,105,.45); background: var(--c-green-bg); }
.mq-opt[data-state="wrong"] { border-color: rgba(220,38,38,.4); background: var(--c-red-bg); }
.mq-opt[data-state="discarded"] { opacity: .55; }
.mq-opt[data-state="discarded"] .mq-opt-text { text-decoration: line-through; }
.mq-opt-letter {
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--c-border);
font-family: var(--f-display); font-size: 13px; font-weight: 700;
color: var(--c-muted); background: var(--c-card);
flex-shrink: 0;
}
.mq-opt[data-state="selected"] .mq-opt-letter { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.mq-opt[data-state="correct"] .mq-opt-letter { background: var(--c-green); color: #fff; border-color: var(--c-green); }
.mq-opt[data-state="wrong"] .mq-opt-letter { background: var(--c-red); color: #fff; border-color: var(--c-red); }
.mq-opt-text {
font-family: var(--f-body);
font-size: 14.5px;
line-height: 1.6;
color: var(--c-text);
padding-top: 3px;
}
.mq-opt-discard {
background: transparent; border: 0; cursor: pointer;
width: 28px; height: 28px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
color: var(--c-light); opacity: 0.4; transition: opacity .15s, background .15s, color .15s;
}
.mq-opt:hover .mq-opt-discard { opacity: 1; }
.mq-opt-discard:hover { background: var(--c-alt); color: var(--c-muted); }
.mq-opt[data-state="discarded"] .mq-opt-discard { opacity: 1; color: var(--c-muted); }
[data-viewport="mobile"] .mq-opt-discard { opacity: 1; }
/* Callout (comentario do professor / indisponivel / aviso) */
.mq-callout {
background: var(--c-accent-l);
border-left: 4px solid var(--c-accent);
border-radius: 0 8px 8px 0;
padding: 18px 22px;
}
.mq-callout--neutral { background: var(--c-alt); border-left-color: var(--c-border); }
.mq-callout--amber { background: var(--c-amber-bg); border-left-color: var(--c-amber); }
.mq-callout--green { background: var(--c-green-bg); border-left-color: var(--c-green); }
.mq-callout--red { background: var(--c-red-bg); border-left-color: var(--c-red); }
/* sidebar item */
.mq-nav-item {
display: flex; align-items: center; gap: 12px;
padding: 9px 18px; margin: 0 8px;
color: var(--c-sb-text);
font-size: 13px; font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: background .12s, color .12s;
position: relative;
}
.mq-nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.mq-nav-item[data-active="true"] { background: rgba(255,255,255,.08); color: #fff; }
.mq-nav-item[data-active="true"]::before {
content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; background: #fff; border-radius: 2px;
}
.mq-nav-item .mq-nav-icon { width: 16px; height: 16px; opacity: .9; flex-shrink: 0; }
.mq-nav-item .mq-nav-count {
margin-left: auto; font-size: 11px; font-family: var(--f-mono);
color: var(--c-sb-mute); padding: 2px 7px;
border-radius: 4px; background: rgba(255,255,255,.05);
}
.mq-nav-item[data-active="true"] .mq-nav-count { color: #fff; background: rgba(255,255,255,.12); }
/* row-link list (used in catalog rows) */
.mq-row {
display: grid; align-items: center;
border-bottom: 1px solid var(--c-border-l);
padding: 14px 24px; gap: 16px;
font-size: 14px;
transition: background .12s;
}
.mq-row:hover { background: var(--c-alt); }
.mq-row:last-child { border-bottom: none; }
/* mode card */
.mq-mode {
display: flex; flex-direction: column; gap: 14px;
background: var(--card-bg);
border: var(--card-border);
box-shadow: var(--card-shadow);
border-radius: var(--card-radius);
padding: 22px 24px;
cursor: pointer;
transition: border-color .14s, background .14s, transform .14s, box-shadow .14s;
text-align: left;
position: relative;
overflow: hidden;
}
.mq-mode:hover { border-color: #CBD5E1; transform: translateY(-1px); }
.mq-mode--featured { background: var(--c-sb); color: #fff; border-color: transparent; }
.mq-mode--featured:hover { background: #243f6c; }
.mq-mode--featured .mq-mode-icon-wrap { background: rgba(255,255,255,0.08); color: #fff; }
.mq-mode--featured .mq-mode-title { color: #fff; }
.mq-mode--featured .mq-mode-desc { color: var(--c-sb-text); }
.mq-mode--featured .mq-mode-count { color: rgba(255,255,255,.7); }
.mq-mode--audit { background: var(--c-alt); border-style: dashed; border-color: #CBD5E1; }
.mq-mode--audit:hover { background: #EFF2F7; }
.mq-mode-icon-wrap {
width: 38px; height: 38px; border-radius: 10px;
background: var(--c-accent-l); color: var(--c-accent);
display: flex; align-items: center; justify-content: center;
}
.mq-mode-title { font-family: var(--f-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.mq-mode-desc { font-size: 13px; color: var(--c-muted); line-height: 1.5; }
.mq-mode-count {
margin-top: 4px; font-size: 11px; font-family: var(--f-mono);
color: var(--c-light); display: flex; align-items: center; gap: 6px;
}
/* stat tile */
.mq-stat {
background: var(--card-bg);
border: var(--card-border);
box-shadow: var(--card-shadow);
border-radius: var(--card-radius);
padding: 18px 22px 16px;
display: flex; flex-direction: column; gap: 8px;
position: relative;
}
.mq-stat-label { font-size: 11px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; }
.mq-stat-value { font-family: var(--f-display); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--c-text); }
.mq-stat-sub { font-size: 11px; color: var(--c-light); font-family: var(--f-mono); }
/* transition for screen */
.mq-screen-enter { animation: mq-fade-in .25s ease; }
@keyframes mq-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* segmented */
.mq-seg { display: inline-flex; background: var(--c-alt); border: 1px solid var(--c-border); border-radius: 8px; padding: 3px; }
.mq-seg button {
height: 30px; padding: 0 14px;
border: 0; background: transparent; cursor: pointer;
font-size: 12px; font-weight: 500; color: var(--c-muted);
border-radius: 6px;
transition: background .12s, color .12s;
}
.mq-seg button[aria-pressed="true"] { background: #fff; color: var(--c-text); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
/* tabs */
.mq-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--c-border); }
.mq-tab {
background: transparent; border: 0; padding: 12px 0 14px;
font-size: 13px; font-weight: 500; color: var(--c-muted); cursor: pointer;
border-bottom: 2px solid transparent;
display: flex; align-items: center; gap: 8px;
}
.mq-tab:hover { color: var(--c-text); }
.mq-tab[aria-selected="true"] { color: var(--c-text); border-bottom-color: var(--c-accent); font-weight: 600; }
/* input */
.mq-input {
height: 38px; padding: 0 14px;
background: var(--c-card); border: 1px solid var(--c-border); border-radius: 8px;
font: inherit; font-size: 13px; color: var(--c-text);
transition: border-color .12s, background .12s;
}
.mq-input:focus { outline: none; border-color: var(--c-accent); background: #fff; }
/* mobile overrides */
.mq-app[data-viewport="mobile"] {
font-size: 14px;
}
.mq-app[data-viewport="mobile"] .mq-mode-title { font-size: 17px; }
.mq-app[data-viewport="mobile"] .mq-stat-value { font-size: 26px; }