/* ARQUIVO GERADO — não edite aqui.
Fonte: src/styles/atlas/ (ordem em manifest.json).
Qualquer regra escrita direto neste bundle some no próximo css:build. */
/* ═══════════════════════════════════════════════════════════════════
ATLAS · DESIGN SYSTEM
Fonte única de tokens + shell + componentes compartilhados.
Importado por:
- src/app/globals.css (via @import)
- public/inteligencia-mercado.html (via )
- public/mega-painel.html (via )
═══════════════════════════════════════════════════════════════════ */
/* Versão mantida por scripts/sync-atlas-css-version.ts (ATLAS_CSS_VERSION). */
@import url('./atlas-phase5.css?v=20261009-02');
/* ─────────────────────────────────────────────────────────────
1. TOKENS SEMÂNTICOS (Evolução Arco)
───────────────────────────────────────────────────────────── */
:root {
/* ── Typography ──
IMPORTANTE: a cadeia de fallback termina sempre em sans/monospace SANS
(SF Mono, Menlo, Consolas) ANTES do genérico `monospace` — em alguns
browsers/SO o `monospace` é mapeado para Courier (slab serif) e isso
fazia números/labels parecerem "fonte antiga" quando a JetBrains/Geist
do Google Fonts demorava ou falhava ao carregar. */
--font-display: var(--font-display-next, 'Geist'), 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
--font-sans: var(--font-body-next, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
--font-mono: var(--font-mono-next, 'JetBrains Mono'), 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Cascadia Mono', 'Liberation Mono', 'DejaVu Sans Mono', ui-monospace, monospace;
/* ── Brand Arco ──
Tons refinados: mesmos matizes, saturação reduzida e profundidade
sutil para um visual mais editorial/sofisticado (menos "primário"). */
--brand-navy: #012451;
--brand-flame: #d9533f;
--brand-sky: #4f86c6;
--brand-ice: #41b1d6;
/* Sprint 5 — export kit (PDF / materiais) */
--brand-pdf-cream: #fdfaf3;
--brand-pdf-ink: #2b2825;
--brand-pdf-muted: #6b6560;
--brand-pdf-border: #e4dfd6;
--brand-pdf-navy: #0a2463;
--brand-pdf-accent: #1b4fbf;
/* Aliases retrocompatíveis (código existente usa --arco-*) */
--arco-navy: var(--brand-navy);
--arco-flame: var(--brand-flame);
--arco-sky: var(--brand-sky);
--arco-ice: var(--brand-ice);
/* ── Dark Surfaces (escala unificada) ── */
--bg: #031530;
--surf: #072248;
--surf2: #0a2d5c;
--surf3: #123b72;
--bord: #2a5088;
--bord2: #3d64a3;
/* ── Text ── */
--text: #eef4ff;
--muted: #a2b5d5;
--dim: #7892bd;
--ghost: #17376c;
/* ── Accent semântico ── */
--accent: var(--brand-sky);
--accent-500: var(--brand-sky);
--accent-400: var(--brand-ice);
--acc: var(--brand-sky); /* alias legado */
/* ── Status (refinados: mesmos matizes, menos neon) ── */
--success: #3ab06d;
--danger: #db6a64;
--warning: #e2a43d;
--info: #41b1d6;
/* ── ENEM semantic colors (pedagógico) ── */
/* Cores de área nos temas escuros (navy é o :root): versões claras dos
mesmos matizes, para ler como texto/ponto sobre fundo escuro. O tema
claro (Aurora) redefine com os tons escuros. */
--area-lc: #7EA6EE;
--area-ch: #5DBF95;
--area-cn: #4FC0C9;
--area-mt: #B993D6;
--area-redacao: #E58AA9;
--perf-good: #0D6E4B;
--perf-warn: #D4871A;
--perf-bad: #C0392B;
--perf-neutral: #6B6560;
/* Aliases retrocompatíveis (HTMLs usam --green/--red/--amber) */
--green: var(--success);
--red: var(--danger);
--amber: var(--warning);
/* ── Marcas (para badges e gráficos) — cores oficiais, as mesmas de src/lib/marcas-cores.ts ── */
--sas: #2F6BF0;
--coc: #008030;
/* Módulo Análise de Conteúdo (acento COC verde) */
--conteudo-coc-dark: #006326;
--conteudo-coc-mid: #388e3c;
--conteudo-coc-light: #66bb6a;
--conteudo-soft: rgba(0, 128, 48, 0.08);
--conteudo-soft-strong: rgba(0, 128, 48, 0.14);
--conteudo-border: rgba(0, 128, 48, 0.22);
--conteudo-hdr-bg: linear-gradient(135deg, rgba(0, 128, 48, 0.06), rgba(0, 128, 48, 0.02));
--spe: #D0522E;
--sae: #782888;
--conquista:#E0005A;
--geekie: #E23C3C;
--gee: #E23C3C; /* alias legado */
--ei: #55c0a0;
--pes: #e2a43d;
--pleno: #6b3fa0;
--nav: #dd84ac;
--genio: #3ab06d;
--is: #2f9b63;
--maralto: #e8915a;
--br: #8da7be;
/* ── Paleta categórica para gráficos (10 cores) ──
Refinada: mesmos matizes, dessaturada para um conjunto mais coeso e chique. */
--cat-1: #4f86c6; /* sky */
--cat-2: #d9533f; /* flame */
--cat-3: #3ab06d; /* green */
--cat-4: #e2a43d; /* amber */
--cat-5: #7861b8; /* purple */
--cat-6: #41b1d6; /* ice */
--cat-7: #dd84ac; /* pink */
--cat-8: #55c0a0; /* teal */
--cat-9: #e8915a; /* orange */
--cat-10: #a18fd6; /* lavender */
/* ── Spacing scale ── */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
/* ── Radius scale ── */
--r-xs: 4px;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-2xl: 28px;
--r-full: 999px;
/* Aliases legado */
--radius-sm: var(--r-md);
--radius-md: var(--r-lg);
--radius-lg: 18px;
--radius: var(--r-lg);
/* ── Elevation (sombras calibradas para dark — camada de contato + difusa)
Editorial: alphas reduzidos nas camadas difusas — profundidade que se
sente, não que se vê. ── */
--sh-xs: 0 1px 1px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.04);
--sh-sm: 0 1px 2px rgba(0,0,0,0.20), 0 3px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
--sh-md: 0 2px 4px rgba(0,0,0,0.22), 0 10px 28px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.05);
--sh-lg: 0 4px 10px rgba(0,0,0,0.24), 0 20px 52px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.05);
--sh-xl: 0 8px 22px rgba(0,0,0,0.28), 0 40px 96px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.06);
--sh-inset: inset 0 1px 0 rgba(255, 255, 255, .04);
/* Aliases legado */
--shadow-sm: var(--sh-sm);
--shadow-md: var(--sh-md);
--shadow-lg: var(--sh-lg);
--shadow: var(--sh-md);
/* ── Premium visual layer ── */
--elev-1: var(--sh-xs);
--elev-2: var(--sh-sm);
--elev-3: var(--sh-md);
--elev-4: var(--sh-lg);
--elev-5: var(--sh-xl);
--glass-bg: color-mix(in oklab, var(--surf) 84%, transparent);
--glass-brd: color-mix(in oklab, var(--bord) 72%, transparent);
--focus-ring: color-mix(in oklab, var(--accent) 62%, white 18%);
--focus-ring-soft: color-mix(in oklab, var(--accent) 28%, transparent);
/* Aliases de compat + hairline (premium) — cascateiam por tema via --surf/--bord */
--surface: var(--surf);
--surface-2: var(--surf2);
--surface-3: var(--surf3);
--bord-hair: color-mix(in oklab, var(--bord) 60%, transparent);
--bord-strong: var(--bord2);
--section-gap-sm: 16px;
--section-gap-md: 24px;
--section-gap-lg: 32px;
--content-width-md: 1320px;
--content-width-lg: 1560px;
--content-width-compact: 1180px;
--content-width-executive: 1360px;
--content-width-analytical: 1560px;
--content-width-operational: 1280px;
/* ── Motion ── */
--ease-out: cubic-bezier(0.175, 0.885, 0.32, 1.1);
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
--dur-hover: 180ms;
--dur-enter: 380ms;
/* ── Shell ── */
--shell-topbar-h: 58px;
--shell-sidebar-w: 260px;
--shell-sidebar-w-collapsed: 56px;
/* Aliases legado para não quebrar .topbar/.sidebar existentes */
--topbar-h: var(--shell-topbar-h);
--sidebar-w: var(--shell-sidebar-w);
--sidebar-w-collapsed: var(--shell-sidebar-w-collapsed);
--content-max: 1680px;
--shell-logo-gradient: linear-gradient(135deg, var(--brand-flame) 0%, var(--brand-sky) 52%, var(--brand-ice) 100%);
/* ── Números (contrato tipográfico v2): Geist com tabular-nums.
JetBrains Mono (--font-mono) fica só para códigos: INEP, H26, id de item. ── */
--font-num: var(--font-display);
/* ── Acima/abaixo do benchmark em gráfico: azul/laranja, legíveis para
quem não distingue vermelho/verde. Verde/vermelho ficam só para status. ── */
--above: #5b9bf0;
--compare: #C9D3E2;
--below: #e8853a;
--area-red: var(--area-redacao);
}
/* ─────────────────────────────────────────────────────────────
1b. TOKENS SEMÂNTICOS v2 (nomes das variáveis do Figma: bg/*, border/*,
text/*, status/*, area/*, chart/*). Apontam para as variáveis de tema
acima, então valem nos três temas (navy, Aurora e Eclipse). Redeclarados
em body.light/body.dark porque os HTMLs legados trocam o tema no body.
───────────────────────────────────────────────────────────── */
:root,
html[data-theme] body,
body.light,
body.dark {
--bg-canvas: var(--bg);
--bg-surface: var(--surf);
--bg-subtle: var(--surf2);
--bg-muted: var(--surf3);
--border-default: var(--bord);
--border-subtle: color-mix(in oklab, var(--bord) 60%, transparent);
--border-strong: var(--bord2);
--text-primary: var(--text);
--text-secondary: var(--muted);
--text-tertiary: var(--dim);
--status-positive: var(--success);
--status-negative: var(--danger);
--status-warning: var(--warning);
--status-info: var(--info);
--chart-track: color-mix(in oklab, var(--bord) 45%, transparent);
--chart-grid: color-mix(in oklab, var(--bord) 55%, transparent);
--chart-axis: var(--dim);
--chart-label: var(--muted);
--chart-context: color-mix(in oklab, var(--dim) 55%, transparent);
--chart-benchmark: var(--text);
--above-soft: color-mix(in oklab, var(--above) 18%, transparent);
--below-soft: color-mix(in oklab, var(--below) 18%, transparent);
}
/* ─────────────────────────────────────────────────────────────
2. AURORA (Light)
Ativado por:
- html[data-theme="light"] (padrão Next/React, set pelo bootstrap em layout.tsx)
- body.light (padrão HTMLs legados + compat)
───────────────────────────────────────────────────────────── */
html[data-theme="light"],
html[data-theme="light"] body,
body.light {
--bg: #e6edf5;
--surf: #ffffff;
--surf2: #f2f6fb;
--surf3: #dce4ee;
--bord: #d3dae5;
--bord2: #bcc8d7;
--text: #012451;
--muted: #4c6078;
--ghost: #f7f8fa;
--sh-xs: 0 1px 1px rgba(1,36,81,0.04), 0 1px 2px rgba(1,36,81,0.03);
--sh-sm: 0 1px 2px rgba(1,36,81,0.05), 0 2px 5px rgba(1,36,81,0.04);
--sh-md: 0 2px 4px rgba(1,36,81,0.05), 0 10px 22px rgba(1,36,81,0.07);
--sh-lg: 0 4px 8px rgba(1,36,81,0.06), 0 20px 44px rgba(1,36,81,0.09);
--sh-xl: 0 8px 16px rgba(1,36,81,0.07), 0 38px 80px rgba(1,36,81,0.11);
--shadow-sm: var(--sh-sm);
--shadow-md: var(--sh-md);
--shadow-lg: var(--sh-lg);
--shadow: var(--sh-md);
/* Acima/abaixo do benchmark com contraste AA sobre branco. */
--above: #1f62c4;
--compare: #3A4556;
--below: #b0560f;
/* T14 · 1.4 — contraste AA (≥ 4,5:1) sobre branco para texto de apoio. */
--dim: #5a7290;
--area-lc: #1B4FBF;
--area-ch: #0D6E4B;
--area-cn: #0E7C86;
--area-mt: #7A3E9D;
--area-redacao: #B5456B;
}
/* ─────────────────────────────────────────────────────────────
2b. ECLIPSE (Dark puro)
Cinza neutro sem matiz azul — ideal para OLED, uso noturno e
ambientes com mínima emissão de luz. Inspirado no Apple HIG Dark.
Ativado por:
- html[data-theme="dark"]
- body.dark (compat HTMLs legados)
───────────────────────────────────────────────────────────── */
html[data-theme="dark"],
html[data-theme="dark"] body,
body.dark {
--bg: #0a0a0a;
--surf: #141414;
--surf2: #1c1c1e;
--surf3: #2c2c2e;
--bord: #3a3a3c;
--bord2: #48484a;
--text: #f5f5f7;
--muted: #a6a8ad;
--dim: #86888d;
--ghost: #1c1c1e;
/* Editorial: difusas mais leves — o preto OLED já dá o contraste. */
--sh-xs: 0 1px 1px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.05);
--sh-sm: 0 1px 2px rgba(0,0,0,0.34), 0 3px 8px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.05);
--sh-md: 0 2px 4px rgba(0,0,0,0.38), 0 10px 26px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
--sh-lg: 0 4px 10px rgba(0,0,0,0.42), 0 20px 52px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.05);
--sh-xl: 0 8px 22px rgba(0,0,0,0.48), 0 40px 96px rgba(0,0,0,0.56), inset 0 1px 0 rgba(255,255,255,0.06);
--shadow-sm: var(--sh-sm);
--shadow-md: var(--sh-md);
--shadow-lg: var(--sh-lg);
--shadow: var(--sh-md);
--above: #5b9bf0;
--compare: #C9D3E2;
--below: #f0975a;
}
/* ─────────────────────────────────────────────────────────────
3. RESET & TYPOGRAPHY BASE
───────────────────────────────────────────────────────────── */
.atlas-reset *,
.atlas-reset *::before,
.atlas-reset *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-sans);
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background var(--dur-slow), color var(--dur-slow);
}
/* Ambient layer: hard-disabled — fundos chapados em todos os temas.
A classe `atlas-curved-ambient` foi mantida para compatibilidade
estrutural (alguns painéis ainda referenciam), mas sem efeito visual:
nada de gradient, halo ou camada semi-transparente sobre a tela. */
body.atlas-curved-ambient {
background-color: var(--bg) !important;
}
html[data-theme="light"] body.atlas-curved-ambient,
body.light.atlas-curved-ambient {
background-color: var(--bg) !important;
}
body.atlas-curved-ambient::before,
html[data-theme="light"] body.atlas-curved-ambient::before,
body.light.atlas-curved-ambient::before {
content: none !important;
background: none !important;
}
/* Mercado static panel: force flat topbar without blur.
This removes right-edge optical distortion seen on some GPUs/browsers. */
body #app-shell > .topbar,
body #app-shell .topbar {
backdrop-filter: blur(16px) saturate(140%) !important;
-webkit-backdrop-filter: blur(16px) saturate(140%) !important;
background: color-mix(in oklab, var(--surf) 80%, transparent) !important;
border-radius: 0 !important;
box-shadow: 0 1px 0 color-mix(in oklab, var(--text) 5%, transparent) !important;
}
body #app-shell .topbar-logo {
transition: background var(--dur-fast), opacity var(--dur-fast);
}
body #app-shell .topbar-logo:hover {
background: color-mix(in oklab, var(--accent) 7%, transparent);
opacity: 1;
}
body #app-shell .topbar-logo:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: -2px;
}
/* Tabelas inteiras em tabular-nums: colunas numéricas alinham dígito a
dígito sem precisar marcar célula por célula (inócuo para texto). */
.atlas-tbl,
.tnum,
.atlas-num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* Contrato v2: nota, KPI e delta em Geist tabular; códigos em mono. */
.atlas-num {
font-family: var(--font-num);
}
.atlas-code {
font-family: var(--font-mono);
font-size: 0.92em;
letter-spacing: 0;
}
.atlas-display {
font-family: var(--font-display);
}
.atlas-mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* ─────────────────────────────────────────────────────────────
Typography utility layer — padrão único Atlas
Use estas classes em todos os paineis em vez de inline styles.
───────────────────────────────────────────────────────────── */
/* Eyebrow: pequeno label uppercase acima de títulos.
Sempre sans (Inter) — NUNCA mono, evita o fallback Courier
em browsers onde a JetBrains não carrega. */
.atlas-eyebrow {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dim);
line-height: 1.4;
}
.atlas-eyebrow--accent { color: var(--accent); }
.atlas-eyebrow--muted { color: var(--muted); }
.atlas-eyebrow--lg { font-size: 11px; }
.atlas-eyebrow--xs { font-size: 9px; letter-spacing: 0.14em; }
/* Hero title: título grande de página/painel — Geist display,
peso 600 com letter-spacing apertado para look premium. */
.atlas-hero-title {
font-family: var(--font-display);
font-size: clamp(26px, 3.2vw, 36px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.08;
color: var(--text);
text-wrap: balance;
}
.atlas-hero-title--xl { font-size: clamp(32px, 3.8vw, 44px); letter-spacing: -0.04em; }
.atlas-hero-title--sm { font-size: clamp(20px, 2.4vw, 26px); }
/* Subtitle: complemento do hero. */
.atlas-hero-subtitle {
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 400;
line-height: 1.55;
color: var(--muted);
max-width: 900px;
text-wrap: pretty;
}
/* Section heading (h2/h3 dentro do painel). */
.atlas-section-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.22;
color: var(--text);
text-wrap: balance;
}
.atlas-section-title--sm { font-size: 15px; }
.atlas-section-title--lg { font-size: 22px; }
/* KPI value (números grandes em hero cards).
A definição-base canônica de .atlas-kpi-value / .kpi .kv fica mais abaixo
(Display Geist, tabular-nums). Aqui ficam só as variantes de tamanho,
evitando a declaração-base duplicada que existia neste ponto. */
.atlas-kpi-value--xl { font-size: clamp(36px, 4vw, 48px); font-weight: 800; }
.atlas-kpi-value--sm { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; }
/* Hero dashboard — meio-termo: mais presença que weight 500, sem peso 800+ */
.atlas-premium-kpi-hero .atlas-kpi-value--xl {
font-size: clamp(38px, 4.2vw, 46px);
font-weight: 600;
letter-spacing: -0.028em;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.12);
}
/* KPI label (label uppercase pequeno acima do número). */
.atlas-kpi-label {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--muted);
line-height: 1.3;
}
/* Body emphasis — texto comum com peso médio. */
.atlas-body { font-family: var(--font-sans); font-weight: 400; text-wrap: pretty; }
.atlas-body--strong { font-weight: 600; }
/* Numeric data class — uso geral em tabelas e listas (contrato v2: Geist tabular). */
.atlas-numeric {
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* Numeric "display" — números com a Geist em vez de Mono.
Útil quando o número é curto (ano, contagem) e mono parece pesado. */
.atlas-numeric-display {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* Legacy inline-font bridge (HTML/strings antigos).
Estes seletores capturam qualquer style inline que use as fontes
legadas e força a usar os tokens novos — barreira de defesa. */
[style*="Plus Jakarta Sans"],
[style*="Manrope"],
[style*="DM Sans"],
[style*="Helvetica Neue"],
[style*="Open Sans"],
[style*="Newsreader"],
[style*="Playfair Display"],
[style*="Source Serif"],
[style*="Georgia, serif"],
[style*="Times New Roman"] {
font-family: var(--font-sans) !important;
}
[style*="IBM Plex Mono"],
[style*="Courier New"],
[style*="Courier"],
[style*="Menlo"],
[style*="Monaco"],
[style*="Consolas"] {
font-family: var(--font-mono) !important;
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" !important;
}
/* Atlas Typography Contract v2 (hard lock)
Corrige paineis legados sem classes atlas-* (HTML estático antigo). */
:where(.shell, .app, .app-shell, .panel, .card, .kpi, .tbl, .sw, .sw2) :is(
h1, h2, h3, h4, .panel-title, .section-title, .hero-title
) {
font-family: var(--font-display) !important;
}
:where(.shell, .app, .app-shell, .panel, .card, .kpi, .tbl, .sw, .sw2) :is(
p, li, label, small, td, th, button, input, select, textarea, .panel-sub, .panel-eyebrow, .kl
) {
font-family: var(--font-sans) !important;
}
:where(.shell, .app, .app-shell, .panel, .card, .kpi, .tbl, .sw, .sw2) :is(
[data-num], .num, .kv
) {
font-family: var(--font-num) !important;
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" !important;
}
:where(.shell, .app, .app-shell, .panel, .card, .kpi, .tbl, .sw, .sw2) :is(code, pre, kbd) {
font-family: var(--font-mono) !important;
}
/* Hard override: garantir que qualquer .font-mono herdado/Tailwind
nunca caia em serif. Tailwind v4 já mapeia font-mono para
--font-mono via @theme, mas adicionamos esta rede de segurança. */
.font-mono {
font-family: var(--font-mono) !important;
font-feature-settings: "tnum" !important;
}
/* ─────────────────────────────────────────────────────────────
Typography lock (global Atlas consistency)
Garante um único padrão visual em todos os painéis React/HTML
que usam classes atlas-*.
───────────────────────────────────────────────────────────── */
:where(
.atlas-shell,
.atlas-shell-main,
.atlas-content,
.atlas-premium-page,
.atlas-page-header,
.atlas-premium-hero,
.atlas-premium-surface-card,
.atlas-sw,
.atlas-tbl
) {
font-family: var(--font-sans);
}
:where(
.atlas-shell,
.atlas-shell-main,
.atlas-content,
.atlas-premium-page,
.atlas-page-header,
.atlas-premium-hero,
.atlas-premium-surface-card
) :is(button, input, select, textarea, label) {
font-family: var(--font-sans);
}
:where(
.atlas-shell,
.atlas-shell-main,
.atlas-content,
.atlas-premium-page,
.atlas-page-header,
.atlas-premium-hero,
.atlas-premium-surface-card
) :is(h1, h2, h3, h4) {
font-family: var(--font-display);
letter-spacing: -0.02em;
}
/* Peso padrão de títulos para consistência (evita variação visual entre abas). */
:where(
.atlas-shell,
.atlas-shell-main,
.atlas-content,
.atlas-premium-page,
.atlas-page-header,
.atlas-premium-hero,
.atlas-premium-surface-card
) :is(h1, h2) {
font-weight: 600;
}
/* ─────────────────────────────────────────────────────────────
Premium utilities (Sprint 1 foundation)
───────────────────────────────────────────────────────────── */
.atlas-premium-glass {
background: var(--glass-bg);
border: 1px solid var(--glass-brd);
backdrop-filter: blur(14px) saturate(130%);
-webkit-backdrop-filter: blur(14px) saturate(130%);
}
.atlas-premium-elev-1 { box-shadow: var(--elev-1); }
.atlas-premium-elev-2 { box-shadow: var(--elev-2); }
.atlas-premium-elev-3 { box-shadow: var(--elev-3); }
.atlas-premium-elev-4 { box-shadow: var(--elev-4); }
.atlas-section-stack-sm > * + * { margin-top: var(--section-gap-sm); }
.atlas-section-stack-md > * + * { margin-top: var(--section-gap-md); }
.atlas-section-stack-lg > * + * { margin-top: var(--section-gap-lg); }
/* ─────────────────────────────────────────────────────────────
Premium composition layer (Sprint visual leap)
───────────────────────────────────────────────────────────── */
.atlas-premium-page {
width: 100%;
max-width: var(--content-width-analytical);
margin: 0 auto;
padding-inline: clamp(10px, 1.6vw, 22px);
padding-block: 4px 20px;
--motion-lift: 2px;
--motion-stagger-step: 34ms;
--motion-stagger-distance: 10px;
}
.atlas-premium-page--compact {
max-width: var(--content-width-compact);
}
.atlas-premium-page--executive {
max-width: var(--content-width-executive);
--motion-lift: 1.5px;
--motion-stagger-step: 28ms;
}
.atlas-premium-page--operational {
max-width: var(--content-width-operational);
--motion-lift: 1px;
--motion-stagger-step: 24ms;
}
/* Sprint 4 — layout templates (executive · analytical · operational) */
.atlas-layout-executive,
.atlas-layout-analytical,
.atlas-layout-operational {
display: flex;
flex-direction: column;
}
.atlas-layout-executive { gap: var(--section-gap-sm); }
.atlas-layout-analytical { gap: var(--section-gap-md); }
.atlas-layout-operational { gap: var(--section-gap-sm); }
.atlas-layout-section {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.atlas-layout-section__lead {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 10px 16px;
}
.atlas-layout-section__title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.atlas-layout-section__desc {
font-size: 11px;
color: var(--muted);
line-height: 1.55;
max-width: 760px;
}
.atlas-layout-kpi-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
}
.atlas-layout-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--section-gap-md);
align-items: start;
}
@media (max-width: 960px) {
.atlas-layout-split {
grid-template-columns: 1fr;
}
}
.atlas-layout-section--data {
min-height: 0;
}
/** Contexto institucional (INEP · município · UF) — Fase 9 foundation */
.atlas-school-context {
font-family: var(--font-sans);
font-size: 12px;
line-height: 1.45;
color: var(--muted);
letter-spacing: 0.01em;
}
/* Dashboard — hero de médias (Fase 9 Sprint 1) */
.atlas-dashboard-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 0;
}
@media (max-width: 768px) {
.atlas-dashboard-hero-grid {
grid-template-columns: 1fr;
}
}
.atlas-premium-kpi-hero--gradient-a,
.atlas-premium-kpi-hero--gradient-b {
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
}
.atlas-premium-kpi-hero--gradient-a {
background: linear-gradient(135deg, var(--brand-navy), var(--accent));
}
.atlas-premium-kpi-hero--gradient-b {
background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, #fff));
}
.atlas-premium-kpi-hero__eyebrow {
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 4px;
}
.atlas-premium-kpi-hero__subtext {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
margin-top: 3px;
}
.atlas-premium-kpi-hero__side {
text-align: right;
}
.atlas-premium-kpi-hero__side-eyebrow {
font-size: 9px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 4px;
}
.atlas-premium-kpi-hero__rank {
font-size: 10px;
color: rgba(255, 255, 255, 0.35);
margin-top: 4px;
}
.atlas-kpi-delta--sm {
font-size: 20px;
line-height: 1;
}
/* Delta vs grupo comparativo nos hero cards do dashboard */
.atlas-premium-kpi-hero .atlas-kpi-value.atlas-kpi-delta--sm {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.018em;
text-shadow: none;
}
.atlas-premium-kpi-hero .atlas-kpi-value.atlas-kpi-delta--good {
color: var(--success);
}
.atlas-premium-kpi-hero .atlas-kpi-value.atlas-kpi-delta--bad {
color: var(--danger);
}
.atlas-kpi-delta--good {
color: var(--success);
}
.atlas-kpi-delta--bad {
color: var(--danger);
}
.atlas-kpi-delta--warn {
color: var(--warning);
}
/* Rankings — KPI grid, filtros, tabela (Fase 9 Sprint 1) */
.atlas-rankings-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
width: 100%;
}
.atlas-rankings-kpi-grid > .atlas-premium-kpi-hero {
width: 100%;
min-width: 0;
}
@media (min-width: 960px) {
.atlas-rankings-kpi-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.atlas-premium-kpi-hero--gradient-c {
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.atlas-premium-kpi-hero__row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.atlas-premium-kpi-hero__value {
font-family: var(--font-display);
font-size: 38px;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1;
}
.atlas-premium-kpi-hero__info {
font-size: 11px;
margin-top: 8px;
color: rgba(255, 255, 255, 0.75);
}
.atlas-premium-kpi-hero__info--soft {
color: rgba(255, 255, 255, 0.8);
}
.atlas-premium-kpi-hero__info--lh {
line-height: 1.3;
}
.atlas-premium-kpi-hero__eyebrow--soft {
color: rgba(255, 255, 255, 0.6);
}
.atlas-premium-kpi-hero__icon-fade {
opacity: 0.72;
flex-shrink: 0;
padding: 10px;
border-radius: var(--r-full);
background: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.atlas-rankings-filter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.atlas-rankings-filter-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
display: block;
margin-bottom: 4px;
}
.atlas-rankings-filter-hint {
font-size: 10px;
color: var(--dim);
margin-top: 4px;
line-height: 1.3;
}
.atlas-rankings-bairro-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 8px;
max-height: 132px;
overflow-y: auto;
}
.atlas-rankings-bairro-chip {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%;
padding: 3px 6px 3px 10px;
border-radius: 99px;
border: 1px solid color-mix(in oklab, var(--accent) 36%, var(--bord));
background: color-mix(in oklab, var(--accent) 12%, transparent);
color: var(--accent);
font-family: var(--font-sans);
font-size: 10.5px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.01em;
text-transform: none;
cursor: pointer;
transition: background var(--dur-fast), border-color var(--dur-fast);
}
.atlas-rankings-bairro-chip > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.atlas-rankings-bairro-chip svg {
flex-shrink: 0;
opacity: 0.7;
}
.atlas-rankings-bairro-chip:hover {
background: color-mix(in oklab, var(--accent) 20%, transparent);
border-color: var(--accent);
}
.atlas-rankings-bairro-chip:hover svg {
opacity: 1;
}
.atlas-rankings-bairro-clear {
border: none;
background: none;
color: var(--muted);
font-family: var(--font-sans);
font-size: 10.5px;
font-weight: 600;
cursor: pointer;
padding: 3px 6px;
border-radius: 99px;
}
.atlas-rankings-bairro-clear:hover {
color: var(--text);
background: color-mix(in oklab, var(--text) 6%, transparent);
}
.atlas-rankings-card-title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.atlas-rankings-card-title--spaced {
margin-bottom: 14px;
}
.atlas-rankings-table-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--bord);
gap: 12px;
flex-wrap: wrap;
}
.atlas-rankings-table-meta {
font-size: 10px;
color: var(--muted);
}
.atlas-rankings-table-wrap {
overflow: hidden;
}
.atlas-rank-badge {
display: inline-block;
min-width: 32px;
padding: 2px 8px;
border-radius: 999px;
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 11px;
text-align: center;
background: var(--surf2);
color: var(--muted);
}
.atlas-rank-badge--gold {
background: color-mix(in oklab, var(--warning) 18%, transparent);
color: var(--warning);
}
.atlas-rank-badge--silver {
background: color-mix(in oklab, var(--dim) 18%, transparent);
color: var(--dim);
}
.atlas-rank-badge--bronze {
background: color-mix(in oklab, var(--warning) 28%, var(--danger) 8%);
color: color-mix(in oklab, var(--warning) 80%, var(--text));
}
.atlas-dep-pill {
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
display: inline-block;
}
.atlas-dep-pill--1 {
background: color-mix(in oklab, var(--brand-navy) 10%, var(--surf));
color: var(--brand-navy);
}
.atlas-dep-pill--2 {
background: color-mix(in oklab, var(--accent) 12%, var(--surf));
color: var(--accent);
}
.atlas-dep-pill--3 {
background: color-mix(in oklab, var(--success) 12%, var(--surf));
color: var(--success);
}
.atlas-dep-pill--4 {
background: color-mix(in oklab, var(--warning) 14%, var(--surf));
color: color-mix(in oklab, var(--warning) 85%, var(--text));
}
.atlas-rankings-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 20px;
border-top: 1px solid var(--bord);
flex-wrap: wrap;
}
.atlas-rankings-pagination-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
padding: 6px 12px;
border-radius: 8px;
border: 1px solid var(--bord);
background: var(--surf);
color: var(--text);
cursor: pointer;
}
.atlas-rankings-pagination-btn:disabled {
color: var(--dim);
cursor: not-allowed;
opacity: 0.5;
}
.atlas-tbl-col-w60 { width: 60px; }
.atlas-tbl-col-w70 { width: 70px; }
.atlas-tbl-col-w90 { width: 90px; }
.atlas-tbl-col-w100 { width: 100px; }
.atlas-tbl-col-w180 { width: 180px; }
/* Rede — chips de escola (Fase 9 Sprint 1) */
.atlas-rede-chip-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.atlas-rede-chip {
display: flex;
align-items: center;
gap: 6px;
border-radius: 99px;
padding: 4px 12px;
font-size: 11px;
}
.atlas-rede-chip__name {
font-weight: 600;
color: var(--text);
}
.atlas-rede-chip__uf {
color: var(--muted);
}
.atlas-rede-chip__remove {
height: 22px;
min-width: 22px;
padding: 0;
margin-left: 2px;
color: var(--danger);
font-size: 14px;
line-height: 1;
}
/* Rede — painéis Visão/Avançado (Fase 9 Sprint 1–2) */
.atlas-rede-kpi-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 24px;
}
@media (max-width: 900px) {
.atlas-rede-kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.atlas-rede-kpi-grid {
grid-template-columns: 1fr;
}
}
/* Composição unificada com o atlas-id-card: fundo tingido, borda mesclada
e barra lateral — a identidade fica na moldura, não no número. */
.atlas-rede-kpi-card {
position: relative;
background: color-mix(in srgb, var(--atlas-kpi-accent, var(--accent)) 7%, var(--surf3));
border: 1px solid color-mix(in srgb, var(--atlas-kpi-accent, var(--accent)) 25%, var(--bord));
border-radius: 14px;
padding: 18px 20px;
min-height: 96px;
overflow: hidden;
box-shadow: var(--elev-2);
}
.atlas-rede-kpi-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--atlas-kpi-accent, var(--accent));
}
.atlas-rede-kpi-card__eyebrow {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 6px;
}
.atlas-rede-kpi-card__value {
font-family: var(--font-display);
font-size: 26px;
font-weight: 800;
/* Neutro por padrão — cor só via --atlas-kpi-value (julgamento). */
color: var(--atlas-kpi-value, var(--text));
line-height: 1;
}
.atlas-rede-kpi-card__sub {
font-size: 10px;
color: var(--dim);
margin-top: 6px;
}
.atlas-rede-panel-card {
background: var(--surf);
border: 1px solid var(--bord);
border-radius: 14px;
padding: 20px;
margin-bottom: 20px;
}
.atlas-rede-panel-card--mb22 {
margin-bottom: 22px;
}
.atlas-rede-panel-title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.atlas-rede-panel-title--lg {
margin-bottom: 4px;
font-weight: 800;
}
.atlas-rede-panel-title--spaced {
margin-bottom: 12px;
}
.atlas-rede-panel-desc {
font-size: 11px;
color: var(--muted);
margin-bottom: 14px;
line-height: 1.5;
}
.atlas-rede-panel-footnote {
font-size: 9px;
color: var(--dim);
margin-top: 8px;
}
.atlas-rede-callout {
margin-bottom: 22px;
padding: 18px 24px;
background: color-mix(in oklab, var(--accent) 4%, var(--surf));
border-left: 3px solid var(--accent);
border-radius: 10px;
}
.atlas-rede-callout__title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 800;
color: var(--text);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.atlas-rede-callout__body {
font-size: 11px;
color: var(--muted);
line-height: 1.5;
}
.atlas-rede-area-row {
margin-bottom: 14px;
}
.atlas-rede-area-row__head {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
font-size: 11px;
font-weight: 700;
}
.atlas-rede-area-row__label {
color: var(--atlas-area-color, var(--text));
}
.atlas-rede-area-row__value {
color: var(--text);
}
.atlas-rede-area-row__delta {
font-size: 9px;
}
.atlas-rede-area-track {
position: relative;
height: 20px;
background: var(--surf2);
border-radius: 4px;
overflow: hidden;
}
.atlas-rede-area-fill {
height: 100%;
background: var(--atlas-area-color, var(--accent));
border-radius: 4px;
transition: width 0.5s ease;
}
.atlas-rede-area-marker {
position: absolute;
top: 0;
width: 2px;
height: 100%;
background: var(--surf);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.atlas-rede-area-bench {
font-size: 9px;
color: var(--dim);
margin-top: 2px;
}
.atlas-rede-two-col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 22px;
}
@media (max-width: 900px) {
.atlas-rede-two-col {
grid-template-columns: 1fr;
}
}
.atlas-rede-chart-host {
height: 360px;
}
.atlas-rede-chart-host--320 {
height: 320px;
}
.atlas-rede-panel-head-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.atlas-rede-panel-head-row__hint {
font-size: 10px;
color: var(--dim);
}
.atlas-rede-geo-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.atlas-rede-geo-pill {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: color-mix(in oklab, var(--accent) 4%, var(--surf));
border-radius: 6px;
font-size: 11px;
}
.atlas-rede-geo-pill__city {
font-weight: 700;
color: var(--text);
}
.atlas-rede-geo-pill__meta {
font-size: 9px;
color: var(--dim);
}
.atlas-rede-geo-pill__part {
font-weight: 700;
color: var(--accent);
font-size: 12px;
}
/* Rede — Comando, Heatmap, Tabela, Insights, Bloom (Fase 9 Sprint 2) */
.atlas-rede-exec-narrative {
background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 5%, var(--surf)), color-mix(in oklab, var(--accent) 2%, var(--surf)));
border: 1px solid var(--bord);
border-left: 4px solid var(--accent);
border-radius: 14px;
padding: 22px 28px;
margin-bottom: 20px;
}
.atlas-rede-exec-narrative__eyebrow {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
margin-bottom: 8px;
}
.atlas-rede-exec-narrative__body {
font-size: 14px;
color: var(--text);
line-height: 1.7;
font-family: var(--font-sans);
}
.atlas-rede-exec-narrative__body strong {
color: var(--accent);
}
.atlas-rede-alerts {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
}
.atlas-rede-alerts__title {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.atlas-rede-alert {
border-radius: 10px;
padding: 10px 16px;
font-size: 12px;
font-weight: 500;
line-height: 1.6;
display: flex;
align-items: flex-start;
gap: 6px;
}
.atlas-rede-alert--danger {
background: color-mix(in oklab, var(--danger) 8%, var(--surf));
border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent);
color: var(--danger);
}
.atlas-rede-alert--warn {
background: color-mix(in oklab, var(--warning) 8%, var(--surf));
border: 1px solid color-mix(in oklab, var(--warning) 30%, transparent);
color: color-mix(in oklab, var(--warning) 80%, black 20%);
}
.atlas-rede-alert--ok {
background: color-mix(in oklab, var(--success) 8%, var(--surf));
border: 1px solid color-mix(in oklab, var(--success) 25%, transparent);
color: var(--success);
}
.atlas-rede-kpi-grid--dense {
margin-bottom: 28px;
}
.atlas-rede-kpi-grid--dense .atlas-rede-kpi-card {
border-radius: 10px;
padding: 14px;
}
.atlas-rede-kpi-grid--dense .atlas-rede-kpi-card__eyebrow {
font-size: 9px;
margin-bottom: 4px;
}
.atlas-rede-kpi-grid--dense .atlas-rede-kpi-card__value {
font-size: 22px;
}
.atlas-rede-kpi-grid--dense .atlas-rede-kpi-card__sub {
font-size: 9px;
line-height: 1.4;
}
.atlas-rede-panel-card--danger-left {
border-left: 4px solid var(--danger);
}
.atlas-rede-panel-card--success-left {
border-left: 4px solid var(--success);
}
.atlas-rede-extremo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 10px;
}
.atlas-rede-extremo-card {
border: 1px solid color-mix(in oklab, var(--atlas-area-color, var(--accent)) 20%, transparent);
border-left: 3px solid var(--atlas-area-color, var(--accent));
border-radius: 8px;
padding: 10px 14px;
}
.atlas-rede-extremo-card__eyebrow {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--atlas-area-color, var(--accent));
font-weight: 700;
margin-bottom: 8px;
}
.atlas-rede-extremo-card__rank {
font-size: 9px;
color: var(--dim);
font-weight: 600;
}
.atlas-rede-extremo-card__name {
font-size: 11px;
font-weight: 700;
color: var(--text);
}
.atlas-rede-extremo-card__meta {
font-size: 10px;
color: var(--dim);
}
.atlas-rede-extremo-card__block {
margin-bottom: 6px;
}
.atlas-rede-extremo-card__block:last-child {
margin-bottom: 0;
}
.atlas-rede-area-pill {
display: inline-block;
padding: 2px 8px;
background: color-mix(in oklab, var(--atlas-area-color, var(--accent)) 12%, transparent);
color: var(--atlas-area-color, var(--accent));
border-radius: 4px;
font-size: 10px;
font-weight: 700;
}
.atlas-rede-cta-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.atlas-rede-heatmap-legend {
display: flex;
gap: 12px;
font-size: 10px;
color: var(--muted);
flex-wrap: wrap;
}
.atlas-rede-heatmap-legend__item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.atlas-rede-heatmap-legend__swatch {
width: 10px;
height: 10px;
border-radius: 2px;
display: inline-block;
}
.atlas-rede-heatmap {
border-collapse: collapse;
width: 100%;
font-size: 10px;
font-family: var(--font-display);
min-width: 800px;
}
.atlas-rede-heatmap th,
.atlas-rede-heatmap td {
padding: 4px 3px;
text-align: center;
}
.atlas-rede-heatmap__area-col {
padding: 6px 8px !important;
text-align: left !important;
font-weight: 700;
white-space: nowrap;
position: sticky;
left: 0;
background: var(--surf);
z-index: 1;
}
.atlas-rede-heatmap thead .atlas-rede-heatmap__area-col {
z-index: 2;
font-size: 11px;
color: var(--text);
}
.atlas-rede-heatmap__head {
font-size: 9px;
color: var(--muted);
font-weight: 600;
}
.atlas-rede-heatmap__cell {
border-radius: 3px;
font-size: 9px;
font-weight: 600;
color: var(--text);
}
.atlas-rede-table-toolbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.atlas-rede-table-filter {
width: 100%;
margin-top: 12px;
margin-bottom: 14px;
padding: 8px 12px;
border: 1px solid var(--bord);
border-radius: 6px;
font-size: 12px;
background: var(--bg);
color: var(--text);
}
.atlas-tbl th.atlas-tbl-th--sortable {
cursor: pointer;
user-select: none;
}
.atlas-tbl th.atlas-tbl-th--sorted {
color: var(--accent);
}
.atlas-tbl td[data-align="center"],
.atlas-tbl th[data-align="center"] {
text-align: center;
}
.atlas-tbl td[data-align="right"],
.atlas-tbl th[data-align="right"] {
text-align: right;
}
.atlas-tbl__cell-primary {
font-weight: 700;
color: var(--text);
font-size: 12px;
}
.atlas-tbl__cell-sub {
font-size: 9px;
color: var(--dim);
}
.atlas-tbl__cell-dim {
color: var(--dim);
}
.atlas-tbl__footer-row td {
background: color-mix(in oklab, var(--accent) 6%, var(--surf));
font-weight: 700;
}
.atlas-tbl__footer-label {
font-family: var(--font-display);
font-weight: 800;
color: var(--accent);
}
.atlas-rede-insights-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
.atlas-rede-insight-card {
background: var(--surf);
border: 1px solid color-mix(in oklab, var(--atlas-insight-accent, var(--accent)) 20%, transparent);
border-left: 4px solid var(--atlas-insight-accent, var(--accent));
border-radius: 10px;
padding: 16px 20px;
}
.atlas-rede-insight-card__title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--atlas-insight-accent, var(--accent));
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.atlas-rede-insight-card__text {
font-size: 12px;
color: var(--muted);
line-height: 1.6;
}
.atlas-rede-bloom-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.atlas-rede-bloom-row__label {
width: 80px;
font-size: 12px;
font-weight: 700;
text-align: right;
color: var(--atlas-bloom-color, var(--text));
}
.atlas-rede-bloom-track {
flex: 1;
height: 22px;
background: var(--surf2);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.atlas-rede-bloom-fill {
height: 100%;
background: var(--atlas-bloom-color, var(--accent));
border-radius: 4px;
transition: width 0.5s ease;
}
.atlas-rede-bloom-count {
width: 60px;
font-size: 12px;
font-weight: 700;
text-align: right;
color: var(--text);
}
.atlas-rede-bloom-count__unit {
font-size: 9px;
color: var(--dim);
font-weight: 400;
}
.atlas-rede-bloom-enem-pct {
width: 40px;
font-size: 10px;
color: var(--dim);
}
.atlas-rede-bloom-footnote {
font-size: 11px;
color: var(--muted);
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--bord);
}
.atlas-rede-diagnosis {
background: var(--surf);
border: 1px solid var(--bord);
border-left: 4px solid var(--atlas-bloom-color, var(--accent));
border-radius: 10px;
padding: 16px 20px;
}
.atlas-rede-diagnosis__title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--atlas-bloom-color, var(--accent));
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.atlas-rede-diagnosis__text {
font-size: 12px;
color: var(--muted);
line-height: 1.6;
}
/* ── Rede: Gestão (PanelGestao) ── */
.atlas-rede-gestao-note {
margin-bottom: 14px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--bord) 72%);
background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 8%, var(--surf) 92%), var(--surf2));
font-size: 12px;
line-height: 1.55;
color: var(--muted);
}
.atlas-rede-gestao-note strong {
color: var(--text);
}
.atlas-rede-gestao-cnpj-wrap {
margin-bottom: 16px;
}
.atlas-rede-gestao-cnpj-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: color-mix(in oklab, var(--accent) 5%, var(--surf) 95%);
border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--bord) 72%);
border-left: 4px solid var(--accent);
border-radius: 12px;
padding: 10px 16px;
cursor: pointer;
transition: background var(--dur-fast), border-color var(--dur-fast);
font-family: var(--font-sans);
text-align: left;
}
.atlas-rede-gestao-cnpj-toggle--open {
background: color-mix(in oklab, var(--accent) 10%, var(--surf) 90%);
border-radius: 12px 12px 0 0;
}
.atlas-rede-gestao-cnpj-toggle__lead {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.atlas-rede-gestao-cnpj-toggle__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
color: var(--accent);
}
.atlas-rede-gestao-cnpj-toggle__hint {
font-size: 11px;
color: var(--muted);
}
.atlas-rede-gestao-cnpj-toggle__chevron {
font-size: 14px;
color: var(--accent);
transition: transform var(--dur-fast);
flex-shrink: 0;
}
.atlas-rede-gestao-cnpj-toggle--open .atlas-rede-gestao-cnpj-toggle__chevron {
transform: rotate(180deg);
}
.atlas-rede-gestao-cnpj-body {
border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--bord) 72%);
border-top: none;
border-left: 4px solid var(--accent);
border-radius: 0 0 12px 12px;
padding: 16px 18px;
background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 5%, var(--surf) 95%), var(--surf2));
}
.atlas-rede-gestao-cnpj-body__desc {
font-size: 11px;
color: var(--muted);
line-height: 1.55;
margin-bottom: 12px;
}
.atlas-rede-gestao-cnpj-grid {
display: grid;
grid-template-columns: 1fr 180px;
gap: 10px;
}
@media (max-width: 640px) {
.atlas-rede-gestao-cnpj-grid {
grid-template-columns: 1fr;
}
}
.atlas-rede-status-msg {
margin-top: 10px;
padding: 8px 14px;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
}
.atlas-rede-status-msg--ok {
background: color-mix(in oklab, var(--success) 10%, var(--surf) 90%);
border: 1px solid color-mix(in oklab, var(--success) 35%, var(--bord) 65%);
color: var(--success);
}
.atlas-rede-status-msg--err {
background: color-mix(in oklab, var(--danger) 10%, var(--surf) 90%);
border: 1px solid color-mix(in oklab, var(--danger) 35%, var(--bord) 65%);
color: var(--danger);
}
.atlas-rede-status-msg--info {
background: color-mix(in oklab, var(--accent) 8%, var(--surf) 92%);
border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--bord) 72%);
color: var(--accent);
}
.atlas-rede-gestao-search-card,
.atlas-rede-gestao-list-card {
background: var(--surf);
border: 1px solid var(--bord);
border-radius: 14px;
padding: 20px;
}
.atlas-rede-gestao-search-card {
margin-bottom: 20px;
}
.atlas-rede-gestao-search-grid {
display: grid;
grid-template-columns: 2fr 120px 150px;
gap: 10px;
}
@media (max-width: 768px) {
.atlas-rede-gestao-search-grid {
grid-template-columns: 1fr;
}
}
.atlas-rede-gestao-results {
margin-top: 16px;
max-height: 420px;
overflow-y: auto;
border-radius: 8px;
}
.atlas-rede-gestao-results--bordered {
border: 1px solid var(--bord);
}
.atlas-rede-gestao-results__empty,
.atlas-rede-gestao-results__loading {
padding: 14px;
text-align: center;
font-size: 12px;
}
.atlas-rede-gestao-results__loading {
color: var(--muted);
}
.atlas-rede-gestao-results__empty {
color: var(--dim);
}
.atlas-rede-gestao-result-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid color-mix(in oklab, var(--bord) 70%, transparent 30%);
}
.atlas-rede-gestao-result-row:last-child {
border-bottom: none;
}
.atlas-rede-gestao-result-row--in-rede {
background: color-mix(in oklab, var(--success) 8%, var(--surf) 92%);
}
.atlas-rede-gestao-result-row__main {
min-width: 0;
flex: 1;
}
.atlas-rede-gestao-result-row__name {
font-size: 13px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.atlas-rede-gestao-result-row__meta {
font-size: 10px;
color: var(--muted);
margin-top: 2px;
}
.atlas-rede-gestao-result-row__score {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--accent);
margin-right: 4px;
flex-shrink: 0;
}
.atlas-rede-gestao-school-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
}
.atlas-rede-gestao-school-card {
border: 1px solid var(--bord);
border-radius: 10px;
padding: 10px 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
background: var(--surf2);
}
.atlas-rede-gestao-school-card__main {
min-width: 0;
flex: 1;
}
.atlas-rede-gestao-school-card__name {
font-size: 12px;
font-weight: 700;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.atlas-rede-gestao-school-card__meta {
font-size: 10px;
color: var(--muted);
margin-top: 2px;
}
.atlas-rede-gestao-school-card__score {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--accent);
flex-shrink: 0;
}
.atlas-rede-gestao-remove-btn {
background: none;
border: none;
color: var(--danger);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.atlas-rede-gestao-empty-list {
font-size: 12px;
color: var(--dim);
}
/* ── Rede: Redes salvas (SavedNetworksPicker) ── */
.atlas-saved-nets-wrap {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.atlas-saved-nets-save {
display: flex;
align-items: center;
}
.atlas-saved-nets-save-trigger {
font-size: 12px;
gap: 5px;
}
.atlas-saved-nets-save-form {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.atlas-saved-nets-name-input {
min-width: 180px;
max-width: 240px;
font-size: 13px;
}
.atlas-saved-nets-list-wrap {
border: 1px solid var(--bord);
border-radius: 10px;
overflow: hidden;
}
.atlas-saved-nets-list {
display: flex;
flex-direction: column;
}
.atlas-saved-nets-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--bord);
transition: background 0.12s;
}
.atlas-saved-nets-row:last-child {
border-bottom: none;
}
.atlas-saved-nets-row:hover {
background: var(--hover);
}
.atlas-saved-nets-row__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.atlas-saved-nets-row__name {
font-size: 13px;
font-weight: 600;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.atlas-saved-nets-row__meta {
font-size: 11px;
color: var(--dim);
}
.atlas-saved-nets-row__actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.atlas-saved-nets-load-btn {
font-size: 11px;
padding: 4px 10px;
height: auto;
}
/* ── Rede: IA (PanelIAAnalise + PDF) ── */
.atlas-rede-ia-hero {
background: var(--surf, #fff);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px 28px;
color: var(--text);
margin-bottom: 20px;
}
.atlas-rede-ia-hero__inner {
display: flex;
align-items: flex-start;
gap: 18px;
flex-wrap: wrap;
}
.atlas-rede-ia-hero__content {
flex: 1;
min-width: 260px;
}
.atlas-rede-ia-hero__eyebrow {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin-bottom: 4px;
}
.atlas-rede-ia-hero__title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
margin-bottom: 6px;
line-height: 1.2;
}
.atlas-rede-ia-hero__desc {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
max-width: 760px;
margin-bottom: 12px;
}
.atlas-rede-ia-tom-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.atlas-rede-ia-tom-btn {
padding: 6px 12px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
background: transparent;
color: var(--text);
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--font-sans);
display: inline-flex;
align-items: center;
gap: 6px;
transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.atlas-rede-ia-tom-btn:disabled {
cursor: not-allowed;
opacity: 0.65;
}
.atlas-rede-ia-tom-btn--active {
background: var(--accent);
color: var(--on-accent, #fff);
border-color: var(--accent);
}
.atlas-rede-ia-cta {
padding: 12px 22px;
background: var(--accent);
color: var(--on-accent, #fff);
border: none;
border-radius: 10px;
font-weight: 800;
font-size: 13px;
cursor: pointer;
font-family: var(--font-display);
transition: opacity var(--dur-fast);
white-space: nowrap;
flex-shrink: 0;
}
.atlas-rede-ia-cta:disabled {
opacity: 0.6;
cursor: wait;
}
.atlas-rede-ia-payload-details {
background: var(--surf2);
border: 1px solid var(--bord);
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 16px;
font-size: 12px;
}
.atlas-rede-ia-payload-details summary {
cursor: pointer;
color: var(--muted);
font-weight: 600;
}
.atlas-rede-ia-payload-pre {
font-size: 10px;
line-height: 1.5;
color: var(--text);
white-space: pre-wrap;
margin-top: 10px;
font-family: var(--font-mono);
max-height: 260px;
overflow: auto;
}
.atlas-rede-ia-error {
background: color-mix(in oklab, var(--danger) 8%, var(--surf) 92%);
border: 1px solid color-mix(in oklab, var(--danger) 28%, var(--bord) 72%);
border-radius: 10px;
padding: 14px 18px;
margin-bottom: 16px;
}
.atlas-rede-ia-error__title {
font-weight: 700;
color: var(--danger);
margin-bottom: 4px;
}
.atlas-rede-ia-error__body {
font-size: 12px;
color: var(--muted);
}
.atlas-rede-ia-error__hint {
font-size: 11px;
color: var(--dim);
margin-top: 6px;
}
.atlas-rede-ia-loading,
.atlas-rede-ia-placeholder {
background: var(--surf);
border-radius: 12px;
padding: 24px;
text-align: center;
color: var(--muted);
}
.atlas-rede-ia-placeholder {
border: 1px dashed var(--bord);
padding: 36px 24px;
}
.atlas-rede-ia-loading__icon,
.atlas-rede-ia-placeholder__icon {
font-size: 32px;
margin-bottom: 10px;
}
.atlas-rede-ia-loading__title,
.atlas-rede-ia-placeholder__title {
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.atlas-rede-ia-loading__sub,
.atlas-rede-ia-placeholder__sub {
font-size: 12px;
}
.atlas-rede-ia-placeholder__sub {
max-width: 480px;
margin: 0 auto;
}
.atlas-rede-ia-insight {
background: var(--surf);
border: 1px solid var(--bord);
border-radius: 12px;
padding: 24px 28px;
box-shadow: var(--sh-sm);
}
.atlas-rede-ia-insight__head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
flex-wrap: wrap;
gap: 8px;
}
.atlas-rede-ia-insight__title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
}
.atlas-rede-ia-insight__meta {
font-size: 10px;
color: var(--dim);
font-family: var(--font-mono);
}
.atlas-rede-ia-insight__body {
font-size: 13px;
line-height: 1.85;
color: var(--text);
font-family: var(--font-sans);
white-space: pre-wrap;
word-break: break-word;
}
.atlas-rede-ia-insight__disclaimer {
margin-top: 18px;
padding: 10px 14px;
background: var(--surf2);
border-radius: 8px;
font-size: 10px;
color: var(--dim);
}
.atlas-rede-ia-pdf {
background: var(--surf);
border: 1px solid var(--bord);
border-radius: 12px;
padding: 24px 28px;
max-width: 820px;
box-sizing: border-box;
}
.atlas-rede-ia-pdf__head {
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--bord);
}
.atlas-rede-ia-pdf__title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
color: var(--brand-navy);
display: flex;
align-items: center;
gap: 8px;
}
.atlas-rede-ia-pdf__meta {
font-size: 11px;
color: var(--muted);
margin-top: 6px;
}
.atlas-rede-ia-pdf__body {
font-size: 13px;
line-height: 1.85;
color: var(--text);
font-family: var(--font-sans);
}
.atlas-rede-ia-pdf__disclaimer {
margin-top: 18px;
padding: 10px 14px;
background: var(--surf2);
border-radius: 8px;
font-size: 10px;
color: var(--dim);
}
/* ── Análise IA escola (SWOT, relatório) ── */
.atlas-ai-insight {
background: var(--surf);
border: 1px solid var(--bord);
border-radius: 14px;
padding: 24px 28px;
box-shadow: var(--sh-sm);
}
.atlas-ai-insight--plan {
border-color: rgba(13, 110, 75, 0.28);
background: linear-gradient(180deg, rgba(13, 110, 75, 0.04) 0%, var(--surf) 48%);
}
.atlas-ai-insight--swot {
border-color: rgba(64, 133, 211, 0.28);
}
.atlas-ai-insight__head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 8px;
}
.atlas-ai-insight__title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
}
.atlas-ai-insight__meta {
font-size: 10px;
color: var(--dim);
font-family: var(--font-mono);
}
.atlas-ai-insight__body {
font-size: 14px;
line-height: 1.75;
color: var(--text);
font-family: var(--font-sans);
word-break: break-word;
display: flex;
flex-direction: column;
gap: 14px;
}
/* Bloco por seção numerada (# ou 1.) */
.atlas-ai-md-block {
background: var(--surf2);
border: 1px solid var(--bord);
border-radius: 12px;
padding: 16px 18px 14px;
}
.atlas-ai-md-block + .atlas-ai-md-block {
margin-top: 2px;
}
.atlas-ai-md-section {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--bord);
font-family: var(--font-display);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--brand-navy, #1b4fbf);
line-height: 1.35;
}
.atlas-ai-md-section--plain {
text-transform: none;
font-size: 14px;
}
.atlas-ai-md-section__num {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 6px;
border-radius: 8px;
background: var(--brand-navy, #1b4fbf);
color: #fff;
font-size: 12px;
font-weight: 800;
font-family: var(--font-mono);
}
.atlas-ai-md-section__label {
flex: 1;
padding-top: 3px;
}
.atlas-ai-md-section__label .atlas-ai-md-strong {
color: var(--brand-navy, #1b4fbf);
font-weight: 800;
}
.atlas-ai-md-p {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.78;
color: var(--text);
}
.atlas-ai-md-p:last-child {
margin-bottom: 0;
}
.atlas-ai-md-doc {
display: flex;
flex-direction: column;
gap: 10px;
}
.atlas-ai-md-card {
border-radius: 10px;
padding: 12px 14px;
border: 1px solid var(--bord);
background: var(--surf);
}
.atlas-ai-md-card--hypothesis {
border-left: 3px solid var(--accent);
background: rgba(64, 133, 211, 0.04);
}
.atlas-ai-md-card--action {
border-left: 3px solid #0d6e4b;
background: rgba(13, 110, 75, 0.04);
}
.atlas-ai-md-card__title {
font-weight: 700;
font-size: 13px;
line-height: 1.55;
margin-bottom: 8px;
color: var(--text);
}
.atlas-ai-md-card__body {
font-size: 13px;
line-height: 1.65;
color: var(--text);
}
.atlas-ai-md-card__row {
font-size: 12.5px;
line-height: 1.6;
color: var(--muted);
padding: 6px 0 0;
border-top: 1px dashed rgba(0, 0, 0, 0.06);
margin-top: 6px;
}
.atlas-ai-md-card__row:first-of-type {
border-top: none;
margin-top: 0;
padding-top: 0;
}
.atlas-ai-md-card__row .atlas-ai-md-strong {
color: var(--text);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.atlas-ai-md-strong {
color: var(--text);
font-weight: 700;
}
.atlas-ai-md-code,
.atlas-ai-md-hab {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
padding: 2px 7px;
border-radius: 5px;
background: rgba(27, 79, 191, 0.1);
color: var(--brand-navy, #1b4fbf);
border: 1px solid rgba(27, 79, 191, 0.16);
white-space: nowrap;
}
.atlas-ai-md-bullet {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 4px 0;
padding: 8px 10px;
border-radius: 8px;
background: var(--surf);
border: 1px solid rgba(0, 0, 0, 0.04);
}
.atlas-ai-md-bullet__dot {
color: var(--accent);
font-weight: 800;
line-height: 1.65;
flex-shrink: 0;
margin-top: 1px;
}
.atlas-ai-md-bullet__text {
flex: 1;
font-size: 13px;
line-height: 1.65;
color: var(--text);
}
.atlas-ai-insight__disclaimer {
margin-top: 16px;
padding-top: 12px;
border-top: 1px dashed var(--bord);
font-size: 10px;
color: var(--dim);
line-height: 1.5;
}
.atlas-ai-insight--error {
background: rgba(192, 57, 43, 0.06);
border-color: rgba(192, 57, 43, 0.25);
}
.atlas-ai-insight__error-title {
font-weight: 700;
color: var(--danger);
margin-bottom: 6px;
}
.atlas-ai-insight__error-body {
font-size: 13px;
color: var(--text);
}
.atlas-ai-insight__error-hint {
margin-top: 8px;
font-size: 11px;
color: var(--muted);
}
.atlas-ai-insight--placeholder {
text-align: center;
padding: 36px 24px;
background: var(--surf2);
}
.atlas-ai-insight__placeholder-icon {
font-size: 28px;
margin-bottom: 10px;
}
.atlas-ai-insight__placeholder-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
color: var(--text);
margin-bottom: 6px;
}
.atlas-ai-insight__placeholder-sub {
font-size: 12px;
color: var(--muted);
max-width: 520px;
margin: 0 auto;
line-height: 1.55;
}
.atlas-ai-hero {
background: linear-gradient(135deg, rgba(27, 79, 191, 0.08) 0%, rgba(64, 133, 211, 0.04) 100%);
border: 1px solid rgba(64, 133, 211, 0.22);
border-radius: 16px;
padding: 22px 24px;
margin-bottom: 20px;
}
.atlas-ai-hero__inner {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-start;
justify-content: space-between;
}
.atlas-ai-hero__content {
flex: 1 1 280px;
min-width: 0;
}
.atlas-ai-hero__eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
}
.atlas-ai-hero__title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
color: var(--text);
margin-bottom: 8px;
}
.atlas-ai-hero__desc {
font-size: 12px;
color: var(--muted);
line-height: 1.55;
max-width: 640px;
}
.atlas-ai-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.atlas-ai-insight-stack {
display: flex;
flex-direction: column;
gap: 16px;
}
.atlas-report-ai-narrative {
font-size: 14px;
line-height: 1.75;
color: var(--text);
display: flex;
flex-direction: column;
gap: 14px;
}
.atlas-report-ai-narrative .atlas-ai-md-block {
background: rgba(0, 0, 0, 0.02);
}
.atlas-premium-page--analytical {
max-width: var(--content-width-analytical);
--motion-lift: 3px;
--motion-stagger-step: 38ms;
}
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *,
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *,
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *,
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > * {
opacity: 0;
transform: translateY(var(--motion-stagger-distance));
animation: atlas-fade-in-up var(--dur-enter) var(--ease-out) both;
animation-delay: calc(var(--atlas-stagger-index, 0) * var(--motion-stagger-step));
}
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:nth-child(1),
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:nth-child(1),
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:nth-child(1),
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:nth-child(1) { --atlas-stagger-index: 0; }
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:nth-child(2),
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:nth-child(2),
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:nth-child(2),
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:nth-child(2) { --atlas-stagger-index: 1; }
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:nth-child(3),
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:nth-child(3),
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:nth-child(3),
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:nth-child(3) { --atlas-stagger-index: 2; }
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:nth-child(4),
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:nth-child(4),
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:nth-child(4),
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:nth-child(4) { --atlas-stagger-index: 3; }
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:nth-child(5),
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:nth-child(5),
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:nth-child(5),
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:nth-child(5) { --atlas-stagger-index: 4; }
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:nth-child(6),
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:nth-child(6),
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:nth-child(6),
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:nth-child(6) { --atlas-stagger-index: 5; }
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:nth-child(7),
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:nth-child(7),
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:nth-child(7),
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:nth-child(7) { --atlas-stagger-index: 6; }
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:nth-child(8),
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:nth-child(8),
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:nth-child(8),
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:nth-child(8) { --atlas-stagger-index: 7; }
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:nth-child(9),
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:nth-child(9),
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:nth-child(9),
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:nth-child(9) { --atlas-stagger-index: 8; }
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:nth-child(10),
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:nth-child(10),
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:nth-child(10),
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:nth-child(10) { --atlas-stagger-index: 9; }
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:nth-child(11),
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:nth-child(11),
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:nth-child(11),
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:nth-child(11) { --atlas-stagger-index: 10; }
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:nth-child(12),
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:nth-child(12),
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:nth-child(12),
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:nth-child(12) { --atlas-stagger-index: 11; }
.atlas-shell--motion .atlas-premium-page.atlas-section-stack-md > *:hover,
.atlas-shell--motion .atlas-premium-page.atlas-layout-executive > *:hover,
.atlas-shell--motion .atlas-premium-page.atlas-layout-analytical > *:hover,
.atlas-shell--motion .atlas-premium-page.atlas-layout-operational > *:hover {
animation-play-state: paused;
}
.atlas-premium-hero {
position: relative;
background: var(--surf2);
border: 1px solid var(--bord);
background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 17%, var(--surf) 83%), var(--surf));
border: 1px solid color-mix(in oklab, var(--accent) 36%, var(--bord) 64%);
border-radius: 18px;
box-shadow: var(--elev-3);
overflow: hidden;
transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-fast);
}
/* Editorial: hairline + gradiente quase imperceptível — a profundidade vem
da sombra difusa, não da borda. */
.atlas-premium-surface-card {
position: relative;
background: var(--surf);
border: 1px solid var(--bord);
background: linear-gradient(180deg, color-mix(in oklab, var(--surf2) 16%, var(--surf) 84%), var(--surf));
border: 1px solid color-mix(in oklab, var(--bord) 55%, transparent);
border-radius: 16px;
box-shadow: var(--elev-2), inset 0 1px 0 color-mix(in oklab, white 5%, transparent);
overflow: hidden;
transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-fast), background var(--dur-base);
}
.atlas-premium-kpi-hero {
position: relative;
background: var(--surf2);
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.09);
box-shadow: var(--elev-3);
overflow: hidden;
transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-fast);
}
.atlas-premium-kpi-hero::after {
content: "";
position: absolute;
inset: 0;
border-radius: 14px;
pointer-events: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.atlas-motion-surface {
transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-fast), background var(--dur-base);
}
.atlas-motion-surface:hover {
transform: translateY(calc(var(--motion-lift) * -1));
box-shadow: var(--elev-3);
}
.atlas-premium-surface-card::before,
.atlas-premium-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
background: linear-gradient(110deg, transparent 0%, color-mix(in oklab, var(--accent) 16%, transparent) 45%, transparent 100%);
transform: translateX(-16%);
transition: opacity var(--dur-fast), transform var(--dur-hover) var(--ease-out);
}
.atlas-premium-surface-card:hover::before,
.atlas-premium-hero:hover::before {
opacity: .5;
transform: translateX(0);
}
.atlas-premium-surface-card:hover,
.atlas-premium-kpi-hero:hover {
transform: translateY(calc(var(--motion-lift) * -1));
box-shadow: var(--elev-3);
border-color: color-mix(in oklab, var(--bord) 72%, var(--accent) 28%);
}
.atlas-premium-surface-card:focus-visible,
.atlas-premium-kpi-hero:focus-visible {
outline: none;
box-shadow:
0 0 0 2px var(--focus-ring-soft),
0 0 0 4px var(--focus-ring),
var(--elev-3);
}
/* Quando o hero usa gradiente escuro inline (color: #fff no card),
o valor herda a cor — evita que a classe .atlas-kpi-value force
var(--text) e quebre o contraste sobre fundos escuros. */
.atlas-premium-kpi-hero .atlas-kpi-value,
.atlas-premium-kpi-hero .atlas-kpi-label,
.atlas-premium-kpi-hero .atlas-kpi-sub {
color: inherit;
}
/* Variantes com gradiente — após a regra base para vencer background: var(--surf2) */
.atlas-premium-kpi-hero.atlas-premium-kpi-hero--gradient-a,
.atlas-premium-kpi-hero.atlas-premium-kpi-hero--gradient-b,
.atlas-premium-kpi-hero.atlas-premium-kpi-hero--gradient-c {
color: #fff;
}
.atlas-premium-kpi-hero.atlas-premium-kpi-hero--gradient-a {
background: linear-gradient(135deg, var(--brand-navy) 0%, var(--accent) 100%);
}
.atlas-premium-kpi-hero.atlas-premium-kpi-hero--gradient-b {
background: linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 45%, var(--brand-navy) 55%) 100%);
}
.atlas-premium-kpi-hero.atlas-premium-kpi-hero--gradient-c {
background: linear-gradient(135deg, color-mix(in oklab, var(--brand-flame) 55%, var(--brand-navy) 45%), var(--brand-navy) 100%);
}
/* Relatório consolidado — gradientes (especificidade dupla vence .atlas-premium-kpi-hero base) */
.atlas-premium-kpi-hero.atlas-report-kpi-gradient-primary,
.atlas-premium-kpi-hero.atlas-report-kpi-gradient-secondary {
color: #fff;
border-color: rgba(255, 255, 255, 0.22);
}
.atlas-premium-kpi-hero.atlas-report-kpi-gradient-primary {
background: linear-gradient(135deg, var(--brand-navy) 0%, var(--accent) 100%);
}
.atlas-premium-kpi-hero.atlas-report-kpi-gradient-secondary {
background: linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 45%, var(--brand-navy) 55%) 100%);
}
.atlas-premium-kpi-hero.atlas-report-kpi-gradient-primary .atlas-report-kpi-eyebrow,
.atlas-premium-kpi-hero.atlas-report-kpi-gradient-secondary .atlas-report-kpi-eyebrow {
color: rgba(255, 255, 255, 0.85);
opacity: 1;
}
.atlas-premium-kpi-hero.atlas-report-kpi-gradient-primary .atlas-report-subtext-11,
.atlas-premium-kpi-hero.atlas-report-kpi-gradient-secondary .atlas-report-subtext-11 {
color: rgba(255, 255, 255, 0.88);
opacity: 1;
}
.atlas-premium-kpi-hero.atlas-report-kpi-gradient-primary .atlas-report-subtext-10,
.atlas-premium-kpi-hero.atlas-report-kpi-gradient-secondary .atlas-report-subtext-10 {
color: rgba(255, 255, 255, 0.72);
opacity: 1;
}
/* Cards por área — números brancos (vence .atlas-kpi-value { color: var(--text) }) */
.atlas-report-area-card .atlas-kpi-value,
.atlas-report-area-card .atlas-report-kpi-value-26 {
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
@media (max-width: 1280px) {
.atlas-premium-page {
max-width: var(--content-width-md);
}
}
@media (max-width: 1024px) {
:root {
--section-gap-md: 20px;
--section-gap-lg: 26px;
}
.atlas-panel {
padding: 24px clamp(14px, 2.4vw, 24px);
}
}
@media (max-width: 768px) {
:root {
--section-gap-sm: 12px;
--section-gap-md: 16px;
--section-gap-lg: 22px;
}
.atlas-premium-page {
padding-inline: 8px;
}
.atlas-panel {
padding: 18px 10px;
}
.atlas-premium-hero,
.atlas-premium-surface-card,
.atlas-premium-kpi-hero {
border-radius: 14px;
}
}
/* ─────────────────────────────────────────────────────────────
4. SCROLLBAR (tematizada)
───────────────────────────────────────────────────────────── */
.atlas-scroll::-webkit-scrollbar,
body::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.atlas-scroll::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
background: transparent;
}
/* Thumb pill translúcido — presença mínima; hover puxa levemente pro acento. */
.atlas-scroll::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
background: color-mix(in oklab, var(--bord) 72%, transparent);
border-radius: 999px;
transition: background var(--dur-fast);
}
.atlas-scroll::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
background: color-mix(in oklab, var(--accent) 38%, var(--bord2));
}
/* ═══════════════════════════════════════════════════════════════
5. SHELL (topbar + sidebar padronizado)
Classes .atlas-* são o novo padrão, .topbar/.sidebar permanecem
no HTML legado e herdam os mesmos tokens.
═══════════════════════════════════════════════════════════════ */
.atlas-shell {
display: flex;
min-height: 100vh;
}
.atlas-shell--sidebar-collapsed .atlas-topbar-logo {
width: var(--shell-sidebar-w-collapsed);
justify-content: center;
padding-inline: 8px;
}
.atlas-shell--sidebar-collapsed .atlas-logo-img {
width: 28px !important;
height: 28px !important;
}
.atlas-shell--sidebar-collapsed .atlas-logo-text-sub {
display: none;
}
/* ── Topbar ── */
.atlas-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 300;
height: var(--shell-topbar-h);
background: color-mix(in oklab, var(--surf) 82%, transparent);
border-bottom: 1px solid color-mix(in oklab, var(--bord) 60%, transparent);
box-shadow: 0 1px 0 color-mix(in oklab, var(--text) 5%, transparent);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
display: flex;
align-items: center;
transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.atlas-topbar::after {
content: '';
position: absolute;
bottom: 0;
left: var(--shell-sidebar-w);
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
color-mix(in oklab, var(--accent) 28%, transparent) 42%,
color-mix(in oklab, var(--accent) 28%, transparent) 58%,
transparent 100%
);
opacity: 0.55;
pointer-events: none;
}
.atlas-shell--sidebar-collapsed .atlas-topbar::after {
left: var(--shell-sidebar-w-collapsed);
}
.atlas-topbar-logo {
width: var(--shell-sidebar-w);
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
border-right: none;
transition: width var(--dur-base) var(--ease-in-out), background var(--dur-fast), opacity var(--dur-fast);
overflow: hidden;
text-decoration: none;
color: inherit;
}
.atlas-topbar-logo:hover {
background: color-mix(in oklab, var(--accent) 7%, transparent);
opacity: 1;
}
.atlas-topbar-logo:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: -2px;
}
/* PNG logo — inverte brilho no modo escuro para ficar legível */
.atlas-logo-img {
height: 38px;
width: auto;
flex-shrink: 0;
}
/* Dark mode: logo branca (cubos + texto) */
html:not([data-theme="light"]) .atlas-logo-img {
/* disabled to show native white logo file */
}
/* Light mode: logo preta (cubos + texto) */
html[data-theme="light"] .atlas-logo-img,
body.light .atlas-logo-img {
/* disabled to show native color logo file */
}
/* Fallback para o antigo quadrado (HTMLs estáticos) */
.atlas-logo-sq {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: var(--r-md);
background: var(--shell-logo-gradient);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 800;
color: #fff;
box-shadow: 0 0 0 1px rgba(64, 133, 211, .35), 0 4px 14px rgba(1, 36, 81, .35);
letter-spacing: -0.02em;
}
.atlas-logo-text {
overflow: hidden;
white-space: nowrap;
display: flex;
flex-direction: column;
gap: 1px;
}
.atlas-logo-text-name {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.01em;
line-height: 1.2;
color: var(--text);
}
.atlas-logo-text-sub {
font-size: 10px;
color: var(--muted);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
}
.atlas-breadcrumb {
flex: 1;
padding: 0 20px;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
overflow: hidden;
min-width: 0;
}
.atlas-bc-section {
color: var(--muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
}
.atlas-bc-sep {
color: var(--dim);
font-size: 10px;
}
.atlas-bc-page {
color: var(--text);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
padding: 4px 10px;
border-radius: var(--r-sm);
background: color-mix(in oklab, var(--surf3) 72%, transparent);
border: 1px solid var(--bord);
line-height: 1.35;
}
.atlas-topbar-spacer {
flex: 1;
min-width: 0;
}
.atlas-topbar-actions {
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px;
border-left: 1px solid var(--bord);
flex-shrink: 0;
height: 100%;
}
.atlas-topbar-actions-sep {
width: 1px;
height: 24px;
background: var(--bord);
flex-shrink: 0;
margin: 0 2px;
}
/* ── Theme switcher (3 modos: light / navy / dark) ── */
.atlas-theme-switcher {
display: inline-flex;
align-items: center;
gap: 0;
height: 28px;
border-radius: var(--r-full);
border: 1px solid var(--bord2);
background: var(--surf2);
padding: 2px;
flex-shrink: 0;
position: relative;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.atlas-theme-switcher-btn,
.atlas-theme-switcher button[data-theme] {
width: 28px;
height: 22px;
border: none;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-full);
font-size: 12px;
line-height: 1;
padding: 0;
position: relative;
z-index: 1;
transition: color var(--dur-fast);
color: var(--muted);
}
.atlas-theme-switcher-btn:hover,
.atlas-theme-switcher button[data-theme]:hover {
color: var(--text);
}
.atlas-theme-switcher-btn.active,
.atlas-theme-switcher button[data-theme].active {
color: var(--text);
}
/* Ícones stroke (React Lucide e SVG inline em atlas-shell.js) */
.atlas-theme-switcher .atlas-theme-switcher-btn svg,
.atlas-theme-switcher button[data-theme] svg {
display: block;
width: 14px;
height: 14px;
flex-shrink: 0;
pointer-events: none;
}
/* Indicator pill — slides behind the active button */
.atlas-theme-indicator {
position: absolute;
top: 2px;
left: 2px;
width: 28px;
height: 22px;
border-radius: var(--r-full);
background: var(--surf3);
border: 1px solid var(--bord2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.07);
transition: transform var(--dur-base) var(--ease-out);
z-index: 0;
}
/* Positions: 0 = light, 1 = navy (default), 2 = dark */
html[data-theme="light"] .atlas-theme-indicator { transform: translateX(0); }
html:not([data-theme="light"]):not([data-theme="dark"]) .atlas-theme-indicator { transform: translateX(28px); }
html[data-theme="dark"] .atlas-theme-indicator { transform: translateX(56px); }
/* Legacy compat — keep .atlas-theme-btn for old HTML panels */
.atlas-theme-btn {
width: 38px;
height: 22px;
border-radius: var(--r-full);
border: 1px solid var(--bord);
background: var(--surf2);
cursor: pointer;
position: relative;
transition: background var(--dur-base), border-color var(--dur-base);
flex-shrink: 0;
padding: 0;
}
.atlas-theme-btn:hover {
border-color: var(--bord2);
}
.atlas-theme-btn::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--muted);
transition: transform var(--dur-base) var(--ease-in-out), background var(--dur-base);
}
body.light .atlas-theme-btn::after,
html[data-theme="light"] .atlas-theme-btn::after {
transform: translateX(16px);
background: var(--accent);
}
html[data-theme="light"] .atlas-premium-hero,
body.light .atlas-premium-hero {
background: linear-gradient(135deg, rgba(64, 133, 211, 0.08), #ffffff 60%);
border-color: #cfd8e5;
box-shadow: 0 6px 18px rgba(1, 36, 81, 0.08);
}
html[data-theme="light"] .atlas-premium-surface-card,
body.light .atlas-premium-surface-card {
background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
border-color: #d3dbe8;
box-shadow: 0 2px 10px rgba(1, 36, 81, 0.08);
}
html[data-theme="light"] .atlas-premium-kpi-hero,
body.light .atlas-premium-kpi-hero {
border-color: rgba(1, 36, 81, 0.18);
box-shadow: 0 8px 22px rgba(1, 36, 81, 0.1);
}
html[data-theme="dark"] .atlas-premium-hero,
body.dark .atlas-premium-hero {
background: linear-gradient(135deg, rgba(64, 133, 211, 0.13), #1a1a1c 64%);
border-color: #4a4a4f;
}
/* ── Hero "platinum" da Dashboard Central (nome da escola) ──
navy (default) + dark mantêm o gradiente profundo via vars de superfície;
light recebe um azul mais saturado e com borda/sombra firmes para não ficar apagado. */
.atlas-hero-platinum,
html[data-theme="dark"] .atlas-hero-platinum,
body.dark .atlas-hero-platinum {
background: linear-gradient(145deg,
color-mix(in oklab, var(--accent) 42%, var(--surf2)),
color-mix(in oklab, var(--accent) 28%, var(--surf3)) 52%,
color-mix(in oklab, var(--accent) 18%, var(--surf)));
border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--bord2));
box-shadow: var(--elev-3);
}
/* Light (Aurora): hero ganha o mesmo azul profundo dos boxes de Média Geral
(brand-navy → accent) com texto/realces claros — coeso e com presença real. */
html[data-theme="light"] .atlas-hero-platinum,
body.light .atlas-hero-platinum {
background: linear-gradient(135deg, var(--brand-navy) 0%, var(--accent) 100%);
border: 1px solid rgba(255, 255, 255, 0.20);
box-shadow: 0 16px 40px rgba(1, 36, 81, 0.28);
}
/* Hero platinum: fundo sempre escuro/azul — texto de contexto NUNCA usa
var(--muted) do tema light (#4c6078 some no navy). Força claro em todos os temas. */
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__title {
color: #ffffff;
}
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__school,
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__subtitle {
color: rgba(255, 255, 255, 0.9);
}
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__eyebrow {
color: rgba(255, 255, 255, 0.92);
}
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__eyebrow::before {
background: rgba(255, 255, 255, 0.92);
}
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__insight {
color: rgba(255, 255, 255, 0.94);
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.28);
}
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__insight,
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__insight span,
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__insight strong {
color: rgba(255, 255, 255, 0.94);
}
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__insight svg {
color: rgba(255, 255, 255, 0.88);
}
.atlas-hero-platinum.atlas-brand-header .atlas-chip {
color: rgba(255, 255, 255, 0.92);
border-color: rgba(255, 255, 255, 0.34);
background: rgba(255, 255, 255, 0.10);
}
.atlas-hero-platinum.atlas-brand-header .atlas-hero-help-trigger {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.34);
}
.atlas-hero-platinum.atlas-brand-header .atlas-hero-help-trigger:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.45);
}
/* ── Gatilho "Como ler este painel" integrado ao hero ──
pílula discreta ancorada no canto superior direito (aside do header). */
.atlas-hero-help-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
padding: 5px 12px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: .01em;
line-height: 1;
color: var(--accent);
background: color-mix(in oklab, var(--accent) 10%, transparent);
border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
border-radius: 999px;
cursor: pointer;
transition: background var(--dur-hover, .18s) var(--ease-out, ease),
border-color var(--dur-hover, .18s) var(--ease-out, ease);
}
.atlas-hero-help-trigger:hover {
background: color-mix(in oklab, var(--accent) 18%, transparent);
border-color: color-mix(in oklab, var(--accent) 50%, transparent);
}
.atlas-hero-help-trigger:focus-visible {
outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent);
outline-offset: 2px;
}
/* No hero platinum em modo claro (fundo azul profundo), o gatilho fica claro. */
html[data-theme="light"] .atlas-hero-platinum .atlas-hero-help-trigger,
body.light .atlas-hero-platinum .atlas-hero-help-trigger {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.34);
}
html[data-theme="light"] .atlas-hero-platinum .atlas-hero-help-trigger:hover,
body.light .atlas-hero-platinum .atlas-hero-help-trigger:hover {
background: rgba(255, 255, 255, 0.20);
border-color: rgba(255, 255, 255, 0.48);
}
html[data-theme="dark"] .atlas-premium-surface-card,
body.dark .atlas-premium-surface-card {
background: linear-gradient(180deg, #1f1f21 0%, #171719 100%);
border-color: #434347;
}
html[data-theme="dark"] .atlas-premium-kpi-hero,
body.dark .atlas-premium-kpi-hero {
border-color: rgba(255, 255, 255, 0.2);
}
/* ── Icon button / Back button ── */
.atlas-icon-btn {
width: 34px;
height: 34px;
border-radius: var(--r-md);
border: 1px solid var(--bord);
background: var(--surf2);
color: var(--muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
text-decoration: none;
padding: 0;
font-family: var(--font-sans);
flex-shrink: 0;
}
.atlas-icon-btn:hover {
background: var(--surf3);
color: var(--text);
border-color: var(--bord2);
}
.atlas-icon-btn:active {
transform: translateY(1px);
}
.atlas-icon-btn .material-symbols-outlined {
font-size: 18px;
}
.atlas-back-btn {
height: 34px;
padding: 0 12px 0 10px;
border-radius: var(--r-md);
border: 1px solid var(--bord);
background: var(--surf2);
color: var(--muted);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.atlas-back-btn:hover {
background: var(--surf3);
color: var(--text);
border-color: var(--bord2);
}
.atlas-back-btn .material-symbols-outlined {
font-size: 16px;
}
/* Variante do back-btn para alternar para a landing (apresentação do projeto) */
.atlas-landing-toggle {
background: var(--accent);
border-color: var(--accent);
color: #fff;
font-weight: 700;
}
.atlas-landing-toggle:hover {
background: color-mix(in oklab, var(--accent) 85%, #000);
border-color: color-mix(in oklab, var(--accent) 85%, #000);
color: #fff;
}
/** Terminar sessão (topbar Atlas) — alinhado ao link “Sair” do portal escola */
.atlas-logout-btn {
color: #ef4444;
border-color: rgba(239, 68, 68, 0.35);
background: rgba(239, 68, 68, 0.06);
}
.atlas-logout-btn:hover {
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.5);
color: #dc2626;
}
/* Modal de questão (Caderno Azul) — portal em document.body */
.atlas-item-modal-overlay {
animation: atlas-modal-fade-in var(--dur-enter) var(--ease-out) both;
}
@keyframes atlas-modal-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ── App switcher ── */
.atlas-switcher {
position: relative;
z-index: 310;
flex-shrink: 0;
}
.atlas-switcher-trigger {
height: 32px;
padding: 0 10px 0 12px;
border-radius: var(--r-md);
border: 1px solid var(--bord2);
background: var(--surf2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
html[data-theme="light"] .atlas-switcher-trigger,
body.light .atlas-switcher-trigger {
background: var(--bg);
box-shadow: 0 1px 4px rgba(1, 36, 81, 0.1);
}
.atlas-switcher-trigger:hover {
background: var(--surf3);
border-color: color-mix(in oklab, var(--accent) 35%, var(--bord2));
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.atlas-switcher-trigger[aria-expanded="true"] {
border-color: color-mix(in oklab, var(--accent) 45%, var(--bord2));
background: color-mix(in oklab, var(--accent) 8%, var(--surf2));
}
.atlas-switcher-chev {
font-size: 16px;
color: var(--muted);
}
.atlas-switcher-trigger[aria-expanded="true"] .atlas-switcher-chev {
transform: rotate(180deg);
}
.atlas-switcher-chev {
transition: transform var(--dur-fast);
}
.atlas-switcher-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 300px;
padding: 6px;
border-radius: var(--r-lg);
background: var(--surf);
border: 1px solid var(--bord);
box-shadow: var(--sh-lg);
z-index: 320;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.atlas-switcher-menu.open {
opacity: 1;
transform: none;
pointer-events: auto;
}
.atlas-switcher-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 12px;
border: none;
border-radius: var(--r-sm);
background: transparent;
color: var(--text);
cursor: pointer;
font-family: var(--font-sans);
text-align: left;
text-decoration: none;
transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
transform: translateY(0);
}
.atlas-switcher-item:hover {
background: var(--surf2);
transform: translateY(-1px);
box-shadow: var(--sh-xs);
}
.atlas-switcher-item-icon {
width: 32px;
height: 32px;
border-radius: var(--r-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--surf3);
color: var(--accent);
}
.atlas-switcher-item-icon .material-symbols-outlined {
font-size: 18px;
}
.atlas-switcher-item-meta {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.atlas-switcher-item-title {
font-size: 12.5px;
font-weight: 700;
color: var(--text);
}
.atlas-switcher-item-sub {
font-size: 10.5px;
color: var(--muted);
line-height: 1.35;
}
.atlas-switcher-item.current {
background: color-mix(in oklab, var(--accent) 14%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent);
}
.atlas-switcher-item.current .atlas-switcher-item-title {
color: var(--accent);
}
/* ── Sidebar ── */
.atlas-sidebar {
position: fixed;
top: var(--shell-topbar-h);
left: 0;
bottom: 0;
z-index: 200;
width: var(--shell-sidebar-w);
background: var(--surf);
border-right: 1px solid var(--bord);
display: flex;
flex-direction: column;
overflow: hidden;
transition: width var(--dur-base) var(--ease-in-out), border-color var(--dur-base);
}
.atlas-sidebar-body {
flex: 1;
overflow-y: auto;
padding: 10px 0 16px;
}
.atlas-sidebar-body::-webkit-scrollbar {
width: 3px;
}
.atlas-sidebar-body::-webkit-scrollbar-thumb {
background: var(--bord);
border-radius: 2px;
}
.atlas-sidebar-section {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in oklab, var(--accent) 42%, var(--dim));
padding: 18px 18px 6px;
margin-top: 10px;
border-top: 1px solid var(--bord-hair);
display: block;
}
.atlas-sidebar-body > div:first-child .atlas-sidebar-section {
border-top: none;
margin-top: 0;
padding-top: 8px;
}
.atlas-sidebar-item {
position: relative;
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 9px 18px;
border: none;
background: none;
cursor: pointer;
/* Borda transparente preserva o alinhamento; o indicador ativo é o ::before. */
border-left: 3px solid transparent;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
color: var(--muted);
text-align: left;
white-space: nowrap;
text-decoration: none;
transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
/* Indicador editorial: barra 3×18px arredondada, centrada verticalmente,
que cresce ao ativar. Usa currentColor — herda o matiz da marca ativa. */
.atlas-sidebar-item::before {
content: '';
position: absolute;
left: 1px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 0;
border-radius: 999px;
background: currentColor;
opacity: 0;
transition: height var(--dur-base) var(--ease-out), opacity var(--dur-fast);
pointer-events: none;
}
.atlas-sidebar-item:hover {
background: color-mix(in oklab, var(--text) 4%, transparent);
color: var(--text);
transform: translateX(2px);
}
.atlas-sidebar-item.active {
background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 16%, transparent), color-mix(in oklab, var(--accent) 5%, transparent));
color: var(--accent);
font-weight: 600;
}
.atlas-sidebar-item.active::before {
height: 18px;
opacity: 1;
}
.atlas-sidebar-item-icon {
font-size: 18px;
width: 22px;
text-align: center;
flex-shrink: 0;
opacity: .85;
transition: transform var(--dur-fast), opacity var(--dur-fast), color var(--dur-fast);
}
.atlas-sidebar-item.active .atlas-sidebar-item-icon {
opacity: 1;
transform: scale(1.03);
}
/* Análise de Conteúdo — aba ativa em verde COC */
.atlas-sidebar--coc .atlas-sidebar-item.active {
background: var(--conteudo-soft);
color: var(--coc);
}
/* Análise de Conteúdo — aba ativa em roxo SAE */
.atlas-sidebar--sae .atlas-sidebar-item.active {
background: var(--conteudo-soft);
color: var(--sae);
}
/* Análise de Conteúdo — aba ativa em laranja/azul Positivo SPE */
.atlas-sidebar--spe .atlas-sidebar-item.active {
background: var(--conteudo-soft);
color: var(--spe);
}
/* Análise de Conteúdo — aba ativa em azul SAS */
.atlas-sidebar--sas .atlas-sidebar-item.active {
background: var(--conteudo-soft);
color: var(--sas);
}
/* Análise de Conteúdo — aba ativa em rosa Conquista */
.atlas-sidebar--conquista .atlas-sidebar-item.active {
background: var(--conteudo-soft);
color: var(--conquista);
}
/* Análise de Conteúdo — aba ativa em vermelho Geekie */
.atlas-sidebar--geekie .atlas-sidebar-item.active {
background: var(--conteudo-soft);
color: var(--geekie);
}
.atlas-sidebar-footer {
padding: 12px 16px;
border-top: 1px solid var(--bord);
font-size: 10.5px;
color: var(--muted);
line-height: 1.4;
}
.atlas-sidebar-footer strong {
color: var(--text);
font-weight: 700;
display: block;
margin-bottom: 2px;
}
.atlas-sidebar-footer-link {
display: inline-block;
color: var(--accent);
text-decoration: none;
font-weight: 600;
margin-top: 6px;
font-size: 10.5px;
}
.atlas-sidebar-footer-link:hover {
text-decoration: underline;
}
/* ── Content container ── */
.atlas-content {
margin-top: var(--shell-topbar-h);
margin-left: var(--shell-sidebar-w);
min-height: calc(100vh - var(--shell-topbar-h));
width: calc(100% - var(--shell-sidebar-w));
transition: margin-left var(--dur-base) var(--ease-in-out), width var(--dur-base) var(--ease-in-out);
display: flex;
flex-direction: column;
background: var(--bg);
}
html[data-theme="light"] .atlas-topbar,
body.light .atlas-topbar {
background: color-mix(in oklab, var(--surf) 78%, transparent);
box-shadow: 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent);
}
html[data-theme="light"] .atlas-sidebar,
body.light .atlas-sidebar {
background: var(--surf);
box-shadow: 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent);
}
.atlas-shell--sidebar-collapsed .atlas-sidebar {
width: var(--shell-sidebar-w-collapsed);
}
.atlas-shell--sidebar-collapsed .atlas-content {
margin-left: var(--shell-sidebar-w-collapsed);
width: calc(100% - var(--shell-sidebar-w-collapsed));
}
.atlas-sidebar-toggle {
position: fixed;
top: calc(var(--shell-topbar-h) + 10px);
left: calc(var(--shell-sidebar-w) - 14px);
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid var(--bord2);
background: color-mix(in oklab, var(--surf) 88%, transparent);
color: var(--muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 340;
box-shadow: var(--sh-sm);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: left var(--dur-base) var(--ease-in-out), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.atlas-sidebar-toggle:hover {
background: var(--surf2);
color: var(--text);
border-color: var(--bord2);
}
.atlas-shell--sidebar-collapsed .atlas-sidebar-toggle {
left: calc(var(--shell-sidebar-w-collapsed) - 14px);
}
.atlas-sidebar--collapsed .atlas-sidebar-section,
.atlas-sidebar--collapsed .atlas-sidebar-footer {
display: none;
}
/* Compatibilidade: HTMLs estáticos com classes .shell/.sidebar/.tab */
.atlas-shell--sidebar-collapsed .sidebar .sbar-label {
display: none;
}
.atlas-shell--sidebar-collapsed .sidebar .tab {
justify-content: center;
padding-left: 8px;
padding-right: 8px;
gap: 0;
font-size: 0;
}
.atlas-shell--sidebar-collapsed .sidebar .tab .tab-icon {
margin: 0;
}
.atlas-sidebar--collapsed .atlas-sidebar-item {
justify-content: center;
padding: 10px 8px;
margin: 0 6px;
border-left: none;
border-radius: var(--r-md);
}
.atlas-sidebar--collapsed .atlas-sidebar-item-label {
display: none;
}
.atlas-sidebar--collapsed .atlas-sidebar-item-icon {
width: 20px;
margin: 0;
}
.atlas-sidebar--collapsed .atlas-sidebar-item.active {
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
}
/* Colapsado: o anel interno é o indicador — a barra some. */
.atlas-sidebar--collapsed .atlas-sidebar-item::before {
display: none;
}
.atlas-panel {
padding: 32px clamp(20px, 3.5vw, 44px);
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
max-width: var(--content-max);
margin: 0 auto;
width: 100%;
}
.atlas-panel:has(> .atlas-ped-empty) {
min-height: calc(100vh - var(--shell-topbar-h));
justify-content: center;
align-items: center;
}
/* ═══════════════════════════════════════════════════════════════
MAPA DE CALOR — abertura do painel pedagógico (BrazilHeatmap)
═══════════════════════════════════════════════════════════════ */
.atlas-ped-landing {
width: 100%;
display: flex;
flex-direction: column;
gap: 18px;
}
.atlas-ped-landing-error { max-width: 520px; }
.atlas-brmap {
width: 100%;
max-width: var(--content-max);
margin: 0 auto;
animation: brmap-in .5s ease both;
}
@keyframes brmap-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.atlas-brmap__head { margin-bottom: 22px; }
.atlas-brmap__eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--acc, var(--accent));
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.atlas-brmap__eyebrow::before {
content: '';
width: 18px;
height: 2px;
border-radius: 1px;
background: var(--acc, var(--accent));
}
.atlas-brmap__title {
font-size: clamp(20px, 2.6vw, 28px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 6px;
line-height: 1.15;
}
.atlas-brmap__sub {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
max-width: 620px;
margin: 0;
}
.atlas-brmap__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 24px;
align-items: start;
}
@media (max-width: 880px) {
.atlas-brmap__grid { grid-template-columns: 1fr; }
}
.atlas-brmap__mapwrap {
position: relative;
background: radial-gradient(120% 120% at 50% 0%, color-mix(in oklab, var(--acc) 8%, var(--surf)) 0%, var(--surf) 60%);
border: 1px solid var(--bord);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm), var(--sh-inset);
padding: 12px;
overflow: hidden;
}
.atlas-brmap__svg {
width: 100%;
height: auto;
max-height: 560px;
display: block;
}
.atlas-brmap__tooltip {
position: absolute;
z-index: 20;
width: 210px;
background: var(--surf2);
border: 1px solid var(--bord2, var(--bord));
border-radius: 12px;
box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
padding: 12px 14px;
pointer-events: none;
backdrop-filter: blur(6px);
}
.atlas-brmap__tt-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.atlas-brmap__tt-uf {
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.atlas-brmap__tt-rank {
font-size: 10px;
font-weight: 700;
color: var(--acc, var(--accent));
white-space: nowrap;
}
.atlas-brmap__tt-avg {
font-family: var(--font-num);
font-size: 26px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--text);
}
.atlas-brmap__tt-avglbl {
font-size: 10px;
color: var(--muted);
margin: 2px 0 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.atlas-brmap__tt-meta {
font-size: 11px;
color: var(--muted);
line-height: 1.4;
}
.atlas-brmap__tt-top {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--bord);
font-size: 11px;
color: var(--text);
line-height: 1.4;
}
.atlas-brmap__tt-toplbl {
display: block;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--muted);
margin-bottom: 2px;
}
.atlas-brmap__side {
display: flex;
flex-direction: column;
gap: 16px;
}
.atlas-brmap__natcard {
background: linear-gradient(135deg, color-mix(in oklab, var(--acc) 14%, var(--surf2)) 0%, var(--surf2) 100%);
border: 1px solid var(--bord);
border-radius: var(--r-lg);
padding: 16px 18px;
}
.atlas-brmap__natlbl {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--muted);
margin-bottom: 6px;
}
.atlas-brmap__natval {
font-family: var(--font-num);
font-size: 32px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
color: var(--text);
}
.atlas-brmap__natmeta {
font-size: 11px;
color: var(--muted);
margin-top: 6px;
}
.atlas-brmap__legend {
background: var(--surf);
border: 1px solid var(--bord);
border-radius: var(--r-lg);
padding: 14px 16px;
}
.atlas-brmap__legbar {
height: 12px;
border-radius: 6px;
border: 1px solid var(--bord);
}
.atlas-brmap__legscale {
display: flex;
justify-content: space-between;
font-family: var(--font-num);
font-size: 11px;
font-weight: 600;
color: var(--text);
margin-top: 6px;
}
.atlas-brmap__leglbl {
font-size: 10px;
color: var(--muted);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.atlas-brmap__ranklist {
background: var(--surf);
border: 1px solid var(--bord);
border-radius: var(--r-lg);
padding: 14px 12px 8px;
flex: 1;
min-height: 0;
}
.atlas-brmap__ranktitle {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--muted);
padding: 0 4px 8px;
}
.atlas-brmap__rankscroll {
max-height: 360px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1px;
}
.atlas-brmap__rankrow {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 6px 8px;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
text-align: left;
transition: background .12s;
}
.atlas-brmap__rankrow:hover,
.atlas-brmap__rankrow.is-hover {
background: color-mix(in oklab, var(--acc) 12%, transparent);
}
.atlas-brmap__rankpos {
font-size: 11px;
font-weight: 700;
color: var(--muted);
width: 18px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.atlas-brmap__rankdot {
width: 10px;
height: 10px;
border-radius: 3px;
flex-shrink: 0;
}
.atlas-brmap__rankuf {
font-size: 12px;
font-weight: 700;
color: var(--text);
flex: 1;
}
.atlas-brmap__rankval {
font-family: var(--font-num);
font-size: 12px;
font-weight: 600;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.atlas-brmap__err {
font-size: 12px;
color: var(--muted);
padding: 10px 4px;
}
/* ═══════════════════════════════════════════════════════════════
MAPA DA ABA RANKINGS — escolas como bolinhas (RankingMap)
═══════════════════════════════════════════════════════════════ */
.atlas-rmap {
background: var(--surf);
border: 1px solid var(--bord);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm), var(--sh-inset);
overflow: hidden;
}
.atlas-rmap__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 12px 16px;
border-bottom: 1px solid var(--bord);
}
.atlas-rmap__bar-info {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.atlas-rmap__bar-ico {
font-size: 18px;
color: var(--acc, var(--accent));
}
.atlas-rmap__legend {
display: flex;
align-items: center;
gap: 8px;
}
.atlas-rmap__legbar {
width: 160px;
height: 10px;
border-radius: 5px;
border: 1px solid var(--bord);
}
.atlas-rmap__legval {
font-family: var(--font-num);
font-size: 11px;
font-weight: 600;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.atlas-rmap__canvas {
position: relative;
background: radial-gradient(120% 120% at 50% 0%, color-mix(in oklab, var(--acc) 7%, var(--surf)) 0%, var(--surf) 65%);
padding: 8px;
}
.atlas-rmap__cv {
display: block;
margin: 0 auto;
touch-action: none;
}
.atlas-rmap__tooltip {
position: absolute;
z-index: 20;
width: 218px;
background: var(--surf2);
border: 1px solid var(--bord2, var(--bord));
border-radius: 12px;
box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
padding: 11px 13px;
pointer-events: none;
backdrop-filter: blur(6px);
}
.atlas-rmap__tt-name {
font-size: 12.5px;
font-weight: 700;
color: var(--text);
line-height: 1.3;
margin-bottom: 2px;
}
.atlas-rmap__tt-meta {
font-size: 11px;
color: var(--muted);
margin-bottom: 7px;
}
.atlas-rmap__tt-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.atlas-rmap__tt-val {
font-family: var(--font-num);
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
.atlas-rmap__tt-n {
font-size: 11px;
color: var(--muted);
}
.atlas-rmap__tt-hint {
margin-top: 7px;
padding-top: 7px;
border-top: 1px solid var(--bord);
font-size: 10px;
color: var(--acc, var(--accent));
font-weight: 600;
}
.atlas-rmap__empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--muted);
}
.atlas-rmap__zoom {
position: absolute;
top: 16px;
right: 16px;
z-index: 15;
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-end;
}
.atlas-rmap__zbtn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--bord);
border-radius: 9px;
background: color-mix(in oklab, var(--surf2) 88%, transparent);
color: var(--text);
cursor: pointer;
backdrop-filter: blur(6px);
box-shadow: var(--sh-sm);
transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.atlas-rmap__zbtn:hover {
background: var(--surf2);
border-color: var(--acc, var(--accent));
color: var(--acc, var(--accent));
}
.atlas-rmap__zbtn:active {
transform: scale(.94);
}
.atlas-rmap__zbtn--wide {
width: auto;
padding: 0 11px;
font-size: 12px;
font-weight: 700;
}
/* ── Mapa inicial (Leaflet · slippy map) ── */
.atlas-lmap {
display: flex;
flex-direction: column;
background: var(--surf);
border: 1px solid var(--bord);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm), var(--sh-inset);
overflow: hidden;
}
.atlas-lmap__toolbar {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--bord);
background: var(--surf);
}
.atlas-lmap__row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.atlas-lmap__row--pills {
gap: 7px;
}
.atlas-lmap__year {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--muted);
}
.atlas-lmap__select {
height: 34px;
padding: 0 10px;
border: 1px solid var(--bord);
border-radius: 9px;
background: var(--surf2);
color: var(--text);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.atlas-lmap__select--n {
min-width: 150px;
}
.atlas-lmap__searchwrap {
position: relative;
flex: 1 1 240px;
min-width: 200px;
display: flex;
align-items: center;
}
.atlas-lmap__searchico {
position: absolute;
left: 11px;
color: var(--muted);
pointer-events: none;
}
.atlas-lmap__searchinput {
width: 100%;
height: 34px;
padding: 0 32px 0 33px;
border: 1px solid var(--bord);
border-radius: 9px;
background: var(--surf2);
color: var(--text);
font-size: 13px;
}
.atlas-lmap__searchinput:focus {
outline: none;
border-color: var(--acc, var(--accent));
}
.atlas-lmap__clearx {
position: absolute;
right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: none;
border-radius: 50%;
background: color-mix(in oklab, var(--muted) 22%, transparent);
color: var(--text);
cursor: pointer;
}
.atlas-lmap__pill {
height: 30px;
padding: 0 13px;
border: 1px solid var(--bord);
border-radius: 999px;
background: var(--surf2);
color: var(--muted);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.atlas-lmap__pill:hover {
color: var(--text);
border-color: var(--acc, var(--accent));
}
.atlas-lmap__pill.is-active {
background: var(--acc, var(--accent));
border-color: var(--acc, var(--accent));
color: #fff;
}
.atlas-lmap__clearfilters {
display: inline-flex;
align-items: center;
gap: 5px;
height: 30px;
padding: 0 11px;
margin-left: auto;
border: none;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.atlas-lmap__clearfilters:hover {
color: var(--acc, var(--accent));
}
.atlas-lmap__stage {
position: relative;
}
.atlas-lmap__canvas {
height: min(68vh, 640px);
width: 100%;
background: var(--surf2);
z-index: 0;
}
.atlas-lmap--rankings .atlas-lmap__canvas {
height: min(58vh, 540px);
}
.atlas-lmap__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: var(--surf);
border-bottom: 1px solid var(--bord);
}
.atlas-lmap--rankings.is-collapsed .atlas-lmap__header {
border-bottom: none;
}
.atlas-lmap__header-title {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: 12.5px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
}
.atlas-lmap__header-ico {
flex: none;
color: var(--acc, var(--accent));
}
.atlas-lmap__header-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.atlas-lmap__header-meta::before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background: currentColor;
opacity: 0.55;
}
.atlas-lmap__toggle {
display: inline-flex;
align-items: center;
gap: 5px;
flex: none;
height: 30px;
padding: 0 12px;
border: 1px solid var(--bord);
border-radius: 8px;
background: var(--surf2);
color: var(--text);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.atlas-lmap__toggle:hover {
border-color: var(--acc, var(--accent));
color: var(--acc, var(--accent));
}
.atlas-lmap__toggle svg {
flex: none;
}
.atlas-lmap__fitbtn {
position: absolute;
right: 14px;
top: 14px;
z-index: 500;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--bord);
border-radius: 9px;
background: color-mix(in oklab, var(--surf2) 90%, transparent);
color: var(--text);
cursor: pointer;
box-shadow: var(--sh-sm);
backdrop-filter: blur(6px);
}
.atlas-lmap__fitbtn:hover {
border-color: var(--acc, var(--accent));
color: var(--acc, var(--accent));
}
.atlas-lmap__canvas .leaflet-container {
background: #e8eef4;
font-family: var(--font-sans, sans-serif);
}
.atlas-lmap__loading {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
z-index: 500;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border-radius: 999px;
background: var(--surf2);
border: 1px solid var(--bord);
color: var(--text);
font-size: 12px;
font-weight: 600;
box-shadow: var(--sh-sm);
}
.atlas-lmap__count {
position: absolute;
left: 14px;
bottom: 14px;
z-index: 500;
padding: 5px 11px;
border-radius: 8px;
background: color-mix(in oklab, var(--surf2) 92%, transparent);
border: 1px solid var(--bord);
color: var(--muted);
font-size: 11.5px;
font-weight: 600;
backdrop-filter: blur(6px);
pointer-events: none;
}
.atlas-lmap__tooltip {
position: absolute;
z-index: 600;
width: 228px;
background: var(--surf2);
border: 1px solid var(--bord2, var(--bord));
border-radius: 12px;
box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
padding: 11px 13px;
pointer-events: none;
}
.atlas-lmap__tt-name {
font-size: 12.5px;
font-weight: 700;
color: var(--text);
line-height: 1.3;
margin-bottom: 2px;
}
.atlas-lmap__tt-meta {
font-size: 11px;
color: var(--muted);
margin-bottom: 7px;
}
.atlas-lmap__tt-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.atlas-lmap__tt-val {
font-family: var(--font-num);
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
.atlas-lmap__tt-n {
font-size: 11px;
color: var(--muted);
}
.atlas-lmap__tt-hint {
margin-top: 7px;
padding-top: 7px;
border-top: 1px solid var(--bord);
font-size: 10px;
color: var(--acc, var(--accent));
font-weight: 600;
}
.atlas-lmap__legend {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 11px 16px;
border-top: 1px solid var(--bord);
}
.atlas-lmap__leglbl {
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.atlas-lmap__legscale {
display: flex;
align-items: center;
gap: 9px;
}
.atlas-lmap__legbar {
width: 200px;
height: 10px;
border-radius: 5px;
border: 1px solid var(--bord);
}
.atlas-lmap__legval {
font-family: var(--font-num);
font-size: 11px;
font-weight: 600;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* ═══════════════════════════════════════════════════════════════
6. COMPONENTES BASE
═══════════════════════════════════════════════════════════════ */
/* ── Card ── */
.atlas-card,
.card {
background: linear-gradient(180deg, var(--surf) 0%, color-mix(in oklab, var(--surf) 92%, var(--surf2) 8%) 100%);
border: 1px solid var(--bord);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm), var(--sh-inset);
transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
overflow: hidden;
}
.atlas-card:hover {
border-color: var(--bord2);
box-shadow: var(--sh-md), var(--sh-inset);
transform: translateY(-2px);
}
.atlas-card-hdr,
.card .ch {
padding: 14px 18px;
border-bottom: 1px solid var(--bord);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.005em;
}
.atlas-card-body,
.card .cb {
padding: 18px;
}
/* ── KPI row ── */
.atlas-krow,
.krow {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
margin-bottom: 24px;
}
.atlas-kpi,
.kpi {
--atlas-kpi-accent: var(--accent);
background: var(--surf);
border: 1px solid var(--bord);
border-radius: var(--r-lg);
padding: 20px 22px;
min-height: 104px;
position: relative;
overflow: hidden;
box-shadow: var(--sh-xs);
transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base),
background var(--dur-base);
--kpi-hover-accent: var(--atlas-kpi-accent, var(--accent));
}
.atlas-kpi::before,
.kpi::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--atlas-kpi-accent, var(--accent));
border-radius: 2px 2px 0 0;
}
/* Neutro puro: sem barra colorida (métrica sem identidade de categoria). */
.atlas-kpi--plain::before,
.kpi.atlas-kpi--plain::before {
display: none;
}
/*
* Identidade: risco vertical + fundo tingido leve.
* Use quando a cor CODEIA categoria (área ENEM, eixo, Q1–Q4, SWOT, Bloom…).
* O número permanece neutro — a cor identifica, não julga.
*/
.atlas-kpi--identity,
.kpi.atlas-kpi--identity {
/* T14 (02/10/2026): card branco como os demais; a cor fica só no chip. */
background: var(--surf);
border-color: var(--bord);
box-shadow: var(--elev-1, var(--sh-xs));
}
.atlas-kpi--identity::before,
.kpi.atlas-kpi--identity::before {
display: none;
}
.atlas-kpi--identity:hover,
.kpi.atlas-kpi--identity:hover {
border-color: var(--bord2);
}
.atlas-kpi-chip {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
color: #fff;
background: var(--atlas-kpi-accent, var(--accent));
border-radius: 6px;
padding: 2px 6px;
white-space: nowrap;
flex-shrink: 0;
margin-right: 6px;
vertical-align: middle;
line-height: 1.2;
}
.atlas-kpi::after,
.kpi::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
background:
radial-gradient(140% 90% at 50% -15%, color-mix(in oklab, var(--kpi-hover-accent) 16%, transparent), transparent 68%);
transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-out);
transform: translateY(4px);
}
.atlas-kpi:hover,
.kpi:hover {
border-color: var(--bord2);
transform: translateY(calc(var(--motion-lift) * -1));
box-shadow: var(--sh-sm);
}
.atlas-kpi:hover::after,
.kpi:hover::after {
opacity: .9;
transform: none;
}
.atlas-kpi-label,
.kpi .kl {
font-family: var(--font-sans);
font-size: 9.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 8px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px;
}
/* Números protagonistas: display (Geist) com tabular-nums — voz editorial
dos KPIs; o mono fica reservado a tabelas densas e valores técnicos. */
.atlas-kpi-value,
.kpi .kv {
font-family: var(--font-display);
font-size: 30px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
color: var(--text);
transition: color var(--dur-fast), transform var(--dur-fast);
transform-origin: left center;
}
.atlas-kpi-sub,
.kpi .ks {
font-size: 11px;
color: var(--muted);
margin-top: 6px;
line-height: 1.4;
}
.atlas-kpi:hover .atlas-kpi-value,
.kpi:hover .kv {
color: color-mix(in oklab, var(--text) 85%, var(--kpi-hover-accent) 15%);
transform: translateX(1px);
}
/* ── KPI delta (variação % com ícone) ── */
.atlas-delta {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 7px;
border-radius: var(--r-full);
font-family: var(--font-num);
font-size: 10.5px;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
line-height: 1.2;
background: color-mix(in oklab, var(--muted) 12%, transparent);
color: var(--muted);
border: 1px solid transparent;
}
.atlas-delta-up {
background: color-mix(in oklab, var(--success) 16%, transparent);
color: var(--success);
border-color: color-mix(in oklab, var(--success) 28%, transparent);
}
.atlas-delta-down {
background: color-mix(in oklab, var(--danger) 16%, transparent);
color: var(--danger);
border-color: color-mix(in oklab, var(--danger) 28%, transparent);
}
.atlas-delta-flat {
background: color-mix(in oklab, var(--muted) 14%, transparent);
color: var(--muted);
border-color: color-mix(in oklab, var(--muted) 22%, transparent);
}
/* ── KPI sotaques nomeados ── */
.atlas-kpi-accent-success { --atlas-kpi-accent: var(--success); --kpi-hover-accent: var(--success); }
.atlas-kpi-accent-warning { --atlas-kpi-accent: var(--warning); --kpi-hover-accent: var(--warning); }
.atlas-kpi-accent-danger { --atlas-kpi-accent: var(--danger); --kpi-hover-accent: var(--danger); }
.atlas-kpi-accent-info { --atlas-kpi-accent: var(--info); --kpi-hover-accent: var(--info); }
.atlas-kpi-accent-flame { --atlas-kpi-accent: var(--brand-flame); --kpi-hover-accent: var(--brand-flame); }
/* ── Buttons ── */
.atlas-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 34px;
padding: 0 14px;
border-radius: var(--r-md);
border: 1px solid var(--bord);
background: var(--surf2);
color: var(--text);
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
white-space: nowrap;
position: relative;
overflow: hidden;
}
.atlas-btn:hover {
background: var(--surf3);
border-color: var(--bord2);
transform: translateY(-1px);
box-shadow: var(--sh-sm);
}
.atlas-btn:active {
transform: translateY(0);
transition-duration: 80ms;
}
.atlas-btn:focus-visible {
outline: none;
box-shadow:
0 0 0 2px var(--focus-ring-soft),
0 0 0 4px var(--focus-ring),
var(--elev-2);
}
.atlas-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
box-shadow: none;
filter: saturate(.72);
}
.atlas-btn:disabled:hover {
background: inherit;
border-color: inherit;
transform: none;
box-shadow: none;
}
.atlas-btn[aria-busy="true"] {
cursor: progress;
}
.atlas-btn-primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 32%, transparent);
}
.atlas-btn-primary:hover {
background: color-mix(in oklab, var(--accent) 90%, white 10%);
border-color: color-mix(in oklab, var(--accent) 90%, white 10%);
box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 40%, transparent);
}
.atlas-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--muted);
}
.atlas-btn-ghost:hover {
background: var(--surf2);
color: var(--text);
}
.atlas-btn-outline {
background: transparent;
border-color: var(--accent);
color: var(--accent);
}
.atlas-btn-outline:hover {
background: color-mix(in oklab, var(--accent) 8%, var(--surf));
border-color: var(--accent);
color: var(--accent);
}
.atlas-btn-danger {
background: var(--danger);
border-color: var(--danger);
color: #fff;
}
.atlas-seg-group {
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bord) 74%, transparent);
transition: box-shadow var(--dur-fast), background var(--dur-fast);
}
.atlas-seg-btn:hover {
transform: translateY(-1px);
box-shadow: var(--sh-xs);
}
.atlas-seg-btn.is-active {
box-shadow: 0 1px 2px color-mix(in oklab, var(--accent) 30%, transparent);
}
/* ── Sub-navegação de seções (pill track unificado) ── */
.atlas-tab-strip {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding: 6px;
margin-top: 20px;
margin-bottom: 24px;
border-radius: 14px;
border: 1px solid var(--bord);
background: var(--surf2);
box-shadow: none;
}
.atlas-tab-strip-btn {
appearance: none;
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
margin: 0;
padding: 9px 14px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: var(--muted);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition:
background var(--dur-fast),
color var(--dur-fast),
border-color var(--dur-fast),
box-shadow var(--dur-fast),
transform var(--dur-fast);
}
.atlas-tab-strip-btn:hover {
background: color-mix(in oklab, var(--accent) 8%, var(--surf3));
color: var(--text);
transform: none;
}
.atlas-tab-strip-btn:focus-visible {
outline: 2px solid color-mix(in oklab, var(--accent) 55%, transparent);
outline-offset: 2px;
}
.atlas-tab-strip-btn.is-active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 32%, transparent);
}
.atlas-tab-strip-btn.is-active:hover {
background: var(--accent);
color: #fff;
}
.atlas-tab-strip-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
opacity: 0.85;
}
.atlas-tab-strip-btn.is-active .atlas-tab-strip-icon {
opacity: 1;
}
.atlas-tab-strip-label {
min-width: 0;
}
/* ── Badges ── */
.atlas-bdg {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--r-sm);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.03em;
background: var(--surf3);
color: var(--text);
border: 1px solid color-mix(in oklab, var(--bord) 70%, transparent);
transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.atlas-bdg:hover {
transform: translateY(-1px);
box-shadow: var(--sh-xs);
}
.atlas-bdg-success { background: color-mix(in oklab, var(--success) 16%, var(--surf)); color: var(--success); border-color: color-mix(in oklab, var(--success) 30%, transparent); }
.atlas-bdg-warn { background: color-mix(in oklab, var(--warning) 16%, var(--surf)); color: var(--warning); border-color: color-mix(in oklab, var(--warning) 30%, transparent); }
.atlas-bdg-danger { background: color-mix(in oklab, var(--danger) 16%, var(--surf)); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 30%, transparent); }
.atlas-bdg-info { background: color-mix(in oklab, var(--info) 16%, var(--surf)); color: var(--info); border-color: color-mix(in oklab, var(--info) 30%, transparent); }
/* ── Tables ── */
.atlas-sw,
.sw,
.sw2 {
overflow-x: auto;
border-radius: var(--r-md);
}
.atlas-tbl,
.tbl {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.atlas-tbl thead,
.tbl thead {
position: sticky;
top: 0;
z-index: 2;
}
.atlas-tbl th,
.tbl th {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
text-align: left;
padding: 12px 14px;
background: var(--surf2);
border-bottom: 1px solid var(--bord);
white-space: nowrap;
}
.atlas-tbl td,
.tbl td {
font-family: var(--font-sans);
padding: 11px 14px;
border-bottom: 1px solid color-mix(in oklab, var(--bord) 60%, transparent);
color: var(--text);
transition: background var(--dur-fast), color var(--dur-fast);
}
.atlas-tbl td[class*="num"],
.tbl td[class*="num"],
.atlas-tbl td[data-num],
.tbl td[data-num] {
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* Fallback para HTML legada que ainda usa alinhamento inline. */
.atlas-tbl td[style*="text-align:right"],
.tbl td[style*="text-align:right"] {
text-align: right;
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.atlas-tbl th[style*="text-align:right"],
.tbl th[style*="text-align:right"] {
text-align: right;
}
.atlas-tbl td .num,
.tbl td .num {
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.atlas-tbl th[data-num],
.tbl th[data-num] {
text-align: right;
font-family: var(--font-sans);
}
.atlas-tbl tbody tr:hover td,
.tbl tbody tr:hover td {
background: color-mix(in oklab, var(--accent) 5%, transparent);
}
.atlas-tbl tbody tr:last-child td,
.tbl tbody tr:last-child td {
border-bottom: none;
}
/* Sprint 4 — densidade e scroll editorial em tabelas longas */
.atlas-tbl--dense th,
.tbl.atlas-tbl--dense th {
padding: 8px 10px;
font-size: 9px;
letter-spacing: 0.07em;
}
.atlas-tbl--dense td,
.tbl.atlas-tbl--dense td {
padding: 7px 10px;
font-size: 11.5px;
}
.atlas-tbl--comfortable th,
.tbl.atlas-tbl--comfortable th {
padding: 14px 16px;
}
.atlas-tbl--comfortable td,
.tbl.atlas-tbl--comfortable td {
padding: 13px 16px;
}
.atlas-sw--scroll,
.sw.atlas-sw--scroll {
max-height: min(560px, calc(100vh - 280px));
overflow: auto;
border: 1px solid var(--bord);
border-radius: var(--r-md);
background: var(--surf);
}
.atlas-sw--scroll .atlas-tbl thead th,
.atlas-sw--scroll .tbl thead th {
position: sticky;
top: 0;
z-index: 3;
box-shadow: 0 1px 0 var(--bord);
}
/* ── Drawer ── */
.atlas-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(3, 21, 48, .55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base);
z-index: 900;
}
body.light .atlas-drawer-overlay,
html[data-theme="light"] .atlas-drawer-overlay {
background: rgba(1, 36, 81, .25);
}
.atlas-drawer-overlay.open {
opacity: 1;
pointer-events: auto;
}
.atlas-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(540px, 100vw);
background: var(--surf);
border-left: 1px solid var(--bord);
box-shadow: var(--sh-xl);
transform: translateX(100%);
transition: transform var(--dur-slow) var(--ease-out);
z-index: 910;
display: flex;
flex-direction: column;
}
.atlas-drawer.open {
transform: none;
}
.atlas-drawer-hdr {
padding: 18px 22px;
border-bottom: 1px solid var(--bord);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
}
.atlas-drawer-body {
flex: 1;
overflow-y: auto;
padding: 22px;
}
/* ═══════════════════════════════════════════════════════════════
7. MICRO-ANIMAÇÕES
═══════════════════════════════════════════════════════════════ */
@keyframes atlas-fade-in-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@keyframes atlas-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes atlas-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.atlas-fade-in-up { animation: atlas-fade-in-up var(--dur-base) var(--ease-out) both; }
.atlas-fade-in { animation: atlas-fade-in var(--dur-base) var(--ease-out) both; }
.atlas-shell--motion .atlas-panel > *:first-child {
animation: atlas-fade-in-up var(--dur-enter) var(--ease-out) both;
}
.atlas-page-header {
transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.atlas-page-header:hover {
transform: translateY(-1px);
}
.atlas-motion-priority-high { --motion-lift: 4px; }
.atlas-motion-priority-medium { --motion-lift: 2px; }
.atlas-motion-priority-low { --motion-lift: 1px; }
.atlas-loading-stage {
animation: atlas-fade-in var(--dur-base) var(--ease-out) both;
}
/* Sprint 3 — tab panel enter */
.atlas-tab-panel-enter {
animation: atlas-fade-in-up var(--dur-enter) var(--ease-out) both;
min-width: 0;
}
/* Stagger editorial: os primeiros blocos do painel entram em cascata sutil
(30ms por filho, só nos 6 primeiros — barato, sem JS). */
.atlas-shell--motion .atlas-tab-panel-enter > *:nth-child(-n+6) {
animation: atlas-fade-in-up var(--dur-enter) var(--ease-out) both;
}
.atlas-shell--motion .atlas-tab-panel-enter > *:nth-child(1) { animation-delay: 0ms; }
.atlas-shell--motion .atlas-tab-panel-enter > *:nth-child(2) { animation-delay: 30ms; }
.atlas-shell--motion .atlas-tab-panel-enter > *:nth-child(3) { animation-delay: 60ms; }
.atlas-shell--motion .atlas-tab-panel-enter > *:nth-child(4) { animation-delay: 90ms; }
.atlas-shell--motion .atlas-tab-panel-enter > *:nth-child(5) { animation-delay: 120ms; }
.atlas-shell--motion .atlas-tab-panel-enter > *:nth-child(6) { animation-delay: 150ms; }
.atlas-shell:not(.atlas-shell--motion) .atlas-tab-panel-enter,
.atlas-shell:not(.atlas-shell--motion) .atlas-tab-panel-enter > * {
animation: none;
}
/* Sprint 3 — async progress (PDF, IA, busca longa) */
.atlas-async-progress {
height: 3px;
border-radius: 99px;
background: color-mix(in oklab, var(--bord) 55%, transparent 45%);
overflow: hidden;
margin-top: 8px;
}
.atlas-async-progress__bar {
display: block;
height: 100%;
width: 42%;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent), var(--accent-400, var(--brand-ice)));
animation: atlas-progress-indeterminate 1.15s var(--ease-in-out) infinite;
}
@keyframes atlas-progress-indeterminate {
0% { transform: translateX(-120%); }
100% { transform: translateX(320%); }
}
/* Sprint 3 — panel loading layouts */
.atlas-panel-loading {
min-height: 380px;
width: 100%;
border-radius: var(--r-lg);
border: 1px solid var(--bord);
background: var(--surf);
padding: 20px;
box-shadow: var(--sh-xs);
}
.atlas-panel-loading--compact {
min-height: 220px;
padding: 16px 18px;
}
.atlas-panel-loading--ia {
min-height: 280px;
}
.atlas-panel-loading__grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 768px) {
.atlas-panel-loading__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.atlas-panel-loading__grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.atlas-panel-loading__card {
height: 96px;
border-radius: var(--r-md);
border: 1px solid var(--bord);
}
.atlas-panel-loading__ia-hero {
height: 120px;
border-radius: var(--r-lg);
margin-bottom: 14px;
}
.atlas-panel-loading__ia-block {
height: 14px;
margin-bottom: 10px;
}
.atlas-panel-loading__ia-block--lg {
height: 22px;
width: 72%;
margin-bottom: 14px;
}
.atlas-skeleton-rows {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 0;
}
.atlas-skeleton-row {
height: 44px;
border-radius: var(--r-sm);
}
@keyframes atlas-attention-pulse {
0%, 100% {
box-shadow: var(--elev-3), 0 0 0 0 color-mix(in oklab, var(--danger) 20%, transparent);
}
50% {
box-shadow: var(--elev-3), 0 0 0 7px color-mix(in oklab, var(--danger) 0%, transparent);
}
}
.atlas-narrative-critical {
border-color: color-mix(in oklab, var(--danger) 42%, var(--bord) 58%) !important;
animation: atlas-attention-pulse 2.8s var(--ease-in-out) infinite;
}
.atlas-narrative-hint {
margin-top: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--danger);
}
.atlas-context-related {
border-color: color-mix(in oklab, var(--accent) 46%, var(--bord) 54%) !important;
box-shadow: var(--elev-3), 0 0 0 1px color-mix(in oklab, var(--accent) 26%, transparent) !important;
transform: translateY(calc(var(--motion-lift, 2px) * -1));
}
.atlas-context-dim {
opacity: .72;
filter: saturate(.82);
transition: opacity var(--dur-fast), filter var(--dur-fast);
}
/* ── Spinner ── */
@keyframes atlas-spin {
to { transform: rotate(360deg); }
}
.atlas-spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid var(--bord);
border-top-color: var(--accent);
border-radius: 50%;
animation: atlas-spin 720ms linear infinite;
vertical-align: middle;
}
.atlas-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.atlas-spinner-sm { width: 12px; height: 12px; border-width: 1.5px; }
.atlas-loading {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
}
/* ── Tooltip ── */
.atlas-tip {
position: relative;
display: inline-flex;
}
.atlas-tip[data-tip]::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 6px 10px;
border-radius: var(--r-sm);
background: var(--surf3);
color: var(--text);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
opacity: 0;
border: 1px solid var(--bord);
box-shadow: var(--sh-md);
transition: opacity var(--dur-fast), transform var(--dur-fast);
z-index: 500;
}
.atlas-tip[data-tip]:hover::after,
.atlas-tip[data-tip]:focus-within::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ── Input + Select unificados ── */
.atlas-input,
.atlas-select {
width: 100%;
height: 36px;
padding: 0 12px;
border-radius: var(--r-md);
border: 1px solid var(--bord);
background: var(--surf2);
color: var(--text);
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
outline: none;
transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.atlas-input::placeholder {
color: var(--dim);
}
.atlas-input:hover,
.atlas-select:hover {
border-color: var(--bord2);
}
.atlas-input:disabled,
.atlas-select:disabled {
opacity: .62;
cursor: not-allowed;
filter: saturate(.75);
background: color-mix(in oklab, var(--surf2) 86%, var(--bg) 14%);
}
.atlas-input:focus,
.atlas-select:focus {
border-color: var(--accent);
background: var(--surf);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.atlas-async-status {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 26px;
border-radius: 8px;
padding: 5px 10px;
font-size: 11px;
font-weight: 600;
border: 1px solid var(--bord);
background: color-mix(in oklab, var(--surf2) 82%, transparent);
color: var(--muted);
}
.atlas-async-status[data-tone="busy"] {
border-color: color-mix(in oklab, var(--accent) 35%, var(--bord) 65%);
background: color-mix(in oklab, var(--accent) 10%, var(--surf) 90%);
color: var(--text);
}
.atlas-async-status[data-tone="error"] {
border-color: color-mix(in oklab, var(--danger) 45%, var(--bord) 55%);
background: color-mix(in oklab, var(--danger) 10%, var(--surf) 90%);
color: var(--danger);
}
.atlas-async-status[data-tone="success"] {
border-color: color-mix(in oklab, var(--success) 45%, var(--bord) 55%);
background: color-mix(in oklab, var(--success) 10%, var(--surf) 90%);
color: var(--success);
}
.atlas-select {
appearance: none;
-webkit-appearance: none;
padding-right: 32px;
background-image:
linear-gradient(45deg, transparent 50%, var(--muted) 50%),
linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position:
calc(100% - 14px) 50%,
calc(100% - 9px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
/* ── Card premium (glow sutil com borda-destaque) ── */
.atlas-card-premium {
background: linear-gradient(180deg, var(--surf) 0%, color-mix(in oklab, var(--surf) 85%, var(--surf2) 15%) 100%);
border: 1px solid var(--bord);
border-radius: var(--r-lg);
box-shadow: var(--sh-md), var(--sh-inset);
position: relative;
overflow: hidden;
}
.atlas-card-premium::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 70%, transparent), transparent);
pointer-events: none;
}
/* ── Section header (para cabeçalhos de seção com título + ação) ── */
.atlas-section-hdr {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 24px 0 14px;
}
.atlas-section-hdr .atlas-section-title {
font-size: 15px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.atlas-section-sub {
font-size: 11.5px;
color: var(--muted);
margin-top: 2px;
font-weight: 500;
}
/* ── Skeleton loading ── */
.atlas-skeleton {
background: linear-gradient(
90deg,
var(--surf2) 0%,
color-mix(in oklab, var(--surf3) 82%, white 6%) 50%,
var(--surf2) 100%
);
background-size: 200% 100%;
animation: atlas-shimmer 1.5s infinite linear;
border-radius: var(--r-sm);
color: transparent !important;
user-select: none;
pointer-events: none;
}
/* ── Empty state ── */
.atlas-empty {
padding: 48px 24px;
text-align: center;
color: var(--muted);
}
.atlas-empty-icon {
font-size: 40px;
color: var(--dim);
margin-bottom: 12px;
display: inline-block;
}
.atlas-empty-title {
font-size: 14px;
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
}
.atlas-empty-sub {
font-size: 12.5px;
color: var(--muted);
line-height: 1.55;
max-width: 420px;
margin: 0 auto;
}
/* ═══════════════════════════════════════════════════════════════
8. UTILITÁRIOS
═══════════════════════════════════════════════════════════════ */
.atlas-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.atlas-divider {
height: 1px;
background: var(--bord);
border: 0;
margin: 16px 0;
}
.atlas-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0.375rem 1rem;
border-radius: 999px;
background: var(--surf2);
border: 1px solid var(--bord);
font-size: 11px;
font-weight: 600;
color: var(--muted);
line-height: 1.2;
white-space: nowrap;
}
.atlas-topbar-actions .atlas-chip {
height: 32px;
padding: 0 1rem;
}
.atlas-chip--outline {
background: transparent;
border: 1px solid var(--bord);
color: var(--muted);
}
.atlas-chip--outline-accent {
background: transparent;
border-color: color-mix(in oklab, var(--accent) 42%, var(--bord));
color: var(--accent);
}
.atlas-chip--outline-warn {
background: transparent;
border-color: color-mix(in oklab, var(--warning) 45%, var(--bord));
color: color-mix(in oklab, var(--warning) 88%, var(--text));
}
.atlas-chip--outline-good {
background: transparent;
border-color: color-mix(in oklab, var(--success) 42%, var(--bord));
color: color-mix(in oklab, var(--success) 88%, var(--text));
}
.atlas-chip--accent {
background: color-mix(in oklab, var(--accent) 14%, var(--surf));
border-color: color-mix(in oklab, var(--accent) 38%, transparent);
color: color-mix(in oklab, var(--accent) 86%, #fff);
}
.atlas-chip--success {
background: color-mix(in oklab, var(--success) 16%, var(--surf));
border-color: color-mix(in oklab, var(--success) 36%, transparent);
color: color-mix(in oklab, var(--success) 84%, #fff);
}
.atlas-section-mark {
width: 3px;
height: 14px;
border-radius: 2px;
display: inline-block;
flex-shrink: 0;
background: var(--accent);
}
.atlas-hero-gradient-a { background: linear-gradient(135deg, #0A2463, #1B4FBF); color: #fff; }
.atlas-hero-gradient-b { background: linear-gradient(135deg, #1B4FBF, #4A7FE5); color: #fff; }
.atlas-hero-gradient-c { background: linear-gradient(135deg, #4A7FE5, #6FA8F5); color: #fff; }
.atlas-chip-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
/* ── Módulo Análise de Conteúdo ── */
.conteudo-panel {
--conteudo-active: var(--coc);
}
.conteudo-callout {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 14px 18px;
margin-bottom: 20px;
border-radius: 12px;
background: var(--conteudo-soft);
border: 1px solid var(--conteudo-border);
}
.conteudo-btn-primary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
background: var(--coc);
color: #fff;
border: none;
cursor: pointer;
}
.conteudo-btn-primary:hover {
filter: brightness(1.08);
}
/* ── Links IA → Painel Pedagógico (HTML estáticos) ── */
.atlas-ia-links {
margin: 14px 0 8px;
padding: 14px 16px;
border-radius: 12px;
background: rgba(27, 79, 191, 0.06);
border: 1px solid rgba(27, 79, 191, 0.18);
}
.atlas-ia-links-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent, var(--arco-sky, #4085d3));
margin-bottom: 10px;
}
.atlas-ia-links-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
a.atlas-ia-link {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
text-decoration: none;
color: var(--atlas-ia-accent, var(--accent));
background: var(--surf, var(--surf2, rgba(255, 255, 255, 0.04)));
border: 1px solid var(--bord, rgba(141, 167, 190, 0.2));
transition: background 0.15s, border-color 0.15s;
}
a.atlas-ia-link:hover {
border-color: var(--atlas-ia-accent, var(--accent));
background: rgba(27, 79, 191, 0.08);
}
.atlas-ia-links-hint {
font-size: 10px;
color: var(--muted, var(--dim, #8da7be));
margin-top: 10px;
line-height: 1.45;
}
/* ═══════════════════════════════════════════════════════════════════
Sprint 5 — Brand Premium Layer + Export Kit
═══════════════════════════════════════════════════════════════════ */
/* Header editorial com acento de marca */
.atlas-brand-header {
--atlas-header-accent: var(--accent);
margin-bottom: 0;
padding: 22px 26px;
border-left: 4px solid var(--atlas-header-accent);
border-radius: var(--r-lg, 14px);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 12px 16px;
}
.atlas-brand-header__main {
display: flex;
align-items: flex-start;
gap: 14px;
flex: 1 1 260px;
min-width: 0;
max-width: 100%;
}
.atlas-brand-header__icon {
flex-shrink: 0;
margin-top: 2px;
}
.atlas-brand-header__text {
min-width: 0;
flex: 1 1 auto;
}
.atlas-brand-header__eyebrow {
color: var(--atlas-header-accent);
margin-bottom: 8px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.atlas-brand-header__eyebrow::before {
content: '';
width: 3px;
height: 12px;
border-radius: 2px;
background: var(--atlas-header-accent);
flex-shrink: 0;
}
.atlas-brand-header__title {
color: var(--text);
margin-bottom: 0;
font-weight: 600;
overflow-wrap: break-word;
word-break: normal;
}
/* Escola em foco — contexto sob o título da aba (nunca o H1, exceto Dashboard). */
.atlas-brand-header__school {
margin-top: 6px;
font-size: 12.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
color: var(--muted);
max-width: min(860px, 100%);
line-height: 1.45;
overflow-wrap: break-word;
}
.atlas-brand-header__title + .atlas-brand-header__subtitle,
.atlas-brand-header__school + .atlas-brand-header__subtitle {
margin-top: 6px;
}
.atlas-brand-header__subtitle {
font-size: 13px;
color: var(--muted);
max-width: min(760px, 100%);
line-height: 1.5;
overflow-wrap: break-word;
word-break: normal;
}
/* Linha de insight: leitura executiva calculada dos dados da aba. */
.atlas-brand-header__insight {
display: inline-flex;
align-items: flex-start;
gap: 8px;
margin-top: 12px;
padding: 8px 14px;
border-radius: var(--r-md);
background: color-mix(in oklab, var(--atlas-header-accent, var(--accent)) 9%, transparent);
border: 1px solid color-mix(in oklab, var(--atlas-header-accent, var(--accent)) 28%, transparent);
font-size: 12.5px;
line-height: 1.55;
color: var(--text);
max-width: min(860px, 100%);
}
.atlas-brand-header__insight svg {
flex-shrink: 0;
margin-top: 2px;
color: var(--atlas-header-accent, var(--accent));
}
.atlas-brand-header__insight strong {
font-weight: 700;
}
.atlas-brand-header__aside {
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
margin-left: auto;
/* Canto superior direito: gatilho de ajuda em cima, rightSlot abaixo. */
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
.atlas-brand-header__chips {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
max-width: 100%;
}
@media (max-width: 720px) {
.atlas-brand-header {
padding: 16px 18px;
}
.atlas-brand-header__main {
flex-basis: 100%;
}
.atlas-brand-header__aside {
flex-basis: 100%;
margin-left: 0;
}
.atlas-brand-header__chips {
justify-content: flex-start;
}
}
/* Iconografia premium */
.atlas-icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-full);
flex-shrink: 0;
line-height: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.atlas-icon-badge svg {
display: block;
}
.atlas-icon-badge--sm {
width: 32px;
height: 32px;
}
.atlas-icon-badge--sm svg {
width: 16px;
height: 16px;
}
.atlas-icon-badge--md {
width: 40px;
height: 40px;
}
.atlas-icon-badge--md svg {
width: 20px;
height: 20px;
}
.atlas-icon-badge--lg {
width: 48px;
height: 48px;
}
.atlas-icon-badge--lg svg {
width: 24px;
height: 24px;
}
.atlas-icon-badge--accent {
color: var(--accent);
background: color-mix(in oklab, var(--accent) 14%, var(--surf) 86%);
border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--bord) 72%);
}
.atlas-icon-badge--navy {
color: var(--brand-navy);
background: color-mix(in oklab, var(--brand-navy) 8%, var(--surf) 92%);
border: 1px solid color-mix(in oklab, var(--brand-navy) 18%, var(--bord) 82%);
}
.atlas-icon-badge--soft {
color: var(--muted);
background: var(--surf2);
border: 1px solid var(--bord);
box-shadow: none;
}
.atlas-icon-badge--inverse {
color: #fff;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.22);
}
/* Kit de blocos exportáveis (html2canvas + PDF) */
.atlas-pdf-block,
[data-pdf-block].atlas-pdf-block {
position: relative;
box-sizing: border-box;
}
.atlas-pdf-block__head {
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--brand-pdf-border, var(--bord));
}
.atlas-pdf-block__title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
color: var(--brand-pdf-navy, var(--brand-navy));
display: flex;
align-items: center;
gap: 10px;
}
.atlas-pdf-block__meta {
font-size: 11px;
color: var(--brand-pdf-muted, var(--muted));
margin-top: 6px;
}
.atlas-pdf-block__body {
font-size: 13px;
line-height: 1.85;
color: var(--brand-pdf-ink, var(--text));
font-family: var(--font-sans);
}
.atlas-pdf-block__disclaimer {
margin-top: 18px;
padding: 10px 14px;
background: color-mix(in oklab, var(--brand-pdf-border) 35%, var(--brand-pdf-cream) 65%);
border-radius: 8px;
font-size: 10px;
color: var(--brand-pdf-muted, var(--dim));
line-height: 1.5;
}
/* Durante captura PDF: superfície editorial branca (preenche largura A4; sem faixa creme) */
body.atlas-pdf-capturing [data-pdf-block],
body.atlas-pdf-capturing [data-pdf-item],
body.atlas-pdf-capturing [data-pdf-capture],
body.atlas-pdf-capturing .atlas-pdf-block,
body.atlas-pdf-capturing .atlas-premium-surface-card,
body.atlas-pdf-capturing .atlas-print-dossie__section {
background: #ffffff !important;
color: var(--brand-pdf-ink) !important;
border-color: var(--brand-pdf-border) !important;
box-shadow: none !important;
max-width: none !important;
box-sizing: border-box !important;
}
body.atlas-pdf-capturing [data-pdf-block] .atlas-rede-panel-title,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-section-title,
body.atlas-pdf-capturing [data-pdf-block] .atlas-pdf-block__title,
body.atlas-pdf-capturing .atlas-premium-surface-card .atlas-section-title {
color: var(--brand-pdf-navy) !important;
}
body.atlas-pdf-capturing [data-pdf-block] .atlas-rede-panel-desc,
body.atlas-pdf-capturing [data-pdf-block] .atlas-pdf-block__meta,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-report-muted-12,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-report-dim-footnote,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-report-note-label,
body.atlas-pdf-capturing [data-pdf-block] .atlas-tbl__cell-sub,
body.atlas-pdf-capturing [data-pdf-block] .atlas-tbl__cell-dim {
color: var(--brand-pdf-muted) !important;
}
body.atlas-pdf-capturing [data-pdf-block] .atlas-tbl th,
body.atlas-pdf-capturing [data-pdf-block] .atlas-tbl td,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-tbl th,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-tbl td {
color: var(--brand-pdf-ink) !important;
border-color: var(--brand-pdf-border) !important;
}
body.atlas-pdf-capturing [data-pdf-block] .atlas-tbl thead th,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-tbl thead th {
background: #ede8df !important;
}
body.atlas-pdf-capturing [data-pdf-block] .atlas-icon-badge--navy {
color: var(--brand-pdf-navy);
background: #eef2fa;
border-color: var(--brand-pdf-border);
}
body.atlas-pdf-capturing [data-pdf-capture] .atlas-kpi-value:not(.atlas-report-kpi-value-solid):not(.atlas-report-kpi-value-26),
body.atlas-pdf-capturing [data-pdf-capture] .atlas-report-note-value,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-report-narrative,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-report-plan-box {
color: var(--brand-pdf-ink) !important;
}
/* html2canvas não parseia color-mix/oklab — simplifica gradientes de KPI/área na captura */
body.atlas-pdf-capturing [data-pdf-capture] .atlas-report-kpi-gradient-primary {
background: linear-gradient(135deg, #012451 0%, #4085d3 100%) !important;
}
body.atlas-pdf-capturing [data-pdf-capture] .atlas-report-kpi-gradient-secondary {
background: linear-gradient(135deg, #4085d3 0%, #1b4fbf 100%) !important;
}
body.atlas-pdf-capturing [data-pdf-capture] .atlas-report-area-card {
background: var(--atlas-area-color, #4085d3) !important;
border-color: rgba(255, 255, 255, 0.28) !important;
}
body.atlas-pdf-capturing [data-pdf-capture] .atlas-report-q4-badge,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-priority-badge {
background: rgba(0, 0, 0, 0.06) !important;
}
body.atlas-pdf-capturing [data-pdf-capture] .atlas-narrative-critical,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-context-related,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-context-dim {
animation: none !important;
box-shadow: none !important;
transform: none !important;
filter: none !important;
opacity: 1 !important;
border-color: var(--brand-pdf-border) !important;
}
body.atlas-pdf-capturing [data-pdf-capture] .atlas-priority-badge--bad {
color: #c0392b !important;
background: rgba(192, 57, 43, 0.08) !important;
}
body.atlas-pdf-capturing [data-pdf-capture] .atlas-section-icon {
color: #4085d3 !important;
}
body.atlas-pdf-capturing [data-pdf-capture] .atlas-report-q4-card {
background: #ffffff !important;
border-color: var(--brand-pdf-border) !important;
}
body.atlas-pdf-capturing [data-pdf-capture] .atlas-premium-surface-card::before,
body.atlas-pdf-capturing [data-pdf-capture] .atlas-premium-hero::before {
display: none !important;
}
/* ── Contraste no hero platinum (carrega após tokens e base do header) ──
Em Aurora light, --muted/#4c6078 some no navy. O hero platinum é sempre
fundo profundo: texto de contexto fica branco em TODOS os temas. */
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__title {
color: #ffffff;
}
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__school,
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__subtitle {
color: rgba(255, 255, 255, 0.92);
}
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__eyebrow {
color: rgba(255, 255, 255, 0.92);
}
.atlas-hero-platinum.atlas-brand-header .atlas-brand-header__eyebrow::before {
background: rgba(255, 255, 255, 0.92);
}
/* ═══════════════════════════════════════════════════════════════════
Visual polish — shell pedagógico + tokens compartilhados (Sprint UI)
═══════════════════════════════════════════════════════════════════ */
.atlas-sidebar-brand {
padding: 20px 16px 12px;
border-bottom: 1px solid var(--bord);
overflow: visible;
}
.atlas-sidebar-brand__title {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 650;
letter-spacing: -0.005em;
color: var(--text);
line-height: 1.3;
overflow-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.atlas-sidebar-brand__sub {
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--muted);
margin-top: 4px;
line-height: 1.35;
}
.atlas-section-icon {
color: color-mix(in oklab, var(--accent) 70%, transparent);
flex-shrink: 0;
}
.atlas-section-title .atlas-section-icon {
margin-right: 2px;
}
/* Filtros em pill (quadrantes, itens, etc.) */
.atlas-filter-pill {
padding: 5px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
font-family: var(--font-sans);
border: 1px solid color-mix(in oklab, var(--bord) 70%, transparent);
background: var(--surf);
color: var(--muted);
cursor: pointer;
transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.atlas-filter-pill:hover:not(.atlas-filter-pill--active) {
background: color-mix(in oklab, var(--accent) 6%, var(--surf));
border-color: color-mix(in oklab, var(--accent) 28%, var(--bord));
color: var(--text);
}
.atlas-filter-pill--active {
border-color: var(--accent);
background: var(--accent);
color: #fff;
box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 28%, transparent);
}
/* ── Card de identidade — composição unificada ──
Espelha o hero do Raio-X (o mais bonito do painel): fundo tingido 7%,
borda 25%, barra lateral 3px e chip da identidade. O número fica neutro —
a cor identifica, não julga.
Uso: . */
.atlas-id-card {
--id-color: var(--accent);
position: relative;
border-radius: 14px;
padding: 18px 20px;
min-height: 96px;
background: color-mix(in srgb, var(--id-color) 7%, var(--surf3));
border: 1px solid color-mix(in srgb, var(--id-color) 25%, var(--bord));
box-shadow: var(--elev-2), inset 0 1px 0 color-mix(in oklab, white 4%, transparent);
overflow: hidden;
transition: transform var(--dur-hover, .18s) var(--ease-out, ease),
box-shadow var(--dur-hover, .18s) var(--ease-out, ease),
border-color var(--dur-fast, .12s);
}
.atlas-id-card:hover {
transform: translateY(calc(var(--motion-lift, 1.5px) * -1));
box-shadow: var(--elev-3);
border-color: color-mix(in srgb, var(--id-color) 40%, var(--bord));
}
.atlas-id-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--id-color);
}
.atlas-id-card__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.atlas-id-chip {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
color: #fff;
background: var(--id-color);
border-radius: 6px;
padding: 2px 6px;
white-space: nowrap;
flex-shrink: 0;
}
.atlas-id-card__title {
font-size: 12px;
font-weight: 600;
color: var(--text);
min-width: 0;
}
.atlas-id-card__value {
font-family: var(--font-display);
font-size: clamp(26px, 2.4vw, 32px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.atlas-id-card__label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
margin-top: 4px;
}
.atlas-id-card__rule {
height: 1px;
background: var(--bord);
margin: 10px 0;
}
.atlas-id-card__row {
display: flex;
justify-content: space-between;
gap: 8px;
}
.atlas-id-card__mini { display: flex; flex-direction: column; }
.atlas-id-card__mini--right { text-align: right; }
.atlas-id-card__mini-val {
font-size: 16px;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.atlas-id-card__mini-lbl {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
}
/* Stat cards (KPIs de topo) */
.atlas-stat-card {
padding: 1.25rem 1.35rem;
border-radius: 12px;
border: 1px solid var(--bord);
background: linear-gradient(180deg, var(--surf) 0%, color-mix(in oklab, var(--surf2) 40%, var(--surf) 60%) 100%);
box-shadow: var(--elev-2);
}
.atlas-stat-card__label {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
line-height: 1.3;
}
.atlas-stat-card__value {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 700;
line-height: 1;
color: var(--text);
}
.atlas-stat-card__sub {
font-size: 11px;
color: var(--muted);
margin-top: 6px;
line-height: 1.35;
}
.atlas-stat-hint {
font-size: 0.88rem;
color: color-mix(in oklab, var(--text) 72%, var(--muted));
margin-top: 4px;
font-weight: 600;
line-height: 1.3;
}
/* Barras de progresso comparativas */
.atlas-bar-track {
position: relative;
height: 6px;
background: var(--bord);
border-radius: 3px;
overflow: visible;
}
.atlas-bar-fill {
height: 100%;
border-radius: 3px;
transition: width 1s ease;
}
.atlas-bar-marker {
position: absolute;
top: -4px;
width: 3px;
height: 14px;
border-radius: 2px;
transform: translateX(-50%);
opacity: 0.85;
}
/* Banner tendência / alertas leves */
.atlas-trend-banner {
margin-bottom: 16px;
padding: 14px 18px;
border-radius: 12px;
border: 1px solid var(--bord);
background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 5%, var(--surf)), transparent);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
}
.atlas-trend-banner--down {
border-color: color-mix(in oklab, var(--danger) 22%, var(--bord));
background: color-mix(in oklab, var(--danger) 5%, var(--surf));
}
.atlas-trend-banner--up {
border-color: color-mix(in oklab, var(--success) 22%, var(--bord));
background: color-mix(in oklab, var(--success) 5%, var(--surf));
}
.atlas-trend-banner--stable {
border-color: color-mix(in oklab, var(--muted) 18%, var(--bord));
background: color-mix(in oklab, var(--muted) 4%, var(--surf));
}
/* Cards de área coloridos (dashboard) */
.atlas-area-kpi-card {
border-radius: 14px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* Badge de prioridade (Q4, EP, etc.) */
.atlas-priority-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.atlas-priority-badge--bad {
color: var(--danger);
background: color-mix(in oklab, var(--danger) 8%, transparent);
}
.atlas-priority-badge--good {
color: var(--success);
background: color-mix(in oklab, var(--success) 8%, transparent);
}
.atlas-priority-badge--warn {
color: var(--warning);
background: color-mix(in oklab, var(--warning) 10%, transparent);
}
.atlas-priority-badge--neutral {
color: var(--muted);
background: color-mix(in oklab, var(--muted) 10%, transparent);
}
/* Quadrante hint — borda lateral reforçada */
.atlas-quad-hint {
border-left-width: 3px;
border-left-style: solid;
padding: 8px 8px 8px 10px;
border-radius: 6px;
font-size: 11px;
line-height: 1.4;
}
/* Cards de quadrante (Q1–Q4, SWOT summary) */
.atlas-quad-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.atlas-quad-card__head {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 4px;
}
.atlas-quad-card__icon {
font-size: 18px;
line-height: 1;
flex-shrink: 0;
}
.atlas-quad-card__label {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.atlas-quad-card__value {
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
font-size: clamp(30px, 2.8vw, 36px);
font-weight: 800;
line-height: 1;
}
.atlas-quad-card .atlas-priority-badge {
margin-top: 8px;
}
/* Painel “Como ler” (quadrantes) */
.atlas-legend-panel {
padding: 22px 24px;
margin-bottom: 20px;
}
.atlas-legend-panel__title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--text);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
/* Régua TRI — zonas de dificuldade com mais contraste */
.atlas-tri-ruler {
padding: 22px;
margin-bottom: 24px;
}
.atlas-tri-ruler__title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.atlas-tri-ruler__sub {
font-size: 11px;
color: var(--muted);
margin-bottom: 14px;
line-height: 1.6;
}
.atlas-tri-ruler__track {
position: relative;
height: 44px;
border-radius: 8px;
border: 1px solid var(--bord);
margin-bottom: 24px;
--tri-zero-pct: 22.2%;
--tri-mid-pct: 55.6%;
background: linear-gradient(
90deg,
color-mix(in oklab, var(--success) 16%, var(--surf)) 0%,
color-mix(in oklab, var(--success) 16%, var(--surf)) var(--tri-zero-pct),
color-mix(in oklab, var(--warning) 14%, var(--surf)) var(--tri-zero-pct),
color-mix(in oklab, var(--warning) 14%, var(--surf)) var(--tri-mid-pct),
color-mix(in oklab, var(--danger) 14%, var(--surf)) var(--tri-mid-pct),
color-mix(in oklab, var(--danger) 14%, var(--surf)) 100%
);
}
.atlas-tri-ruler__legend {
display: flex;
gap: 18px;
align-items: center;
padding-top: 8px;
border-top: 1px solid var(--bord);
font-size: 10px;
color: var(--muted);
flex-wrap: wrap;
}
.atlas-report-area-card .atlas-priority-badge,
.atlas-report-q4-card .atlas-priority-badge {
margin-top: 8px;
}
/* ── Command palette (global ⌘K — React + HTML estáticos) ── */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.atlas-cmdk-overlay {
position: fixed;
inset: 0;
z-index: 500;
pointer-events: none;
opacity: 0;
transition: opacity .18s ease;
}
.atlas-cmdk-overlay.open {
pointer-events: auto;
opacity: 1;
}
.atlas-cmdk-backdrop {
position: absolute;
inset: 0;
border: none;
padding: 0;
cursor: default;
background: rgba(1, 36, 81, .52);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
body.light .atlas-cmdk-backdrop {
background: rgba(15, 23, 42, .42);
}
.atlas-cmdk-modal {
position: relative;
z-index: 1;
width: min(540px, calc(100vw - 28px));
margin: 10vh auto 0;
background: var(--surf);
border: 1px solid var(--bord);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
transform: translateY(-10px) scale(.98);
transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.atlas-cmdk-overlay.open .atlas-cmdk-modal {
transform: translateY(0) scale(1);
}
.atlas-cmdk-head {
padding: 12px 14px;
border-bottom: 1px solid var(--bord);
background: var(--surf2);
}
.atlas-cmdk-head input {
width: 100%;
border: none;
background: transparent;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
color: var(--text);
outline: none;
}
.atlas-cmdk-head input::placeholder {
color: var(--dim);
}
.atlas-cmdk-list {
max-height: min(400px, 48vh);
overflow-y: auto;
padding: 6px;
}
.atlas-cmdk-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
text-align: left;
padding: 9px 12px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
cursor: pointer;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.35;
transition: background .1s;
}
.atlas-cmdk-item:hover,
.atlas-cmdk-item.atlas-cmdk-item-active {
background: rgba(64, 133, 211, .14);
}
body.light .atlas-cmdk-item:hover,
body.light .atlas-cmdk-item.atlas-cmdk-item-active {
background: rgba(64, 133, 211, .1);
}
.atlas-cmdk-item-label {
font-weight: 600;
}
.atlas-cmdk-item-meta {
font-size: 10px;
color: var(--muted);
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: .5px;
}
.atlas-cmdk-empty {
padding: 16px;
text-align: center;
font-size: 12px;
color: var(--dim);
}
.atlas-cmdk-foot {
padding: 8px 14px;
border-top: 1px solid var(--bord);
font-size: 10px;
color: var(--dim);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.atlas-cmdk-foot kbd {
display: inline-block;
padding: 1px 5px;
border-radius: 4px;
border: 1px solid var(--bord);
font-size: 9px;
font-family: var(--font-mono);
background: var(--surf3);
color: var(--muted);
}
/* ── Banner de escopo dos painéis públicos (Ranking, Raio-X) ─────────────── */
.atlas-scope-banner {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 14px;
margin-bottom: 16px;
border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--bord));
background: color-mix(in oklab, var(--accent) 6%, var(--surf));
border-radius: var(--r-md);
}
.atlas-scope-banner__lead {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.atlas-scope-banner__icon {
color: var(--accent);
flex-shrink: 0;
}
.atlas-scope-banner__text {
font-size: 12.5px;
color: var(--muted);
line-height: 1.45;
}
.atlas-scope-banner__text strong {
color: var(--text);
font-weight: 600;
}
.atlas-scope-banner__cta {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--accent);
background: var(--accent);
color: #fff;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: filter 0.15s ease;
}
.atlas-scope-banner__cta:hover {
filter: brightness(1.08);
}
.atlas-scope-banner__extra {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding-top: 8px;
border-top: 1px solid var(--bord-hair);
}
.atlas-scope-rank {
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.atlas-scope-rank__pos {
font-size: 18px;
font-weight: 800;
color: var(--accent);
letter-spacing: -0.01em;
}
.atlas-scope-rank__lbl {
font-size: 11.5px;
color: var(--muted);
line-height: 1.4;
}
.atlas-scope-rank__lbl strong {
color: var(--text);
font-weight: 600;
}
.atlas-scope-banner__link {
background: none;
border: none;
color: var(--accent);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
padding: 0;
}
.atlas-scope-banner__link:hover {
filter: brightness(1.1);
}
.atlas-scope-me-chip {
display: inline-block;
margin-left: 8px;
padding: 1px 7px;
border-radius: 999px;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #fff;
background: var(--accent);
vertical-align: middle;
}
.atlas-tbl-row--me {
background: color-mix(in oklab, var(--accent) 12%, transparent) !important;
}
.atlas-tbl-row--me td:first-child {
box-shadow: inset 3px 0 0 var(--accent);
}
/* ── Export de gráfico como PNG (botão no hover do EChart) ── */
.atlas-echart-wrap { position: relative; }
.atlas-echart-export {
position: absolute;
top: 6px;
right: 6px;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: var(--r-sm);
border: 1px solid var(--bord);
background: var(--surf2);
color: var(--muted);
cursor: pointer;
opacity: 0;
transform: translateY(-2px);
transition: opacity .16s ease, transform .16s ease, color .16s ease;
}
.atlas-echart-wrap:hover .atlas-echart-export,
.atlas-echart-export:focus-visible {
opacity: 1;
transform: translateY(0);
}
.atlas-echart-export:hover {
color: var(--text);
border-color: var(--accent);
}
/* Nunca aparecer em capturas de PDF nem em impressão. */
body.atlas-pdf-capturing .atlas-echart-export {
display: none;
}
@media print {
.atlas-echart-export { display: none; }
}
/* ─────────────────────────────────────────────────────────────
PRINT MEDIA QUERIES
Garante que exportação para PDF renderize os dashboards
corretamente (sem cortes e com cores completas).
───────────────────────────────────────────────────────────── */
@media print {
/* Força fundos e cores a aparecerem no PDF */
html, body {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
background: white !important;
}
body, .atlas-shell, .atlas-shell--motion {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
display: block !important;
}
/* Oculta navegação e botões interativos */
.atlas-topbar,
.atlas-sidebar,
.atlas-sidebar-toggle,
.atlas-btn-export,
.atlas-cmdk-trigger,
.atlas-switcher {
display: none !important;
}
/* Libera a área de conteúdo para ocupar a página toda */
.atlas-content {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
min-height: 0 !important;
overflow: visible !important;
display: block !important;
}
/* Garante largura total nos layouts */
.atlas-panel,
.atlas-premium-page,
.atlas-shell-main {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
display: block !important;
}
/* Impede que cards sejam cortados ao meio na quebra de página */
.atlas-premium-surface-card {
page-break-inside: avoid;
break-inside: avoid;
}
/* Blocos ds-* dos outros painéis (ficha, pitch, conteúdo, censo, cruzada). */
[class^="ds-"],
[class*=" ds-"],
.ds-chart-card,
.ds-surface,
.ds-numstrip,
.ds-stack,
.ds-acao,
.ds-porta,
.ds-cesta,
.ds-table-wrap,
.atlas-card,
.chart-card {
page-break-inside: avoid;
break-inside: avoid;
}
/* Ficha da escola, Pitch e Análise de Conteúdo saem em página inteira. */
.atlas-print-page {
width: 100% !important;
max-width: none !important;
break-inside: auto;
page-break-inside: auto;
}
.atlas-print-page--ficha,
.atlas-print-page--pitch,
.atlas-print-page--conteudo {
break-before: page;
page-break-before: always;
}
.atlas-print-page--ficha:first-child,
.atlas-print-page--pitch:first-child,
.atlas-print-page--conteudo:first-child {
break-before: auto;
page-break-before: auto;
}
/* Força os scroll-areas a revelarem o conteúdo oculto */
.atlas-tab-panel,
.atlas-scroll-area {
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
}
/* ── TabDistribuicaoNotas ─────────────────────────────────────────────────── */
.adist-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 60px 20px;
color: var(--muted);
font-size: 14px;
}
.adist-loading--sm { padding: 30px; font-size: 12px; }
/* ── HERO (seção de contexto — abaixo do AtlasPageHeader; sem visual de 2º hero) ── */
.adist-hero {
position: relative;
overflow: hidden;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--surf2);
padding: 18px 20px 14px;
margin-bottom: 20px;
}
.adist-hero-map-bg {
display: none;
}
.adist-hero-head { position: relative; margin-bottom: 12px; }
.adist-hero-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 4px;
}
.adist-hero-title {
font-size: 15px;
font-weight: 700;
color: var(--fg);
letter-spacing: -0.01em;
}
.adist-hero-grid {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
@media (max-width: 900px) { .adist-hero-grid { grid-template-columns: repeat(2, 1fr); } }
.adist-hero-card {
position: relative;
border-radius: 10px;
padding: 12px;
background: color-mix(in srgb, var(--adist-area) 6%, var(--surf3));
border: 1px solid color-mix(in srgb, var(--adist-area) 20%, var(--border));
overflow: hidden;
}
.adist-hero-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--adist-area);
}
.adist-hero-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.adist-hero-chip {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
color: #fff;
background: var(--adist-area);
border-radius: 6px;
padding: 2px 6px;
}
.adist-hero-area { font-size: 12px; font-weight: 600; color: var(--fg); }
.adist-hero-max { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.adist-hero-max-val {
font-size: 22px;
font-weight: 800;
line-height: 1;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.adist-hero-mil {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 9.5px;
font-weight: 700;
color: #fff;
background: linear-gradient(90deg, #d4a017, #e2a43d);
border-radius: 999px;
padding: 2px 7px;
white-space: nowrap;
}
.adist-hero-max-lbl {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
margin-top: 2px;
}
.adist-hero-rule { height: 1px; background: var(--border); margin: 10px 0; }
.adist-hero-bottom { display: flex; justify-content: space-between; gap: 8px; }
.adist-hero-mid { display: flex; flex-direction: column; }
.adist-hero-mid--min { text-align: right; }
.adist-hero-mid-val { font-size: 16px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.1; }
.adist-hero-mid-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.adist-hero-note {
position: relative;
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 10.5px;
color: var(--muted);
margin-top: 14px;
line-height: 1.5;
}
.adist-hero-note svg { flex-shrink: 0; margin-top: 2px; }
/* ── MAP section ── */
.adist-map-section {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
@media (max-width: 860px) { .adist-map-section { grid-template-columns: 1fr; } }
.adist-card--map, .adist-card--rank { margin-bottom: 0; }
.adist-map { position: relative; }
.adist-map-svg { width: 100%; height: auto; max-height: 420px; display: block; }
.adist-map-state {
cursor: pointer;
transition: fill 0.15s, stroke 0.1s;
}
.adist-map-state:hover { stroke: #fff; stroke-width: 1.4; }
.adist-map-overlay {
position: absolute;
top: 6px;
left: 6px;
pointer-events: none;
}
.adist-map-tip-uf { font-size: 13px; font-weight: 700; color: var(--fg); }
.adist-map-tip-val { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.adist-map-tip-sub { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.adist-map-hint { font-size: 11px; color: var(--muted); font-style: italic; }
.adist-map-scale {
position: absolute;
bottom: -34px;
left: 6px;
display: flex;
align-items: center;
gap: 6px;
pointer-events: none;
}
.adist-map-scale-bar { width: 90px; height: 8px; border-radius: 4px; }
.adist-map-scale-num { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* ── Ranking list ── */
.adist-rank-list { display: flex; flex-direction: column; gap: 3px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.adist-rank-row {
display: flex;
align-items: center;
gap: 8px;
padding: 3px 6px;
border-radius: 6px;
background: transparent;
border: none;
cursor: pointer;
width: 100%;
text-align: left;
transition: background 0.1s;
}
.adist-rank-row:hover { background: var(--surf3); }
.adist-rank-row--hl { background: color-mix(in srgb, var(--accent) 10%, var(--surf3)); }
.adist-rank-pos { font-size: 10px; color: var(--muted); width: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.adist-rank-uf { font-size: 12px; font-weight: 700; color: var(--fg); width: 26px; }
.adist-rank-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.adist-rank-track { flex: 1; height: 7px; background: var(--surf2); border-radius: 4px; overflow: hidden; }
.adist-rank-fill { height: 100%; border-radius: 4px; opacity: 0.8; }
.adist-rank-val { font-size: 12px; font-weight: 700; color: var(--fg); width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
/* ── View toggle ── */
.adist-view-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.adist-tab {
padding: 7px 16px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surf2);
color: var(--muted);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.adist-tab:hover { color: var(--fg); border-color: var(--accent); }
.adist-tab--active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Wrapper de layout — o campo em si usa a classe global .atlas-select. */
.adist-region-select {
display: inline-flex;
align-items: center;
}
.adist-region-select select { width: auto; font-size: 12px; font-weight: 600; cursor: pointer; }
/* ── Evolution chart ── */
.adist-evo { margin-top: 4px; }
.adist-evo-stats {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 12px;
}
.adist-evo-stat { display: flex; flex-direction: column; }
.adist-evo-stat-val { font-size: 20px; font-weight: 800; color: var(--fg); line-height: 1; font-variant-numeric: tabular-nums; }
.adist-evo-stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }
.adist-evo-chart-wrap { width: 100%; }
.adist-evo-svg { width: 100%; height: auto; display: block; }
.adist-evo-axis { font-size: 10px; fill: var(--muted); }
.adist-evo-tip-year { font-size: 12px; font-weight: 700; fill: var(--fg); }
.adist-evo-tip-line { font-size: 11px; font-weight: 600; }
.adist-evo-legend {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 10px;
font-size: 11px;
color: var(--muted);
}
.adist-evo-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.adist-evo-leg-band { width: 16px; height: 10px; border-radius: 2px; opacity: 0.2; }
.adist-evo-leg-rec { width: 12px; height: 12px; border-radius: 50%; border: 1.6px solid #e2a43d; }
.adist-evo-empty {
display: flex;
align-items: center;
gap: 8px;
padding: 24px;
color: var(--muted);
font-size: 13px;
background: var(--surf3);
border-radius: 10px;
}
/* ── Controls ── */
.adist-controls { margin-bottom: 16px; }
.adist-controls-label { font-size: 11px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.adist-school-banner {
display: flex;
align-items: center;
gap: 10px;
background: color-mix(in srgb, var(--accent) 8%, var(--surf2));
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.adist-school-banner__icon {
color: var(--accent);
flex-shrink: 0;
}
.adist-school-banner__body {
flex: 1;
min-width: 0;
font-size: 13px;
color: var(--fg);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.adist-school-banner__sep { color: var(--muted); }
.adist-school-banner__hint { color: var(--muted); font-size: 12px; }
.adist-school-banner__scores {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.adist-school-badge {
display: flex;
flex-direction: column;
align-items: center;
background: var(--surf3);
border-radius: 8px;
padding: 4px 10px;
min-width: 52px;
}
.adist-school-badge__area {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
color: var(--muted);
letter-spacing: 0.04em;
}
.adist-school-badge__val {
font-size: 16px;
font-weight: 700;
line-height: 1.1;
}
.adist-school-badge__delta { font-size: 11px; font-weight: 600; }
/* Controls */
.adist-controls {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.adist-pill-group {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* Tokens alinhados às .atlas-filter-pill do CSS global (padding/fonte/sombra ativa). */
.adist-pill {
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surf2);
color: var(--muted);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.adist-pill:hover {
border-color: var(--accent);
color: var(--accent);
}
.adist-pill--active {
background: var(--adist-pill-accent, var(--accent));
border-color: var(--adist-pill-accent, var(--accent));
color: #fff;
box-shadow: 0 2px 8px color-mix(in oklab, var(--adist-pill-accent, var(--accent)) 28%, transparent);
}
/* Legend */
.adist-legend {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.adist-legend__item {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--muted);
}
/* Card */
.adist-card {
background: var(--surf2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
}
.adist-section-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--fg);
margin-bottom: 12px;
}
.adist-muted-note {
font-size: 12px;
color: var(--muted);
margin-bottom: 14px;
line-height: 1.5;
}
/* Table */
.adist-table-wrap {
overflow-x: auto;
}
.adist-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.adist-th {
padding: 8px 10px;
text-align: left;
font-size: 11px;
font-weight: 600;
color: var(--muted);
border-bottom: 1px solid var(--border);
white-space: nowrap;
background: var(--surf3);
}
.adist-th--label { min-width: 110px; }
.adist-th--center { text-align: center; }
.adist-th--area { text-align: center; min-width: 240px; }
.adist-tr { transition: background 0.1s; }
.adist-tr:hover { background: var(--surf3); }
.adist-tr--highlight { background: color-mix(in srgb, var(--accent) 5%, var(--surf2)); }
.adist-td {
padding: 6px 10px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.adist-td--label { font-weight: 600; font-size: 13px; white-space: nowrap; }
.adist-td--center { text-align: center; }
.adist-td--plot { min-width: 240px; }
.adist-muted { color: var(--muted); font-size: 12px; }
.adist-label--highlight { color: var(--accent); }
.adist-badge-escola {
margin-left: 6px;
font-size: 10px;
background: var(--accent);
color: #fff;
border-radius: 6px;
padding: 1px 6px;
font-weight: 600;
}
.adist-plot-wrap {
display: flex;
flex-direction: column;
gap: 3px;
width: 200px;
}
.adist-boxplot {
display: block;
width: 200px;
height: 22px;
}
.adist-values {
display: flex;
width: 200px;
font-size: 10px;
font-variant-numeric: tabular-nums;
}
.adist-val {
color: var(--muted);
flex: 1 1 0;
}
.adist-val--min { text-align: left; }
.adist-val--med { font-weight: 700; font-size: 11px; text-align: center; }
.adist-val--max { text-align: right; }
/* Extremes */
.adist-extremes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
.adist-extreme-card {
border: 1px solid var(--border);
border-top-width: 3px;
border-radius: 10px;
padding: 12px;
background: var(--surf3);
}
.adist-extreme-area {
font-size: 12px;
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.adist-extreme-row {
display: flex;
gap: 8px;
align-items: center;
}
.adist-extreme-item {
flex: 1;
text-align: center;
}
.adist-extreme-label { font-size: 10px; font-weight: 600; margin-bottom: 2px; }
.adist-extreme-val { font-size: 18px; font-weight: 800; color: var(--fg); line-height: 1; }
.adist-extreme-sub { font-size: 9px; color: var(--muted); margin-top: 2px; }
.adist-extreme-divider {
width: 1px;
height: 36px;
background: var(--border);
flex-shrink: 0;
}
/* Regional comparison */
.adist-region-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.adist-region-card {
border: 1px solid var(--border);
border-left: 3px solid var(--border);
border-radius: 10px;
padding: 12px;
background: var(--surf3);
}
.adist-region-header {
font-size: 13px;
font-weight: 700;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.adist-region-n {
font-size: 10px;
color: var(--muted);
font-weight: 400;
}
.adist-region-bars { display: flex; flex-direction: column; gap: 5px; }
.adist-region-bar-row {
display: flex;
align-items: center;
gap: 6px;
}
.adist-region-bar-label {
font-size: 10px;
font-weight: 600;
color: var(--muted);
width: 30px;
flex-shrink: 0;
}
.adist-region-bar-track {
flex: 1;
height: 8px;
background: var(--surf2);
border-radius: 4px;
overflow: hidden;
}
.adist-region-bar-fill {
height: 100%;
border-radius: 4px;
opacity: 0.75;
transition: width 0.4s ease;
}
.adist-region-bar-val {
font-size: 11px;
font-weight: 700;
color: var(--fg);
width: 34px;
text-align: right;
flex-shrink: 0;
}
.adist-region-bar-delta {
font-size: 10px;
font-weight: 600;
width: 30px;
text-align: right;
flex-shrink: 0;
}
/* Footnote */
.adist-footnote {
font-size: 11px;
color: var(--muted);
text-align: center;
padding: 8px 0 4px;
border-top: 1px solid var(--border);
margin-top: 8px;
}
/* ── Raio-X da rede (escopo Minha rede) ───────────────────────────────────── */
.rx-plots { display: grid; gap: 14px; }
.rx-plot-row {
display: grid;
grid-template-columns: 160px 1fr 120px;
gap: 16px;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.rx-plot-row:last-child { border-bottom: 0; padding-bottom: 0; }
.rx-plot-row__lab { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rx-plot-row__lab strong { font-size: 14px; }
.rx-plot-row__box { min-width: 0; }
.rx-plot-row__num { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.rx-plot-row__escola {
font-family: var(--font-display, inherit);
font-size: 22px;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1.15;
}
.rx-plot-row__delta { font-size: 12px; color: var(--text-tertiary); }
.rx-habs { display: grid; gap: 0; }
.rx-habs__row {
display: grid;
grid-template-columns: 1fr 80px 100px;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.rx-habs__row--head {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.rx-sintese {
margin: 0;
padding-left: 18px;
display: grid;
gap: 8px;
font-size: 14px;
line-height: 1.45;
}
.rx-habs__bars {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 6px;
max-width: 220px;
}
.rx-habs__bars i {
display: block;
height: 5px;
border-radius: 99px;
min-width: 4px;
}
.rx-empty { color: var(--muted); font-size: 13px; }
.rx-escopo { margin-bottom: 4px; }
@media (max-width: 800px) {
.rx-plot-row { grid-template-columns: 1fr; }
.rx-plot-row__num { text-align: left; }
}
/* ─────────────────────────────────────────────────────────────
20. DESIGN SYSTEM v2 (T9 · D1)
Componentes React em src/components/atlas/: PageHeader, InsightStrip,
KpiCard, ChartCard, DataTable, AreaTag, DeltaPill. Só tokens semânticos
(bg/*, border/*, text/*, status/*, area/*, chart/*, --above/--below).
Superfícies neutras; cor de área só marca (ponto, série, barra).
───────────────────────────────────────────────────────────── */
.ds-num {
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.ds-code {
font-family: var(--font-mono);
font-size: 0.92em;
}
.ds-surface {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
box-shadow: var(--sh-xs);
}
/* ── PageHeader ─────────────────────────────────────────────── */
.ds-page-header {
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 0 16px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 20px;
}
.ds-page-header__row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.ds-page-header__eyebrow {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.ds-page-header__title {
font-family: var(--font-display);
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 650;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--text-primary);
margin: 2px 0 0;
}
.ds-page-header__subtitle {
margin: 4px 0 0;
max-width: 78ch;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
.ds-page-header__eyebrow-icon { display: inline-flex; align-items: center; gap: 6px; }
.ds-page-header__eyebrow-icon svg { width: 13px; height: 13px; }
.ds-page-header__insight {
padding: 8px 12px;
border-left: 3px solid var(--accent);
border-radius: 0 var(--r-md) var(--r-md) 0;
background: var(--bg-subtle);
font-size: 13px;
line-height: 1.5;
color: var(--text-primary);
}
.ds-page-header__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.ds-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--r-full);
border: 1px solid var(--border-subtle);
background: var(--bg-subtle);
color: var(--text-secondary);
font-size: 12px;
line-height: 1.4;
}
.ds-page-header__controls {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ds-page-header__base {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: var(--text-secondary);
}
.ds-page-header__base strong {
color: var(--text-primary);
font-weight: 600;
}
/* ── Botão "Como ler" (ajuda recolhida) ─────────────────────── */
.ds-help-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--r-full);
border: 1px solid var(--border-subtle);
background: transparent;
color: var(--text-secondary);
font-size: 12px;
cursor: pointer;
}
.ds-help-toggle:hover { color: var(--text-primary); border-color: var(--border-default); }
.ds-help-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* ── InsightStrip ───────────────────────────────────────────── */
.ds-insight-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.ds-insight {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px 14px 18px;
overflow: hidden;
}
.ds-insight::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--ds-insight-accent, var(--border-strong));
}
.ds-insight--destaque { --ds-insight-accent: var(--above); }
.ds-insight--atencao { --ds-insight-accent: var(--below); }
.ds-insight--prioridade { --ds-insight-accent: var(--status-warning); }
.ds-insight__kind {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.ds-insight__title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: var(--text-primary);
}
.ds-insight__body {
font-size: 13px;
line-height: 1.45;
color: var(--text-secondary);
}
.ds-insight__link {
align-self: flex-start;
margin-top: 2px;
padding: 0;
border: 0;
background: none;
font-size: 12px;
font-weight: 600;
color: var(--accent);
cursor: pointer;
}
.ds-insight__link:hover { text-decoration: underline; }
/* ── KpiCard ────────────────────────────────────────────────── */
.ds-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.ds-kpi {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
min-width: 0;
}
.ds-kpi__label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
}
.ds-kpi__value {
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
font-size: 30px;
font-weight: 650;
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--text-primary);
}
.ds-kpi__unit {
margin-left: 4px;
font-size: 13px;
font-weight: 500;
color: var(--text-tertiary);
}
.ds-kpi__pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ds-kpi__sub {
font-size: 12px;
color: var(--text-tertiary);
}
/* ── DeltaPill ──────────────────────────────────────────────── */
.ds-delta {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--r-full);
font-size: 11.5px;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
border: 1px solid transparent;
}
.ds-delta__num {
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
}
.ds-delta__ctx { font-weight: 500; opacity: 0.85; }
.ds-delta--above { color: var(--above); background: var(--above-soft); }
.ds-delta--below { color: var(--below); background: var(--below-soft); }
.ds-delta--positive { color: var(--above); background: var(--above-soft); }
.ds-delta--negative { color: var(--below); background: var(--below-soft); }
.ds-delta--neutral {
color: var(--text-secondary);
background: var(--bg-subtle);
border-color: var(--border-subtle);
}
/* ── AreaTag ────────────────────────────────────────────────── */
.ds-area-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
}
.ds-area-tag__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ds-area, var(--text-tertiary));
flex: none;
}
.ds-area-tag--muted { color: var(--text-secondary); font-weight: 500; }
/* ── ChartCard ──────────────────────────────────────────────── */
.ds-chart-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 18px 12px;
min-width: 0;
}
.ds-chart-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.ds-chart-card__eyebrow {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.ds-chart-card__title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text-primary);
margin: 0;
}
.ds-chart-card__subtitle {
margin: 3px 0 0;
font-size: 12.5px;
line-height: 1.45;
color: var(--text-secondary);
}
.ds-chart-card__actions {
display: flex;
align-items: center;
gap: 6px;
flex: none;
}
.ds-chart-card__body { position: relative; min-width: 0; }
.ds-chart-card__help {
padding: 10px 12px;
border-radius: var(--r-md);
background: var(--bg-subtle);
font-size: 12.5px;
line-height: 1.5;
color: var(--text-secondary);
}
.ds-chart-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
padding-top: 8px;
border-top: 1px solid var(--border-subtle);
font-size: 11.5px;
color: var(--text-tertiary);
}
/* ── DataTable ──────────────────────────────────────────────── */
.ds-table-wrap {
width: 100%;
overflow-x: auto;
}
.ds-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
color: var(--text-primary);
}
.ds-table caption {
caption-side: top;
text-align: left;
padding: 0 0 8px;
font-size: 12px;
color: var(--text-secondary);
}
.ds-table th {
padding: 8px 10px;
border-bottom: 1px solid var(--border-default);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: left;
color: var(--text-tertiary);
white-space: nowrap;
}
.ds-table td {
padding: 10px;
border-bottom: 1px solid var(--border-subtle);
vertical-align: middle;
}
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover td { background: color-mix(in oklab, var(--bg-subtle) 70%, transparent); }
.ds-table .ds-table__num {
text-align: right;
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ds-table th.ds-table__num { font-family: var(--font-sans); }
.ds-table--dense td { padding: 6px 10px; }
.ds-bar {
position: relative;
display: block;
width: 100%;
min-width: 80px;
height: 8px;
border-radius: 4px;
background: var(--chart-track);
}
.ds-bar__fill {
position: absolute;
top: 0;
bottom: 0;
border-radius: 4px;
background: var(--ds-bar, var(--text-tertiary));
}
.ds-bar__zero {
position: absolute;
top: -3px;
bottom: -3px;
left: 50%;
width: 1px;
background: var(--border-strong);
}
.ds-bar-cell {
display: flex;
align-items: center;
gap: 8px;
}
.ds-bar-cell .ds-table__num { min-width: 48px; }
/* ── Layout de tela ─────────────────────────────────────────── */
.ds-stack {
display: flex;
flex-direction: column;
gap: 20px;
}
.ds-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: start;
}
@media (max-width: 1080px) {
.ds-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
/* Cartões lado a lado com a mesma altura; o gráfico do `--fill` ocupa a sobra. */
.ds-grid-2--stretch { align-items: stretch; }
.ds-chart-card--fill .ds-chart-card__body { flex: 1; min-height: 300px; }
.ds-chart-card__fill { position: absolute; inset: 0; }
/* ── Sparkline (SVG inline em tabela) ───────────────────────── */
.ds-sparkline-ends {
display: inline-flex;
align-items: center;
gap: 8px;
}
.ds-sparkline-ends__val {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
font-size: 12px;
color: var(--text-secondary);
line-height: 1.15;
min-width: 40px;
}
.ds-sparkline-ends__val--last {
align-items: flex-start;
color: var(--text-primary);
font-weight: 600;
}
.ds-sparkline-ends__year {
font-size: 11px;
font-weight: 400;
color: var(--text-tertiary);
}
.ds-sparkline {
display: block;
overflow: visible;
}
.ds-sparkline__line {
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ── Lista de habilidades ("Onde agir primeiro") ────────────── */
.ds-hab-list {
display: flex;
flex-direction: column;
}
.ds-hab-row {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) 132px;
gap: 12px;
align-items: start;
padding: 10px 0;
border-top: 1px solid var(--border-subtle);
}
.ds-hab-row:first-child { border-top: 0; }
.ds-hab-row__desc {
font-size: 13px;
line-height: 1.45;
color: var(--text-primary);
}
.ds-hab-row__meta {
margin-top: 2px;
font-size: 11.5px;
color: var(--text-tertiary);
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
}
.ds-hab-row__gap {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.ds-hab-row__gap .ds-bar { width: 100%; }
/* ── Habilidade em célula de tabela (código + texto) ────────── */
.ds-hab-cell { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.ds-hab-cell .atlas-code { flex-shrink: 0; min-width: 52px; }
.ds-hab-cell__desc { font-size: 12.5px; line-height: 1.4; color: var(--text-primary); white-space: normal; }
/* ── Controles de tela ──────────────────────────────────────── */
.ds-filter-row { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ds-btn-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: var(--r-md);
border: 1px solid var(--accent);
background: var(--accent);
color: #fff;
font: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.ds-btn-cta:hover { filter: brightness(1.08); }
.ds-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: var(--accent);
text-decoration: none;
white-space: nowrap;
}
.ds-link:hover { text-decoration: underline; }
.ds-status {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
.ds-status--critico { background: color-mix(in oklab, var(--status-negative) 14%, transparent); color: var(--status-negative); }
.ds-status--atencao { background: color-mix(in oklab, var(--status-warning) 16%, transparent); color: var(--status-warning); }
.ds-status--ok { background: color-mix(in oklab, var(--status-positive) 14%, transparent); color: var(--status-positive); }
.ds-sel-chip {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid var(--border-default);
background: var(--bg-subtle);
font-size: 12px;
color: var(--text-secondary);
}
.ds-sel-chip strong { color: var(--text-primary); }
.ds-sel-chip__clear { display: inline-flex; border: 0; background: none; color: var(--text-tertiary); cursor: pointer; padding: 0; }
/* ── Mapa das habilidades (4 × 30) ──────────────────────────── */
.ds-hab-map { display: flex; flex-direction: column; gap: 4px; overflow-x: auto; }
.ds-hab-map__row {
display: grid;
grid-template-columns: 64px repeat(30, minmax(14px, 1fr));
gap: 3px;
align-items: center;
min-width: 560px;
}
.ds-hab-map__row--head { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-num); }
.ds-hab-map__h { text-align: center; }
.ds-hab-map__area {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 0 6px 0 0;
border: 0;
background: none;
font: inherit;
font-size: 12px;
cursor: pointer;
color: var(--text-primary);
}
.ds-hab-map__count { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--below); font-weight: 700; }
.ds-hab-map__cell {
aspect-ratio: 1;
min-height: 14px;
border-radius: 3px;
border: 1px solid transparent;
padding: 0;
cursor: pointer;
background: var(--bg-subtle);
}
.ds-hab-map__cell:hover { outline: 2px solid var(--text-secondary); outline-offset: 1px; }
.ds-hab-map__cell--empty { background: transparent; border: 1px dashed var(--text-tertiary); }
.ds-hab-map__cell--sel { outline: 2px solid var(--text-primary); outline-offset: 1px; }
/* ── Painel de dispersão por área ───────────────────────────── */
.ds-quad-panel { min-width: 0; }
.ds-quad-panel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ds-quad-panel__meta { flex: 1; font-size: 12px; color: var(--text-tertiary); }
/* ── Evolução: gráficos pequenos, "O que mudou", célula com delta ── */
.ds-multiples {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 1280px) { .ds-multiples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ds-multiples { grid-template-columns: minmax(0, 1fr); } }
.ds-multiple {
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 14px 10px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
}
.ds-multiple__head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ds-multiple__value {
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
font-size: 24px;
line-height: 1.1;
font-weight: 650;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.ds-multiple__pills { display: flex; flex-wrap: wrap; gap: 4px; }
.ds-multiple__legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 6px; border-top: 1px solid var(--border-subtle); font-size: 11px; color: var(--text-tertiary); }
.ds-multiple__legend span { display: inline-flex; align-items: center; gap: 5px; }
.ds-multiple__legend i { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.ds-multiple__legend .ds-multiple__legend-dash { background: repeating-linear-gradient(90deg, var(--compare) 0 4px, transparent 4px 7px); }
.ds-multiple__legend .ds-multiple__legend-compare { background: var(--compare); height: 3px; border-radius: 2px; }
.ds-change-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ds-change {
position: relative;
padding: 6px 10px 6px 14px;
border-radius: var(--r-md);
background: var(--bg-subtle);
font-size: 13px;
line-height: 1.45;
color: var(--text-primary);
}
.ds-change::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
border-radius: 2px;
background: var(--text-tertiary);
}
.ds-change--positivo::before { background: var(--above); }
.ds-change--negativo::before { background: var(--below); }
.ds-cell-delta { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.ds-cell-delta__d { font-size: 11px; }
.ds-cell-delta__d--pos { color: var(--above); }
.ds-cell-delta__d--neg { color: var(--below); }
.ds-cell-delta__d--neu { color: var(--text-tertiary); }
/* ── Ponte v1 → v2: cartões antigos com a superfície neutra ─── */
.atlas-premium-surface-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
box-shadow: var(--sh-xs);
}
.atlas-premium-surface-card.atlas-premium-elev-2,
.atlas-premium-surface-card.atlas-premium-elev-3 { box-shadow: var(--sh-xs); }
/* ── Rodapé de fontes da tela ───────────────────────────────── */
.ds-sources {
padding: 14px 4px 4px;
border-top: 1px solid var(--border-subtle);
font-size: 11.5px;
line-height: 1.6;
color: var(--text-tertiary);
}
.ds-sources strong { color: var(--text-secondary); font-weight: 600; }
.ds-sources p { margin: 0 0 4px; }
/* ── Seletor de escola na topbar (⌘K) ───────────────────────── */
.ds-school-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
max-width: min(420px, 38vw);
padding: 0 8px 0 10px;
border: 1px solid var(--border-default);
border-radius: var(--r-md);
background: var(--bg-surface);
color: var(--text-secondary);
font: inherit;
font-size: 12.5px;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
}
.ds-school-trigger:hover { border-color: var(--border-strong); }
.ds-school-trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring-soft, var(--border-strong)); }
.ds-school-trigger__label {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ds-school-trigger__label strong { color: var(--text-primary); font-weight: 600; }
.ds-school-trigger__kbd {
flex: none;
padding: 1px 5px;
border: 1px solid var(--border-subtle);
border-radius: 4px;
background: var(--bg-subtle);
color: var(--text-tertiary);
font-family: var(--font-sans);
font-size: 11px;
}
.ds-school-picker__filters {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
color: var(--text-tertiary);
}
.ds-school-picker__filters select {
height: 28px;
padding: 0 8px;
border: 1px solid var(--border-default);
border-radius: var(--r-sm);
background: var(--bg-surface);
color: var(--text-primary);
font: inherit;
font-size: 12px;
}
.ds-school-picker__group {
padding: 6px 12px 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.ds-school-picker__row {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 0;
color: var(--text-tertiary);
}
.ds-school-picker__row .atlas-cmdk-item-label { display: block; color: var(--text-primary); }
.ds-school-picker__meta {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 2px;
font-size: 11px;
color: var(--text-tertiary);
}
/* ── Abas internas de um item da navegação ──────────────────── */
.ds-subtabs {
display: flex;
margin-bottom: 16px;
}
/* ── Contagem das habilidades (Habilidades prioritárias) ───── */
.ds-hab-count {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 32px;
padding: 22px 24px;
}
@media (max-width: 900px) { .ds-hab-count { grid-template-columns: 1fr; gap: 24px; } }
.ds-hab-count__main, .ds-hab-count__areas { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ds-hab-count__areas { border-left: 1px solid var(--border-subtle); padding-left: 32px; }
@media (max-width: 900px) { .ds-hab-count__areas { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-subtle); padding-top: 20px; } }
.ds-hab-count__stack { display: flex; gap: 3px; height: 12px; border-radius: 6px; overflow: hidden; }
.ds-hab-count__stack > span { min-width: 0; }
.ds-hab-count__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 4px 0 0; }
.ds-hab-count__nums > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-hab-count__nums dd { margin: 0; font-family: var(--font-display, inherit); font-size: 34px; line-height: 1.1; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ds-hab-count__nums dt { font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
.ds-hab-count__note { margin: 0; font-size: 12.5px; color: var(--text-tertiary); }
.ds-hab-count__area {
display: grid;
grid-template-columns: 150px minmax(0, 1fr) 64px;
align-items: center;
gap: 12px;
width: 100%;
padding: 6px 8px;
margin: 0 -8px;
border: 0;
border-radius: 8px;
background: none;
font: inherit;
font-size: 13px;
color: var(--text-secondary);
text-align: left;
cursor: pointer;
}
.ds-hab-count__area:hover { background: var(--bg-surface-2, var(--surf2)); }
.ds-hab-count__area--active { background: var(--bg-surface-2, var(--surf2)); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ds-hab-count__area .ds-table__num { text-align: right; }
.ds-hab-count__area strong { color: var(--text-primary); }
/* ── Faixa de números de uma tela (nota, vs referência, vs ano anterior…) ── */
.ds-numstrip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 20px 24px;
padding: 20px 24px;
margin-bottom: 20px;
}
.ds-numstrip > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-left: 24px; border-left: 1px solid var(--border-subtle); }
.ds-numstrip > div:first-child { padding-left: 0; border-left: 0; }
.ds-numstrip__label { font-size: 12px; color: var(--text-secondary); }
.ds-numstrip__value { font-family: var(--font-display, inherit); font-size: 32px; line-height: 1.15; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ds-numstrip__sub { font-size: 12px; color: var(--text-tertiary); }
/* ── Plano de ação: os quatro grupos de habilidades ────────── */
.ds-swot-groups { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; margin-bottom: 20px; }
.ds-swot-groups__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .ds-swot-groups__grid { grid-template-columns: 1fr; } }
.ds-swot-group {
display: flex; flex-direction: column; gap: 6px;
padding: 16px 18px;
border: 1px solid var(--border-subtle);
border-radius: 12px;
transition: border-color .15s, box-shadow .15s;
}
.ds-swot-group--acao { border-color: color-mix(in srgb, var(--below) 35%, var(--border-subtle)); }
.ds-swot-group--focus { box-shadow: 0 0 0 1px var(--border-strong); }
.ds-swot-group__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ds-swot-group__name { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.ds-swot-group--acao .ds-swot-group__name, .ds-swot-group--acao .ds-swot-group__count, .ds-swot-group--acao .ds-swot-group__acao { color: var(--below); }
.ds-swot-group--forte .ds-swot-group__name, .ds-swot-group--forte .ds-swot-group__count { color: var(--above); }
.ds-swot-group__count { font-family: var(--font-display, inherit); font-size: 30px; line-height: 1.1; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ds-swot-group__desc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.ds-swot-group__acao { font-size: 12px; font-weight: 600; color: var(--text-tertiary); }
.ds-swot-groups__foot { margin: 0; font-size: 12px; color: var(--text-tertiary); }
/* ── Nota no cabeçalho do Resumo: card discreto ──────────── */
.ds-page-header--score .ds-page-header__row { align-items: flex-start; }
.ds-page-header--score .ds-page-header__controls { flex-direction: column; align-items: flex-end; gap: 8px; }
.ds-score-card {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 220px;
padding: 12px 16px 14px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
}
.ds-score-card__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.ds-score-card__value { font-family: var(--font-num); font-size: 28px; line-height: 1.15; font-weight: 650; letter-spacing: -0.01em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ds-score-card__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
/* ── Tendência e lacunas por área (linhas que abrem) ────────── */
.ds-trend { display: flex; flex-direction: column; }
.ds-trend__head, .ds-trend__row {
display: grid;
grid-template-columns: 20px minmax(150px, 1.1fr) minmax(300px, 2fr) 90px 150px;
align-items: center;
gap: 12px;
}
.ds-trend__head { padding: 0 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle); }
.ds-trend__num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-trend__item { border-bottom: 1px solid var(--border-subtle); }
.ds-trend__row {
width: 100%;
padding: 6px 12px;
border: 0;
background: none;
font: inherit;
font-size: 13px;
color: var(--text-primary);
text-align: left;
cursor: pointer;
border-radius: 8px;
transition: background .15s;
}
.ds-trend__row:hover { background: var(--bg-subtle); }
.ds-trend__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ds-trend__chev { color: var(--text-tertiary); transition: transform .18s; }
.ds-trend__item--open .ds-trend__chev { transform: rotate(90deg); color: var(--text-primary); }
.ds-trend__item--open .ds-trend__row { background: var(--bg-subtle); border-radius: 8px 8px 0 0; }
.ds-trend__muted { color: var(--text-tertiary); font-weight: 400; }
.ds-trend__panel {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.6fr);
gap: 24px;
padding: 16px 16px 18px 44px;
background: var(--bg-subtle);
border-radius: 0 0 8px 8px;
margin-bottom: 8px;
}
@media (max-width: 1100px) {
.ds-trend__head, .ds-trend__row { grid-template-columns: 20px minmax(120px, 1fr) minmax(220px, 1.6fr) 70px 110px; }
.ds-trend__panel { grid-template-columns: 1fr; padding-left: 16px; }
}
.ds-trend__panel h4 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.ds-trend__years { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ds-trend__years li, .ds-trend__dist div { display: grid; grid-template-columns: 1fr auto 56px; gap: 8px; font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ds-trend__years strong { color: var(--text-primary); font-weight: 600; text-align: right; }
.ds-trend__delta { text-align: right; font-size: 12px; font-weight: 600; }
.ds-trend__dist { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ds-trend__dist div { grid-template-columns: 1fr auto; }
.ds-trend__dist dt { margin: 0; }
.ds-trend__dist dd { margin: 0; color: var(--text-primary); font-weight: 600; text-align: right; }
.ds-trend__habs { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ds-trend__habs li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 12.5px; }
.ds-trend__hab-desc { color: var(--text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ds-trend__gap { color: var(--below); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-trend__link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; }
.ds-trend__link:hover { text-decoration: underline; }
/* ── Série com todos os anos rotulados ─────────────────────── */
.ds-sparkline--labeled { overflow: visible; }
.ds-sparkline__val { font-size: 11px; fill: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ds-sparkline__val--last { font-weight: 700; fill: var(--text-primary); }
.ds-sparkline__year { font-size: 11px; fill: var(--text-tertiary); }
/* ── Taxonomia de Bloom ─────────────────────────────────────── */
.ds-bloom-conc { display: flex; flex-direction: column; gap: 12px; }
.ds-bloom-conc__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 170px; gap: 14px; align-items: center; }
.ds-bloom-conc__nivel { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ds-bloom-conc__bars { display: flex; flex-direction: column; gap: 4px; }
.ds-bloom-conc__num { font-size: 12px; line-height: 1.35; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ds-bloom-grid { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 12.5px; min-width: 640px; }
.ds-bloom-grid th { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); text-align: center; padding: 4px; }
.ds-bloom-grid th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 13px; text-align: left; white-space: nowrap; color: var(--text-primary); }
.ds-bloom-grid__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.ds-bloom-grid td { text-align: center; padding: 10px 6px; border-radius: 8px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ds-bloom-grid td strong { display: block; font-size: 15px; }
.ds-bloom-grid td span { font-size: 11.5px; opacity: .9; }
.ds-bloom-grid__empty { color: var(--text-tertiary) !important; background: var(--bg-surface-2, var(--surf2)); }
.ds-bloom-acao { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ds-bloom-acao__card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--border-subtle); border-radius: 12px; }
.ds-bloom-acao__card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ds-bloom-acao__nivel { font-family: var(--font-display, inherit); font-size: 17px; font-weight: 600; color: var(--text-primary); }
.ds-bloom-acao__n { font-size: 12px; font-weight: 600; color: var(--below); white-space: nowrap; }
.ds-bloom-acao--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .ds-bloom-acao--2 { grid-template-columns: 1fr; } }
.ds-bloom-acao__foco, .ds-bloom-acao__acao { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.ds-bloom-acao__card ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.ds-bloom-acao__card li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 12px; }
.ds-bloom-acao__desc { color: var(--text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ds-bloom-acao__gap { color: var(--below); font-weight: 600; white-space: nowrap; }
/* ── Régua TRI: rótulo de área no padrão do resto ────────── */
.atlas-tri-ruler__area { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.atlas-tri-ruler__area span { width: 9px; height: 9px; border-radius: 50%; }
.atlas-tri-ruler__area em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--text-tertiary); }
/* ── Cobertura de competências ─────────────────────────────── */
.ds-cob { display: flex; flex-direction: column; }
.ds-cob__head, .ds-cob__row { display: grid; grid-template-columns: 20px minmax(220px, 1.3fr) minmax(200px, 2fr) 64px 84px; align-items: center; gap: 12px; }
.ds-cob__head { padding: 0 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle); }
.ds-cob__row { width: 100%; padding: 8px 12px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-primary); text-align: left; cursor: pointer; border-radius: 8px; transition: background .15s; }
.ds-cob__row:hover { background: var(--bg-subtle); }
.ds-cob__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ds-trend__item--open .ds-cob__row { background: var(--bg-subtle); border-radius: 8px 8px 0 0; }
.ds-cob__name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ds-cob__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ds-cob__name .atlas-code { font-weight: 700; flex-shrink: 0; }
.ds-cob__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.ds-cob__track { position: relative; height: 10px; border-radius: 5px; background: var(--chart-track, var(--bg-subtle)); }
.ds-cob__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; opacity: .85; }
.ds-cob__mark { position: absolute; top: -3px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--text-primary); opacity: .7; }
.ds-cob__panel { padding: 8px 16px 14px 44px; background: var(--bg-subtle); border-radius: 0 0 8px 8px; margin-bottom: 8px; }
.ds-cob__habs { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ds-cob__habs th { padding: 6px 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); text-align: left; border-bottom: 1px solid var(--border-subtle); }
.ds-cob__habs td { padding: 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; font-variant-numeric: tabular-nums; }
.ds-cob__habs tr:last-child td { border-bottom: 0; }
.ds-cob__desc { color: var(--text-secondary); }
.ds-cob__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ds-cob__chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--r-full); border: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.ds-cob__chip--below { border-color: color-mix(in srgb, var(--below) 40%, var(--border-subtle)); color: var(--below); background: var(--below-soft); }
.ds-cob__chip em { font-style: normal; font-family: var(--font-sans); font-weight: 600; }
@media (max-width: 900px) { .ds-cob__head, .ds-cob__row { grid-template-columns: 20px minmax(150px, 1fr) minmax(120px, 1fr) 56px 72px; } }
/* ── Evolução de competências: halteres antes → depois ─────── */
.ds-dumb { position: relative; display: block; height: 14px; }
.ds-dumb::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: var(--chart-track, var(--bg-subtle)); }
.ds-dumb__span { position: absolute; top: 5px; height: 4px; border-radius: 2px; opacity: .45; }
.ds-dumb__dot { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 2px solid var(--bg-surface); box-sizing: content-box; }
.ds-dumb__dot--antes { background: var(--border-strong); }
.ds-dumb__zero { position: absolute; top: -2px; width: 1px; height: 18px; background: var(--text-tertiary); opacity: .6; }
.ds-evo__head--plain, .ds-evo__row { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(200px, 2fr) 64px 64px 84px; align-items: center; gap: 12px; }
.ds-evo__row { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.ds-evo__row:last-child { border-bottom: 0; }
/* ── Análise avançada: legenda das faixas e simulador ─────── */
.ds-faixas-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; font-size: 12px; color: var(--text-secondary); }
.ds-faixas-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.ds-faixas-legenda i { width: 10px; height: 10px; border-radius: 2px; }
.ds-sim { display: flex; flex-direction: column; gap: 16px; }
.ds-sim__control { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-secondary); max-width: 520px; }
.ds-sim__control strong { color: var(--text-primary); }
.ds-sim__control input[type="range"] { width: 100%; accent-color: var(--accent); }
.ds-faixas-sel { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* ── Simulador de metas ────────────────────────────────────── */
.ds-metas__head, .ds-metas__row { display: grid; grid-template-columns: minmax(150px, 1fr) 72px minmax(200px, 2.2fr) 56px 72px; align-items: center; gap: 14px; }
.ds-metas__head { padding: 0 4px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle); }
.ds-metas__row { padding: 10px 4px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-primary); }
.ds-metas__row:last-child { border-bottom: 0; }
.ds-metas__row input[type="range"] { width: 100%; }
/* ── Faixa "Próximo passo" ao fim de cada tela da narrativa ── */
.ds-next-step {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 24px;
padding: 14px 20px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md, 12px);
font-size: 13.5px;
line-height: 1.45;
color: var(--text-secondary);
}
.ds-next-step strong { color: var(--text-primary); font-weight: 600; }
.ds-next-step__btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 13px;
font-weight: 600;
color: var(--accent);
cursor: pointer;
white-space: nowrap;
}
.ds-next-step__btn:hover { text-decoration: underline; }
.ds-next-step__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media print { .ds-next-step { display: none; } }
/* ── Catálogo (/admin/design-system) ────────────────────────── */
.ds-catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
}
.ds-swatch {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--text-secondary);
}
.ds-swatch__chip {
width: 28px;
height: 28px;
border-radius: var(--r-sm);
border: 1px solid var(--border-subtle);
flex: none;
}
@media (max-width: 640px) {
.ds-page-header__title { font-size: 22px; }
.ds-kpi__value { font-size: 26px; }
.ds-kpi-grid { grid-template-columns: minmax(0, 1fr); }
.ds-hab-row { grid-template-columns: 52px minmax(0, 1fr); }
.ds-hab-row__gap { grid-column: 2; align-items: flex-start; }
.ds-school-trigger { max-width: 52vw; }
.ds-school-trigger__kbd { display: none; }
}
/* ── Shell responsivo: gaveta < 1024 px, topbar compacta, sem rolagem horizontal ── */
.atlas-drawer-toggle,
.atlas-topbar-more {
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: none;
border-radius: var(--r-sm, 8px);
border: 1px solid var(--border-subtle);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
}
.atlas-drawer-toggle:hover,
.atlas-topbar-more:hover,
.atlas-topbar--actions-open .atlas-topbar-more {
background: var(--bg-subtle);
color: var(--text-primary);
}
.atlas-topbar-primary {
display: flex;
align-items: center;
min-width: 0;
padding-inline: 8px;
}
.atlas-drawer-backdrop { display: none; }
@media (max-width: 1023px) {
html, body { overflow-x: hidden; }
.atlas-drawer-toggle { display: inline-flex; margin-left: 10px; }
.atlas-topbar-more { display: inline-flex; margin-right: 10px; }
.atlas-topbar::after { left: 0; }
.atlas-sidebar-toggle { display: none !important; }
.atlas-sidebar {
width: min(300px, 86vw) !important;
transform: translateX(-105%);
transition: transform var(--dur-base, 220ms) var(--ease-in-out, ease);
box-shadow: var(--sh-lg, 0 12px 40px rgba(0, 0, 0, 0.25));
z-index: 320;
}
.atlas-shell--drawer-open .atlas-sidebar { transform: none; }
.atlas-drawer-backdrop {
display: block;
position: fixed;
inset: var(--shell-topbar-h) 0 0 0;
z-index: 310;
background: color-mix(in oklab, #000 38%, transparent);
}
.atlas-content,
.atlas-shell--sidebar-collapsed .atlas-content {
margin-left: 0;
width: 100%;
min-width: 0;
}
.atlas-topbar-logo { width: auto; padding-inline: 10px; }
.atlas-topbar-actions {
display: none;
position: fixed;
top: var(--shell-topbar-h);
left: 0;
right: 0;
height: auto;
max-height: calc(100vh - var(--shell-topbar-h));
overflow-y: auto;
flex-wrap: wrap;
gap: 10px;
padding: 12px 14px;
border-left: 0;
border-bottom: 1px solid var(--border-default);
background: var(--bg-surface);
box-shadow: var(--sh-md, 0 8px 24px rgba(0, 0, 0, 0.18));
z-index: 330;
}
.atlas-topbar--actions-open .atlas-topbar-actions { display: flex; }
.atlas-topbar-actions-sep { display: none; }
.atlas-panel { min-width: 0; }
}
@media (max-width: 640px) {
.atlas-logo-img { width: 92px !important; height: auto !important; }
.atlas-logo-text-sub,
.atlas-breadcrumb { display: none; }
.atlas-topbar-primary { flex: 1; padding-inline: 6px; }
.atlas-topbar-primary .ds-school-trigger { max-width: none; width: 100%; }
}
/* D9 · 390 px: a página não rola na horizontal; DataTable vira lista empilhada */
@media (max-width: 390px) {
html, body, .atlas-panel, .atlas-content { overflow-x: hidden; max-width: 100%; }
.ds-table-wrap { overflow-x: hidden; }
.ds-table,
.ds-table thead,
.ds-table tbody,
.ds-table tr,
.ds-table th,
.ds-table td {
display: block;
width: 100%;
}
.ds-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.ds-table tr {
padding: 8px 0 12px;
border-bottom: 1px solid var(--border-default);
}
.ds-table td {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
border-bottom: 0;
padding: 6px 0;
text-align: right;
}
.ds-table td::before {
content: attr(data-label);
flex: none;
max-width: 46%;
font-size: 11px;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-tertiary);
text-align: left;
}
.ds-table .ds-table__num { text-align: right; }
.ds-bar-cell { flex: 1; min-width: 0; }
.mega-table,
.mercado-table { min-width: 0 !important; width: 100%; }
}
/* ── Referências e guia ─────────────────────────────────── */
.ds-guide-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 14px 20px; }
.ds-guide-nav__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-right: 6px; }
.ds-guide-nav__link { font-size: 12.5px; color: var(--text-secondary); text-decoration: none; padding: 4px 10px; border: 1px solid var(--border-subtle); border-radius: 999px; transition: border-color .15s, color .15s; }
.ds-guide-nav__link:hover { color: var(--text-primary); border-color: var(--border-strong); }
section[id^="guia-"] { scroll-margin-top: 88px; }
.ds-guide { margin: 0; display: flex; flex-direction: column; }
.ds-guide__row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.ds-guide__row:first-child { border-top: 0; padding-top: 2px; }
.ds-guide__row dt { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.45; }
.ds-guide__row dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 720px) { .ds-guide__row { grid-template-columns: 1fr; gap: 4px; } }
.ds-guide__muted { color: var(--text-tertiary); font-size: 12px; }
.ds-guide__p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.ds-guide__eixo { display: inline-flex; align-items: center; gap: 8px; }
.ds-guide__eixo i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ds-guide-bloom { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 900px) { .ds-guide-bloom { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds-guide-bloom__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ds-guide-bloom__bar { display: block; height: 6px; border-radius: 3px; background: var(--bg-subtle); overflow: hidden; }
.ds-guide-bloom__bar i { display: block; height: 100%; border-radius: 3px; min-width: 3px; }
.ds-guide-bloom__nivel { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ds-guide-bloom__n { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.ds-swot-groups__grid + .ds-guide { margin-top: 16px; }
.ds-guide-refs { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
/* ── Raio-X de desempenho ───────────────────────────────── */
.ds-numstrip--flat { padding: 4px 0 0; margin-bottom: 0; }
.ds-raiox-map { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .ds-raiox-map { grid-template-columns: 1fr; } }
.ds-raiox-map__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; }
.ds-raiox-map__uf { display: inline-flex; align-items: baseline; gap: 4px; width: 54px; flex-shrink: 0; }
.ds-raiox-map__uf small { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.ds-chart-card .adist-region-card { background: var(--bg-surface); }
/* ── Rankings: mapa de escolas alinhado aos cards do padrão ── */
.ds-stack .atlas-lmap--rankings { background: var(--bg-surface); border-color: var(--border-subtle); box-shadow: none; border-radius: var(--r-lg); }
.ds-stack .atlas-lmap--rankings .atlas-lmap__header { background: var(--bg-surface); padding: 14px 20px; }
.ds-stack .atlas-lmap--rankings .atlas-lmap__header-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
/* ── Análise de rede: cards alinhados ao padrão (sem faixas laterais coloridas) ── */
.atlas-rede-panel-card,
.atlas-rede-diagnosis,
.atlas-rede-insight-card,
.atlas-rede-callout {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-left-width: 1px;
border-left-color: var(--border-subtle);
border-radius: var(--r-lg);
box-shadow: none;
padding: 20px 24px;
}
.atlas-rede-callout { margin-bottom: 20px; }
.atlas-rede-panel-title,
.atlas-rede-diagnosis__title,
.atlas-rede-insight-card__title,
.atlas-rede-callout__title {
font-family: var(--font-display, inherit);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0;
}
.atlas-rede-panel-title svg, .atlas-rede-diagnosis__title svg, .atlas-rede-insight-card__title svg, .atlas-rede-callout__title svg { color: var(--text-tertiary); }
.atlas-rede-panel-desc, .atlas-rede-diagnosis__text, .atlas-rede-insight-card__text, .atlas-rede-callout__body { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.atlas-rede-panel-footnote { font-size: 11.5px; color: var(--text-tertiary); }
.atlas-rede-kpi-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 12px;
box-shadow: none;
}
.atlas-rede-kpi-card::before, .atlas-rede-kpi-card::after { display: none; }
.atlas-rede-kpi-card__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.atlas-rede-kpi-card__value { font-family: var(--font-display, inherit); font-weight: 600; font-variant-numeric: tabular-nums; }
.atlas-rede-kpi-card__sub { font-size: 12px; color: var(--text-tertiary); }
.atlas-rede-extremo-card { border: 1px solid var(--border-subtle); border-left-width: 1px; border-radius: 10px; }
.atlas-rede-extremo-card__eyebrow { color: var(--text-secondary); }
/* ── Dados consolidados: cards no padrão ─────────────────── */
.ds-report-card { padding: 20px 24px; }
.ds-report-card__title { margin-bottom: 14px; }
/* ── Prioridade de intervenção por competência ─────────────── */
.ds-prior-legenda { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-subtle); }
.ds-prior-legenda__item { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.ds-prior-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; flex: none; }
.ds-prior-pill--alta { background: color-mix(in srgb, var(--below) 14%, transparent); color: var(--below); }
.ds-prior-pill--media { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ds-prior-pill--baixa { background: color-mix(in srgb, var(--above) 14%, transparent); color: var(--above); }
.ds-prior-resumo { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 18px; }
.ds-prior-resumo th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); padding: 0 8px 8px; border-bottom: 1px solid var(--border-subtle); }
.ds-prior-resumo td { padding: 9px 8px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ds-prior-resumo td:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ds-prior-resumo__codes { color: var(--text-tertiary); font-size: 12px; }
.ds-prior-areas { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); }
.ds-prior-area { border-bottom: 1px solid var(--border-subtle); }
.ds-prior-area__head { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 4px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--text-primary); }
.ds-prior-area__head:hover { background: var(--bg-subtle); }
.ds-prior-area--open .ds-trend__chev { transform: rotate(90deg); }
.ds-prior-area__nome { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ds-prior-area__selo { font-size: 11px; font-weight: 600; color: var(--text-tertiary); padding: 1px 8px; border: 1px solid var(--border-subtle); border-radius: 999px; }
.ds-prior-area__resumo { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ds-prior-area__n { color: var(--text-tertiary); }
.ds-prior-area__body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 16px; }
.ds-prior-bloco { border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; }
.ds-prior-bloco__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.ds-prior-bloco--alta .ds-prior-bloco__head { background: color-mix(in srgb, var(--below) 5%, transparent); }
.ds-prior-bloco--media .ds-prior-bloco__head { background: var(--bg-subtle); }
.ds-prior-bloco__nome { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.ds-prior-bloco__enunciado { margin: 3px 0 0; font-size: 12px; font-style: italic; line-height: 1.45; color: var(--text-secondary); }
.ds-prior-habs { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ds-prior-habs th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); padding: 8px 12px 4px; }
.ds-prior-habs td { padding: 7px 12px; border-top: 1px solid var(--border-subtle); vertical-align: top; line-height: 1.45; color: var(--text-primary); }
.ds-prior-habs td:first-child { width: 64px; white-space: nowrap; font-weight: 600; }
.ds-prior-habs td.ds-trend__num, .ds-prior-habs th.ds-trend__num { width: 64px; text-align: right; }
.ds-prior-habs__ctx td { color: var(--text-tertiary); }
.ds-prior-habs__v { font-weight: 700; }
.ds-prior-habs__v--critico { color: var(--below); }
.ds-prior-habs__v--atencao { color: var(--text-primary); }
.ds-prior-habs__v--sem { font-weight: 500; font-size: 11.5px; }
.ds-prior-habs__ref { color: var(--text-tertiary); }
.ds-prior-habs__flag { display: inline-block; margin-left: 8px; font-size: 11px; color: var(--text-tertiary); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 0 7px; }
.ds-prior-nota { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-tertiary); }
@media (max-width: 720px) { .ds-prior-habs th:nth-child(4), .ds-prior-habs td:nth-child(4) { display: none; } }
.ds-prior-aviso { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-left: 3px solid var(--border-strong); }
/* ── T14 · 1.1 Uma cor, um significado ─────────────────────────
Julgamento (acima/abaixo, ganho/perda) só em --above/--below.
Verde/vermelho ficam para estado de sistema (erro, sucesso, aviso). */
.atlas-kpi-delta--good,
.atlas-premium-kpi-hero .atlas-kpi-value.atlas-kpi-delta--good { color: var(--above); }
.atlas-kpi-delta--bad,
.atlas-premium-kpi-hero .atlas-kpi-value.atlas-kpi-delta--bad { color: var(--below); }
/* ── T14 · 1.3 Ritmo e densidade das tabelas ─────────────── */
.ds-table tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--bg-subtle) 40%, transparent); }
.ds-table tbody tr:hover td { background: color-mix(in oklab, var(--bg-subtle) 80%, transparent); }
.ds-table__row--hl td { border-top: 1.5px solid var(--border-strong); font-weight: 600; }
.ds-table-wrap--sticky { max-height: 560px; overflow: auto; border-radius: 8px; }
.ds-table-wrap--sticky .ds-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-surface); box-shadow: inset 0 -1px 0 var(--border-default); }
.ds-table__more {
display: block; width: 100%; margin-top: 4px; padding: 9px 12px;
background: none; border: 0; border-top: 1px solid var(--border-subtle);
font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; text-align: center;
}
.ds-table__more:hover { background: var(--bg-subtle); }
.ds-table-wrap--sticky + .ds-table__more { position: static; }
/* ── Esqueleto de carregamento no formato das telas ─────────── */
.ds-skel { display: flex; flex-direction: column; gap: 20px; }
.ds-skel__head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); }
.ds-skel__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 20px 24px; }
.ds-skel__strip > div { display: flex; flex-direction: column; gap: 8px; }
.ds-skel__card { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; }
.ds-skel__chart { height: 260px; margin-top: 8px; border-radius: 10px; }
.ds-skel__label { font-size: 12px; color: var(--text-tertiary); }
@media (max-width: 720px) { .ds-skel__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ── T14 · 1.4 Impressão das telas do padrão ──────────────── */
@media print {
.ds-stack { gap: 12px; }
.ds-surface, .ds-chart-card, .ds-numstrip, .ds-prior-bloco, .ds-swot-group, .ds-bloom-acao__card, .ds-trend__item, .ds-cob, .ds-dumb, .ds-multiple {
break-inside: avoid;
page-break-inside: avoid;
background: #fff !important;
box-shadow: none !important;
border-color: #cfd6e0 !important;
}
.ds-page-header { break-after: avoid; }
.ds-next-step, .ds-help-toggle, .ds-filter-row, .ds-page-header__controls, .ds-table__more, .ds-guide-nav, .atlas-filter-pill { display: none !important; }
.ds-table-wrap--sticky { max-height: none !important; overflow: visible !important; }
.ds-chart-card__title, .ds-page-header__title, .ds-numstrip__value { color: #0a1f3d !important; }
}
/* ── O que fazer (frentes de trabalho) ─────────────────────── */
.ds-acao__titulo { font-size: 15px; line-height: 1.35; }
.ds-acao__origem { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.ds-acao__cod { font-weight: 700; text-decoration: none; }
a.ds-acao__cod:hover { text-decoration: underline; }
.ds-acao__valor { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-acao li { grid-template-columns: 64px minmax(0, 1fr) auto auto; }
/* ── Régua TRI: zonas de dificuldade em escala neutra (dificuldade não é julgamento) ── */
:root, html[data-theme] body, body.light, body.dark {
--tri-zona-facil: color-mix(in oklab, var(--text) 3%, var(--surf));
--tri-zona-media: color-mix(in oklab, var(--text) 7%, var(--surf));
--tri-zona-dificil: color-mix(in oklab, var(--text) 12%, var(--surf));
}
.atlas-tri-ruler__track {
background: linear-gradient(90deg,
var(--tri-zona-facil) 0%, var(--tri-zona-facil) var(--tri-zero-pct),
var(--tri-zona-media) var(--tri-zero-pct), var(--tri-zona-media) var(--tri-mid-pct),
var(--tri-zona-dificil) var(--tri-mid-pct), var(--tri-zona-dificil) 100%);
}
.atlas-tri-ruler .ds-chart-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.atlas-tri-ruler__legend { font-size: 11px; }
/* ── Itens e TRI: coerência e tabela única ─────────────────── */
.ds-coer { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; align-items: center; }
@media (max-width: 860px) { .ds-coer { grid-template-columns: 1fr; } }
.ds-coer__barras { display: flex; flex-direction: column; gap: 14px; }
.ds-coer__linha { display: grid; grid-template-columns: 150px minmax(0, 1fr) 52px 72px; align-items: center; gap: 12px; font-size: 13px; }
.ds-coer__label { display: flex; flex-direction: column; font-weight: 600; color: var(--text-primary); }
.ds-coer__label em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--text-tertiary); }
.ds-coer__track { position: relative; height: 12px; border-radius: 6px; background: var(--chart-track); }
.ds-coer__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.ds-coer__mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--chart-benchmark); border-radius: 1px; }
.ds-coer__v, .ds-coer__d { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; }
.ds-coer__chave { display: flex; flex-direction: column; gap: 4px; padding-left: 24px; border-left: 1px solid var(--border-subtle); }
.ds-itens__prova { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--accent); font-weight: 600; text-decoration: none; }
.ds-itens__prova:hover { text-decoration: underline; }
.ds-itens__vazio { margin: 8px 0; font-size: 13px; color: var(--text-tertiary); }
/* ── Modal da questão: painel de leitura ───────────────────── */
.ds-qpanel { display: flex; flex-direction: column; gap: 10px; padding: 12px 20px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-subtle); }
.ds-qpanel__hab { font-size: 13px; line-height: 1.5; color: var(--text-primary); }
.ds-qpanel__params { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ds-qpanel__params > div { display: flex; flex-direction: column; gap: 1px; }
.ds-qpanel__params dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.ds-qpanel__params dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ds-qpanel__params dd em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--text-tertiary); margin-left: 4px; }
.ds-qpanel__irmas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
/* ── Da base ao topo (Análise avançada) ─────────────────────── */
.ds-bt { display: flex; flex-direction: column; gap: 4px; }
.ds-bt__eixo, .ds-bt__linha { display: grid; grid-template-columns: 130px minmax(0, 1fr) 88px 88px; align-items: center; gap: 14px; }
.ds-bt__eixo { padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); }
.ds-bt__ticks { position: relative; height: 16px; }
.ds-bt__ticks i { position: absolute; transform: translateX(-50%); font-style: normal; font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.ds-bt__h { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); text-align: right; }
.ds-bt__linha { padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.ds-bt__linha:last-child { border-bottom: 0; }
.ds-bt__nome { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ds-bt__track { position: relative; height: 26px; }
.ds-bt__ref { position: absolute; top: 5px; height: 16px; border-radius: 4px; background: var(--chart-context); opacity: .55; }
.ds-bt__refmed { position: absolute; top: 2px; height: 22px; width: 0; border-left: 2px dashed var(--text-tertiary); }
.ds-bt__esc { position: absolute; top: 10px; height: 6px; border-radius: 3px; background: #6A86AD; }
.ds-bt__iqr { position: absolute; top: 7px; height: 12px; border-radius: 3px; background: #2F5487; }
.ds-bt__med { position: absolute; top: 3px; height: 20px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text-primary); }
.ds-bt__num { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ds-bt__num em { font-style: normal; font-size: 11.5px; font-weight: 600; }
@media (max-width: 720px) { .ds-bt__eixo, .ds-bt__linha { grid-template-columns: 90px minmax(0, 1fr) 60px 60px; gap: 8px; } }
.ds-numstrip__calc .ds-numstrip__value { color: var(--text-secondary); }
.ds-numstrip__calc .ds-numstrip__label { color: var(--text-tertiary); }
.ds-next-step__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ds-next-step__pos { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.ds-next-step__levar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.ds-next-step__levar .atlas-code { padding: 1px 6px; border-radius: 6px; background: var(--bg-subtle); font-weight: 600; color: var(--text-primary); }
kbd { display: inline-block; min-width: 18px; padding: 0 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; text-align: center; color: var(--text-primary); background: var(--bg-surface); }
/* ── Resumo: portas de entrada das seções ───────────────────── */
.ds-portas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 960px) { .ds-portas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-porta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; text-align: left; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ds-porta:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm); }
.ds-porta__grupo { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.ds-porta__valor { font-family: var(--font-display, inherit); font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ds-porta__texto { font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
.ds-porta__ir { margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
/* ── Cesta de prioridades ─────────────────────────────────── */
.ds-levar-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; white-space: normal; max-width: 28ch; }
.ds-levar-aviso { font-size: 11px; line-height: 1.35; color: var(--text-secondary); }
.ds-levar { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; font-size: 11px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.ds-levar:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ds-levar:disabled { opacity: .45; cursor: not-allowed; }
.ds-levar--on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); }
.ds-cesta-pill { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-surface); box-shadow: var(--sh-lg); font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.ds-cesta-pill strong { color: var(--accent); font-variant-numeric: tabular-nums; }
@media print { .ds-levar, .ds-cesta-pill { display: none !important; } }
.ds-hab-acoes { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.ds-persist {
display: inline-flex;
align-items: center;
max-width: 28ch;
padding: 1px 8px;
border-radius: var(--r-full);
border: 1px solid var(--border-subtle);
background: var(--bg-subtle);
color: var(--text-secondary);
font-size: 11px;
line-height: 1.35;
white-space: normal;
}
.ds-persist--persistente { color: var(--below); border-color: color-mix(in srgb, var(--below) 40%, var(--border-subtle)); }
.ds-persist--ok { font-weight: 650; }
.ds-persist--pontual { color: var(--text-secondary); }
.ds-confianca {
display: inline-flex;
align-items: center;
margin-right: 6px;
padding: 1px 8px;
border-radius: var(--r-full);
border: 1px solid color-mix(in oklab, var(--warning) 40%, transparent);
background: color-mix(in oklab, var(--warning) 16%, transparent);
color: color-mix(in oklab, var(--warning) 75%, var(--text));
font-size: 11px;
font-weight: 650;
line-height: 1.4;
white-space: nowrap;
}
.ds-oscilacao {
margin: 0;
padding: 12px 14px;
border: 1px dashed var(--border-subtle);
border-radius: var(--r-lg);
background: var(--bg-subtle);
}
.ds-oscilacao__titulo {
margin: 0 0 4px;
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
}
.ds-oscilacao p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.ds-oscilacao ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ds-oscilacao li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12.5px; }
.ds-oscilacao__meta { color: var(--text-tertiary); font-size: 11px; }
.ds-ressalva {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-size: 11px;
line-height: 1.3;
white-space: nowrap;
cursor: help;
}
.ds-persist-nota {
margin: 0 0 10px;
font-size: 12.5px;
line-height: 1.45;
color: var(--text-secondary);
}
.ds-prior-habs__levar { width: 80px; text-align: right; }
.ds-cesta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-cesta li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 110px 76px 90px 80px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.ds-cesta li:last-child { border-bottom: 0; }
.ds-cesta__desc { color: var(--text-secondary); line-height: 1.4; }
.ds-cesta__num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; }
.ds-cesta__num em { font-style: normal; font-weight: 400; color: var(--text-tertiary); }
.ds-cesta__freq { text-align: right; font-size: 12px; color: var(--text-tertiary); }
@media (max-width: 860px) { .ds-cesta li { grid-template-columns: 64px minmax(0, 1fr) 76px 80px; } .ds-cesta__freq, .ds-cesta li > .ds-cesta__num:nth-of-type(1) { display: none; } }
/* ── Comparar duas escolas ────────────────────────────────── */
.ds-comparar__busca { display: flex; align-items: center; gap: 8px; width: 420px; max-width: 100%; }
.ds-comparar__busca > div:first-child { flex: 1; min-width: 0; }
.ds-comparar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
@media (max-width: 960px) { .ds-comparar { grid-template-columns: 1fr; } }
.ds-comparar__notas { width: 100%; border-collapse: collapse; font-size: 13px; }
.ds-comparar__notas th { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); text-align: left; padding: 0 8px 8px; border-bottom: 1px solid var(--border-default); }
.ds-comparar__notas td { padding: 8px; border-bottom: 1px solid var(--border-subtle); }
.ds-comparar__notas td:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ds-comparar__total td { border-top: 1.5px solid var(--border-strong); font-weight: 600; }
.ds-comparar__lado { display: flex; flex-direction: column; gap: 14px; }
.ds-comparar__habs { list-style: none; margin: 0; padding: 0; }
.ds-comparar__habs li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 130px; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; align-items: center; }
.ds-comparar__comps { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.ds-cob__outra { margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; }
.ds-numstrip__wide { grid-column: span 2; }
@media (max-width: 720px) { .ds-numstrip__wide { grid-column: auto; } }
.ds-itens-comp { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font-size: 12.5px; color: var(--text-secondary); }
.ds-itens-comp span { display: inline-flex; align-items: baseline; gap: 5px; }
.ds-itens-comp i { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.ds-itens-comp strong { font-family: var(--font-display, inherit); font-size: 22px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ds-itens-comp__bar { display: flex; gap: 2px; height: 6px; margin-top: 8px; border-radius: 999px; overflow: hidden; }
/* ── Evolução histórica: card de área expansível ─────────── */
.ds-multiple { transition: border-color .15s, box-shadow .15s; }
.ds-multiple:hover { border-color: var(--border-strong); }
.ds-multiple--open { grid-column: 1 / -1; box-shadow: var(--sh-sm); }
.ds-multiple__toggle { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; }
.ds-multiple__chev { color: var(--text-tertiary); transition: transform .18s; margin-top: 2px; }
.ds-multiple--open .ds-multiple__chev { transform: rotate(180deg); }
.ds-multiple--open .ds-multiple__head { flex-direction: row; align-items: baseline; gap: 14px; }
.ds-multiple--open .ds-multiple__value { font-size: 30px; }
.ds-bt__seg { position: absolute; top: 8px; height: 10px; }
.ds-bt__seg:first-of-type { border-radius: 3px 0 0 3px; }
.ds-bt__seg--mid { top: 6px; height: 14px; }
.ds-bt__seg + .ds-bt__seg + .ds-bt__seg { border-radius: 0 3px 3px 0; }
.ds-bt__mean { position: absolute; top: 7px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: var(--bg-surface); border: 2px solid var(--text-primary); }
.ds-bt__leg-ref { background: var(--chart-context) !important; opacity: .7; }
.ds-bt + .ds-table-wrap { margin-top: 18px; }
/* ── Redação por aluno: faixas de nota ─────────────────────────────────── */
.ds-redfx { display: flex; flex-direction: column; }
.ds-redfx__head, .ds-redfx__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 96px 84px; align-items: center; gap: 14px; }
.ds-redfx__head { padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.ds-redfx__head span:nth-child(n+3) { text-align: right; }
.ds-redfx__row { padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.ds-redfx__row:last-child { border-bottom: 0; }
.ds-redfx__row--foco { background: var(--bg-subtle); border-radius: 8px; margin: 0 -8px; padding: 9px 8px; }
.ds-redfx__label { font-size: 13px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ds-redfx__track { position: relative; height: 18px; background: var(--bg-subtle); border-radius: 4px; }
.ds-redfx__row--foco .ds-redfx__track { background: var(--bg-surface); }
.ds-redfx__bar { position: absolute; inset: 0 auto 0 0; background: var(--area-redacao); border-radius: 4px; transition: width .4s ease; }
.ds-redfx__ref { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--compare); border-radius: 1px; }
.ds-redfx__num { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.ds-redfx__num strong { color: var(--text-primary); font-weight: 600; }
.ds-redfx__num em { font-style: normal; color: var(--text-tertiary); margin-left: 4px; }
.ds-redfx__num--ref { color: var(--text-tertiary); }
/* ── Redação por aluno: o degrau de cada competência ───────────────────── */
.ds-reddg { display: flex; flex-direction: column; }
.ds-reddg__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; font-size: 12px; color: var(--text-secondary); }
.ds-reddg__legend span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ds-reddg__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.ds-reddg__head, .ds-reddg__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 118px 64px; align-items: center; gap: 14px; }
.ds-reddg__head { padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.ds-reddg__head span:nth-child(n+3) { text-align: right; }
.ds-reddg__row { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.ds-reddg__row:last-child { border-bottom: 0; }
.ds-reddg__nome { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.ds-reddg__nome b { color: var(--area-redacao); margin-right: 4px; }
.ds-reddg__bars { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ds-reddg__bar { display: flex; height: 22px; border-radius: 5px; overflow: hidden; background: var(--bg-subtle); }
.ds-reddg__bar i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.ds-reddg__bar--ref { height: 7px; border-radius: 3px; opacity: .75; }
.ds-reddg__num { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.ds-reddg__num strong { color: var(--text-primary); font-weight: 600; }
.ds-reddg__num em { font-style: normal; color: var(--text-tertiary); margin-left: 4px; }
.ds-reddg__num small { font-size: 11px; color: var(--text-tertiary); }
.ds-reddg__ganho { text-align: right; font-family: var(--font-display, inherit); font-size: 17px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
.ds-redfx__head, .ds-redfx__row { grid-template-columns: 86px minmax(0, 1fr) 72px; }
.ds-redfx__head span:nth-child(4), .ds-redfx__num--ref { display: none; }
.ds-reddg__head { display: none; }
.ds-reddg__row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "nome num ganho" "bars bars bars"; row-gap: 8px; }
.ds-reddg__nome { grid-area: nome; } .ds-reddg__bars { grid-area: bars; } .ds-reddg__num { grid-area: num; } .ds-reddg__ganho { grid-area: ganho; }
}
/* ═══ Topbar v2 · logo em destaque, escola ao centro (busca + ajustes), plataforma à direita ═══ */
@media (min-width: 1024px) {
/* logo | escola (colada ao limite da coluna da logo) | respiro | plataforma */
.atlas-topbar {
display: grid;
grid-template-columns: var(--shell-sidebar-w) minmax(480px, 720px) minmax(0, 1fr) max-content;
align-items: center;
}
.atlas-shell--sidebar-collapsed .atlas-topbar {
grid-template-columns: var(--shell-sidebar-w-collapsed) minmax(480px, 720px) minmax(0, 1fr) max-content;
}
.atlas-brand { grid-column: 1; height: 100%; justify-content: flex-start; padding-inline: 22px; }
.atlas-topbar > .atlas-breadcrumb { grid-column: 2; }
/* A busca começa na mesma linha dos títulos das telas (padding do .atlas-panel + .atlas-premium-page). */
.atlas-topbar-center { grid-column: 2; justify-content: flex-start; padding-left: calc(clamp(20px, 3.5vw, 44px) + clamp(10px, 1.6vw, 22px)); }
.atlas-topbar-actions { grid-column: 4; justify-self: end; border-left: 0; padding-right: 16px; }
}
/* Escola ao centro: a busca e os ajustes da escola formam uma peça só */
.atlas-topbar-center { display: flex; justify-content: center; min-width: 0; }
.atlas-topbar-center:empty { display: none; }
.atlas-searchgroup {
display: flex;
align-items: stretch;
width: 100%;
height: 38px;
border: 1px solid var(--border-subtle);
border-radius: 12px;
background: var(--bg-subtle);
transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.atlas-searchgroup:hover { border-color: var(--border-default); background: var(--bg-surface); }
.atlas-searchgroup:focus-within { border-color: var(--border-strong); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent); }
.atlas-searchgroup .atlas-topbar-primary { flex: 1; min-width: 0; padding: 0; display: flex; }
.atlas-searchgroup .ds-school-trigger {
width: 100%;
max-width: none;
height: 100%;
padding: 0 10px 0 14px;
border: 0;
border-radius: 12px 0 0 12px;
background: transparent;
box-shadow: none;
}
.atlas-searchgroup:not(.atlas-searchgroup--ctx) .ds-school-trigger { border-radius: 12px; }
.atlas-searchgroup .ds-school-trigger:hover { border: 0; }
.atlas-searchgroup__ctx { display: flex; align-items: center; padding: 3px; border-left: 1px solid var(--border-subtle); }
.atlas-searchgroup .atlas-benchctl-trigger {
height: 30px;
padding: 0 10px 0 9px;
gap: 7px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--text-secondary);
font-weight: 600;
}
.atlas-searchgroup .atlas-benchctl-trigger:hover { background: var(--bg-subtle); color: var(--text-primary); border: 0; }
.atlas-searchgroup .atlas-benchctl-trigger.open {
border: 0;
color: var(--accent);
background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.atlas-searchgroup .atlas-benchctl-trigger svg { color: var(--accent); }
.atlas-benchctl-trigger-sum {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(in oklab, var(--accent) 10%, transparent);
color: var(--accent);
font-size: 11.5px;
font-weight: 600;
}
.atlas-searchgroup .atlas-benchctl-dot { top: 4px; right: 4px; }
/* Menus compactos da plataforma (painéis, edição do ENEM, tema) */
.atlas-pop { position: relative; flex: none; }
.atlas-pop-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 8px 0 10px;
border: 1px solid var(--border-subtle);
border-radius: var(--r-md, 8px);
background: transparent;
color: var(--text-secondary);
font: inherit;
font-size: 12.5px;
cursor: pointer;
transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.atlas-pop-trigger:hover,
.atlas-pop-trigger[aria-expanded="true"] { background: var(--bg-subtle); border-color: var(--border-default); color: var(--text-primary); }
.atlas-pop-trigger:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.atlas-pop-trigger--icon { width: 32px; padding: 0; justify-content: center; }
.atlas-launcher-trigger { padding: 0 10px; font-weight: 600; }
.atlas-pop-chev { color: var(--text-tertiary); transition: transform var(--dur-fast); }
.atlas-pop-trigger[aria-expanded="true"] .atlas-pop-chev { transform: rotate(180deg); }
.atlas-year-trigger__k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: var(--text-tertiary); }
.atlas-year-trigger__v { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.atlas-pop-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 210px;
padding: 6px;
border-radius: var(--r-lg, 12px);
background: var(--surf);
border: 1px solid var(--bord);
box-shadow: var(--sh-lg);
z-index: 330;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.atlas-pop-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.atlas-menu-eyebrow {
padding: 6px 10px 4px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.atlas-pop-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0;
border-radius: 8px;
background: none;
color: var(--text-secondary);
font: inherit;
text-align: left;
cursor: pointer;
}
.atlas-pop-item:hover { background: var(--bg-subtle); }
.atlas-pop-item > svg { margin-left: auto; color: var(--accent); flex: none; }
.atlas-pop-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-subtle); color: var(--text-secondary); flex: none; }
.atlas-pop-item.current .atlas-pop-item__icon { color: var(--accent); }
.atlas-pop-item__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.atlas-pop-item__meta strong { font-size: 13px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.atlas-pop-item__meta small { font-size: 11.5px; color: var(--text-tertiary); }
/* Lançador de painéis: grade de cartões */
.atlas-launcher { width: 468px; padding: 10px; }
.atlas-launcher__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px 8px; }
.atlas-launcher__head .atlas-menu-eyebrow { padding: 0; }
.atlas-launcher__atual { font-size: 11.5px; color: var(--text-tertiary); }
.atlas-launcher__atual strong { color: var(--text-secondary); font-weight: 600; }
.atlas-launcher__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.atlas-launcher__tile {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 10px;
row-gap: 2px;
padding: 10px;
border: 1px solid transparent;
border-radius: 10px;
color: inherit;
text-decoration: none;
transition: background var(--dur-fast), border-color var(--dur-fast);
}
.atlas-launcher__tile:hover { background: var(--bg-subtle); }
.atlas-launcher__tile.current { background: color-mix(in oklab, var(--accent) 8%, transparent); border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
.atlas-launcher__icon {
grid-row: 1 / span 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--bg-subtle);
color: var(--text-secondary);
}
.atlas-launcher__tile.current .atlas-launcher__icon { background: var(--accent); color: #fff; }
.atlas-launcher__title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.atlas-launcher__sub { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.35; }
.atlas-launcher__foot {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 10px 8px 4px;
border-top: 1px solid var(--border-subtle);
font-size: 12px;
color: var(--text-secondary);
text-decoration: none;
}
.atlas-launcher__foot:hover { color: var(--text-primary); }
@media (max-width: 1023px) {
.atlas-topbar-center { flex: 1; padding-inline: 8px; }
.atlas-searchgroup { max-width: 560px; }
.atlas-pop-menu { right: auto; left: 0; }
.atlas-launcher { width: min(468px, calc(100vw - 28px)); }
}
@media (max-width: 640px) {
.atlas-benchctl-trigger-label, .atlas-benchctl-trigger-sum { display: none; }
.atlas-launcher__grid { grid-template-columns: 1fr; }
}
/* Leitura de turma pequena (média × mediana) */
.ds-cautela {
padding: 14px 16px;
border-radius: var(--r-lg, 12px);
border: 1px solid color-mix(in oklab, var(--warning) 35%, var(--border-subtle));
background: color-mix(in oklab, var(--warning) 8%, transparent);
}
.ds-cautela__titulo { margin: 0 0 4px; font-size: 13px; font-weight: 650; color: var(--text); }
.ds-cautela p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.ds-cautela__tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ds-cautela__tabela th { text-align: left; font-weight: 600; color: var(--text-tertiary); padding: 4px 8px 4px 0; }
.ds-cautela__tabela td { padding: 4px 8px 4px 0; border-top: 1px solid var(--border-subtle); }
/* ─────────────────────────────────────────────────────────────
21. PLANO DE AÇÃO 5W2H (escola) + PAINEL DA REDE (admin)
Só tokens do tema (navy / Aurora / Eclipse). Status de execução usa
tokens de status; SWOT usa --above/--below como a aba de SWOT.
───────────────────────────────────────────────────────────── */
.pa-loading { padding: 48px 0; text-align: center; color: var(--muted); font-size: 13px; }
.pa-dim { color: var(--muted); font-size: 12px; }
.pa-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.pa-link:hover { text-decoration: underline; }
.pa-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pa-num { font-family: var(--font-num, var(--font-display)); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; color: var(--text); font-size: 12px; }
.pa-num em { font-style: normal; font-weight: 500; color: var(--muted); }
.pa-code { font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.pa-alert {
display: flex; justify-content: space-between; gap: 12px; align-items: center;
margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-md, 10px);
background: color-mix(in oklab, var(--status-warning, var(--warning)) 12%, transparent);
border: 1px solid color-mix(in oklab, var(--status-warning, var(--warning)) 35%, transparent);
color: var(--text); font-size: 12.5px;
}
/* faixa de números */
.pa-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
.pa-kpi {
position: relative; overflow: hidden; padding: 13px 14px 12px;
background: var(--surf); border: 1px solid var(--bord); border-radius: var(--r-lg, 14px);
box-shadow: var(--sh-sm, none);
}
.pa-kpi::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--kpi-c, var(--bord2)); }
.pa-kpi--ok { --kpi-c: var(--status-positive, var(--success)); }
.pa-kpi--info { --kpi-c: var(--accent); }
.pa-kpi--alerta { --kpi-c: var(--status-warning, var(--warning)); }
.pa-kpi-v { font-family: var(--font-num, var(--font-display)); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700; line-height: 1.05; color: var(--text); letter-spacing: -0.02em; }
.pa-kpi-k { margin-top: 5px; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
/* seções */
.pa-sec { margin: 0 0 26px; }
.pa-sec-eb { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.pa-sec-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 3px 0 4px; color: var(--text); letter-spacing: -0.01em; }
.pa-sec-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; max-width: 80ch; }
/* SWOT de referência */
.pa-observar {
margin-top: 14px;
padding: 12px 14px;
border: 1px dashed var(--border-subtle);
border-radius: 10px;
background: var(--bg-subtle);
}
.pa-observar p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pa-observar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pa-observar li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12.5px; }
.pa-swot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pa-swot-card {
position: relative; overflow: hidden; padding: 13px 14px 12px;
background: var(--surf); border: 1px solid var(--bord); border-radius: var(--r-lg, 14px); box-shadow: var(--sh-sm, none);
}
.pa-swot-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--q-c); }
.pa-q-S { --q-c: var(--above); }
.pa-q-O { --q-c: var(--below); }
.pa-q-W { --q-c: color-mix(in oklab, var(--below) 55%, var(--muted)); }
.pa-q-T { --q-c: var(--chart-context, var(--dim)); }
.pa-swot-head { display: flex; justify-content: space-between; align-items: baseline; }
.pa-swot-nome { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text); }
.pa-swot-n { font-family: var(--font-num, var(--font-display)); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: var(--q-c); }
.pa-swot-acao { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 1px 0 9px; }
.pa-swot-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pa-swot-card li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; font-size: 12px; }
.pa-swot-card li .pa-mini, .pa-swot-card li .pa-noplano { grid-column: 1 / -1; justify-self: start; }
.pa-swot-desc { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.pa-mini {
border: 1px dashed var(--bord2); background: none; color: var(--accent); font: inherit; font-size: 11.5px; font-weight: 700;
border-radius: 999px; padding: 2px 10px; cursor: pointer;
}
.pa-mini:hover { border-style: solid; border-color: var(--accent); }
.pa-noplano { font-size: 11.5px; font-weight: 600; color: var(--status-positive, var(--success)); }
/* estado vazio */
.pa-empty {
border: 1.5px dashed var(--bord2); border-radius: var(--r-lg, 14px); padding: 22px 22px 20px;
background: color-mix(in oklab, var(--surf) 70%, transparent); text-align: left;
}
.pa-empty-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.pa-empty p { margin: 0 0 14px; font-size: 13px; color: var(--muted); max-width: 70ch; }
/* botões */
.pa-btn {
border-radius: 999px; font: inherit; font-weight: 700; font-size: 13px; padding: 9px 18px; cursor: pointer;
border: 1px solid transparent; transition: filter 0.15s, background 0.15s, border-color 0.15s;
}
.pa-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pa-btn--primary { background: var(--accent); color: #fff; }
.pa-btn--primary:not(:disabled):hover { filter: brightness(1.07); }
.pa-btn--ghost { background: none; border-color: var(--bord2); color: var(--text); }
.pa-btn--ghost:hover { border-color: var(--accent); }
.pa-btn--sm { padding: 5px 12px; font-size: 12px; }
.pa-btn:focus-visible, .pa-mini:focus-visible, .pa-ia:focus-visible, .pa-seg-btn:focus-visible, .pa-escola:focus-visible, .pa-add:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px;
}
.pa-add {
width: 100%; margin-top: 4px; padding: 13px; border-radius: var(--r-lg, 14px);
border: 1.5px dashed var(--bord2); background: none; color: var(--muted); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
}
.pa-add:hover { border-color: var(--accent); color: var(--accent); }
/* cartão de ação */
.pa-acao {
background: var(--surf); border: 1px solid var(--bord); border-radius: var(--r-lg, 14px);
padding: 14px 16px 15px; margin-bottom: 12px; box-shadow: var(--sh-sm, none); scroll-margin-top: 120px;
}
.pa-acao--pendente { border-color: color-mix(in oklab, var(--status-warning, var(--warning)) 60%, var(--bord)); }
.pa-acao--atraso { border-left: 3px solid var(--status-warning, var(--warning)); }
.pa-acao-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pa-n {
font-family: var(--font-num, var(--font-display)); font-size: 12px; font-weight: 800; color: var(--accent);
background: color-mix(in oklab, var(--accent) 13%, transparent); border-radius: 8px; padding: 4px 9px; flex-shrink: 0;
}
.pa-titulo {
flex: 1 1 280px; min-width: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text);
background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 5px 8px;
}
.pa-titulo:hover { border-color: var(--bord); }
.pa-titulo:focus { outline: none; border-color: var(--accent); background: var(--surf2); }
.pa-titulo-ro { flex: 1 1 280px; margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); }
.pa-acao-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.pa-chip { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--bord); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.pa-ia {
font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent);
border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); border-radius: 999px; padding: 3px 11px;
}
.pa-ia:disabled { opacity: 0.6; cursor: progress; }
.pa-remover {
width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bord); background: var(--surf2);
color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.pa-remover:hover { color: var(--status-negative, var(--danger)); border-color: currentColor; }
.pa-grid { display: grid; gap: 11px 12px; }
.pa-grid--longo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pa-grid--curto { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 11px; }
.pa-campo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pa-campo--largo { grid-column: span 1; }
.pa-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pa-label b { font-weight: 600; color: var(--dim); text-transform: none; letter-spacing: 0; }
.pa-input, .pa-textarea, .pa-select {
width: 100%; font: inherit; font-size: 12.5px; color: var(--text); line-height: 1.45;
background: var(--surf2); border: 1px solid var(--bord); border-radius: 9px; padding: 7px 10px;
}
.pa-textarea { resize: vertical; min-height: 58px; }
.pa-input:focus, .pa-textarea:focus, .pa-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
.pa-select { cursor: pointer; padding-right: 26px; }
.pa-select--mini { width: auto; padding: 3px 24px 3px 9px; font-size: 11.5px; border-radius: 999px; }
.pa-quando { display: flex; gap: 6px; }
.pa-quando .pa-select { flex: 1 1 auto; }
.pa-date { flex: 0 0 132px; width: 132px; }
.pa-val { font-size: 12.5px; color: var(--text); line-height: 1.5; background: var(--surf2); border: 1px solid transparent; border-radius: 9px; padding: 7px 10px; white-space: pre-wrap; min-height: 34px; }
.pa-erro, .pa-erro:focus { border-color: var(--status-warning, var(--warning)) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--status-warning, var(--warning)) 18%, transparent); }
.pa-pend { margin-top: 9px; font-size: 12px; font-weight: 600; color: var(--status-warning, var(--warning)); }
/* sugestão da IA */
.pa-sug {
margin: 0 0 12px; padding: 11px 13px; border-radius: 11px;
background: color-mix(in oklab, var(--accent) 6%, var(--surf2)); border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--bord));
}
.pa-sug--erro { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text); }
.pa-sug-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12.5px; color: var(--text); }
.pa-sug dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.pa-sug dt, .pa-dl dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pa-sug dd, .pa-dl dd { margin: 1px 0 0; font-size: 12.5px; color: var(--text); line-height: 1.45; }
/* acompanhamento (após validar) */
.pa-acomp { margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--bord); display: flex; flex-direction: column; gap: 9px; }
.pa-acomp-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pa-seg { display: inline-flex; background: var(--surf2); border: 1px solid var(--bord); border-radius: 999px; padding: 3px; gap: 2px; }
.pa-seg-btn { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); padding: 5px 13px; border-radius: 999px; cursor: pointer; }
.pa-seg-btn.on { background: var(--surf); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.pa-seg-btn--concluida.on { color: var(--status-positive, var(--success)); }
.pa-seg-btn--em_curso.on { color: var(--accent); }
.pa-badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; border: 1px solid transparent; }
.pa-badge--ok { color: var(--status-positive, var(--success)); background: color-mix(in oklab, var(--status-positive, var(--success)) 13%, transparent); }
.pa-badge--atraso { color: var(--status-warning, var(--warning)); background: color-mix(in oklab, var(--status-warning, var(--warning)) 14%, transparent); }
.pa-badge--prazo { color: var(--muted); border-color: var(--bord); }
.pa-badge--mudo { color: var(--dim); border-color: var(--bord); }
.pa-atraso-txt { color: var(--status-warning, var(--warning)); font-weight: 700; font-size: 11.5px; }
.pa-proximas { margin: 0 0 22px; padding: 13px 16px; background: var(--surf); border: 1px solid var(--bord); border-radius: var(--r-lg, 14px); }
.pa-proximas ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pa-proximas li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.pa-proximas a { color: var(--text); font-weight: 600; text-decoration: none; }
.pa-proximas a:hover { color: var(--accent); }
.pa-obs { min-height: 84px; }
/* barra de validação */
.pa-footer {
position: sticky; bottom: 12px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
margin-top: 10px; padding: 13px 16px; border-radius: var(--r-lg, 14px);
background: color-mix(in oklab, var(--surf) 92%, transparent); backdrop-filter: blur(10px);
border: 1px solid var(--bord2); box-shadow: var(--sh-md, 0 8px 24px rgba(0, 0, 0, 0.18));
}
.pa-footer--ok { border-color: color-mix(in oklab, var(--status-positive, var(--success)) 45%, var(--bord)); }
.pa-footer-info { display: flex; flex-direction: column; gap: 2px; min-width: 220px; flex: 1; }
.pa-footer-info strong { font-size: 13px; color: var(--text); }
.pa-footer-info span { font-size: 12px; color: var(--muted); }
/* ── painel da rede ── */
.pa-tabs { display: inline-flex; gap: 4px; margin: 0 0 18px; padding: 3px; border: 1px solid var(--bord); border-radius: 999px; background: var(--surf2); }
.pa-tabs button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.pa-tabs button.on { background: var(--surf); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.pa-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.pa-filtro { border: 1px solid var(--bord); background: var(--surf); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.pa-filtro.on { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pa-escolas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pa-escola {
text-align: left; font: inherit; color: var(--text); cursor: pointer;
background: var(--surf); border: 1px solid var(--bord); border-radius: var(--r-lg, 14px); padding: 12px 14px; box-shadow: var(--sh-sm, none);
transition: border-color 0.15s, transform 0.15s;
}
.pa-escola:not(:disabled):hover { border-color: var(--accent); transform: translateY(-1px); }
.pa-escola:disabled { cursor: default; opacity: 0.85; }
.pa-escola--sem_plano { background: color-mix(in oklab, var(--surf) 60%, transparent); }
.pa-escola-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pa-escola-nome { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.pa-escola-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.pa-prog { height: 7px; border-radius: 999px; background: var(--surf3, var(--surf2)); overflow: hidden; margin-top: 11px; }
.pa-prog i { display: block; height: 100%; border-radius: 999px; background: var(--status-positive, var(--success)); }
.pa-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 14px; }
.pa-card { background: var(--surf); border: 1px solid var(--bord); border-radius: var(--r-lg, 14px); padding: 15px 16px; box-shadow: var(--sh-sm, none); min-width: 0; }
.pa-card-title { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; margin: 0; color: var(--text); }
.pa-card-sub { font-size: 12px; color: var(--muted); margin: 3px 0 12px; }
.pa-bars { display: flex; flex-direction: column; gap: 8px; }
.pa-bar-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; }
.pa-bar-lab { font-weight: 600; }
.pa-bar { display: block; height: 14px; border-radius: 5px; background: var(--surf2); overflow: hidden; min-width: 40px; }
.pa-bar i { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.pa-stack { display: flex; height: 16px; border-radius: 6px; overflow: hidden; background: var(--surf2); }
.pa-stack i { display: block; height: 100%; }
.pa-stack--concluida { background: var(--status-positive, var(--success)); }
.pa-stack--em_curso { background: var(--accent); }
.pa-stack--a_fazer { background: var(--dim); }
.pa-legenda { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 12.5px; }
.pa-legenda li { display: flex; align-items: center; gap: 7px; }
.pa-legenda b { margin-left: auto; font-family: var(--font-num, var(--font-display)); font-variant-numeric: tabular-nums; }
.pa-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pa-dot--atraso { background: var(--status-warning, var(--warning)); }
.pa-habs, .pa-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pa-habs li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 12.5px; }
.pa-rank li { display: grid; grid-template-columns: 20px minmax(0, 1.2fr) minmax(60px, 1fr) 40px 56px; gap: 8px; align-items: center; font-size: 12.5px; }
.pa-rank .pa-atraso-txt { text-align: right; }
.pa-rank-pos { font-family: var(--font-num, var(--font-display)); font-weight: 800; color: var(--muted); }
.pa-rank-nome { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pa-rank .pa-bar i { background: var(--status-positive, var(--success)); }
.pa-ia-card { margin-bottom: 20px; }
.pa-ia-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.pa-temas ul { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pa-temas li { padding: 11px 13px; border-radius: 11px; background: var(--surf2); border: 1px solid var(--bord); }
.pa-tema-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 13px; color: var(--text); }
.pa-temas p { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.pa-recomenda {
padding: 11px 14px; border-radius: 11px; font-size: 13px; line-height: 1.55; color: var(--text);
background: color-mix(in oklab, var(--accent) 7%, var(--surf2)); border-left: 3px solid var(--accent); margin-bottom: 10px;
}
.pa-alertas { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; color: var(--status-warning, var(--warning)); }
.pa-modal-ov { position: fixed; inset: 0; z-index: 400; background: rgba(2, 8, 22, 0.6); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding: 40px 16px; overflow-y: auto; }
.pa-modal { width: 100%; max-width: 920px; background: var(--bg); border: 1px solid var(--bord2); border-radius: 18px; box-shadow: var(--sh-md, 0 24px 60px rgba(0, 0, 0, 0.4)); overflow: hidden; }
.pa-modal-head { display: flex; justify-content: space-between; gap: 14px; padding: 18px 20px 14px; background: var(--surf); border-bottom: 1px solid var(--bord); }
.pa-modal-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 4px 0 3px; color: var(--text); }
.pa-modal-body { padding: 16px 20px 20px; }
.pa-dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 14px; }
.pa-dl-full { grid-column: 1 / -1; }
.pa-acao--ro { box-shadow: none; }
@media (max-width: 1100px) {
.pa-swot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pa-grid--curto, .pa-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pa-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.pa-grid--longo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
.pa-swot, .pa-grid--curto, .pa-dl, .pa-cols, .pa-sug dl, .pa-temas ul { grid-template-columns: minmax(0, 1fr); }
.pa-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pa-acao-tags { margin-left: 0; }
}
@media print {
.pa-footer, .pa-add, .pa-ia, .pa-remover, .pa-mini { display: none !important; }
.pa-acao { break-inside: avoid; box-shadow: none; }
}
/* ─────────────────────────────────────────────────────────────
22. ANÁLISE DE REDE — visual aprovado (ex-template Sinodal)
Tokens do tema (navy / Aurora / Eclipse). --above/--below.
───────────────────────────────────────────────────────────── */
.atlas-rede-analise {
--clA: var(--status-success, #5dbf95);
--clB: #e2a43d;
--clC: var(--accent-2, #7ea6ee);
--clD: #e58aa9;
--clE: var(--dim, #7892bd);
--series-rede: var(--above, #5b9bf0);
--series-top: #e0a93c;
--series-br: var(--muted, #9fb2cf);
--kc: var(--accent);
}
.atlas-rede-analise .ra-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; }
.atlas-rede-analise .ra-tnum { font-family: var(--font-num, var(--font-display)); font-variant-numeric: tabular-nums; }
.atlas-rede-analise h2.ra-sec {
font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.015em;
margin: 0 0 3px; scroll-margin-top: 108px;
}
.atlas-rede-analise .ra-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.atlas-rede-analise p.ra-lead { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; max-width: 72ch; }
.atlas-rede-analise .ra-hero {
background: linear-gradient(180deg, var(--surf), var(--bg));
border-bottom: none;
}
.atlas-rede-analise .ra-hero .ra-wrap { padding-block: 26px 20px; }
.atlas-rede-analise .ra-hero h1 {
font-family: var(--font-display); font-size: 28px; font-weight: 700; margin: 6px 0 0; letter-spacing: -.02em;
}
.atlas-rede-analise .ra-tag {
font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.atlas-rede-analise .ra-sub { color: var(--muted); font-size: 13.5px; margin-top: 5px; }
.atlas-rede-analise .ra-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px; }
.atlas-rede-analise .ra-kpi {
background: var(--surf); border: 1px solid var(--bord); border-radius: 14px;
padding: 15px 15px 14px; box-shadow: var(--sh-sm, none); position: relative; overflow: hidden;
}
.atlas-rede-analise .ra-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--kc); }
.atlas-rede-analise .ra-kpi .ra-v {
font-family: var(--font-num, var(--font-display)); font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
}
.atlas-rede-analise .ra-kpi .ra-v small { font-size: 14px; font-weight: 600; color: var(--muted); }
.atlas-rede-analise .ra-kpi .ra-k { font-size: 11.5px; color: var(--muted); margin-top: 7px; line-height: 1.3; }
.atlas-rede-analise .atlas-topbar::after {
display: none;
content: none;
}
html[data-theme] .atlas-rede-analise .atlas-topbar,
.atlas-rede-analise .atlas-topbar {
box-shadow: none;
}
.atlas-rede-analise nav.ra-secnav {
position: sticky; top: var(--shell-topbar-h, 56px); z-index: 30;
background: color-mix(in oklab, var(--bg) 92%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: none;
}
.atlas-rede-analise nav.ra-secnav .ra-wrap {
display: flex; align-items: center; gap: 2px;
overflow-x: auto; scrollbar-width: none;
padding: 4px; margin: 0 auto 14px;
background: var(--surf);
border: 1px solid color-mix(in oklab, var(--bord) 70%, transparent);
border-radius: 14px;
box-shadow: var(--sh-sm, none);
}
.atlas-rede-analise nav.ra-secnav .ra-wrap::-webkit-scrollbar { display: none; }
.atlas-rede-analise nav.ra-secnav a {
position: relative; color: var(--muted); text-decoration: none;
font-size: 12.5px; font-weight: 600;
padding: 7px 12px; border-radius: 10px; white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 0;
flex: 0 0 auto;
}
.atlas-rede-analise nav.ra-secnav a .n { font-family: var(--font-num, var(--font-display)); font-size: 10px; font-weight: 700; opacity: .45; }
.atlas-rede-analise nav.ra-secnav a:hover { color: var(--text); background: color-mix(in oklab, var(--bg) 70%, transparent); }
.atlas-rede-analise nav.ra-secnav a.active {
color: var(--text);
background: color-mix(in oklab, var(--accent) 12%, var(--surf2, var(--bg)));
}
.atlas-rede-analise nav.ra-secnav a.active .n { opacity: 1; color: var(--accent); }
.atlas-rede-analise main .ra-wrap { padding-block: 22px 10px; }
.atlas-rede-analise section { margin-bottom: 30px; }
.atlas-rede-analise .ra-card {
background: var(--surf); border: 1px solid var(--bord); border-radius: 16px;
padding: 16px 16px 12px; box-shadow: var(--sh-sm, none); min-width: 0;
}
.atlas-rede-analise .ra-card h3 { margin: 0 0 2px; font-size: 14.5px; font-weight: 700; font-family: var(--font-display); }
.atlas-rede-analise .ra-card .ra-cap { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.atlas-rede-analise .ra-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.atlas-rede-analise .ra-insight {
background: var(--surf2); border-left: 3px solid var(--accent); border-radius: 8px;
padding: 11px 13px; font-size: 13px; margin-top: 12px;
}
.atlas-rede-analise .ra-chart { width: 100%; height: 320px; }
.atlas-rede-analise .ra-chart-lg { height: 380px; }
.atlas-rede-analise .ra-toggle { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.atlas-rede-analise .ra-tbtn {
border: 1px solid var(--bord); background: var(--surf); color: var(--muted);
border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.atlas-rede-analise .ra-tbtn[aria-pressed="true"] {
color: var(--text); border-color: var(--above); background: var(--above-soft, color-mix(in oklab, var(--above) 15%, transparent));
}
.atlas-rede-analise .ra-banner {
margin: 12px 16px 0; padding: 10px 14px; border-radius: 10px; font-size: 13px;
background: color-mix(in oklab, var(--status-warning, #e2a43d) 14%, transparent);
border: 1px solid color-mix(in oklab, var(--status-warning, #e2a43d) 35%, transparent);
}
.atlas-rede-analise .ra-tablewrap { overflow: auto; max-height: 520px; }
.atlas-rede-analise .ra-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.atlas-rede-analise .ra-table th {
position: sticky; top: 0; background: var(--surf2); text-align: left; padding: 8px 10px;
font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer;
}
.atlas-rede-analise .ra-table td { padding: 8px 10px; border-top: 1px solid var(--bord); }
.atlas-rede-analise .ra-table tr.ra-click { cursor: pointer; }
.atlas-rede-analise .ra-table tr.ra-click:hover { background: var(--surf2); }
.atlas-rede-analise .ra-pill {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 800; color: var(--bg);
}
.atlas-rede-analise .ra-pill.A { background: var(--clA); }
.atlas-rede-analise .ra-pill.B { background: var(--clB); }
.atlas-rede-analise .ra-pill.C { background: var(--clC); }
.atlas-rede-analise .ra-pill.D { background: var(--clD); }
.atlas-rede-analise .ra-pill.E { background: var(--clE); }
.atlas-rede-analise .ra-above { color: var(--above); }
.atlas-rede-analise .ra-below { color: var(--below); }
.atlas-rede-analise .ra-search {
width: 100%; max-width: 360px; padding: 8px 12px; border: 1px solid var(--bord);
border-radius: 10px; background: var(--surf); color: var(--text); font: inherit;
}
.atlas-rede-analise .ra-sintese { display: grid; gap: 10px; }
.atlas-rede-analise .ra-sintese li { margin-left: 18px; font-size: 14px; line-height: 1.45; }
.atlas-rede-analise .ra-sintese-cards {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.atlas-rede-analise .ra-sintese-card h3 { margin-bottom: 6px; }
.atlas-rede-analise .ra-sintese-card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.atlas-rede-analise .ra-hero-top {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.atlas-rede-analise .ra-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px;
}
.atlas-rede-analise .ra-legend {
display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--muted);
}
.atlas-rede-analise .ra-legend i {
display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle;
}
.atlas-rede-analise .ra-heatcell { text-align: center; font-weight: 600; }
.atlas-rede-analise .ra-hablist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.atlas-rede-analise .ra-hablist li { display: grid; gap: 2px; font-size: 13px; }
.atlas-rede-analise .ra-hablist b { font-size: 12.5px; }
.atlas-rede-analise tr.ra-row-on { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.atlas-rede-analise .ra-kpis-4 { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.atlas-rede-analise .ra-pillrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.atlas-rede-analise .ra-lac {
display: inline-flex; align-items: center; border-radius: 999px;
padding: 2px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.atlas-rede-analise .ra-lac-rede { background: color-mix(in oklab, var(--below, #c44) 18%, transparent); color: var(--below, #c44); }
.atlas-rede-analise .ra-lac-local { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
.atlas-rede-analise .ra-lac-pri { background: color-mix(in oklab, #e0a93c 22%, transparent); color: #a06b00; }
.atlas-rede-analise .ra-pri-on { color: var(--text) !important; border-color: #e0a93c !important; background: color-mix(in oklab, #e0a93c 18%, transparent) !important; }
.atlas-rede-analise .ra-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.atlas-rede-analise .ra-tipo {
display: inline-flex; border-radius: 999px; padding: 2px 8px;
font-size: 11px; font-weight: 600; background: var(--surf2); color: var(--muted);
}
.atlas-rede-analise .ra-heat-esc { font-size: 12px; }
.atlas-rede-analise .ra-heat-esc td:first-child { max-width: 220px; }
@media (max-width: 760px) {
.atlas-rede-analise .ra-kpis,
.atlas-rede-analise .ra-kpis-4 { grid-template-columns: repeat(2, 1fr); }
.atlas-rede-analise .ra-grid2,
.atlas-rede-analise .ra-sintese-cards { grid-template-columns: 1fr; }
.atlas-rede-analise .ra-hero h1 { font-size: 21px; }
.atlas-rede-analise nav.ra-secnav { top: 48px; }
.atlas-rede-analise nav.ra-secnav a { padding: 5px 10px; font-size: 12px; }
}
@media print {
.atlas-rede-analise nav.ra-secnav,
.atlas-rede-analise .ra-print,
.atlas-topbar { display: none !important; }
.atlas-rede-analise section { break-inside: avoid; }
}