/* ========================================================================== NOVA PROMOTORA — Design System tokens Dark is default. Light overrides via html.light. All sizing in rem so the A/A+/A++ accessibility scale (html font-size) reflows the whole UI instead of just zooming text. ========================================================================== */ :root { /* dark (default) */ --nova-bg: #080B12; --nova-bg-elev: #0E1421; --nova-bg-elev-2: #1A2B40; --nova-border: #22304A; --nova-navy: #1A2B40; --nova-navy-light: #2C4366; --nova-blue: #3D7BFF; --nova-red: #CF190F; --nova-text: #EEF2F8; --nova-text-muted: #9AA6BA; --nova-text-dim: #5D6880; --glass: rgba(255, 255, 255, .05); --glass-hover: rgba(255, 255, 255, .07); --glass-brd: rgba(255, 255, 255, .10); --surface: var(--nova-bg-elev); --success: #4ADE80; --warning: #FBBF24; --danger: #FF6B6B; --info: #6F9BFF; --radius-sm: 0.5rem; /* 8px */ --radius-md: 0.75rem; /* 12px */ --radius-lg: 1.25rem; /* 18-20px */ --radius-full: 9999px; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --font: "Sora", -apple-system, "Segoe UI", sans-serif; } html.light { --nova-bg: #EEF1F7; --nova-bg-elev: #FFFFFF; --nova-bg-elev-2: #FFFFFF; --nova-border: #D9DFEA; --nova-navy: #1A2B40; --nova-navy-light: #2C4366; --nova-blue: #2B62D6; --nova-red: #CF190F; --nova-text: #10182A; --nova-text-muted: #4A586E; --nova-text-dim: #8A93A6; --glass: rgba(16, 24, 42, .04); --glass-hover: rgba(16, 24, 42, .07); --glass-brd: rgba(16, 24, 42, .12); --surface: #FFFFFF; --success: #15803D; --warning: #B45309; --danger: #DC2626; --info: #2B62D6; } /* accessibility font scale — set on . Everything downstream is in rem/em, so this single root font-size drives the whole reflow (never transform:scale, per spec). */ html[data-font-scale="100"] { font-size: 16px; } html[data-font-scale="125"] { font-size: 20px; } html[data-font-scale="155"] { font-size: 24.8px; } * { box-sizing: border-box; border-color: var(--nova-border); } body { margin: 0; font-family: var(--font); background: var(--nova-bg); color: var(--nova-text); font-size: 0.9375rem; /* Body 15 */ line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font); margin: 0; color: var(--nova-text); } h1 { font-size: 1.75rem; font-weight: 700; } /* H1 28/700 */ h2 { font-size: 1.375rem; font-weight: 600; } /* H2 22/600 */ h3 { font-size: 1.125rem; font-weight: 600; } /* H3 18/600 */ .body-s { font-size: 0.8125rem; } .caption { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--nova-text-dim); } a { color: var(--nova-blue); } /* focus-visible everywhere clickable */ button, input, [tabindex] { font-family: var(--font); } button:focus-visible, input:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--nova-blue); outline-offset: 2px; } /* ========================================================================== Glassmorphism panel ========================================================================== */ .glass-panel { background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease; } html.light .glass-panel { box-shadow: 0 4px 16px rgba(16, 24, 42, .06); } .glass-panel.hoverable:hover { background: var(--glass-hover); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); } html.light .glass-panel.hoverable:hover { box-shadow: 0 8px 20px rgba(16, 24, 42, .10); } /* ========================================================================== Buttons — fixed hierarchy ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); border: none; border-radius: var(--radius-sm); padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: transform 150ms ease, background 150ms ease, opacity 150ms ease; background: transparent; color: var(--nova-text); text-decoration: none; } .btn i { width: 1em; height: 1em; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn-primary { background: var(--glass); border: 1px solid var(--glass-brd); color: var(--nova-text); /* white on dark, navy on light via --nova-text token */ } .btn-primary:hover { background: var(--glass-hover); } .btn-secondary-blue { background: rgba(61, 123, 255, .16); border: 1px solid rgba(61, 123, 255, .45); color: var(--nova-blue); } .btn-secondary-blue:hover { background: rgba(61, 123, 255, .24); } .btn-secondary-red { background: rgba(207, 25, 15, .13); border: 1px solid rgba(207, 25, 15, .40); color: var(--nova-red); } .btn-secondary-red:hover { background: rgba(207, 25, 15, .20); } .btn-ghost { background: transparent; border: 1px solid var(--nova-border); color: var(--nova-text-muted); } .btn-ghost:hover { background: var(--glass); color: var(--nova-text); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: transparent; border: 1px solid transparent; color: var(--nova-text-muted); cursor: pointer; transition: background 150ms ease, color 150ms ease, transform 150ms ease; } .icon-btn i { width: 1.1em; height: 1.1em; } .icon-btn:hover { background: var(--glass); color: var(--nova-text); transform: translateY(-1px); } .icon-btn:active { transform: translateY(1px); } /* ========================================================================== App shell — sidebar + topbar, centered content ========================================================================== */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 15.5rem; flex-shrink: 0; background: var(--nova-bg-elev); border-right: 1px solid var(--nova-border); display: flex; flex-direction: column; transition: width 200ms ease; overflow: hidden; } .sidebar.collapsed { width: 4.5rem; } .sidebar.collapsed .logo-wordmark, .sidebar.collapsed .side-item span, .sidebar.collapsed .sidebar-foot .caption { display: none; } .sidebar-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--nova-border); } .logo-mark { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--nova-navy-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .logo-o { color: var(--nova-red); font-weight: 700; font-size: 1.1rem; } .logo-wordmark { font-weight: 700; font-size: 0.9375rem; letter-spacing: .02em; white-space: nowrap; } .logo-wordmark small { display: block; font-size: 0.625rem; font-weight: 500; color: var(--nova-text-dim); letter-spacing: .08em; } .side-nav { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); flex: 1; } .side-item { display: flex; align-items: center; gap: var(--sp-3); padding: 0.625rem var(--sp-3); border-radius: var(--radius-sm); background: transparent; border: none; color: var(--nova-text-muted); font-size: 0.875rem; font-weight: 500; text-align: left; cursor: pointer; transition: background 150ms ease, color 150ms ease; white-space: nowrap; } .side-item i { width: 1.1em; height: 1.1em; flex-shrink: 0; } .side-item:hover { background: var(--glass); color: var(--nova-text); } .side-item.active { background: rgba(61, 123, 255, .16); color: var(--nova-blue); } .sidebar-foot { padding: var(--sp-4); border-top: 1px solid var(--nova-border); } .main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--nova-border); background: var(--nova-bg-elev); flex-wrap: wrap; position: relative; z-index: 30; } .mobile-only { display: none; } .topbar-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; } .avatar { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); background: var(--nova-navy-light); color: var(--nova-text); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; border: none; padding: 0; cursor: pointer; font-family: var(--font); transition: background 150ms ease; } .avatar:hover { background: var(--nova-blue); } /* accessibility panel — grows DOWN from the button, never over the header */ .accessibility-wrap { position: relative; } .a11y-panel { display: none; position: absolute; top: calc(100% + var(--sp-2)); right: 0; width: 14rem; background: var(--surface); border: 1px solid var(--glass-brd); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); backdrop-filter: blur(18px) saturate(120%); padding: var(--sp-4); z-index: 40; } html.light .a11y-panel { box-shadow: 0 8px 24px rgba(16, 24, 42, .14); } .a11y-panel.open { display: block; } .a11y-title { margin: 0 0 var(--sp-2); } .a11y-scale-group { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); } .a11y-scale-btn { flex: 1; padding: var(--sp-2); border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-brd); color: var(--nova-text); cursor: pointer; font-weight: 600; font-family: var(--font); } .a11y-scale-btn[data-scale="125"] { font-size: 1.1em; } .a11y-scale-btn[data-scale="155"] { font-size: 1.25em; } .a11y-scale-btn:hover { background: var(--glass-hover); } .a11y-scale-btn.active { background: rgba(61, 123, 255, .16); border-color: rgba(61, 123, 255, .45); color: var(--nova-blue); } .a11y-theme-btn { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-brd); color: var(--nova-text); cursor: pointer; font-family: var(--font); font-size: 0.8125rem; font-weight: 500; } .a11y-theme-btn:hover { background: var(--glass-hover); } .a11y-theme-btn i { width: 1.1em; height: 1.1em; } /* ========================================================================== Login page — centered glass card, same tokens/logo as the app shell ========================================================================== */ .login-body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--nova-bg); font-family: var(--font); /* astronauta/Terra são decorativos e podem sangrar além da viewport em telas baixas ou estreitas — sem overflow aqui isso cria uma barra de rolagem por causa só do enfeite, o que não faz sentido numa tela de login. */ overflow: hidden; } .login-wrap { position: relative; z-index: 1; width: 100%; max-width: 24rem; padding: var(--sp-4); } /* ========================================================================== Acento visual das telas de autenticação (login, cadastro, recuperação de senha, verifique seu e-mail, definir senha) — sempre os dois juntos, sem sorteio: - astronauta (nova1): grudado à esquerda do card, centralizado com ele; - Terra à noite (nova3): logo abaixo do card, como um horizonte. Ambos ficam atrás do card (antes dele no DOM), nunca sobre campo/texto/botão. ========================================================================== */ .login-mascot { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: -4rem; width: 16.5rem; aspect-ratio: 800 / 1243; background-image: url('../img/nova1.png'); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; } @media (max-width: 64rem) { /* sem espaço sobrando ao lado do card — não faz sentido cortar o mascote */ .login-mascot { display: none; } } .login-earth-band { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: -1rem; width: 30rem; height: 12rem; background-image: url('../img/nova3.png'); background-size: cover; background-position: top center; background-repeat: no-repeat; mix-blend-mode: screen; opacity: .55; pointer-events: none; } .login-card { padding: var(--sp-8) var(--sp-6); text-align: center; } .login-logo { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6); } .login-logo .logo-mark { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); background: var(--nova-navy-light); display: flex; align-items: center; justify-content: center; } .login-logo .logo-o { color: var(--nova-red); font-weight: 700; font-size: 1.375rem; } .login-logo .logo-wordmark { font-weight: 700; font-size: 0.9375rem; letter-spacing: .02em; color: var(--nova-text); } .login-logo .logo-wordmark small { display: block; font-size: 0.625rem; font-weight: 500; color: var(--nova-text-dim); letter-spacing: .08em; } .login-title { margin-top: var(--sp-2); } .login-form { display: flex; flex-direction: column; text-align: left; margin-top: var(--sp-6); } .login-label { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--nova-text-dim); margin-bottom: var(--sp-1); } .login-input { border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: 0.625rem var(--sp-3); font-size: 0.875rem; background: var(--glass); color: var(--nova-text); font-family: var(--font); margin-bottom: var(--sp-4); transition: background 150ms ease; } .login-input:focus-visible { outline: 2px solid var(--nova-blue); outline-offset: 1px; } .login-error { color: var(--danger); font-size: 0.8125rem; margin: calc(var(--sp-4) * -1) 0 var(--sp-4); } /* na tela de login não há campo antes do erro (é só o botão do Google) — * a margem negativa acima serve para colar embaixo de um input, aqui só * causaria sobreposição com o subtítulo. */ #login-error { margin: var(--sp-2) 0 var(--sp-4); } .login-submit { width: 100%; justify-content: center; padding: 0.75rem; } .login-footnote { font-size: 0.8125rem; color: var(--nova-text-muted); margin: var(--sp-3) 0 0; } .login-footnote a { font-weight: 600; } .check-email-icon { color: var(--nova-blue); margin-bottom: var(--sp-2); } .check-email-icon i { width: 2.5rem; height: 2.5rem; } /* campo de senha com botão de mostrar/ocultar */ .password-field { position: relative; } .password-field .login-input { padding-right: 2.5rem; } .password-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-95%); background: transparent; border: none; color: var(--nova-text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0.25rem; } .password-toggle:hover { color: var(--nova-text); } .password-toggle i { width: 1.1em; height: 1.1em; } /* checklist de requisitos de senha — spec pede indicar visualmente o que já foi satisfeito, atualizado a cada tecla (ver set-password.js). */ .password-requirements { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); } .password-requirements li { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.8125rem; color: var(--nova-text-dim); transition: color 150ms ease; } .password-requirements li i { width: 1em; height: 1em; flex-shrink: 0; } .password-requirements li.ok { color: var(--success); } /* os dois ícones (marcado/não marcado) já existem no HTML — só alterna qual aparece. Evita depender de re-rodar lucide.createIcons() por tecla, já que ele substitui por e uma 2ª chamada não acha o de novo. */ .password-requirements li .icon-checked { display: none; } .password-requirements li.ok .icon-unchecked { display: none; } .password-requirements li.ok .icon-checked { display: inline-flex; } /* ========================================================================== User management panel (admin-only) — reuses the a11y-panel component ========================================================================== */ .users-panel { width: 24rem; max-height: 30rem; overflow-y: auto; } .users-search { width: 100%; box-sizing: border-box; margin-bottom: var(--sp-2); border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: 0.5rem var(--sp-3); font-size: 0.8125rem; background: var(--glass); color: var(--nova-text); font-family: var(--font); } .users-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 18rem; overflow-y: auto; } .users-pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4); font-size: 0.6875rem; color: var(--nova-text-dim); } .users-pagination .icon-btn { width: 1.75rem; height: 1.75rem; } .users-pagination .icon-btn:disabled { opacity: 0.35; cursor: default; } .user-row { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--radius-sm); background: var(--glass); } .user-row-top { display: flex; align-items: center; gap: var(--sp-2); } .user-row-info { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; } .user-row-name { font-size: 0.8125rem; font-weight: 600; color: var(--nova-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-row-email { font-size: 0.6875rem; color: var(--nova-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-row-role { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; color: var(--nova-blue); flex-shrink: 0; white-space: nowrap; } .user-row-controls { display: flex; align-items: center; gap: var(--sp-2); } .user-row-role-select { flex: 1; border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: 0.3rem var(--sp-2); font-size: 0.6875rem; background: var(--glass); color: var(--nova-text); font-family: var(--font); } .user-row-controls .icon-btn { width: 1.75rem; height: 1.75rem; } .user-form { display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid var(--nova-border); padding-top: var(--sp-3); } .user-form input, .user-form select { border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: 0.5rem var(--sp-3); font-size: 0.8125rem; background: var(--glass); color: var(--nova-text); font-family: var(--font); } /* ========================================================================== Auditoria (admin-only) — reuses the a11y-panel component ========================================================================== */ .audit-panel { width: 26rem; max-height: 30rem; overflow-y: auto; } .audit-list { display: flex; flex-direction: column; gap: var(--sp-2); } .audit-row { padding: var(--sp-2); border-radius: var(--radius-sm); background: var(--glass); } .audit-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .audit-row-action { font-size: 0.75rem; font-weight: 600; color: var(--nova-text); } .audit-row-time { font-size: 0.625rem; color: var(--nova-text-dim); white-space: nowrap; } .audit-row-detail { font-size: 0.6875rem; color: var(--nova-text-muted); margin-top: 0.2rem; } /* ========================================================================== Minha conta (avatar) — dados do usuário + trocar a própria senha ========================================================================== */ .account-panel { width: 20rem; } .account-info { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: var(--sp-4); } .account-info-name { font-size: 0.875rem; font-weight: 600; color: var(--nova-text); } .account-info-email { font-size: 0.75rem; color: var(--nova-text-dim); } .account-success { color: var(--success); font-size: 0.8125rem; margin: calc(var(--sp-2) * -1) 0 var(--sp-3); } #change-password-form .login-label { margin-top: var(--sp-1); } #change-password-form .password-requirements { margin-top: 0; } .account-logout-btn { width: 100%; justify-content: center; margin-top: var(--sp-4); } /* ========================================================================== Notificações — aviso pessoal de senha (todo mundo) + alertas de sistema (admin), com um sino que mostra a contagem não lida ========================================================================== */ #notifications-btn { position: relative; } .notif-badge { position: absolute; top: 0.1rem; right: 0.1rem; min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: var(--radius-full); background: var(--danger); color: #fff; font-size: 0.5625rem; font-weight: 700; align-items: center; justify-content: center; line-height: 1; font-variant-numeric: tabular-nums; } .notifications-panel { width: 24rem; max-height: 26rem; overflow-y: auto; } .notifications-list { display: flex; flex-direction: column; gap: var(--sp-2); } .notif-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-brd); } .notif-row-body { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .notif-row-title { font-size: 0.8125rem; font-weight: 600; color: var(--nova-text); } .notif-row-sub { font-size: 0.6875rem; color: var(--nova-text-dim); } .notif-row-action { flex-shrink: 0; padding: 0.4rem 0.75rem; font-size: 0.75rem; } .notif-row-warning { border-color: rgba(251, 191, 36, .35); } .notif-row-warning .notif-row-title { color: var(--warning); } .notif-row-error { border-color: rgba(255, 107, 107, .35); } .notif-row-error .notif-row-title { color: var(--danger); } /* ========================================================================== Modais — overlay de tela cheia, usado tanto pro "Detalhes" de um alerta quanto pro bloqueio de senha expirada (esse último sem botão de fechar) ========================================================================== */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(3, 6, 12, .68); padding: var(--sp-4); } .modal-box { width: 100%; max-width: 30rem; max-height: 85vh; overflow-y: auto; padding: var(--sp-6); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); } .modal-head h3 { font-size: 1rem; font-weight: 600; margin: 0; } .modal-meta { font-size: 0.75rem; color: var(--nova-text-dim); margin: 0 0 var(--sp-3); } .modal-details { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: var(--sp-3); max-height: 18rem; overflow-y: auto; color: var(--nova-text-muted); } .modal-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-4); } .expiry-modal { text-align: center; max-width: 26rem; } .expiry-modal .login-form { text-align: left; } /* ========================================================================== Content ========================================================================== */ .content { flex: 1; padding: var(--sp-8) var(--sp-6); overflow-x: hidden; } .content-container { max-width: 84rem; margin: 0 auto; padding: 0 var(--sp-2); } .tab-panel { display: none; } .tab-panel.active { display: block; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; } .page-sub { margin: var(--sp-1) 0 0; color: var(--nova-text-muted); font-size: 0.8125rem; } /* filter bar */ .filterbar { display: flex; gap: var(--sp-4); align-items: flex-end; flex-wrap: wrap; padding: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-6); position: relative; z-index: 20; } .filter-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 8.5rem; } .filter-field label { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--nova-text-dim); } .filter-field input { border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: 0.5rem var(--sp-3); font-size: 0.8125rem; background: var(--glass); color: var(--nova-text); min-width: 10rem; font-family: var(--font); } .filter-field input::-webkit-calendar-picker-indicator { filter: invert(.5); } html.light .filter-field input::-webkit-calendar-picker-indicator { filter: none; } /* ========================================================================== Date range picker — single "Data" field, opens a popover with two-month calendar (range select) + quick presets, glass, Nova blue for the range. ========================================================================== */ .date-range-field { position: relative; } .date-range-btn { display: flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: 0.5rem var(--sp-3); font-size: 0.8125rem; font-family: var(--font); background: var(--glass); color: var(--nova-text); min-width: 13rem; cursor: pointer; white-space: nowrap; } .date-range-btn i { width: 1em; height: 1em; color: var(--nova-text-dim); flex-shrink: 0; } .date-range-btn:hover { background: var(--glass-hover); } .date-range-popover { display: none; position: absolute; top: calc(100% + var(--sp-2)); left: 0; z-index: 40; background: var(--surface); border: 1px solid var(--glass-brd); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); backdrop-filter: blur(18px) saturate(120%); padding: var(--sp-4); flex-direction: column; gap: var(--sp-3); } html.light .date-range-popover { box-shadow: 0 12px 32px rgba(16, 24, 42, .16); } .date-range-popover.open { display: flex; } .drp-body { display: flex; gap: var(--sp-6); } .drp-calendars { display: flex; gap: var(--sp-6); } .drp-month { width: 15.5rem; } .drp-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); } .drp-month-title { font-size: 0.8125rem; font-weight: 600; color: var(--nova-text); text-transform: capitalize; } .drp-nav { width: 1.75rem; height: 1.75rem; } .drp-nav i { width: 0.9em; height: 0.9em; } .drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.15rem; } .drp-dow { font-size: 0.625rem; font-weight: 600; text-align: center; color: var(--nova-text-dim); padding-bottom: var(--sp-2); text-transform: uppercase; } .drp-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--nova-text); cursor: pointer; border: none; background: transparent; border-radius: var(--radius-sm); font-family: var(--font); position: relative; } .drp-day:hover:not(.drp-day-muted) { background: var(--glass-hover); } .drp-day-muted { color: var(--nova-text-dim); opacity: .35; cursor: default; pointer-events: none; } .drp-day-inrange { background: rgba(61, 123, 255, .16); border-radius: 0; } .drp-day-start, .drp-day-end { background: var(--nova-blue); color: #fff; font-weight: 700; } .drp-day-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .drp-day-end { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .drp-day-start.drp-day-end { border-radius: var(--radius-sm); } .drp-day-today:not(.drp-day-start):not(.drp-day-end) { box-shadow: inset 0 0 0 1px var(--nova-blue); } .drp-presets { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 9rem; border-left: 1px solid var(--nova-border); padding-left: var(--sp-4); } .drp-presets button { text-align: left; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: transparent; border: none; color: var(--nova-text-muted); font-size: 0.8125rem; font-weight: 500; cursor: pointer; font-family: var(--font); transition: background 150ms ease, color 150ms ease; } .drp-presets button:hover { background: var(--glass); color: var(--nova-text); } .drp-presets button.active { background: rgba(61, 123, 255, .16); color: var(--nova-blue); } /* shared "Confirmar" row/button for every popover (date range + dropdowns) */ .popover-confirm-row { display: flex; justify-content: flex-end; padding-top: var(--sp-3); border-top: 1px solid var(--nova-border); } .popover-confirm { width: 100%; justify-content: center; } /* generic dropdown filter (Status/Equipe/Atendente/Origem) — floats above content like every other popover, never pushes layout, confirms explicitly. */ .dropdown-field { position: relative; } .dropdown-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: 0.5rem var(--sp-3); font-size: 0.8125rem; font-family: var(--font); background: var(--glass); color: var(--nova-text-muted); cursor: pointer; } .dropdown-trigger:hover { background: var(--glass-hover); } .dropdown-trigger i { width: 1em; height: 1em; color: var(--nova-text-dim); flex-shrink: 0; } .dropdown-popover { display: none; position: absolute; top: calc(100% + var(--sp-2)); left: 0; z-index: 40; min-width: 14rem; background: var(--surface); border: 1px solid var(--glass-brd); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); backdrop-filter: blur(18px) saturate(120%); padding: var(--sp-3); flex-direction: column; gap: var(--sp-2); } html.light .dropdown-popover { box-shadow: 0 12px 32px rgba(16, 24, 42, .16); } .dropdown-popover.open { display: flex; } .dropdown-options { max-height: 14rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.1rem; } .dropdown-options label.ms-option { display: flex; gap: var(--sp-2); align-items: center; font-size: 0.8125rem; padding: 0.35rem var(--sp-2); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; color: var(--nova-text); } .dropdown-options label.ms-option:hover { background: var(--glass); } @media (max-width: 40rem) { .drp-calendars { flex-direction: column; } .drp-body { flex-direction: column; } .date-range-popover { left: -1rem; } .drp-presets { border-left: none; border-top: 1px solid var(--nova-border); padding-left: 0; padding-top: var(--sp-3); flex-direction: row; flex-wrap: wrap; } } /* ========================================================================== Stat / KPI ========================================================================== */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); } .grid.charts { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); } /* row 1: the two monthly bar charts (fixed 2-col) — row 2: the three breakdown bar-lists (fixed 3-col) */ .grid.row-2col { grid-template-columns: repeat(2, 1fr); } .grid.row-3col { grid-template-columns: repeat(3, 1fr); } @media (max-width: 62rem) { .grid.row-2col, .grid.row-3col { grid-template-columns: 1fr; } } /* bar chart (Mensal Geral / Mensal Finalizados): label above, month below */ .barchart { display: flex; align-items: flex-end; gap: var(--sp-3); height: 12rem; padding-top: var(--sp-6); } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .bar-value { font-size: 0.75rem; font-weight: 700; color: var(--nova-text); margin-bottom: var(--sp-1); font-variant-numeric: tabular-nums; white-space: nowrap; } .bar-sub { font-size: 0.625rem; color: var(--nova-text-dim); margin-bottom: var(--sp-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .chart-note { margin: calc(var(--sp-2) * -1) 0 var(--sp-4); color: var(--nova-text-muted); font-size: 0.75rem; } .bar-fill { width: 60%; min-height: 3px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: linear-gradient(180deg, var(--nova-blue), var(--nova-navy-light)); } .bar-label { font-size: 0.6875rem; color: var(--nova-text-dim); margin-top: var(--sp-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .stat { padding: var(--sp-4); overflow: hidden; } .stat-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); } .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--nova-text); line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; } .stat-value.loading { font-size: 0.8125rem; font-weight: 500; color: var(--nova-text-dim); } .stat-delta { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; margin-top: var(--sp-2); white-space: nowrap; } .stat-delta i { width: 1em; height: 1em; flex-shrink: 0; } .stat-delta.up { color: var(--success); } .stat-delta.down { color: var(--danger); } .stat-delta.none { color: var(--nova-text-dim); font-weight: 500; } /* the KPI row needs more room per card than the generic auto-fit grid gives it, otherwise duration values ("30m 60s") wrap to a second line. Cards drop to a second row before they get narrow enough to force a wrap. */ .grid.kpis { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } .chart-card { padding: var(--sp-6); } .chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); } .chart-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; } .legend-chip { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.75rem; color: var(--nova-text-muted); } .legend-swatch { width: 0.625rem; height: 0.625rem; border-radius: 0.2rem; background: var(--nova-blue); flex-shrink: 0; } /* area chart tooltip (glass) */ .chart-tooltip { position: absolute; pointer-events: none; opacity: 0; transition: opacity 100ms ease; background: var(--surface); border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-size: 0.75rem; box-shadow: 0 8px 20px rgba(0,0,0,.3); backdrop-filter: blur(18px); white-space: nowrap; } .chart-tooltip.show { opacity: 1; } .chart-tooltip .tt-label { color: var(--nova-text-dim); } .chart-tooltip .tt-value { color: var(--nova-blue); font-weight: 700; margin-left: var(--sp-2); } /* horizontal blue bar-list (replaces rainbow pies) */ .barlist { display: flex; flex-direction: column; gap: var(--sp-3); } /* name column width is computed per-list in JS (--nm-w, sized to the longest label so nothing gets ellipsized) + value auto-sized to its own text; the bar itself (1fr) shrinks to whatever room is left over, down to a sliver. */ .barlist-row { display: grid; grid-template-columns: var(--nm-w, 13rem) minmax(0.5rem, 1fr) auto; align-items: center; gap: var(--sp-2); } .barlist-name { font-size: 0.8125rem; color: var(--nova-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barlist-track { height: 0.5rem; border-radius: var(--radius-full); background: var(--glass); overflow: hidden; } .barlist-fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--nova-blue), var(--info)); } .barlist-value { font-size: 0.75rem; color: var(--nova-text-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .barlist-pct { color: var(--nova-text-dim); } /* ========================================================================== Badge ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); font-size: 0.6875rem; font-weight: 600; } .badge-neutral { background: var(--glass); border: 1px solid var(--glass-brd); color: var(--nova-text-muted); } .badge-success { background: rgba(74, 222, 128, .14); color: var(--success); } .badge-warning { background: rgba(251, 191, 36, .14); color: var(--warning); } .badge-danger { background: rgba(255, 107, 107, .14); color: var(--danger); } .badge-info { background: rgba(111, 155, 255, .14); color: var(--info); } /* ========================================================================== DataTable ========================================================================== */ .table-wrap { overflow: auto; max-height: 34rem; border-radius: var(--radius-lg); } table.bi-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } table.bi-table thead th { position: sticky; top: 0; z-index: 5; text-align: left; padding: var(--sp-3) var(--sp-4); background: var(--nova-navy); color: var(--nova-text); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .02em; font-weight: 600; } html.light table.bi-table thead th { background: var(--nova-navy); color: #EEF2F8; } table.bi-table td { padding: 0.625rem var(--sp-4); border-bottom: 1px solid var(--nova-border); color: var(--nova-text); font-variant-numeric: tabular-nums; white-space: nowrap; } table.bi-table tbody tr:nth-child(even) td { background: var(--glass); } table.bi-table tr.total-row td { background: rgba(61, 123, 255, .16) !important; color: var(--nova-blue); font-weight: 700; border-top: 1px solid rgba(61, 123, 255, .4); } .section-title { margin: 0 0 var(--sp-4); } .loading-text { color: var(--nova-text-dim); font-size: 0.8125rem; padding: var(--sp-6); } /* ========================================================================== Responsive reflow (never transform:scale — real layout reflow) ========================================================================== */ @media (max-width: 62rem) { .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%); transition: transform 200ms ease; } .sidebar.mobile-open { transform: translateX(0); } .mobile-only { display: inline-flex; } .topbar { row-gap: var(--sp-2); } .barlist-row { grid-template-columns: 9rem minmax(2rem, 1fr) auto; } } @media (max-width: 40rem) { .content { padding: var(--sp-4); } .page-head { flex-direction: column; align-items: flex-start; } .grid { grid-template-columns: 1fr; } .filterbar { padding: var(--sp-4); } }