/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ BussolaFiscal · Radar NCM — sistema visual Alinhado ponto a ponto com interface/app-saas/src/app/globals.css: background/card/border/foreground/muted-foreground em oklch idênticos ao app, --brand-green / --status-success / --status-warning literais (mesmos hex), --radius na mesma escala (lg/md/sm/2xl) e as mesmas variáveis de tracking de tipografia (display/heading/body). Tema: dois temas completos (dark = padrão da marca, light = "white" do app), com override manual via atributo [data-theme] no (setado por app.js, persistido em localStorage) e fallback automático por prefers-color-scheme quando o usuário nunca escolheu manualmente. ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ :root { /* ── tokens invariantes por tema (fonte, raio, sombra, tracking) ── */ --font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif; --tracking-display: -0.04em; --tracking-heading: -0.025em; --tracking-body: -0.01em; --radius: 14px; /* --radius-lg do app (0.875rem) */ --radius-md: 12px; /* --radius-md do app: usado em botões, inputs */ --radius-sm: 10px; /* --radius-sm do app: nav item, controles pequenos */ --radius-2xl: 16px; /* --radius-2xl do app: painel tipo "card-surface" (hero) */ --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.04), 0 1px 4px oklch(0 0 0 / 0.06); --shadow-lg: 0 4px 8px oklch(0 0 0 / 0.04), 0 8px 24px oklch(0 0 0 / 0.10), 0 2px 4px oklch(0 0 0 / 0.04); /* verde de marca fixo — mesmo hex nos dois temas do app (--brand-green não muda entre :root/.dark), usado só onde o preenchimento precisa ser o mesmo verde vívido independente do tema (CTA primário) */ --brand-green: #02d592; /* texto sobre o verde da marca. Existe como token, e nao literal, porque a cor de texto tem de acompanhar --brand-green -- foi por estarem separados que o branco sobreviveu aqui depois de ja ter sido corrigido no app-saas, onde o mesmo valor e --brand-green-foreground: oklch(0.19 0.02 160). */ --on-brand: #0C1711; --sidebar-w: 268px; /* ── tokens de tema — valores abaixo = dark (padrão da marca) ── Fonte: interface/app-saas .dark em globals.css */ --bg: oklch(0.08 0.02 155); /* --background */ --bg-2: oklch(0.11 0.03 155); /* --sidebar */ --surface: oklch(0.14 0.04 155); /* --card */ --surface-2: oklch(0.18 0.04 155); /* --muted / --accent */ --surface-3: oklch(0.22 0.05 155); /* elevação extra (toast), 1 passo acima de surface-2 */ --line: oklch(1 0 0 / 10%); /* --border */ --line-2: oklch(1 0 0 / 12%); /* --input */ --green: #009359; /* --brand-green-dark — preenchimentos decorativos (bullets) */ --green-bright: #02d592; /* --status-success / --brand-green — texto/ícone de destaque */ --green-soft: #02d59226; /* --status-success-bg */ --green-line: #02d5924d; /* --status-success-border */ --text: oklch(0.95 0.005 155); /* --foreground */ --text-2: oklch(0.70 0.03 155); /* --muted-foreground */ --text-3: oklch(0.55 0.025 155); /* terceiro nível — o app só tem 2, deriva mantendo o hue */ --amber: oklch(0.82 0.13 75); /* --status-warning */ --amber-body: oklch(0.90 0.09 75); /* corpo de texto sobre o bloco de impacto */ --amber-chip-bg: oklch(0.82 0.13 75 / 15%); /* --status-warning-bg */ --amber-chip-line: oklch(0.82 0.13 75 / 30%); /* --status-warning-border */ --amber-block-bg: oklch(0.82 0.13 75 / 8%); --amber-block-line: oklch(0.82 0.13 75 / 18%); --glow-1: oklch(0.77 0.17 162 / 6%); /* --mesh-primary do app */ --glow-2: oklch(0.57 0.16 162 / 4%); /* --mesh-secondary do app */ --scrollbar-thumb: oklch(0.22 0.05 155); --scrollbar-thumb-hover: oklch(0.30 0.06 155); --sidebar-glass-1: oklch(0.11 0.03 155 / 60%); --sidebar-glass-2: oklch(0.08 0.02 155 / 20%); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: "Inter", system-ui, sans-serif; font-size: 15px; line-height: 1.55; letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; /* brilho ambiente verde, mesma receita do --mesh-primary/--mesh-secondary do app */ background-image: radial-gradient(900px 520px at 10% 20%, var(--glow-1), transparent 60%), radial-gradient(800px 600px at 90% 80%, var(--glow-2), transparent 55%); background-attachment: fixed; } a { color: inherit; text-decoration: none; } ::selection { background: var(--green-soft); } /* ── scrollbar ── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ░░ LAYOUT ░░ */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; padding: 22px 18px; display: flex; flex-direction: column; gap: 26px; border-right: 1px solid var(--line); background: linear-gradient(180deg, var(--sidebar-glass-1), var(--sidebar-glass-2)); backdrop-filter: blur(4px); } /* topo da sidebar = "header" do app: logo + nome + toggle de tema */ .side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px; min-width: 0; flex: 1; } .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: none; color: var(--green-bright); } .brand-text { min-width: 0; } .brand-text strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: var(--tracking-heading); } .brand-text small { color: var(--text-3); font-size: 11.5px; letter-spacing: 0.5px; text-transform: uppercase; } .theme-toggle { position: fixed; top: 18px; right: 22px; z-index: 60; display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); color: var(--text-2); cursor: pointer; background: var(--surface); border: 1px solid var(--line-2); transition: all 0.15s ease; } .theme-toggle:hover { color: var(--text); background: var(--surface-2); border-color: var(--green-line); } .theme-toggle .ico { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .ico-moon { display: none; } :root[data-theme="light"] .theme-toggle .ico-sun { display: none; } :root[data-theme="light"] .theme-toggle .ico-moon { display: block; } .nav { display: flex; flex-direction: column; gap: 3px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; font-size: 14px; border: 1px solid transparent; transition: all 0.15s ease; } .nav-item .ico { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .nav-item:hover { color: var(--text); background: var(--surface); } .nav-item.active { color: var(--text); background: var(--green-soft); border-color: var(--green-line); } .nav-item.active .ico { color: var(--green-bright); } .nav-badge { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; color: var(--green-bright); background: var(--green-soft); border: 1px solid var(--green-line); } .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } .credit-pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--green-bright); background: var(--green-soft); border: 1px solid var(--green-line); } .side-note { margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.5; padding: 0 4px; } /* ░░ MAIN ░░ */ .main { padding: 34px 40px 80px; max-width: 1180px; width: 100%; } .loading { color: var(--text-3); padding: 80px 0; text-align: center; } .page-head { margin-bottom: 26px; } .page-head .eyebrow { color: var(--green-bright); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; } .page-head h1 { font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: var(--tracking-heading); margin: 8px 0 6px; } .page-head p { color: var(--text-2); margin: 0; max-width: 640px; } /* ░░ BOTÕES / PILLS ░░ */ .btn { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; padding: 11px 18px; border-radius: var(--radius-md); font-weight: 600; font-size: 14px; border: 1px solid transparent; font-family: inherit; transition: all 0.15s ease; } .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* mirror do variant="brand" do app: verde fixo nos dois temas, texto escuro */ .btn-primary { background: var(--brand-green); color: var(--on-brand); box-shadow: var(--shadow-sm); } .btn-primary:hover { filter: brightness(0.94); } /* mirror do variant="outline" */ .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line-2); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--green-line); } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); } .chip-mono { font-family: "JetBrains Mono", monospace; color: var(--green-bright); letter-spacing: 0.3px; background: var(--green-soft); border-color: var(--green-line); } .chip-impact { color: var(--amber); background: var(--amber-chip-bg); border-color: var(--amber-chip-line); } /* ░░ HERO (home) ░░ */ .hero { position: relative; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--line); background: radial-gradient(700px 380px at 10% 20%, var(--glow-1), transparent 55%), linear-gradient(180deg, var(--surface), var(--bg-2)); padding: 46px 44px; margin-bottom: 30px; } .hero .pill { margin-bottom: 26px; } .hero h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); font-size: 50px; line-height: 1.02; margin: 0 0 18px; max-width: 720px; } .hero h2 .accent { color: var(--green-bright); } .hero p { color: var(--text-2); font-size: 16px; max-width: 560px; margin: 0 0 26px; } .hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; } /* ░░ STATS ░░ */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 30px; } .stat { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); padding: 20px 22px; } .stat .v { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: var(--tracking-heading); } .stat .l { color: var(--text-3); font-size: 12.5px; margin-top: 2px; } /* ░░ SECTION ░░ */ .section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 32px 0 16px; } .section-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 0; letter-spacing: var(--tracking-heading); } .section-head a { color: var(--green-bright); font-size: 13px; font-weight: 500; } /* ░░ FILTER BAR ░░ */ .filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); margin-bottom: 22px; } .search-box { position: relative; flex: 1 1 280px; } .search-box svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; stroke: var(--text-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .input, .select { width: 100%; background: var(--bg-2); color: var(--text); font-family: inherit; font-size: 14px; border: 1px solid var(--line-2); border-radius: var(--radius-md); padding: 11px 14px; outline: none; transition: border-color 0.15s; } .search-box .input { padding-left: 40px; } .input:focus, .select:focus { border-color: var(--green-line); } .select { flex: 0 0 auto; width: auto; min-width: 150px; cursor: pointer; } .filter-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 11px 14px; border-radius: var(--radius-md); font-size: 13.5px; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line-2); } .filter-toggle.on { color: var(--green-bright); border-color: var(--green-line); background: var(--green-soft); } .filter-toggle input { display: none; } .filter-count { color: var(--text-3); font-size: 13px; margin-left: auto; padding-right: 4px; } /* ░░ NEWS CARD ░░ */ .feed { display: flex; flex-direction: column; gap: 16px; } .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); padding: 22px 24px; transition: border-color 0.15s, transform 0.15s; } .card:hover { border-color: var(--line-2); } .card-top { display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; } .card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-3); font-size: 12.5px; margin-bottom: 12px; } /* badge "Verificado" — pill de status, no mesmo estilo dos badges do app */ .card-meta .verified { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--green-bright); background: var(--green-soft); border: 1px solid var(--green-line); } .card-meta .verified svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .card-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); opacity: 0.6; } .card h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: var(--tracking-heading); margin: 0 0 10px; } .card .summary { color: var(--text-2); margin: 0 0 14px; } .chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; } .block { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; } .block-label { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .block-label svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .block.context .block-label { color: var(--text-2); } .block.context .body { color: var(--text-2); font-size: 14px; } .block.impact { border: 1px solid var(--amber-block-line); background: var(--amber-block-bg); border-radius: var(--radius-md); padding: 13px 15px; margin-top: 14px; } .block.impact .block-label { color: var(--amber); } .block.impact .body { color: var(--amber-body); font-size: 14px; } .keypoints { margin: 0; padding-left: 2px; list-style: none; display: flex; flex-direction: column; gap: 7px; } .keypoints li { position: relative; padding-left: 20px; color: var(--text-2); font-size: 14px; } .keypoints li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); } .source-link { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 13px; } .source-link:hover { color: var(--green-bright); } .source-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .follow-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; font-family: inherit; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line-2); transition: all 0.15s; } .follow-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .follow-btn:hover { color: var(--text); border-color: var(--green-line); } .follow-btn.following { color: var(--green-bright); background: var(--green-soft); border-color: var(--green-line); } .follow-btn.following svg { fill: var(--green-bright); } /* link "Ler a edição completa" (card compacto do feed) */ .read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--green-bright); } .read-more:hover { text-decoration: underline; } .read-more svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ░░ DAY CARDS ░░ */ .day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } .day-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: all 0.15s; cursor: pointer; } .day-card:hover { border-color: var(--green-line); transform: translateY(-2px); } .day-card .date-row { display: flex; align-items: center; justify-content: space-between; } .day-card .dow { color: var(--green-bright); font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; } .day-card .dnum { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: var(--tracking-heading); } .day-card .dmon { color: var(--text-3); font-size: 13px; } .day-card .count-pill { font-size: 12px; font-weight: 600; color: var(--green-bright); background: var(--green-soft); border: 1px solid var(--green-line); padding: 4px 10px; border-radius: 999px; } .day-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; } .day-card li { color: var(--text-2); font-size: 13px; line-height: 1.4; display: flex; gap: 8px; } .day-card li::before { content: ""; margin-top: 7px; width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--green); } /* ░░ EMPTY ░░ */ .empty { text-align: center; padding: 70px 24px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--surface); color: var(--text-3); } .empty .ico-circle { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; background: var(--green-soft); color: var(--green-bright); border: 1px solid var(--green-line); } .empty .ico-circle svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .empty h3 { color: var(--text); font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-heading); margin: 0 0 6px; } .empty p { margin: 0 auto; max-width: 380px; } .back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 13px; margin-bottom: 18px; } .back-link:hover { color: var(--green-bright); } .back-link svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ░░ TOAST ░░ */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--surface-3); color: var(--text); border: 1px solid var(--green-line); padding: 12px 18px; border-radius: var(--radius-md); font-size: 14px; box-shadow: var(--shadow-lg); opacity: 0; transition: all 0.2s ease; z-index: 50; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ░░ TEMA CLARO ░░ Duas formas de entrar no light: 1) automática — o SO/navegador prefere light E o usuário nunca escolheu manualmente (sem [data-theme] no ); 2) manual — usuário clicou o toggle; app.js grava [data-theme="light"] no e persiste em localStorage. A regra abaixo sem @media é incondicional, então vence mesmo com o SO em dark. Tokens medidos em interface/app-saas/src/app/globals.css (:root claro): background/card/border/foreground/muted-foreground literais; o verde de texto/ícone (--green-bright) usa --brand-green-dark ainda mais escurecido (oklch 0.50 0.16 162) porque o verde "puro" da marca dá 1.9:1 de contraste sobre fundo claro — abaixo do mínimo 3:1 da WCAG para texto grande; --amber vem de --status-warning claro. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: oklch(0.96 0.006 155); --bg-2: oklch(0.97 0.006 155); --surface: oklch(0.99 0.003 155); --surface-2: oklch(0.955 0.008 155); --surface-3: oklch(1 0 0); --line: oklch(0.91 0.012 155); --line-2: oklch(0.91 0.012 155); --green: #009359; --green-bright: #007d45; --green-soft: rgba(0, 125, 69, 0.12); --green-line: rgba(0, 125, 69, 0.32); --text: oklch(0.13 0.04 155); --text-2: oklch(0.38 0.04 155); --text-3: oklch(0.52 0.03 155); --amber: #723500; --amber-body: #4e2800; --amber-chip-bg: rgba(218, 149, 11, 0.12); --amber-chip-line: rgba(218, 149, 11, 0.32); --amber-block-bg: rgba(218, 149, 11, 0.07); --amber-block-line: rgba(218, 149, 11, 0.28); --glow-1: oklch(0.77 0.17 162 / 4%); --glow-2: oklch(0.57 0.16 162 / 3%); --scrollbar-thumb: #c8d0ca; --scrollbar-thumb-hover: #9ba99f; --sidebar-glass-1: rgba(255, 255, 255, 0.6); --sidebar-glass-2: rgba(239, 243, 240, 0.2); } } :root[data-theme="light"] { --bg: oklch(0.96 0.006 155); --bg-2: oklch(0.97 0.006 155); --surface: oklch(0.99 0.003 155); --surface-2: oklch(0.955 0.008 155); --surface-3: oklch(1 0 0); --line: oklch(0.91 0.012 155); --line-2: oklch(0.91 0.012 155); --green: #009359; --green-bright: #007d45; --green-soft: rgba(0, 125, 69, 0.12); --green-line: rgba(0, 125, 69, 0.32); --text: oklch(0.13 0.04 155); --text-2: oklch(0.38 0.04 155); --text-3: oklch(0.52 0.03 155); --amber: #723500; --amber-body: #4e2800; --amber-chip-bg: rgba(218, 149, 11, 0.12); --amber-chip-line: rgba(218, 149, 11, 0.32); --amber-block-bg: rgba(218, 149, 11, 0.07); --amber-block-line: rgba(218, 149, 11, 0.28); --glow-1: oklch(0.77 0.17 162 / 4%); --glow-2: oklch(0.57 0.16 162 / 3%); --scrollbar-thumb: #c8d0ca; --scrollbar-thumb-hover: #9ba99f; --sidebar-glass-1: rgba(255, 255, 255, 0.6); --sidebar-glass-2: rgba(239, 243, 240, 0.2); } /* ░░ RESPONSIVO ░░ */ @media (max-width: 880px) { .app { grid-template-columns: 1fr; } .sidebar { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); } .side-top { flex: none; } .nav { flex-direction: row; } .nav-item span { display: none; } .nav-item { padding: 9px; } .side-foot, .brand-text { display: none; } .main { padding: 24px 18px 60px; } .hero { padding: 32px 24px; } .hero h2 { font-size: 34px; } .stats { grid-template-columns: 1fr; } }