/* ============================================================================ NUNITU — Design System (estilo BI: Power BI / Looker / Tableau) ---------------------------------------------------------------------------- - Paleta institucional fixa (azul #06184D como marca). - Temas claro e escuro via [data-theme] no . - Layout de sidebar + área principal com barra superior por tela. - As cores escolhidas por cada escola NÃO mudam a interface; elas valem apenas para as faixas do cartão do aluno (--cartao-primaria/secundaria). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap'); :root { /* Marca e acentos (fixos nos dois temas) */ --azul: #06184D; --azul-2: #0C2E7A; --dourado: #E0A32E; --verde: #22A06B; --vermelho: #E4483C; --roxo: #7A4EC0; /* Cores do cartão do aluno (sobrescritas por escola em runtime) */ --cartao-primaria: var(--azul); --cartao-secundaria: var(--verde); /* Geometria e movimento */ --raio-s: 12px; --raio-m: 18px; --raio-g: 26px; --t-rapido: 100ms cubic-bezier(.3,.7,.4,1); --t-medio: 180ms cubic-bezier(.3,.7,.4,1); --t-salto: 220ms cubic-bezier(.34,1.56,.64,1); --sidebar-w: 236px; --sidebar-rail: 72px; } /* -------------------- TEMA CLARO (padrão) -------------------- */ :root, [data-theme="light"] { --bg: #EDF1F7; --surface: #FFFFFF; --surface-2: #F7F9FC; --text: #0F1B3D; --muted: #6B7793; --faint: #98A2B8; --border: #E6EBF3; --acao: var(--azul); --acao-txt: #FFFFFF; --sombra-1: 0 2px 10px rgba(15,27,61,.05); --sombra-2: 0 8px 26px rgba(15,27,61,.10); --sombra-3: 0 20px 50px rgba(15,27,61,.20); } /* -------------------- TEMA ESCURO (estrela do BI) -------------------- */ [data-theme="dark"] { --bg: #060B22; --surface: #0F1A4A; --surface-2: #0B1338; --text: #EAEEFB; --muted: #9AA6D0; --faint: #6B78A8; --border: #21305F; --acao: #3B5BD6; --acao-txt: #FFFFFF; --sombra-1: 0 2px 12px rgba(0,0,0,.30); --sombra-2: 0 10px 30px rgba(0,0,0,.42); --sombra-3: 0 24px 60px rgba(0,0,0,.55); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; } body { font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); font-size: 15.5px; line-height: 1.55; transition: background var(--t-medio), color var(--t-medio); } h1,h2,h3,h4,h5,h6 { font-weight: 800; letter-spacing: -.01em; color: var(--text); } a { color: var(--acao); } ::selection { background: color-mix(in srgb, var(--azul) 22%, transparent); } /* ============================================================================ SHELL: sidebar + main (montado pelo ui.js) ========================================================================== */ body.tem-sidebar { display: flex; min-height: 100vh; } .nx-side { width: var(--sidebar-rail); flex-shrink: 0; background: var(--azul); color: #fff; padding: 20px 10px; display: flex; flex-direction: column; position: fixed; left: 0; top: 0; z-index: 60; height: 100vh; transition: width var(--t-medio), padding var(--t-medio), box-shadow var(--t-medio); overflow: hidden; } .nx-side:hover, .nx-side.expandida { width: var(--sidebar-w); padding: 20px 14px; box-shadow: 18px 0 44px -18px rgba(0,0,0,.45); } .nx-side .nx-logo { display: flex; align-items: center; gap: 11px; padding: 4px 0 18px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 14px; justify-content: center; } .nx-side:hover .nx-logo, .nx-side.expandida .nx-logo { justify-content: flex-start; padding: 4px 8px 18px; } .nx-side .nx-logo .mk { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--dourado), #c98a1a); display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: 900; color: var(--azul); font-size: 15px; } .nx-side .nx-logo .mk img { width: 100%; height: 100%; object-fit: contain; } .nx-side .nx-logo .tt { font-weight: 700; font-size: 1rem; line-height: 1.05; letter-spacing: .01em; } .nx-side .nx-logo .st { font-size: .7rem; opacity: .6; margin-top: 3px; font-weight: 400; } .nx-nav { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; margin-right: -6px; padding-right: 6px; /* afasta o scrollbar do texto */ } .nx-nav::-webkit-scrollbar { width: 6px; } .nx-nav::-webkit-scrollbar-track { background: transparent; } .nx-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; } .nx-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); } .nx-nav a { display: flex; align-items: center; gap: 12px; color: #b7c0d8; text-decoration: none; font-size: .89rem; font-weight: 450; letter-spacing: .01em; padding: 11px 0; border-radius: 10px; justify-content: center; transition: background var(--t-rapido), color var(--t-rapido); white-space: nowrap; } .nx-side:hover .nx-nav a, .nx-side.expandida .nx-nav a { justify-content: flex-start; padding: 11px 13px; } .nx-nav a span { overflow: hidden; text-overflow: ellipsis; } .nx-nav a svg { width: 18px; height: 18px; flex-shrink: 0; } .nx-nav a:hover { background: rgba(255,255,255,.07); color: #fff; } .nx-nav a.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 550; } .nx-nav a.active svg { color: var(--dourado); } /* rótulos de texto só aparecem quando a barra está expandida (hover) */ .nx-side .nx-logo .tt, .nx-side .nx-logo .st, .nx-nav a span, .nx-perfil .nm, .nx-perfil .rl, .nx-tema-btn span, .nx-sair-btn span { display: none; } .nx-side:hover .nx-logo .tt, .nx-side.expandida .nx-logo .tt, .nx-side:hover .nx-logo .st, .nx-side.expandida .nx-logo .st, .nx-side:hover .nx-nav a span, .nx-side.expandida .nx-nav a span, .nx-side:hover .nx-perfil .nm, .nx-side.expandida .nx-perfil .nm, .nx-side:hover .nx-perfil .rl, .nx-side.expandida .nx-perfil .rl, .nx-side:hover .nx-tema-btn span, .nx-side.expandida .nx-tema-btn span, .nx-side:hover .nx-sair-btn span, .nx-side.expandida .nx-sair-btn span { display: inline; } .nx-side .nx-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .nx-tema-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.08); color: #fff; border: none; cursor: pointer; font-family: inherit; font-size: .8rem; font-weight: 500; padding: 10px; border-radius: 10px; transition: background var(--t-rapido); } .nx-tema-btn:hover { background: rgba(255,255,255,.16); } .nx-tema-btn svg { width: 15px; height: 15px; } /* botão Sair: linha própria, sempre visível inteiro (não fica escondido/cortado junto com o avatar quando a barra está colapsada) */ .nx-sair-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(240,90,90,.14); color: #ffb3b3; text-decoration: none; cursor: pointer; font-family: inherit; font-size: .8rem; font-weight: 600; padding: 10px; border-radius: 10px; transition: background var(--t-rapido), color var(--t-rapido); } .nx-sair-btn:hover { background: rgba(240,90,90,.28); color: #fff; } .nx-sair-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .nx-perfil { background: rgba(255,255,255,.06); border-radius: 12px; padding: 11px 0; display: flex; align-items: center; justify-content: center; gap: 10px; } .nx-side:hover .nx-perfil, .nx-side.expandida .nx-perfil { padding: 11px 13px; justify-content: flex-start; } .nx-perfil .av { width: 32px; height: 32px; border-radius: 50%; background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; flex-shrink: 0; } .nx-perfil .nm { font-size: .8rem; font-weight: 600; line-height: 1.1; } .nx-perfil .rl { font-size: .7rem; opacity: .6; font-weight: 400; } .nx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--sidebar-rail); } /* Barra superior por tela: título + área de ações/filtros da tela */ .nx-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; transition: box-shadow var(--t-medio); } .nx-topo.rolou { box-shadow: 0 6px 20px -12px rgba(6,15,35,.5); } .nx-topo .titulo { position: relative; padding-left: 14px; min-width: 0; } .nx-topo .titulo h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-topo .titulo::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 99px; background: linear-gradient(180deg, var(--dourado), #f2c66a); } .nx-topo .titulo h1 { font-size: 1.3rem; font-weight: 800; } .nx-topo .titulo .sub { font-size: .82rem; color: var(--muted); margin-top: 2px; } .nx-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nx-conteudo { padding: 24px 26px; } @media (prefers-reduced-motion: no-preference) { /* fill-mode 'backwards' (não 'both'): não retém o transform ao terminar, senão o transform residual criaria um containing block que "prende" modais position:fixed e a barra superior passaria a cobri-los. */ .nx-conteudo { animation: entra 300ms cubic-bezier(.2,.7,.3,1) backwards; } @keyframes entra { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } } } /* Compat: telas antigas ainda usam .nexus-container dentro do conteúdo */ .nexus-container { max-width: 1180px; } /* ============================================================================ CARDS, KPIs ========================================================================== */ .nexus-card, .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-m); padding: 22px; margin-bottom: 18px; box-shadow: var(--sombra-1); transition: transform var(--t-rapido), box-shadow var(--t-rapido); } .nexus-card:hover, .card:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); } .nexus-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-m); padding: 18px 20px; box-shadow: var(--sombra-1); position: relative; overflow: hidden; transition: transform var(--t-rapido), box-shadow var(--t-rapido); } .nexus-stat::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--verde); } .nexus-stat:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); } .nexus-stat .valor { font-size: 1.85rem; font-weight: 800; color: var(--text); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .nexus-stat .label { font-size: .8rem; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } /* KPI com ícone (novo padrão BI) */ .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-m); padding: 18px; box-shadow: var(--sombra-1); position: relative; } .kpi .kpi-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .kpi .kpi-ico svg { width: 22px; height: 22px; } .kpi .kpi-v { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } .kpi .kpi-l { font-size: .82rem; color: var(--muted); font-weight: 600; margin-top: 4px; } /* ============================================================================ BOTÕES ========================================================================== */ .btn-nexus { background: var(--acao); color: var(--acao-txt); border: none; padding: 12px 20px; border-radius: var(--raio-m); font-weight: 800; font-size: .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; letter-spacing: .01em; box-shadow: 0 4px 0 color-mix(in srgb, var(--acao) 60%, #000); transition: transform var(--t-rapido), box-shadow var(--t-rapido), filter var(--t-rapido); } .btn-nexus svg { width: 15px; height: 15px; } .btn-nexus:hover { filter: brightness(1.07); } .btn-nexus:active { transform: translateY(4px); box-shadow: 0 0 0 color-mix(in srgb, var(--acao) 60%, #000); } .btn-nexus:disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none; box-shadow: 0 4px 0 color-mix(in srgb, var(--acao) 60%, #000); } .btn-nexus-outline { background: var(--surface); border: 2px solid var(--border); color: var(--text); padding: 11px 18px; border-radius: var(--raio-m); font-weight: 800; font-size: .88rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; box-shadow: 0 4px 0 var(--border); transition: transform var(--t-rapido), box-shadow var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido); } .btn-nexus-outline svg { width: 15px; height: 15px; } .btn-nexus-outline:hover { border-color: var(--acao); color: var(--acao); } .btn-nexus-outline:active { transform: translateY(4px); box-shadow: 0 0 0 var(--border); } .btn-mini { border: none; background: none; cursor: pointer; font-size: .8rem; font-weight: 650; padding: 5px 10px; border-radius: var(--raio-s); display: inline-flex; align-items: center; gap: 5px; font-family: inherit; transition: background var(--t-rapido); } .btn-mini-azul { color: var(--acao); } .btn-mini-azul:hover { background: color-mix(in srgb, var(--azul) 10%, transparent); } .btn-mini-alerta { color: var(--vermelho); } .btn-mini-alerta:hover { background: color-mix(in srgb, var(--vermelho) 12%, transparent); } .btn-mini-verde { color: var(--verde); } .btn-mini-verde:hover { background: color-mix(in srgb, var(--verde) 12%, transparent); } /* chip/filtro no topo das telas */ .nx-chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-s); padding: 8px 13px; font-size: .82rem; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; } .nx-chip svg { width: 14px; height: 14px; color: var(--muted); } /* ============================================================================ FORMULÁRIOS ========================================================================== */ label { font-size: .8rem; font-weight: 650; color: var(--muted); } input[type=text],input[type=email],input[type=password],input[type=date],input[type=time], input[type=number],input[type=tel],select,textarea { font-family: inherit; font-size: .9rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-s); padding: 9px 12px; transition: border-color var(--t-rapido), box-shadow var(--t-rapido), transform var(--t-rapido); outline: none; } select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7793' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } select:hover { border-color: color-mix(in srgb, var(--acao) 45%, var(--border)); } input:focus,select:focus,textarea:focus { border-color: var(--acao); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 16%, transparent); } input::placeholder { color: var(--faint); } /* ============================================================================ TABELAS ========================================================================== */ table.nexus-table, table.tabela-usuarios, table.tabela-extrato, table.tabela-turmas { width: 100%; border-collapse: collapse; } table.nexus-table th, table.tabela-usuarios th, table.tabela-extrato th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); font-weight: 700; padding: 10px 14px; border-bottom: 2px solid var(--border); } table.nexus-table td, table.tabela-usuarios td, table.tabela-extrato td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: .9rem; } table tbody tr { transition: background var(--t-rapido); } table.nexus-table tbody tr:hover, table.tabela-usuarios tbody tr:hover, table.tabela-extrato tbody tr:hover { background: var(--surface-2); } /* ============================================================================ BADGES ========================================================================== */ .badge-status,.badge-ativo-user,.badge-inativo-user { padding: 4px 12px; border-radius: 20px; font-size: .78rem; font-weight: 700; display: inline-block; } .badge-ativo,.badge-ativo-user { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); } .badge-alerta { background: color-mix(in srgb, var(--vermelho) 14%, transparent); color: var(--vermelho); } .badge-inativo-user { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); } /* ============================================================================ ABAS ========================================================================== */ .tabs { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .tabs::-webkit-scrollbar { display: none; } .tab-btn { background: var(--surface-2); border: 2px solid transparent; padding: 9px 16px; font-family: inherit; font-weight: 800; font-size: .86rem; color: var(--muted); cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0; transition: color var(--t-rapido), background var(--t-rapido), transform var(--t-rapido); } .tab-btn:hover { color: var(--acao); background: color-mix(in srgb, var(--acao) 8%, var(--surface-2)); } .tab-btn.active { color: var(--acao-txt); background: var(--acao); border-color: var(--acao); } .tab-btn:active { transform: scale(.96); } .tab-pane { display: none; } .tab-pane.active { display: block; } @media (prefers-reduced-motion: no-preference) { .tab-pane.active { animation: entra 200ms ease both; } } /* ============================================================================ MODAIS ========================================================================== */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(6,15,35,.55); backdrop-filter: blur(3px); align-items: center; justify-content: center; z-index: 500; padding: 20px; } .modal-overlay.aberto { display: flex; } .modal-overlay.aberto > div, .modal-overlay[style*="flex"] > div { animation: modalEntra 240ms cubic-bezier(.2,.9,.3,1.15) both; } @keyframes modalEntra { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } } .modal-box { background: var(--surface); border-radius: var(--raio-g); padding: 26px; width: 100%; max-width: 380px; box-shadow: var(--sombra-3); } /* ============================================================================ KIOSK e TELAS DE ACESSO (mantêm fundo próprio, independentes do tema) ========================================================================== */ .kiosk-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; transition: background 400ms ease; } .kiosk-body.kiosk-neutro { background: radial-gradient(ellipse 80% 60% at 70% 15%, rgba(122,78,192,.25), transparent), linear-gradient(160deg, var(--azul), #030B22); } .kiosk-body.kiosk-ok { background: linear-gradient(160deg, #1E6B52, #0A2C22); } .kiosk-body.kiosk-erro { background: linear-gradient(160deg, #8F2C1C, #3A0F0A); } .kiosk-box { text-align: center; color: #fff; width: 100%; max-width: 660px; padding: 44px; } .kiosk-box h1 { font-size: 2.7rem; font-weight: 800; margin: 0 0 8px; color: #fff; } .kiosk-box p.sub { font-size: 1.25rem; opacity: .85; margin: 0; } .kiosk-box .saldo { font-size: 1.5rem; margin-top: 18px; font-weight: 800; } @media (prefers-reduced-motion: no-preference) { .kiosk-body.kiosk-ok .kiosk-box, .kiosk-body.kiosk-erro .kiosk-box { animation: kioskPulso 420ms cubic-bezier(.2,.9,.3,1.1); } @keyframes kioskPulso { 0% { transform: scale(.97); opacity: .6; } 100% { transform: scale(1); opacity: 1; } } } .kiosk-input { margin-top: 34px; width: 100%; font-size: 1.4rem; text-align: center; padding: 16px; border-radius: var(--raio-m); border: none; outline: none; font-family: inherit; box-shadow: 0 8px 30px rgba(0,0,0,.25); } .tela-acesso { min-height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; padding: 20px; background: radial-gradient(ellipse 70% 50% at 80% 10%, rgba(122,78,192,.22), transparent), linear-gradient(160deg, var(--azul), #030B22); } .cartao-acesso { background: #fff; color: #0F1B3D; border-radius: var(--raio-g); padding: 38px; width: 100%; max-width: 400px; box-shadow: var(--sombra-3); } @media (prefers-reduced-motion: no-preference) { .cartao-acesso { animation: modalEntra 340ms cubic-bezier(.2,.9,.3,1.1) both; } } /* ============================================================================ UTIL ========================================================================== */ .aviso-restrito { border-left: 4px solid var(--vermelho); background: color-mix(in srgb, var(--vermelho) 8%, var(--surface)); } .spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: girar .7s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* Compat com telas que ainda referenciam a marca antiga */ :root { --nexus-azul: var(--azul); --nexus-verde: var(--verde); --nexus-alerta: var(--vermelho); --nexus-amarelo: var(--dourado); --nexus-borda: var(--border); --escola-primaria: var(--azul); --escola-secundaria: var(--verde); --n-superficie: var(--surface); --n-borda: var(--border); --n-texto: var(--text); --n-texto-suave: var(--muted); --n-texto-fraco: var(--faint); --n-fundo: var(--bg); } /* ============================================================================ RESPONSIVO ========================================================================== */ @media (max-width: 1024px) { /* abaixo de 1024px o "hover" do mouse não é confiável (tablets/notebooks pequenos) — o menu conta só com o clique (classe .expandida, controlada por JS) pra abrir, então não precisa de nenhuma regra extra aqui. */ } @media (max-width: 680px) { .nx-topo { padding: 14px 16px; } .nx-conteudo { padding: 16px; } } /* ============================================================================ BI PREMIUM — cards com "tira de luz", ícones em relevo (3D sutil), KPIs ============================================================================ */ /* card com brilho colorido na base (usa --glow como cor de acento) */ .nx-glow { position: relative; overflow: hidden; --glow: var(--roxo); } [data-theme="dark"] .nx-glow { background: radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--glow) 12%, transparent), transparent 70%), var(--surface); border-color: color-mix(in srgb, var(--glow) 22%, var(--border)); } .nx-glow::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, transparent, var(--glow), transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--glow) 80%, transparent); opacity: .95; } .nx-glow:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); } .nx-glow { transition: transform var(--t-rapido), box-shadow var(--t-rapido); } /* ícone em suporte com leve profundidade (3D discreto) */ .nx-ico3d { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--glow, var(--verde)); background: linear-gradient(150deg, color-mix(in srgb, var(--glow, var(--verde)) 26%, var(--surface)), color-mix(in srgb, var(--glow, var(--verde)) 8%, var(--surface))); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.28); } .nx-ico3d svg { width: 24px; height: 24px; } /* KPI premium */ .kpi-bi { display: flex; flex-direction: column; gap: 2px; padding: 20px; border-radius: var(--raio-m); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sombra-1); } .kpi-bi .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .kpi-bi .tag { font-size: .7rem; font-weight: 800; padding: 3px 9px; border-radius: 20px; } .kpi-bi .tag.up { background: color-mix(in srgb, var(--verde) 18%, transparent); color: var(--verde); } .kpi-bi .tag.down { background: color-mix(in srgb, var(--vermelho) 16%, transparent); color: var(--vermelho); } .kpi-bi .tag.neutro { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); } .kpi-bi .num { font-size: 2rem; font-weight: 900; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 60%, var(--glow, var(--text)))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .kpi-bi .cap { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-top: 3px; } .kpi-bi .comp { font-size: .78rem; color: var(--faint); margin-top: 6px; } /* chip de status ao vivo */ .viv-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 800; padding: 5px 12px; border-radius: 20px; } .viv-chip .pt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .viv-chip.aberta { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); } .viv-chip.encerrada { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); } .viv-chip.nao_iniciada { background: color-mix(in srgb, var(--dourado) 18%, transparent); color: var(--dourado); } @media (prefers-reduced-motion: no-preference) { .viv-chip.aberta .pt { animation: pulso 1.4s ease infinite; } @keyframes pulso { 0%,100%{opacity:1} 50%{opacity:.35} } } /* ranking premium (roxo) */ .rank-bi { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); } .rank-bi:last-child { border-bottom: none; } .rank-bi .pos { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .85rem; flex-shrink: 0; background: color-mix(in srgb, var(--roxo) 20%, var(--surface)); color: var(--roxo); } .rank-bi .pos.top1 { background: color-mix(in srgb, var(--dourado) 26%, var(--surface)); color: var(--dourado); } .rank-bi .nm { flex: 1; font-weight: 600; font-size: .9rem; } .rank-bi .vl { font-weight: 800; font-variant-numeric: tabular-nums; } /* tabela analítica com barra de proficiência */ .barra-prof { height: 9px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 16%, transparent); position: relative; overflow: hidden; min-width: 90px; } .barra-prof > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width 700ms cubic-bezier(.2,.7,.3,1); } .pt-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .82rem; } .pt-status svg { width: 15px; height: 15px; } /* grid utilitário */ .g-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; } .g-2col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 18px; } .g-2meia { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; } @media (max-width: 1100px){ .g-kpis{grid-template-columns:repeat(2,1fr)} .g-2col,.g-2meia{grid-template-columns:1fr} } @media (max-width: 560px){ .g-kpis{grid-template-columns:1fr} } /* ===== Estado vazio simpático com o Nexo ===== */ .nexo-vazio { text-align: center; padding: 34px 20px; } .nexo-vazio-img { width: 84px; height: 84px; opacity: .95; filter: grayscale(.15); animation: nexoPulaVazio 3s ease-in-out infinite; } @keyframes nexoPulaVazio { 0%,100%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-6px) rotate(2deg);} } .nexo-vazio-tit { font-weight: 800; color: var(--text); margin-top: 10px; font-size: 1rem; } .nexo-vazio-msg { color: var(--faint); font-size: .86rem; margin-top: 4px; } /* ===== Toast de sucesso com o Nexo ===== */ .nexo-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(120%); display: flex; align-items: center; gap: 12px; background: var(--surface); border: 2px solid var(--verde); border-radius: 18px; padding: 12px 20px 12px 12px; box-shadow: 0 16px 40px -12px rgba(15,27,61,.4); z-index: 9999; opacity: 0; pointer-events: none; transition: transform var(--t-salto), opacity var(--t-medio); max-width: 90vw; } .nexo-toast.mostra { transform: translateX(-50%) translateY(0); opacity: 1; } .nexo-toast-img { width: 52px; height: 52px; flex-shrink: 0; animation: nexoFesta .7s ease; } @keyframes nexoFesta { 0%{ transform: scale(.4) rotate(-18deg);} 60%{ transform: scale(1.15) rotate(8deg);} 100%{ transform: scale(1) rotate(0);} } .nexo-toast-tit { font-weight: 800; color: var(--text); font-size: .96rem; } .nexo-toast-sub { font-size: .8rem; color: var(--muted); margin-top: 2px; } /* ============================================================================ IMPRESSÃO — usado por qualquer botão "Gerar relatório para impressão" nas telas de análise/BI. Esconde navegação e ações, deixa só o conteúdo/gráficos. ========================================================================== */ @media print { /* SEM ISTO, o navegador some com todo fundo colorido/degradê na hora de imprimir (comportamento padrão do Chrome/Edge/Firefox, mesmo que a tela esteja idêntica no preview) — é a causa raiz de "a impressão fica sem cor/diferente da tela". Precisa estar em html/body porque a propriedade é herdada; declarar só no elemento colorido não é suficiente em todo navegador. As 3 variantes cobrem Chrome/Edge, Firefox e a grafia antiga. */ html, body, * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } .nx-side, .nx-topo, .nexus-topbar { display: none !important; } /* avisos flutuantes da interface (modo suporte, toasts) nunca vão pro papel */ .no-print, #nexusSuporteBar, .nexo-toast { display: none !important; } .nx-conteudo, .nx-main, .nexus-container { margin: 0 !important; padding: 0 !important; max-width: 100% !important; } body { background: #fff !important; } .btn-nexus, .btn-nexus-outline, .btn-mini, .btn-3d, .botoes-3d, [data-topo-acoes], select, input[type="date"], input[type="text"]:not(.relatorio-print-visivel), .filtros, .filtros-tutor, .barra-acoes { display: none !important; } .nexus-card, .kpi, .kpi-bi { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; page-break-inside: avoid; } .relatorio-print-cabecalho { display: flex !important; } a[href]::after { content: ""; } /* não imprime a URL do link ao lado */ } .relatorio-print-cabecalho { display: none; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid #06184D; } .relatorio-print-cabecalho img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .relatorio-print-cabecalho .tit { font-weight: 800; font-size: 1.05rem; color: #06184D; } .relatorio-print-cabecalho .sub { font-size: .8rem; color: #556; }