/* ============================================================================ NormAtiva — native design system (no framework) Modern glassmorphism app: translucent surfaces + blur, violet→indigo gradients, layered shadows + glow, radial-mesh background, polished dark mode. Theme is switched by [data-theme="light|dark"] on (see theme.js). ============================================================================ */ :root { /* Brand */ --na-primary: #7c3aed; --na-primary-2: #6366f1; --na-grad: linear-gradient(135deg, #7c3aed 0%, #6366f1 55%, #4f46e5 100%); --na-primary-hover: rgba(124, 58, 237, .10); /* soft tint (used widely) */ --na-primary-contrast: #ffffff; /* Risk bands */ --na-success: #16a34a; --na-warning: #d97706; --na-error: #dc2626; --na-info: #0ea5e9; /* ---- Risk bands (Baixo / Atenção / Crítico) ---- DELIBERATELY NOT THEMED. These are a status palette painting DATA, not chrome: if the fill shifted per theme, the same score would read as a different colour and two screenshots of one report would not agree. Reusing --na-success/warning/error was also measurably broken — dark themes define those as LIGHT accents meant for text ON a dark background, so used as fills behind white text they gave 1.74:1 (green) and 2.77:1 (red), far under the 4.5 floor. Every step below was chosen by measurement, not by eye: text-on-fill >= 4.5:1, and the fill stays >= 3:1 against the dark surface so cells never sink into a dark card. The amber sits at 2.15:1 against a white surface, which is inherent to amber — the relief is the secondary encoding these cells already carry: the printed score, the B/A/C letter, and the legend. */ --na-risk-low: #15803d; --na-risk-low-fg: #ffffff; /* texto 5.02:1 */ --na-risk-mid: #f59e0b; --na-risk-mid-fg: #241a04; /* texto 7.99:1 */ --na-risk-high: #dc2626; --na-risk-high-fg: #ffffff; /* texto 4.83:1 */ /* Surfaces & text (light) */ --na-bg: #f4f2fb; --na-bg-grey: rgba(124, 58, 237, .05); --na-surface: rgba(255, 255, 255, .72); /* glass */ --na-surface-solid: #ffffff; --na-glass-border: rgba(255, 255, 255, .7); --na-text: #191325; --na-text-secondary: #675e7c; --na-line: rgba(25, 19, 37, .09); --na-line-input: rgba(25, 19, 37, .16); /* Depth */ --na-radius: 14px; --na-radius-lg: 20px; --na-blur: saturate(180%) blur(14px); --na-shadow: 0 6px 24px rgba(30, 12, 60, .10), 0 1px 2px rgba(30, 12, 60, .06); --na-shadow-lg: 0 24px 60px rgba(30, 12, 60, .18), 0 2px 6px rgba(30, 12, 60, .08); --na-glow: 0 10px 30px rgba(124, 58, 237, .38); --na-ring: 0 0 0 3px rgba(124, 58, 237, .30); --na-mesh: radial-gradient(38% 40% at 12% 8%, rgba(124, 58, 237, .20), transparent 60%), radial-gradient(36% 38% at 88% 12%, rgba(99, 102, 241, .18), transparent 60%), radial-gradient(45% 45% at 50% 108%, rgba(14, 165, 233, .12), transparent 60%); --na-maxw: 1200px; --na-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ===== Escala tipográfica ===== Fonte única de tamanho de texto. Antes destes tokens o arquivo tinha 132 declarações de font-size em 38 valores distintos — só entre .72rem e .98rem eram DEZESSETE degraus (.84, .85, .86, .88, .89…). Ninguém distingue um do outro de perto, mas a falta de ritmo é visível na página inteira: é o que fazia a interface parecer desalinhada. Dez degraus cobrem tudo o que o app usa hoje, e o mapeamento foi para o degrau mais próximo — a intenção é dar ritmo, não redesenhar a escala. Ao estilizar algo novo, ESCOLHA UM DEGRAU; não invente um valor intermediário, é assim que a bagunça volta. Sempre em rem, nunca em em: um tamanho relativo herda do pai e o mesmo componente acaba com tamanhos diferentes conforme onde cai (o chip chegava a 25px dentro de um h1, maior que o próprio h3). */ --na-fs-2xs: .75rem; /* 12px — badges, cabeçalho de tabela, metadado */ --na-fs-xs: .8125rem; /* 13px — rótulo de campo, dica */ --na-fs-sm: .875rem; /* 14px — texto de apoio, checkbox */ --na-fs-md: .9375rem; /* 15px — corpo denso: célula de tabela, item de lista */ --na-fs-base: 1rem; /* 16px — corpo e campos de formulário */ --na-fs-lg: 1.125rem; /* 18px — h4, destaque em cartão */ --na-fs-xl: 1.25rem; /* 20px — h3 */ --na-fs-2xl: 1.5rem; /* 24px — h2 */ --na-fs-3xl: 1.75rem; /* 28px — h1 de seção */ --na-fs-4xl: 2rem; /* 32px — h1 de página, número de destaque */ } :root[data-theme="violet"] { color-scheme: light; } /* Um quadro sem transição nenhuma, ligado pelo theme.js APENAS quando ele acabou de repor um atributo do que a navegação melhorada do Blazor tinha derrubado. Não é um "desligar animações": é cancelar uma transição que foi armada por um estado que nunca deveria ter existido. A troca de DOM força um recálculo de estilo com o atributo ausente, e o navegador guarda esse valor como estilo anterior — os rótulos da barra lateral recolhida (que são os tooltips flutuantes) ficavam desaparecendo de opacity 1 para 0 a cada navegação, embora o estado expandido nunca chegasse a ser pintado. O raciocínio inteiro está no theme.ts. */ :root[data-na-swap] * { transition: none !important; } /* ===== Theme: Meia-noite (dark violet) ===== */ :root[data-theme="midnight"] { color-scheme: dark; --na-primary: #a78bfa; --na-primary-2: #818cf8; --na-grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 55%, #4f46e5 100%); --na-primary-hover: rgba(167, 139, 250, .14); --na-primary-contrast: #14101f; --na-success: #4ade80; --na-warning: #fbbf24; --na-error: #f87171; --na-info: #38bdf8; --na-bg: #0c0a13; --na-bg-grey: rgba(255, 255, 255, .04); --na-surface: rgba(30, 25, 44, .62); --na-surface-solid: #1b1727; --na-glass-border: rgba(255, 255, 255, .08); --na-text: #f3effc; --na-text-secondary: #b4a9cc; --na-line: rgba(255, 255, 255, .08); --na-line-input: rgba(255, 255, 255, .16); --na-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4); --na-shadow-lg: 0 30px 70px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .5); --na-glow: 0 10px 34px rgba(124, 58, 237, .5); --na-ring: 0 0 0 3px rgba(167, 139, 250, .35); --na-mesh: radial-gradient(40% 44% at 12% 6%, rgba(139, 92, 246, .28), transparent 60%), radial-gradient(38% 40% at 90% 10%, rgba(79, 70, 229, .26), transparent 60%), radial-gradient(50% 50% at 50% 110%, rgba(14, 165, 233, .16), transparent 60%); } /* ===== Theme: Oceano (light cyan→blue) ===== */ :root[data-theme="ocean"] { color-scheme: light; --na-primary: #0891b2; --na-primary-2: #2563eb; --na-grad: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 50%, #2563eb 100%); --na-primary-hover: rgba(8, 145, 178, .10); --na-primary-contrast: #ffffff; --na-success: #059669; --na-warning: #d97706; --na-error: #e11d48; --na-info: #0284c7; --na-bg: #edf4fb; --na-bg-grey: rgba(8, 145, 178, .06); --na-surface: rgba(255, 255, 255, .72); --na-surface-solid: #ffffff; --na-glass-border: rgba(255, 255, 255, .7); --na-text: #0c1a26; --na-text-secondary: #4a6273; --na-line: rgba(12, 26, 38, .09); --na-line-input: rgba(12, 26, 38, .16); --na-shadow: 0 6px 24px rgba(6, 60, 80, .10), 0 1px 2px rgba(6, 60, 80, .06); --na-shadow-lg: 0 24px 60px rgba(6, 60, 80, .18), 0 2px 6px rgba(6, 60, 80, .08); --na-glow: 0 10px 30px rgba(8, 145, 178, .35); --na-ring: 0 0 0 3px rgba(8, 145, 178, .30); --na-mesh: radial-gradient(38% 40% at 12% 8%, rgba(6, 182, 212, .20), transparent 60%), radial-gradient(36% 38% at 88% 12%, rgba(37, 99, 235, .16), transparent 60%), radial-gradient(45% 45% at 50% 108%, rgba(20, 184, 166, .12), transparent 60%); } /* ===== Theme: Esmeralda (dark emerald→teal) ===== */ :root[data-theme="emerald"] { color-scheme: dark; --na-primary: #34d399; --na-primary-2: #22d3ee; --na-grad: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%); --na-primary-hover: rgba(52, 211, 153, .14); --na-primary-contrast: #05201a; --na-success: #4ade80; --na-warning: #fbbf24; --na-error: #fb7185; --na-info: #38bdf8; --na-bg: #07130f; --na-bg-grey: rgba(255, 255, 255, .04); --na-surface: rgba(18, 38, 32, .62); --na-surface-solid: #0f221c; --na-glass-border: rgba(255, 255, 255, .08); --na-text: #eafaf3; --na-text-secondary: #9fc3b4; --na-line: rgba(255, 255, 255, .08); --na-line-input: rgba(255, 255, 255, .16); --na-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4); --na-shadow-lg: 0 30px 70px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .5); --na-glow: 0 10px 34px rgba(16, 185, 129, .45); --na-ring: 0 0 0 3px rgba(52, 211, 153, .35); --na-mesh: radial-gradient(40% 44% at 12% 6%, rgba(16, 185, 129, .26), transparent 60%), radial-gradient(38% 40% at 90% 10%, rgba(6, 182, 212, .24), transparent 60%), radial-gradient(50% 50% at 50% 110%, rgba(20, 184, 166, .16), transparent 60%); } /* ===== Theme: Pôr do sol (light amber→rose) ===== */ :root[data-theme="sunset"] { color-scheme: light; --na-primary: #ea580c; --na-primary-2: #db2777; --na-grad: linear-gradient(135deg, #f97316 0%, #f43f5e 55%, #db2777 100%); --na-primary-hover: rgba(234, 88, 12, .10); --na-primary-contrast: #ffffff; --na-success: #059669; --na-warning: #d97706; --na-error: #e11d48; --na-info: #0284c7; --na-bg: #fdf2ec; --na-bg-grey: rgba(234, 88, 12, .06); --na-surface: rgba(255, 255, 255, .74); --na-surface-solid: #fffaf7; --na-glass-border: rgba(255, 255, 255, .72); --na-text: #2a1710; --na-text-secondary: #7a5a4c; --na-line: rgba(42, 23, 16, .10); --na-line-input: rgba(42, 23, 16, .17); --na-shadow: 0 6px 24px rgba(120, 40, 10, .12), 0 1px 2px rgba(120, 40, 10, .07); --na-shadow-lg: 0 24px 60px rgba(120, 40, 10, .20), 0 2px 6px rgba(120, 40, 10, .09); --na-glow: 0 10px 30px rgba(249, 115, 22, .38); --na-ring: 0 0 0 3px rgba(249, 115, 22, .30); --na-mesh: radial-gradient(38% 40% at 12% 8%, rgba(249, 115, 22, .20), transparent 60%), radial-gradient(36% 38% at 88% 12%, rgba(219, 39, 119, .16), transparent 60%), radial-gradient(45% 45% at 50% 108%, rgba(245, 158, 11, .14), transparent 60%); } /* ===== Theme: Grafite (dark slate, cool blue) ===== */ :root[data-theme="graphite"] { color-scheme: dark; --na-primary: #60a5fa; --na-primary-2: #818cf8; --na-grad: linear-gradient(135deg, #3b82f6 0%, #6366f1 55%, #8b5cf6 100%); --na-primary-hover: rgba(96, 165, 250, .14); --na-primary-contrast: #0a0f1a; --na-success: #4ade80; --na-warning: #fbbf24; --na-error: #f87171; --na-info: #38bdf8; --na-bg: #0e1017; --na-bg-grey: rgba(255, 255, 255, .035); --na-surface: rgba(30, 34, 45, .6); --na-surface-solid: #191c26; --na-glass-border: rgba(255, 255, 255, .07); --na-text: #eef1f7; --na-text-secondary: #a3adbf; --na-line: rgba(255, 255, 255, .075); --na-line-input: rgba(255, 255, 255, .15); --na-shadow: 0 8px 30px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4); --na-shadow-lg: 0 30px 70px rgba(0, 0, 0, .65), 0 2px 8px rgba(0, 0, 0, .5); --na-glow: 0 10px 34px rgba(59, 130, 246, .4); --na-ring: 0 0 0 3px rgba(96, 165, 250, .35); --na-mesh: radial-gradient(40% 44% at 12% 6%, rgba(59, 130, 246, .22), transparent 60%), radial-gradient(38% 40% at 90% 10%, rgba(139, 92, 246, .20), transparent 60%), radial-gradient(50% 50% at 50% 110%, rgba(14, 165, 233, .14), transparent 60%); } /* ===== Theme: Corporativo (solid, no transparency / no blur) ===== */ :root[data-theme="corporate"] { color-scheme: light; --na-primary: #2563eb; --na-primary-2: #1d4ed8; --na-grad: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); --na-primary-hover: rgba(37, 99, 235, .08); --na-primary-contrast: #ffffff; --na-success: #15803d; --na-warning: #b45309; --na-error: #b91c1c; --na-info: #0369a1; --na-bg: #eef1f6; --na-bg-grey: #f2f5f9; --na-surface: #ffffff; --na-surface-solid: #ffffff; --na-glass-border: #e2e8f0; --na-text: #0f172a; --na-text-secondary: #475569; --na-line: #e2e8f0; --na-line-input: #cbd5e1; --na-shadow: 0 1px 3px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06); --na-shadow-lg: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .08); --na-glow: 0 4px 14px rgba(37, 99, 235, .22); --na-ring: 0 0 0 3px rgba(37, 99, 235, .25); --na-blur: none; /* no glass blur */ --na-mesh: none; /* flat background */ } /* ---- Paleta categórica (identidade, não magnitude) ------------------------ Para séries em que a cor só diz "qual", nunca "quanto" nem "quão grave": o mix de planos do painel da plataforma é o primeiro uso. Deliberadamente SEPARADA de --na-success/warning/error, que pintam estado — reaproveitar o âmbar de "atenção" para o terceiro plano do catálogo faria um plano parecer um alerta. Ao contrário das faixas de risco (--na-risk-*, fixas entre temas), estes têm um passo próprio no escuro: as cores claras o bastante para um fundo branco somem no fundo escuro. Ambos os conjuntos foram validados (banda de luminosidade, piso de croma, separação para daltonismo deutan/protan/tritan >= 8 e contraste >= 3:1 contra a superfície do tema) — reordenar ou trocar um passo exige revalidar, não é escolha de gosto. --na-cat-0 é o cinza de "resto/indefinido": só ele pode repetir e ficar fora da ordem. */ :root { --na-cat-0: #94a3b8; --na-cat-1: #8b5cf6; --na-cat-2: #0891b2; --na-cat-3: #db2777; --na-cat-4: #4338ca; } :root[data-theme="midnight"], :root[data-theme="emerald"], :root[data-theme="graphite"] { --na-cat-0: #64748b; --na-cat-1: #8b5cf6; --na-cat-2: #0d9dbb; --na-cat-3: #ec4899; --na-cat-4: #6366f1; } /* ---- Base ---------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--na-font); background: var(--na-bg); color: var(--na-text); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Fixed radial-gradient mesh behind everything (per-theme via --na-mesh) → glass reads with depth. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--na-mesh); transition: background .4s ease; } /* Títulos. Esta regra existia sem font-size algum: h2 e h3 caíam no default do navegador (24px e 18,72px, de um UA stylesheet), enquanto h1 era estilizado caso a caso pelas páginas. Era a causa mais visível da falta de harmonia — dois títulos irmãos na mesma tela seguiam escalas diferentes. Agora os quatro saem da mesma escala; páginas que precisem de outro tamanho ainda podem sobrescrever por classe. */ h1, h2, h3, h4 { color: var(--na-text); letter-spacing: -.02em; line-height: 1.25; } h1 { font-size: var(--na-fs-4xl); font-weight: 800; letter-spacing: -.03em; } h2 { font-size: var(--na-fs-2xl); font-weight: 700; } h3 { font-size: var(--na-fs-xl); font-weight: 700; } h4 { font-size: var(--na-fs-lg); font-weight: 600; } a { color: var(--na-primary); text-decoration: none; } a:hover { text-decoration: underline; } .na-muted { color: var(--na-text-secondary); } .na-center { text-align: center; } /* Brand wordmark — "Norm" in text colour, "Ativa" in the brand gradient. */ .na-brand { font-weight: 800; font-size: var(--na-fs-xl); letter-spacing: -.03em; color: var(--na-text); text-decoration: none; } .na-brand:hover { text-decoration: none; } .na-brand span { background: var(--na-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Layout helpers ------------------------------------------------------ */ .na-container { width: 100%; max-width: var(--na-maxw); margin-inline: auto; padding-inline: 1.5rem; } .na-container-sm { max-width: 720px; } .na-container-xs { max-width: 460px; } .na-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* ---- Buttons ------------------------------------------------------------- */ .na-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1.3rem; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease, background .15s ease, border-color .15s ease; text-decoration: none; white-space: nowrap; } .na-btn:hover { text-decoration: none; } .na-btn:active { transform: translateY(0) scale(.98); } .na-btn-lg { padding: .9rem 1.7rem; font-size: var(--na-fs-lg); } /* Busy state (set by na-refresh.js while enhanced navigation re-fetches the page): the icon spins and the control stops accepting clicks, so a slow round-trip never reads as a dead button. */ .na-btn[aria-busy="true"] { pointer-events: none; opacity: .72; } .na-btn[aria-busy="true"] .na-ico { animation: na-spin .7s linear infinite; transform-origin: 50% 50%; } @keyframes na-spin { to { transform: rotate(360deg); } } .na-btn-block { width: 100%; } .na-btn-primary { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%), var(--na-grad); color: #fff; box-shadow: var(--na-glow); } .na-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(124, 58, 237, .5); } .na-btn-outline { background: var(--na-surface); color: var(--na-primary); border-color: var(--na-line-input); backdrop-filter: var(--na-blur); -webkit-backdrop-filter: var(--na-blur); } .na-btn-outline:hover { background: var(--na-primary-hover); border-color: var(--na-primary); transform: translateY(-1px); } .na-btn-white { background: #fff; color: var(--na-primary); box-shadow: var(--na-shadow); } .na-btn-white:hover { transform: translateY(-2px); box-shadow: var(--na-shadow-lg); } .na-btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 10px 30px rgba(22, 163, 74, .35); } .na-btn-success:hover { transform: translateY(-2px); } .na-btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; box-shadow: 0 10px 30px rgba(220, 38, 38, .35); } .na-btn-danger:hover { transform: translateY(-2px); } .na-btn-dark { background: var(--na-text); color: var(--na-bg); } .na-btn-dark:hover { transform: translateY(-2px); box-shadow: var(--na-shadow); } .na-btn-sm { padding: .4rem .85rem; font-size: var(--na-fs-sm); } .na-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } /* Dev-only login picker (DevLoginPicker molecule). */ .na-devlogin { margin-bottom: 1.25rem; padding: .85rem; border: 1px dashed var(--na-line-input); border-radius: var(--na-radius); background: var(--na-bg-grey); } .na-devlogin .na-select { margin-top: .3rem; } /* ---- Surfaces (glass) ---------------------------------------------------- */ .na-card { background: var(--na-surface); border: 1px solid var(--na-glass-border); border-radius: var(--na-radius-lg); padding: 1.6rem; box-shadow: var(--na-shadow); backdrop-filter: var(--na-blur); -webkit-backdrop-filter: var(--na-blur); } .na-card-hover { transition: transform .18s ease, box-shadow .18s ease; } .na-card-hover:hover { transform: translateY(-4px); box-shadow: var(--na-shadow-lg); } /* ---- Forms --------------------------------------------------------------- */ .na-label { display: block; font-size: var(--na-fs-xs); font-weight: 600; color: var(--na-text-secondary); margin-bottom: .35rem; letter-spacing: -.01em; } .na-input, .na-select { width: 100%; min-height: 2.9rem; padding: .72rem .9rem; border: 1px solid var(--na-line-input); border-radius: 12px; font: inherit; color: var(--na-text); background-color: var(--na-surface-solid); outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } :root[data-theme="dark"] .na-input, :root[data-theme="dark"] .na-select { background-color: rgba(255,255,255,.04); } .na-input:hover, .na-select:hover { border-color: color-mix(in srgb, var(--na-primary) 42%, var(--na-line-input)); } .na-input:focus, .na-select:focus { border-color: var(--na-primary); box-shadow: var(--na-ring); } .na-input::placeholder { color: var(--na-text-secondary); opacity: .7; } /* Custom chevron: drop the OS-native arrow so selects match the design in every browser. Neutral mid-slate stroke reads on both light and dark surfaces across all themes. */ .na-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a90a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.05em; } .na-select::-ms-expand { display: none; } .na-field + .na-field { margin-top: 1rem; } /* Dica do campo (o que o FormField renderiza a partir de Hint). Sem regra própria ela ficava inline, colada no rótulo do campo SEGUINTE — "Obrigatório · referência do MRR/ARR" parecia legenda do "Valor mensal" logo abaixo. Bloco + respiro em cima e, principalmente, embaixo: a dica pertence ao campo que vem ANTES dela. */ .na-field > small { display: block; margin-top: .375rem; font-size: var(--na-fs-xs); line-height: 1.45; color: var(--na-text-secondary); } /* Dentro da grade os campos não recebem margin-top, então a dica precisa criar o respiro que separa uma linha da grade da seguinte. */ .na-form-grid .na-field > small { margin-bottom: .125rem; } /* ---- Checkbox ------------------------------------------------------------ The real stays in the DOM and keeps every native behaviour (label click, Space, :checked, form submit); it is only made invisible and repainted by the sibling .na-check-box. */ .na-check { position: relative; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; } .na-check > input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .na-check-box { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 6px; border: 1px solid var(--na-line-input); background: var(--na-surface-solid); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } :root[data-theme="dark"] .na-check-box { background: rgba(255,255,255,.04); } .na-check-box .na-ico { width: .8rem; height: .8rem; stroke-width: 3.5; color: var(--na-primary-contrast); opacity: 0; transform: scale(.55); transition: opacity .12s ease, transform .12s ease; } .na-check:hover .na-check-box { border-color: color-mix(in srgb, var(--na-primary) 42%, var(--na-line-input)); } .na-check > input:checked + .na-check-box { background: var(--na-grad); border-color: transparent; } .na-check > input:checked + .na-check-box .na-ico { opacity: 1; transform: none; } .na-check > input:focus-visible + .na-check-box { box-shadow: var(--na-ring); } .na-check-text { font-size: var(--na-fs-md); font-weight: 600; color: var(--na-text); } /* ---- Sub-form revealed by a checkbox (CSS only, no JS) ------------------- The body is never removed from the DOM — its fields keep posting, and the endpoint reads the checkbox to decide whether to use them at all. A browser without :has() therefore shows the block permanently, which is the right degradation: the checkbox still governs the outcome, nothing is lost. */ .na-subform { border: 1px solid var(--na-line); border-radius: var(--na-radius); padding: .9rem 1rem; background: var(--na-bg-grey); } .na-subform-head { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; } .na-subform-body { margin-top: .95rem; padding-top: .95rem; border-top: 1px dashed var(--na-line); } .na-subform-intro { font-size: var(--na-fs-sm); margin: 0 0 .9rem; } /* Scoped to the sub-form's OWN head checkbox (`> .na-subform-head`), not to any unchecked box anywhere inside it. Unscoped, a second checkbox nested in the body — the override permission — satisfies :has() while it is off and pins the body shut forever. */ .na-subform:has(> .na-subform-head .na-check > input:not(:checked)) > .na-subform-body { display: none; } /* Same shape, warning colours: a sub-form whose checkbox waives a guard-rail rather than adding one. Tinted only once ticked, so an untouched form is not a wall of alarm — the option should read as available, and only look like a decision once it has been taken. */ .na-subform-danger { border: 1px solid var(--na-line); border-radius: var(--na-radius); padding: .9rem 1rem; background: var(--na-surface-solid); transition: border-color .18s ease, background .18s ease; } :root[data-theme="dark"] .na-subform-danger { background: rgba(255,255,255,.03); } .na-subform-danger:has(.na-check > input:checked) { border-color: color-mix(in srgb, var(--na-warning) 55%, transparent); background: color-mix(in srgb, var(--na-warning) 8%, var(--na-surface-solid)); } .na-subform-danger:has(.na-check > input:checked) .na-check-text { color: var(--na-warning); } /* ---- Modal (native ) -------------------------------------------- For decisions that must not be made by reflex. showModal() puts the dialog in the top layer, so it needs no z-index of ours and traps focus by itself. No-JS degradation: the dialog can then never be opened, so it unfolds into the page instead of vanishing — the confirmation field stays reachable and the form still works (the server requires the phrase either way). na-override.js sets data-na-modal="js" on ; until it runs, the rules under :not([data-na-modal]) are the ones in charge. */ .na-modal { width: min(34rem, calc(100vw - 2rem)); padding: 1.5rem; margin: auto; border: 1px solid var(--na-glass-border); border-radius: var(--na-radius-lg); background: var(--na-surface-solid); color: var(--na-text); box-shadow: var(--na-shadow-lg); } .na-modal::backdrop { background: rgba(15, 23, 42, .5); backdrop-filter: blur(3px); } /* O backdrop entra junto com a caixa. Aparecer de uma vez, sob um painel que ainda está chegando, faz o painel parecer atrasado em relação ao próprio fundo. */ .na-modal[open]::backdrop { animation: na-backdrop-in .28s ease-out; } @keyframes na-backdrop-in { from { opacity: 0; } } .na-modal[open] { animation: na-modal-in .2s cubic-bezier(.16, 1, .3, 1); } @keyframes na-modal-in { from { opacity: 0; transform: translateY(.6rem) scale(.98); } } /* ---- Saída --------------------------------------------------------------- .close() tira o elemento da camada superior NO MESMO QUADRO — display vira none e o ::backdrop deixa de existir. Ou seja: uma animação de saída só é visível se NINGUÉM chamar close(). Por isso na-dialog.js marca data-na-out, deixa a animação abaixo rodar, e só então fecha/navega. Sem o script (ou com movimento reduzido) o atributo nunca aparece e nada disto entra em cena. */ .na-modal[data-na-out] { animation: na-modal-out .18s ease-in forwards; } @keyframes na-modal-out { to { opacity: 0; transform: translateY(.4rem) scale(.98); } } .na-modal[data-na-out]::backdrop { animation: na-backdrop-out .28s ease-in forwards; } @keyframes na-backdrop-out { to { opacity: 0; } } .na-modal-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; } .na-modal-head h2 { font-size: var(--na-fs-lg); margin: 0; letter-spacing: -.02em; } .na-modal-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 12px; color: var(--na-warning); background: color-mix(in srgb, var(--na-warning) 14%, transparent); } .na-modal-ico .na-ico { width: 1.25rem; height: 1.25rem; } .na-modal-body { font-size: var(--na-fs-md); } .na-modal-body > p { margin: 0 0 .8rem; } .na-modal-list { margin: 0 0 1.1rem; padding-left: 1.1rem; display: grid; gap: .45rem; } .na-modal-foot { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; } :root:not([data-na-modal]) .na-modal { display: block; width: auto; margin: .9rem 0 0; box-shadow: none; border-color: var(--na-line); background: var(--na-bg-grey); } /* Those buttons only ever talk to the script, so without it they are dead controls — better absent than present-and-inert. The checkbox plus the typed phrase carry the whole gate on their own. */ :root:not([data-na-modal]) .na-modal-foot { display: none; } @media (prefers-reduced-motion: reduce) { .na-modal[open], .na-modal[open]::backdrop, .na-modal[data-na-out], .na-modal[data-na-out]::backdrop { animation: none; } } /* ---- Drawer (gaveta) ----------------------------------------------------- Painel que entra por uma borda da tela e cobre a página. Serve para qualquer conteúdo que mereça a tela inteira sem tirar a pessoa de onde ela está — o componente não sabe o que é um formulário. É um promovido pelo na-dialog.js — showModal() já dá camada superior, backdrop, foco preso e Esc. Daqui para baixo é só a moldura e o movimento. Quatro decisões sustentam o resto: 1. MOVIMENTO. A curva é `cubic-bezier(.32, .72, 0, 1)` — a mesma do Vaul, que é o que roda por baixo do drawer da shadcn. Ela não é um ease-out qualquer: sai quase na velocidade máxima e gasta a maior parte do tempo desacelerando, o que dá a sensação de peso sendo puxado em vez de caixa aparecendo. Trocar por `ease`/`ease-out` é a diferença inteira entre "desliza" e "pisca". 2. O é uma COLUNA FLEX que NÃO rola; quem rola é .na-drawer-body. Antes o painel inteiro rolava e cabeçalho e rodapé grudavam com `sticky` + margens negativas para desfazer o padding do container. Com o corpo rolando, o cabeçalho é só um irmão que não encolhe, e a aritmética de margem negativa some. 3. A sombra sob o cabeçalho é pintada com `background-attachment: local` no corpo — o truque clássico: a camada "local" rola junto com o conteúdo e vai destapando a camada "scroll", que fica parada. A sombra aparece exatamente quando há conteúdo escondido acima, sem listener de scroll e sem scroll-timeline. 4. Fechar NAVEGA, e navegar destrói o elemento — então a animação de saída tem de terminar ANTES. Ver o bloco de saída em .na-modal: na-dialog.js marca data-na-out, espera, e só então segue o link. ---- Os quatro lados são DADOS, não quatro blocos -------------------------------------- A geometria toda (de onde entra, onde encosta, que medida cresce, que canto arredonda, para onde a sombra é projetada) sai de custom properties que .na-drawer consome uma vez. Cada lado só ATRIBUI esses valores. É o que faz a regra de tela estreita — "gaveta lateral vira folha inferior" — caber em quatro linhas em vez de repetir o bloco inteiro do lado de baixo, e é o que garante que uma mudança no movimento valha para os quatro de uma vez. Por isso os valores da folha inferior moram em --na-sheet-*, definidos UMA vez aqui: tanto o Side="bottom" quanto as gavetas laterais em tela estreita leem deles, então não têm como divergir. */ .na-drawer { /* Cor das sombras INTERNAS do painel (sob o cabeçalho, sobre o rodapé). Não pode ser a mesma dos dois temas: sobre uma superfície escura, uma sombra azul-ardósia a 24% some por completo — a borda entre "há conteúdo escondido" e "acabou" simplesmente deixava de existir no tema Meia-noite. Os temas escuros são midnight/emerald/graphite (mesmo grupo usado na paleta categórica lá em cima). */ --na-drawer-shade: rgba(15, 23, 42, .24); /* Duração + curva do movimento, em UM lugar só, porque entrar e sair têm de ser exatamente o mesmo movimento em sentidos opostos. Separados, os dois valores derivavam — e o painel entrava num tempo e saía noutro, que é o que faz a saída parecer "outro componente". */ --na-drawer-motion: .42s cubic-bezier(.32, .72, 0, 1); /* Geometria da folha inferior, referenciada em dois lugares (Side="bottom" e lateral em tela estreita) e escrita em um só. */ --na-sheet-hidden: translateY(100%); --na-sheet-place: auto auto 0; --na-sheet-w: 100vw; --na-sheet-h: auto; --na-sheet-max-h: min(var(--na-drawer-size, 32rem), 92dvh); --na-sheet-radius: var(--na-radius-lg) var(--na-radius-lg) 0 0; --na-sheet-rim: inset 0 1px 0 var(--na-glass-border); --na-sheet-cast: 0 -30px 66px -28px; display: flex; flex-direction: column; margin: var(--na-drawer-place); width: var(--na-drawer-w); max-width: 100vw; height: var(--na-drawer-h); max-height: var(--na-drawer-max-h); padding: 0; /* cabeçalho, corpo e rodapé carregam o próprio */ border: 0; border-radius: var(--na-drawer-radius); overflow: hidden; /* o arredondado precisa recortar o cabeçalho */ /* Fio de luz na borda exposta + sombra longa projetada para o lado de onde a gaveta veio: é ela que faz o painel parecer FLUTUAR sobre a página em vez de estar encostado nela. */ box-shadow: var(--na-drawer-rim), var(--na-drawer-cast) rgba(15, 23, 42, .32), var(--na-shadow-lg); /* Só serve para a alça: soltá-la sem passar do limite devolve o painel ao lugar. A animação de entrada/saída ganha da transição enquanto estiver rodando. */ transition: transform .28s cubic-bezier(.32, .72, 0, 1); } :root[data-theme="midnight"] .na-drawer, :root[data-theme="emerald"] .na-drawer, :root[data-theme="graphite"] .na-drawer { --na-drawer-shade: rgba(0, 0, 0, .62); } /* margin: auto é o que centraliza um ; zerar o lado onde ele encosta e deixar `auto` nos outros é o que o cola na borda. --na-drawer-size é a medida no eixo em que a gaveta cresce: largura nas laterais, altura no topo e na base. */ .na-drawer-right { --na-drawer-hidden: translateX(100%); --na-drawer-place: 0 0 0 auto; --na-drawer-w: min(var(--na-drawer-size, 38rem), 100vw); --na-drawer-h: 100dvh; --na-drawer-max-h: 100dvh; --na-drawer-radius: var(--na-radius-lg) 0 0 var(--na-radius-lg); --na-drawer-rim: inset 1px 0 0 var(--na-glass-border); --na-drawer-cast: -34px 0 70px -30px; } .na-drawer-left { --na-drawer-hidden: translateX(-100%); --na-drawer-place: 0 auto 0 0; --na-drawer-w: min(var(--na-drawer-size, 38rem), 100vw); --na-drawer-h: 100dvh; --na-drawer-max-h: 100dvh; --na-drawer-radius: 0 var(--na-radius-lg) var(--na-radius-lg) 0; --na-drawer-rim: inset -1px 0 0 var(--na-glass-border); --na-drawer-cast: 34px 0 70px -30px; } .na-drawer-top { --na-drawer-hidden: translateY(-100%); --na-drawer-place: 0 auto auto; --na-drawer-w: 100vw; --na-drawer-h: auto; --na-drawer-max-h: min(var(--na-drawer-size, 32rem), 92dvh); --na-drawer-radius: 0 0 var(--na-radius-lg) var(--na-radius-lg); --na-drawer-rim: inset 0 -1px 0 var(--na-glass-border); --na-drawer-cast: 0 30px 66px -28px; } .na-drawer-bottom { --na-drawer-hidden: var(--na-sheet-hidden); --na-drawer-place: var(--na-sheet-place); --na-drawer-w: var(--na-sheet-w); --na-drawer-h: var(--na-sheet-h); --na-drawer-max-h: var(--na-sheet-max-h); --na-drawer-radius: var(--na-sheet-radius); --na-drawer-rim: var(--na-sheet-rim); --na-drawer-cast: var(--na-sheet-cast); } /* ---- Entrar e sair: o MESMO movimento, ao contrário ---------------------- A entrada está pendurada em [data-na-dialog-ready] — o atributo que na-dialog.js põe no instante em que chama showModal() — e NÃO em .na-drawer solto. A diferença não é cosmética: o servidor entrega , então o painel existe e é pintado ANTES de o script rodar. Com a animação no seletor solto ela começava aí, no elemento ainda não-modal desdobrado na página; o script então removia `open` (display: none cancela a animação no meio) e chamava showModal(), que a fazia recomeçar do zero. Duas entradas, uma por cima da outra — o painel dava um tranco no começo em vez de deslizar. Com o atributo, ela roda uma vez só, no quadro certo, e sem JS nenhuma delas roda (o painel se desdobra na página, não desliza). Entrada e saída compartilham --na-drawer-motion: mesma duração, mesma curva, sentidos opostos. O seletor da saída carrega os dois atributos de propósito — é mais específico que o da entrada, então ganha dela sem depender da ordem em que as duas regras aparecem aqui. Um par de keyframes só serve aos quatro lados porque o destino é lido de --na-drawer-hidden, que cada lado define. Sem isso seriam oito conjuntos de keyframes, e a próxima mudança no movimento teria de acertar todos. */ .na-drawer[data-na-dialog-ready] { animation: na-drawer-in var(--na-drawer-motion); } @keyframes na-drawer-in { from { transform: var(--na-drawer-hidden); } } .na-drawer[data-na-dialog-ready][data-na-out] { animation: na-drawer-out var(--na-drawer-motion) forwards; } @keyframes na-drawer-out { to { transform: var(--na-drawer-hidden); } } /* Mais escuro do lado por onde a gaveta entrou: o degradê insinua a sombra que ela projeta sobre a página. */ .na-drawer::backdrop { background: linear-gradient(90deg, rgba(15, 23, 42, .30) 0%, rgba(15, 23, 42, .58) 100%); backdrop-filter: saturate(120%) blur(4px); } .na-drawer-left::backdrop { background: linear-gradient(270deg, rgba(15, 23, 42, .30) 0%, rgba(15, 23, 42, .58) 100%); } .na-drawer-top::backdrop { background: linear-gradient(180deg, rgba(15, 23, 42, .58) 0%, rgba(15, 23, 42, .30) 100%); } .na-drawer-bottom::backdrop { background: linear-gradient(0deg, rgba(15, 23, 42, .58) 0%, rgba(15, 23, 42, .30) 100%); } /* O escurecimento acompanha o painel em vez de terminar antes dele: fundo e painel entram e saem no mesmo tempo. O valor está escrito à mão, e não em var(--na-drawer-motion), porque nem todo navegador herda custom property no ::backdrop — e ali um var() que não resolve invalida o shorthand inteiro, ou seja, o fundo apareceria de estalo. Se mexer na duração do painel, mexa aqui também. */ .na-drawer[data-na-dialog-ready]::backdrop { animation: na-backdrop-in .42s ease-out; } .na-drawer[data-na-dialog-ready][data-na-out]::backdrop { animation: na-backdrop-out .42s ease-in forwards; } /* Cabeçalho fixo (irmão que não encolhe), com um véu da cor da marca que dá a ele o papel de "topo do painel" sem precisar de outra cor de fundo. Precisa ser OPACO: o corpo rola por baixo dele. */ .na-drawer > .na-modal-head { flex: none; position: relative; z-index: 1; justify-content: space-between; margin: 0; padding: 1.15rem 1.35rem; background: linear-gradient(180deg, color-mix(in srgb, var(--na-primary) 7%, var(--na-surface-solid)), var(--na-surface-solid)); border-bottom: 1px solid var(--na-line); } /* O título empurra o "fechar" para a borda: sem isto o X fica colado no texto, no meio do painel, em vez de no canto onde se procura por ele. */ .na-modal-head > .na-modal-title { flex: 1; min-width: 0; } .na-modal-title h2 { margin: 0; } .na-modal-title p { margin: .15rem 0 0; font-size: var(--na-fs-sm); color: var(--na-text-secondary); } .na-drawer-body { flex: 1 1 auto; min-height: 0; /* sem isto o filho flex não encolhe e o corpo NUNCA rola */ overflow-y: auto; overscroll-behavior: contain; /* chegar ao fim do painel não arrasta a lista atrás dele */ padding: 1.25rem 1.35rem 0; /* Coluna flex para que o rodapé possa ser empurrado até a base — ver .na-actions abaixo. */ display: flex; flex-direction: column; /* Sombra de rolagem — ver decisão (3) no topo da seção. A primeira camada é a cobertura que rola junto (local); a segunda é a sombra parada (scroll) que ela tapa enquanto o conteúdo está no topo. */ background: linear-gradient(var(--na-surface-solid) 42%, transparent) top / 100% 1.5rem no-repeat local, radial-gradient(farthest-side at 50% 0, var(--na-drawer-shade), transparent) top / 100% .7rem no-repeat scroll; } /* Rodapé de ações ancorado no fim do painel — SEMPRE na base, tenha o conteúdo a altura que tiver. São dois mecanismos, e os dois são necessários: · `margin-top: auto` numa coluna flex empurra o rodapé para a base quando o conteúdo é CURTO. Só `sticky` não resolvia isso: sticky não move nada enquanto não há transbordo, então num formulário curto o rodapé parava logo depois do último campo, com meio painel vazio embaixo dele — a barra de ações no meio da tela, e não onde se procura por ela. · `sticky` continua valendo para o conteúdo LONGO: mantém a ação visível durante a rolagem sem tirá-la do
, então o submit segue nativo. O afastamento do último campo vira `padding-top` em vez de `margin-top`: com o margin em `auto`, uma margem fixa não teria como coexistir — `auto` absorve toda a folga e vira zero quando não há nenhuma. */ .na-drawer-body > form { flex: 1 0 auto; /* estica: é a folga daqui que o `auto` do rodapé consome */ display: flex; flex-direction: column; min-height: 0; } .na-drawer .na-actions { position: sticky; bottom: 0; z-index: 1; margin: auto -1.35rem 0; padding: 1.15rem 1.35rem; background: var(--na-surface-solid); border-top: 1px solid var(--na-line); box-shadow: 0 -18px 30px -22px var(--na-drawer-shade); } /* Alça — a mesma da shadcn/Vaul, sempre na borda por onde a gaveta entrou: barra vertical nas laterais, horizontal no topo e na base. Arrasta de verdade (na-dialog.js): puxar de volta para fora, além do limite, fecha. Uma alça que não arrasta é enfeite prometendo um gesto que não existe — se o script não estiver rodando, ela some. --na-drawer-axis é a única coisa que o script lê daqui, e diz eixo E sentido: 'x' puxa para a direita, '-x' para a esquerda, 'y' para baixo, '-y' para cima. Fica no CSS porque quem sabe de que lado a gaveta está é o CSS — inclusive quando a tela estreita a transforma em folha inferior, um caso que o script não tem como adivinhar sem repetir o ponto de quebra. */ .na-drawer-grip { display: none; position: absolute; z-index: 2; touch-action: none; cursor: grab; } .na-drawer-grip::before { content: ""; position: absolute; border-radius: 999px; background: var(--na-line-input); transition: background .15s ease; } .na-drawer-grip:hover::before { background: var(--na-text-secondary); } .na-drawer-grip:active { cursor: grabbing; } .na-drawer-grip:active::before { background: var(--na-primary); } :root[data-na-modal] .na-drawer-grip { display: block; } /* Alça vertical (gavetas laterais) — cabe dentro do padding lateral do corpo, então não invade o conteúdo. */ .na-drawer-right .na-drawer-grip, .na-drawer-left .na-drawer-grip { top: 50%; translate: 0 -50%; width: 1.1rem; height: 4rem; } .na-drawer-right .na-drawer-grip { --na-drawer-axis: x; left: 0; } .na-drawer-left .na-drawer-grip { --na-drawer-axis: -x; right: 0; } .na-drawer-right .na-drawer-grip::before { inset: 0 auto 0 .38rem; width: .28rem; } .na-drawer-left .na-drawer-grip::before { inset: 0 .38rem 0 auto; width: .28rem; } /* Alça horizontal (topo e base). No topo ela fica na borda DE BAIXO — que é por onde a gaveta entrou — e por isso o espaço extra vai no rodapé, não no cabeçalho. */ .na-drawer-top .na-drawer-grip, .na-drawer-bottom .na-drawer-grip { left: 50%; translate: -50% 0; width: 4rem; height: 1.1rem; } .na-drawer-bottom .na-drawer-grip { --na-drawer-axis: y; top: 0; } .na-drawer-top .na-drawer-grip { --na-drawer-axis: -y; bottom: 0; } .na-drawer-bottom .na-drawer-grip::before { inset: .38rem 0 auto; height: .28rem; } .na-drawer-top .na-drawer-grip::before { inset: auto 0 .38rem; height: .28rem; } /* Espaço para a alça não cair em cima do conteúdo. Em "bottom" ela fica sobre o cabeçalho, que é simples. Em "top" ela fica na borda de baixo, e aí O ALVO IMPORTA: o padding tem de ir no rodapé grudado, não no corpo. `sticky: bottom 0` para na borda do padding box do scroller — um padding-bottom no corpo empurra o rodapé para cima e abre uma fresta por onde o conteúdo rolando aparece por baixo dele. Só quando NÃO existe rodapé o corpo assume o espaço. */ .na-drawer-bottom > .na-modal-head { padding-top: 1.7rem; } .na-drawer-top .na-actions { padding-bottom: 1.7rem; } .na-drawer-top .na-drawer-body:not(:has(.na-actions)) { padding-bottom: 1.7rem; } .na-modal-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--na-text-secondary); text-decoration: none; transition: background .16s ease, color .16s ease, rotate .2s cubic-bezier(.32, .72, 0, 1); } .na-modal-close:hover { background: var(--na-bg-grey); color: var(--na-text); text-decoration: none; rotate: 90deg; /* o X gira até virar um "+" — só um sinal de vida */ } .na-modal-close:active { scale: .93; } .na-modal-close:focus-visible { outline: none; box-shadow: var(--na-ring); } /* ---- Gaveta lateral → folha inferior (telas estreitas) -------------------- 38rem coladas na direita numa tela de 360px são a tela inteira com um recorte torto. Abaixo de 640px as laterais viram folha inferior; "top" e "bottom" ficam onde estão, que já é o formato certo em qualquer largura. A troca é só de valores — as mesmas --na-sheet-* que o Side="bottom" usa. Nenhuma regra de caixa, animação ou sombra é reescrita aqui: o movimento sai de --na-drawer-hidden e o resto .na-drawer já consome. */ @media (max-width: 640px) { .na-drawer-right, .na-drawer-left { --na-drawer-hidden: var(--na-sheet-hidden); --na-drawer-place: var(--na-sheet-place); --na-drawer-w: var(--na-sheet-w); --na-drawer-h: var(--na-sheet-h); --na-drawer-max-h: var(--na-sheet-max-h); --na-drawer-radius: var(--na-sheet-radius); --na-drawer-rim: var(--na-sheet-rim); --na-drawer-cast: var(--na-sheet-cast); } .na-drawer-right::backdrop, .na-drawer-left::backdrop { background: rgba(15, 23, 42, .5); } /* A alça acompanha o lado novo: horizontal, no topo da folha. */ .na-drawer-right .na-drawer-grip, .na-drawer-left .na-drawer-grip { --na-drawer-axis: y; top: 0; right: auto; left: 50%; translate: -50% 0; width: 4rem; height: 1.1rem; } .na-drawer-right .na-drawer-grip::before, .na-drawer-left .na-drawer-grip::before { inset: .38rem 0 auto; width: auto; height: .28rem; } .na-drawer-right > .na-modal-head, .na-drawer-left > .na-modal-head { padding-top: 1.7rem; } } @media (prefers-reduced-motion: reduce) { .na-drawer[data-na-dialog-ready], .na-drawer[data-na-dialog-ready][data-na-out], .na-drawer[data-na-dialog-ready]::backdrop, .na-drawer[data-na-dialog-ready][data-na-out]::backdrop { animation: none; } .na-drawer { transition: none; } .na-modal-close { transition: none; } .na-modal-close:hover { rotate: none; } } /* ---- Drawer sem JS ------------------------------------------------------- Sem script o nunca é aberto de verdade, então ele se desdobra na página (regra geral de .na-modal acima) — e aí nada de painel: altura de tela, rolagem própria, elementos grudados e sombras de rolagem viram estorvo numa caixa que é só mais um bloco do documento. Vem depois das media queries de propósito: é o último a falar. */ :root:not([data-na-modal]) .na-drawer { display: block; height: auto; max-height: none; overflow: visible; width: auto; margin: .9rem 0 0; border: 1px solid var(--na-line); border-radius: var(--na-radius); box-shadow: none; animation: none; transition: none; } :root:not([data-na-modal]) .na-drawer > .na-modal-head { margin: 0; border-radius: 0; } :root:not([data-na-modal]) .na-drawer-body { overflow: visible; background: none; padding-bottom: 1.25rem; } :root:not([data-na-modal]) .na-drawer .na-actions { position: static; margin: 1.25rem 0 0; padding: 0; background: none; border-top: 0; box-shadow: none; } /* ---- Células de grade compartilhadas ------------------------------------- Estes dois padrões não são de nenhuma tela: são "identidade do registro" (nome + código) e "ações da linha", e toda listagem do admin precisa dos dois. Nasceram como .na-plan-* no catálogo de planos; quando /admin/pagamentos virou DataGrid e precisou exatamente deles, o certo foi tirar o nome da tela do meio em vez de a segunda página passar a usar classes chamadas "plan". O nome e o código nunca quebram — "Parcelado Pro" partido em duas linhas era o sintoma mais visível da tabela espremida. */ .na-cell-id { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .na-cell-id > strong { white-space: nowrap; } .na-cell-id > code { white-space: nowrap; } .na-cell-desc { font-size: var(--na-fs-xs); margin-top: .2rem; max-width: 34ch; } /* Ações lado a lado: o do excluir é bloco e empilhava sob o "Editar". */ .na-cell-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; } .na-cell-actions > form { display: inline-flex; margin: 0; } /* Contagem com a unidade ao lado ("3 assinaturas", "301 respostas"). Nasceu duplicada como .na-plan-use e .na-pay-use, com a mesma única declaração nas duas; a terceira tela que precisou dela — a lista de avaliações — foi o sinal de que o padrão é da grade, não da tela. Nunca quebra: "1 resposta" partido em duas linhas alarga a linha inteira da tabela. */ .na-cell-count { white-space: nowrap; } /* ---- Catálogo de planos (o que é só dele) -------------------------------- Colunas agrupadas por leitura: identidade, preço, uso. */ .na-plan-price > strong { font-size: var(--na-fs-md); white-space: nowrap; } .na-plan-price-alt { display: flex; flex-direction: column; gap: .1rem; font-size: var(--na-fs-xs); margin-top: .15rem; } .na-plan-pay { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .na-plan-cap { font-size: var(--na-fs-xs); margin-top: .15rem; white-space: nowrap; } /* ---- Meios de pagamento --------------------------------------------------- "Aceita" são dois selos que podem faltar; "—" no lugar de nada, senão a célula vazia parece dado faltando em vez de "não aceita nenhum dos dois". */ .na-pay-abilities { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } /* Live "minimum sample" readout under the sample fields. */ .na-sample-readout { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 12px; background: var(--na-surface-solid); border: 1px solid var(--na-line); } :root[data-theme="dark"] .na-sample-readout { background: rgba(255,255,255,.04); } .na-sample-ico { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; color: var(--na-primary); } .na-sample-line { margin: 0; font-size: var(--na-fs-sm); } .na-sample-line strong { font-size: var(--na-fs-base); color: var(--na-text); } /* ---- Listbox / Combobox (JS-enhanced native controls) -------------------- */ .na-lb { position: relative; } /* native control kept for form submit + no-JS fallback, visually hidden once enhanced */ .na-lb-native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; opacity: 0; pointer-events: none; } .na-cb .na-input { padding-right: 2.5rem; } .na-lb-btn { width: 100%; min-height: 2.9rem; display: flex; align-items: center; gap: .5rem; padding: .72rem .9rem; border: 1px solid var(--na-line-input); border-radius: 12px; font: inherit; color: var(--na-text); background-color: var(--na-surface-solid); cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } :root[data-theme="dark"] .na-lb-btn { background-color: rgba(255,255,255,.04); } .na-lb-btn:hover { border-color: color-mix(in srgb, var(--na-primary) 42%, var(--na-line-input)); } .na-lb-btn:focus-visible { outline: none; border-color: var(--na-primary); box-shadow: var(--na-ring); } .na-lb-btn[aria-expanded="true"] { border-color: var(--na-primary); box-shadow: var(--na-ring); } .na-lb-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .na-lb-placeholder { color: var(--na-text-secondary); opacity: .75; } .na-lb-chevron { flex: none; color: var(--na-text-secondary); transition: transform .2s ease; } .na-lb-btn[aria-expanded="true"] .na-lb-chevron { transform: rotate(180deg); } /* combobox caret sits over the input's right padding */ .na-cb-caret { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--na-text-secondary); display: inline-flex; cursor: pointer; } .na-cb .na-input[aria-expanded="true"] + .na-cb-caret .na-lb-chevron { transform: rotate(180deg); } /* floating panel (portaled to , position:fixed set by JS) */ .na-lb-panel { position: fixed; z-index: 1200; overflow-y: auto; padding: .3rem; background: var(--na-surface-solid); border: 1px solid var(--na-glass-border); border-radius: 14px; box-shadow: var(--na-shadow-lg); opacity: 0; transform: translateY(-.4rem) scale(.97); transform-origin: top center; transition: opacity .15s ease, transform .15s cubic-bezier(.16,1,.3,1); } .na-lb-panel[data-placement="top"] { transform-origin: bottom center; transform: translateY(.4rem) scale(.97); } .na-lb-panel.na-lb-open { opacity: 1; transform: translateY(0) scale(1); } .na-lb-panel ul { list-style: none; margin: 0; padding: 0; } .na-lb-option { display: flex; align-items: center; gap: .5rem; padding: .55rem .55rem; border-radius: 9px; cursor: pointer; font-size: var(--na-fs-md); line-height: 1.3; color: var(--na-text); scroll-margin: .3rem; } .na-lb-option > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .na-lb-option.na-lb-opt-muted { color: var(--na-text-secondary); } .na-lb-check { flex: none; color: var(--na-primary); opacity: 0; } .na-lb-option[aria-selected="true"] { font-weight: 600; } .na-lb-option[aria-selected="true"] .na-lb-check { opacity: 1; } .na-lb-option.na-lb-active { background: color-mix(in srgb, var(--na-primary) 15%, transparent); color: var(--na-primary); } .na-lb-empty { padding: .6rem .55rem; font-size: var(--na-fs-md); color: var(--na-text-secondary); } /* ---- Feedback ------------------------------------------------------------ */ .na-alert { border-radius: 12px; padding: .8rem 1rem; font-size: var(--na-fs-md); border: 1px solid transparent; } .na-alert-error { background: color-mix(in srgb, var(--na-error) 14%, transparent); border-color: color-mix(in srgb, var(--na-error) 40%, transparent); color: var(--na-error); } .na-alert-warning { background: color-mix(in srgb, var(--na-warning) 16%, transparent); border-color: color-mix(in srgb, var(--na-warning) 40%, transparent); color: var(--na-warning); } .na-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .7rem; border-radius: 999px; font-size: var(--na-fs-2xs); font-weight: 600; color: #fff; letter-spacing: -.01em; /* Um selo é um rótulo, não um parágrafo. Sem isto "Pagamento pendente" quebrava em duas linhas dentro da coluna estreita de status e o raio de 999px transformava a pílula num borrão alto — a coluna alarga, que é o comportamento certo para um valor curto e fixo. */ white-space: nowrap; } .na-chip-success { background: var(--na-success); } .na-chip-warning { background: var(--na-warning); } .na-chip-error { background: var(--na-error); } /* Risk / progress bar */ .na-bar { height: 9px; border-radius: 999px; background: var(--na-line); overflow: hidden; } .na-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.2,1); } .na-bar-success > span { background: linear-gradient(90deg, #22c55e, #16a34a); } .na-bar-warning > span { background: linear-gradient(90deg, #f59e0b, #d97706); } .na-bar-error > span { background: linear-gradient(90deg, #f43f5e, #dc2626); } .na-bar-primary > span { background: var(--na-grad); } /* ---- Icons --------------------------------------------------------------- */ .na-ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.15em; } /* ---- Public form --------------------------------------------------------- */ .na-form-wrap { padding: 1.5rem 1.25rem 5rem; } .na-form-msg { max-width: 480px; margin: 3rem auto 0; } .na-form-msg h1 { font-size: var(--na-fs-2xl); margin: .5rem 0; } .na-result-ico { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; } .na-result-ico .na-ico { width: 36px; height: 36px; } .na-ok { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 12px 34px rgba(22,163,74,.4); } .na-form { background: var(--na-surface); border: 1px solid var(--na-glass-border); border-radius: var(--na-radius-lg); overflow: hidden; box-shadow: var(--na-shadow-lg); backdrop-filter: var(--na-blur); -webkit-backdrop-filter: var(--na-blur); } .na-form-head { background: var(--na-grad); color: #fff; padding: 1.8rem; } /* Light pill behind the logo so a coloured/transparent mark reads on every palette's gradient. */ .na-form-logo { display: block; max-height: 52px; max-width: 200px; object-fit: contain; margin: 0 0 .9rem; background: rgba(255, 255, 255, .92); border-radius: 8px; padding: .35rem .5rem; } .na-form-head h1 { color: #fff; font-size: var(--na-fs-xl); margin: 0; } .na-form-head p { margin: .4rem 0 0; font-size: var(--na-fs-md); color: rgba(255,255,255,.9); } .na-form-section { padding: 1.6rem; border-top: 1px solid var(--na-line); } .na-form-section:first-of-type { border-top: 0; } .na-form-section > h2 { font-size: var(--na-fs-lg); margin: 0 0 1rem; } .na-form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .na-form-grid .na-field + .na-field { margin-top: 0; } /* Cada linha do formulário é um .na-form-grid próprio, e o `gap` só separa colunas DENTRO da grade — entre uma grade e a seguinte não havia nada. Resultado: a dica de um campo encostava no rótulo do campo de baixo ("Obrigatório · referência do MRR/ARR" parecia legenda do "Valor mensal"). Esta é a margem que faltava entre as linhas. */ .na-form-grid + .na-form-grid { margin-top: 1rem; } .na-field + .na-form-grid, .na-form-grid + .na-field { margin-top: 1rem; } .na-q { border: 1px solid var(--na-line); border-radius: var(--na-radius); padding: 1.1rem; margin: 0 0 1rem; background: var(--na-bg-grey); } .na-q:last-child { margin-bottom: 0; } /* defaults to overlaying the fieldset's top border, so a wrapping question would "poke out" of the rounded card. Float it to width:100% → it drops into normal flow inside the padding, and the border renders unbroken. Following content clears it. */ .na-q > legend { font-weight: 600; font-size: var(--na-fs-md); padding: 0; float: left; width: 100%; line-height: 1.35; } /* Segmented 1–5 scale (native radios; label = button) */ .na-scale { display: flex; gap: .5rem; margin-top: .7rem; clear: left; } .na-scale-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .na-scale-btn { flex: 1; text-align: center; cursor: pointer; user-select: none; padding: .7rem 0; border: 1px solid var(--na-line-input); border-radius: 12px; font-weight: 700; color: var(--na-text-secondary); background: var(--na-surface-solid); transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; } :root[data-theme="dark"] .na-scale-btn { background: rgba(255,255,255,.04); } .na-scale-btn:hover { border-color: var(--na-primary); color: var(--na-primary); transform: translateY(-1px); } .na-scale-radio:checked + .na-scale-btn { background: var(--na-grad); border-color: transparent; color: #fff; box-shadow: var(--na-glow); } .na-scale-radio:focus-visible + .na-scale-btn { box-shadow: var(--na-ring); } .na-scale-ends { display: flex; justify-content: space-between; margin-top: .45rem; font-size: var(--na-fs-xs); } .na-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--na-fs-md); line-height: 1.4; cursor: pointer; } .na-consent input { margin-top: .2rem; width: 18px; height: 18px; flex: none; accent-color: var(--na-primary); } /* ---- Crédito do instrumento (InstrumentCredit) ---------------------------- O COPSOQ é cedido sob CC BY-NC-ND 4.0: a atribuição é condição de uso, então o bloco é discreto mas nunca escondido — sem `display:none`, sem cor abaixo do contraste mínimo. */ .na-credit { max-width: 640px; margin: 2.5rem auto 0; padding-top: 1rem; border-top: 1px solid var(--na-line); font-size: var(--na-fs-xs); line-height: 1.5; color: var(--na-text-secondary); } .na-credit p { margin: 0; } .na-credit-ref { margin-top: .5rem !important; text-indent: -1em; padding-left: 1em; } .na-credit-links { margin-top: .6rem !important; display: flex; flex-wrap: wrap; gap: 1rem; } .na-credit-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .na-credit-links a:hover { color: var(--na-primary); } /* Dentro de um painel (metodologia) o bloco já tem moldura própria: sem linha nem centragem. */ .na-credit-full { max-width: none; margin: 0; } /* ---- Utilities ----------------------------------------------------------- */ .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .na-r { text-align: right; } /* ========================================================================== Atomic components ========================================================================== */ /* Badge atom */ .na-badge-success { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; } .na-badge-warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; } .na-badge-error { background: linear-gradient(135deg, #f43f5e, #dc2626); color: #fff; } .na-badge-primary { background: var(--na-grad); color: #fff; } .na-badge-info { background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #fff; } .na-badge-neutral { background: var(--na-line); color: var(--na-text-secondary); } /* InfoTip atom — "?" trigger + native-popover explanation bubble. Placement is done by js/na-tips.js; with no JS the UA centres the popover in the viewport, which is why nothing here may hide the bubble unconditionally. */ .na-tip { display: inline-flex; vertical-align: middle; line-height: 0; } /* HintedLabel molecule — keeps the trigger on the same line as the last word of its label, so a lone "?" can never end up stranded on a line of its own. */ .na-hinted-tail { white-space: nowrap; } .na-tip-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; padding: 0; margin-inline-start: .3rem; border: 0; border-radius: 50%; cursor: help; background: transparent; color: var(--na-text-secondary); opacity: .7; transition: opacity .15s ease, color .15s ease, background .15s ease; } .na-tip-btn .na-ico { width: 1.05rem; height: 1.05rem; } .na-tip-btn:hover { opacity: 1; color: var(--na-primary); background: var(--na-primary-hover); } .na-tip-btn:focus-visible { outline: none; opacity: 1; box-shadow: var(--na-ring); } /* Triggers sitting on the gradient header band, where the muted token is unreadable. */ .na-tip-btn-onbrand { color: rgba(255,255,255,.85); } .na-tip-btn-onbrand:hover { color: #fff; background: rgba(255,255,255,.22); } /* Inside a coloured heatmap cell / on a StatCard's gradient tile the text colour is inherited. */ .na-tip-btn-inherit { color: inherit; } .na-tip-btn-inherit:hover { color: inherit; background: rgba(127,127,127,.25); } /* The popover is a bare positioning shell (overflow visible so the arrow can stick out); .na-tip-body carries the card chrome and does the scrolling. */ .na-tip-pop:popover-open { display: block; position: fixed; /* JS overwrites left/top with real values */ max-width: min(30rem, calc(100vw - 2rem)); padding: 0; border: 0; background: none; overflow: visible; animation: na-tip-in .14s ease-out; /* A popover inherits from its DOM parent, not from where it paints — and these tips live in uppercased/nowrap/bold table headers. Reset everything that would leak in. */ font: 400 .86rem/1.55 var(--na-font); color: var(--na-text); text-transform: none; letter-spacing: normal; white-space: normal; text-align: left; font-variant-numeric: normal; } .na-tip-body { display: block; max-height: calc(100vh - 2rem); overflow: auto; padding: .8rem .9rem; border: 1px solid var(--na-glass-border); border-radius: var(--na-radius); background: var(--na-surface-solid); box-shadow: var(--na-shadow-lg); } /* JS hides the bubble for the frame between "shown" and "positioned" (see na-tips.ts) — gated on the flag the script sets, so a no-JS page never hides it. */ [data-na-tips="js"] .na-tip-pop:popover-open { visibility: hidden; } .na-tip-title { display: block; margin-bottom: .25rem; font-size: var(--na-fs-sm); font-weight: 700; } .na-tip-text { display: block; color: var(--na-text-secondary); } .na-tip-text strong, .na-tip-text em { color: var(--na-text); } .na-tip-pop::after { /* arrow, x set by --na-tip-arrow */ content: ""; position: absolute; left: var(--na-tip-arrow, 50%); width: 9px; height: 9px; margin-left: -5px; background: var(--na-surface-solid); border: 1px solid var(--na-glass-border); transform: rotate(45deg); } .na-tip-pop[data-na-tip-side="below"]::after { top: -5px; border-width: 1px 0 0 1px; } .na-tip-pop[data-na-tip-side="above"]::after { bottom: -5px; border-width: 0 1px 1px 0; } @keyframes na-tip-in { from { opacity: 0; transform: translateY(-3px); } } /* Browsers without the Popover API would otherwise render the bubble inline, always visible. */ @supports not selector(:popover-open) { .na-tip-pop { display: none; } } /* PlanCard molecule */ .na-plans { display: grid; gap: 1.5rem; max-width: 820px; margin-inline: auto; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .na-plan { position: relative; background: var(--na-surface); border: 1px solid var(--na-glass-border); border-radius: var(--na-radius-lg); padding: 2rem; display: flex; flex-direction: column; box-shadow: var(--na-shadow); backdrop-filter: var(--na-blur); -webkit-backdrop-filter: var(--na-blur); transition: transform .18s ease, box-shadow .18s ease; } .na-plan:hover { transform: translateY(-4px); box-shadow: var(--na-shadow-lg); } .na-plan-highlight { border: 1.5px solid transparent; background: linear-gradient(var(--na-surface-solid), var(--na-surface-solid)) padding-box, var(--na-grad) border-box; } .na-plan-tag { position: absolute; top: -.8rem; right: 1.5rem; box-shadow: var(--na-glow); border-radius: 999px; } .na-plan h2 { font-size: var(--na-fs-xl); margin: 0; } .na-plan-price { margin: .75rem 0 0; display: flex; align-items: baseline; gap: .35rem; } .na-plan-price strong { font-size: var(--na-fs-4xl); background: var(--na-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .na-plan-list { list-style: none; padding: 0; margin: 1.25rem 0 0; flex: 1; display: flex; flex-direction: column; gap: .65rem; } .na-plan-list li { display: flex; align-items: center; gap: .5rem; font-size: var(--na-fs-md); } .na-plan-list .na-ico { color: var(--na-success); width: 1.1em; height: 1.1em; } /* StatCard molecule */ .na-statcard { display: flex; align-items: center; gap: .95rem; background: var(--na-surface); border: 1px solid var(--na-glass-border); border-radius: var(--na-radius); padding: 1.1rem 1.2rem; box-shadow: var(--na-shadow); backdrop-filter: var(--na-blur); -webkit-backdrop-filter: var(--na-blur); transition: transform .18s ease, box-shadow .18s ease; } .na-statcard:hover { transform: translateY(-3px); box-shadow: var(--na-shadow-lg); } .na-statcard-ico { width: 46px; height: 46px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center; } .na-statcard-primary { background: var(--na-grad); color: #fff; box-shadow: var(--na-glow); } .na-statcard-success { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; } .na-statcard-warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; } .na-statcard-info { background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #fff; } .na-statcard-accent { background: linear-gradient(135deg, #8b5cf6, #db2777); color: #fff; } .na-statcard-body { display: flex; flex-direction: column; min-width: 0; } /* The help trigger is pinned to the card's top-right rather than trailing the label: inline, a long label pushed the lone "?" onto a line of its own. `position: relative` on the card gives it its containing block. */ .na-statcard { position: relative; } .na-statcard > .na-tip { position: absolute; top: .55rem; right: .6rem; margin: 0; } .na-statcard > .na-tip .na-tip-btn { margin-inline-start: 0; } .na-statcard-body strong { font-size: var(--na-fs-2xl); line-height: 1.1; letter-spacing: -.02em; } .na-statcard-body span { font-size: var(--na-fs-sm); } /* Qualificador opcional ("1 ativa", "60 por ciclo"). Recuado do rótulo em peso e tamanho para não disputar com ele — é contexto do número, não um segundo rótulo. */ .na-statcard-sub { font-size: var(--na-fs-2xs); color: var(--na-text-secondary); opacity: .85; margin-top: .15rem; } /* Stat molecule */ .na-stat { display: flex; flex-direction: column; gap: .15rem; background: var(--na-surface); border: 1px solid var(--na-glass-border); border-radius: var(--na-radius); padding: 1.2rem 1.35rem; box-shadow: var(--na-shadow); backdrop-filter: var(--na-blur); -webkit-backdrop-filter: var(--na-blur); } .na-stat-accent { background: var(--na-grad); border-color: transparent; color: #fff; box-shadow: var(--na-glow); } .na-stat-label { font-size: var(--na-fs-sm); } .na-stat-accent .na-stat-label { color: rgba(255,255,255,.85); } .na-stat-value { font-size: var(--na-fs-3xl); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; } .na-stat-accent .na-stat-value { color: #fff; } /* Back-office page header + stat row */ .na-page-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .na-page-head h1 { font-size: var(--na-fs-4xl); margin: 0; letter-spacing: -.03em; } /* O bloco de texto encolhe; a ação não. Sem isto o

de apoio segurava sua largura inteira e empurrava o botão para a linha de baixo, encostado à esquerda — o cabeçalho parecia de outro layout, e só em algumas telas, porque dependia de o subtítulo ser alguns caracteres mais longo que o da tela ao lado. Deixar quebrar era o comportamento certo no celular e o errado aqui: agora o texto reflui e a ação fica onde se procura por ela. */ .na-page-head > div:first-child { flex: 1 1 22rem; min-width: 0; } .na-page-head > .na-btn, .na-page-head > .na-detail-actions { flex: 0 0 auto; } .na-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .na-empty-state { padding: 3.5rem 1.5rem; border-style: dashed; } .na-empty-state h2 { font-size: var(--na-fs-xl); margin: 0 0 .25rem; } /* Table */ .na-table { width: 100%; border-collapse: collapse; font-size: var(--na-fs-md); } .na-table th, .na-table td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--na-line); } .na-table th { font-size: var(--na-fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--na-text-secondary); background: var(--na-bg-grey); } .na-table tbody tr { transition: background .12s ease; } .na-table tbody tr:last-child td { border-bottom: 0; } .na-table tbody tr:hover { background: var(--na-primary-hover); } .na-row-link { font-weight: 600; color: var(--na-text); } .na-row-link:hover { color: var(--na-primary); } .na-link { color: var(--na-primary); font-weight: 600; white-space: nowrap; } /* Destructive action rendered as a link (inside a table row, next to "Editar"). A