/* ========================================================================== polish.css — Fase 5: refinamentos finais (mobile + a11y + cross-browser) -------------------------------------------------------------------------- Carregado por ÚLTIMO no . Ajustes finais sobre tudo o que veio antes (tokens, components, spa-shell, spa-modules, admin-page). ========================================================================== */ /* ─── A11y: focus-visible consistente em todo lugar ─────────────────────── */ *:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; border-radius: var(--r-sm); } /* Botões / links / inputs com focus mais visível */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline-offset: 3px !important; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 0 !important; } /* ─── Reduced motion: respeita preferência do SO ────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .nv-spinner { animation: none !important; } .nv-skeleton { animation: none !important; background: var(--bg-2) !important; } .nv-dot--pulse::after { animation: none !important; opacity: 0.3 !important; } } /* ─── Cross-browser: OKLCH fallback pra browsers muito antigos ──────────── */ /* Browsers que não suportam OKLCH ainda — fallback hex (Chrome <111, Safari <16.4, Firefox <113). 2026 essa cobertura é universal, mas garantia adicional não custa. */ @supports not (color: oklch(0 0 0)) { :root { --bg-0: #1a1d22; --bg-1: #20242a; --bg-2: #272c33; --bg-3: #30363e; --border-subtle: rgba(78, 83, 92, 0.5); --border-soft: rgba(89, 95, 105, 0.6); --border-strong: rgba(110, 118, 130, 0.7); --text-1: #f5f6f8; --text-2: #c2c6cd; --text-3: #969ba4; --text-4: #707682; --accent: #2dd882; --accent-strong: #4fde98; --accent-soft: rgba(45, 216, 130, 0.14); --accent-fg: #0d2419; --danger: #e6604a; --warn: #d4a04b; --info: #5fa8e8; --success: #2dd882; } } /* ─── Mobile responsivo: shell SPA ──────────────────────────────────────── */ @media (max-width: 720px) { /* Sidebar vira overlay no mobile (lógica de toggle no JS já faz) */ #sidebar { position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 100; box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform 200ms ease; } #sidebar.open, #sidebar.is-open, body.sidebar-open #sidebar { transform: translateX(0); } #main-content { margin-left: 0 !important; } #main-content > header { padding: 0 16px !important; } #page-content { padding: 16px !important; } /* Page title menor no mobile */ #page-title { font-size: 14px !important; } /* User menu compacto */ #header-user-name-mobile, #header-user-plan-mobile { display: none !important; } } /* ─── Mobile responsivo: módulos internos ───────────────────────────────── */ @media (max-width: 720px) { /* Cards: padding menor */ .dashboard-card, .gps-card, .kanban-card, [class*="-card"] { padding: 16px !important; } /* KPI grids: 1 ou 2 colunas */ [class*="kpis-grid"], .dashboard-kpis-grid, .progresso-kpis-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Headings: tamanho menor */ [id^="module-"] h1, .module h1 { font-size: 22px !important; } /* Hero card */ .dashboard-card-title--hero, .hero-title, .dashboard-greeting-title { font-size: 24px !important; } } @media (max-width: 480px) { [class*="kpis-grid"], .dashboard-kpis-grid { grid-template-columns: 1fr !important; } [id^="module-"] h1, .module h1 { font-size: 20px !important; } /* Botões touch-friendly: min 44px height */ .nv-btn:not(.nv-btn-sm), .btn-primary, .btn-secondary { min-height: 44px; } } /* ─── Touch targets a11y (Apple HIG: 44x44 mínimo) ──────────────────────── */ @media (hover: none) and (pointer: coarse) { .nv-btn, .btn-primary, .btn-secondary, .btn-ghost, button, [role="button"], a.button { min-height: 44px; } .nv-btn-sm { min-height: 36px; /* exceção pra btn-sm em listas densas */ } /* Aumenta área de tap em ícones/links */ .icon-btn, [class*="icon-btn"] { min-width: 36px; min-height: 36px; } } /* ─── ARIA / acessibilidade: melhorar contraste de placeholders ─────────── */ input::placeholder, textarea::placeholder { color: var(--text-4) !important; opacity: 1; /* Firefox padrão é 0.54 */ } /* Disabled states com contraste suficiente */ button[disabled], button[aria-disabled="true"], input[disabled], textarea[disabled], .nv-btn[disabled], [class*="btn"][disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ─── Print: visual mais limpo pra impressão (relatórios) ───────────────── */ @media print { body { background: #fff !important; color: #000 !important; } #sidebar, #main-content > header, .nv-btn, button, [class*="btn-"], .filter-strip, .nv-tabs { display: none !important; } #main-content { margin: 0 !important; } #page-content { padding: 0 !important; } .nv-card, [class*="-card"] { border: 1px solid #ccc !important; box-shadow: none !important; background: #fff !important; color: #000 !important; page-break-inside: avoid; } } /* ─── Selection de texto: usa accent ────────────────────────────────────── */ ::selection { background: oklch(0.74 0.16 152 / 0.3); color: var(--text-1); } ::-moz-selection { background: oklch(0.74 0.16 152 / 0.3); color: var(--text-1); } /* ─── Skeleton de carregamento mais suave ──────────────────────────────── */ .nv-skeleton { will-change: background-position; } /* ─── Hairline borders mais nítidas em retina ──────────────────────────── */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .nv-card, .dashboard-card, [class*="-card"] { border-width: 0.5px !important; } } /* ─── Safari quirks: oklch + backdrop-filter ──────────────────────────── */ @supports (-webkit-backdrop-filter: blur(0)) { .nv-topbar, #main-content > header { -webkit-backdrop-filter: blur(12px); } }