/* ===================================================================== Design system — Imediato Nexway Tokens travados pelo manual da marca: azul #001F40 (base), verde #00AA80 (ACENTO, ~5–8% da área), cinza #DADADA (divisores), família única Prompt. Verde nunca carrega texto pequeno sobre branco (contraste ~2,6:1). Motivo gráfico = órbitas cruzadas do ícone, nunca cunhas angulares. ===================================================================== */ /* Prompt servida pelo próprio servidor — a aplicação funciona em rede interna sem saída para a internet. Regenerar com: node scripts/baixar-fontes.mjs */ @import url('/css/fontes.css'); /* O cartão de login fica claro nos dois temas: é o MESMO painel da Gestão de Agregados, e quem usa as duas ferramentas precisa reconhecer a porta. Por isso ele redeclara os tokens do claro — o gradiente em volta já é escuro. */ :root, .login-card { color-scheme: light; --azul: #001F40; --verde: #00AA80; --cinza: #DADADA; --branco: #FFFFFF; /* A moldura — lateral, barra do celular, visor, login. Não muda com o tema: é o azul da marca, e no escuro ele já é o que está em volta. */ --marca: #001F40; --azul-80: #1A3555; --azul-60: #4D6379; --azul-hover: #002D5C; --papel: #F4F6F8; --linha: #E2E7EC; --ct: #4A5561; --hint: #8A939D; --verde-claro: #E8F7F3; --amarelo: #B8860B; --vermelho: #B0344A; /* Os papéis na tela, e é neles que o modo noturno mexe. `--azul` fazia dois trabalhos — texto forte (título, nome, número) e preenchimento (botão, cabeçalho de tabela) —, e no escuro os dois vão para lados opostos: o texto clareia, o preenchimento continua escuro o bastante para carregar letra branca. Um token só não vai para os dois lados, então o texto forte virou `--tinta`. Cor fixa em regra nova é o que faz uma tela ficar branca no meio do modo noturno: use estes. */ --tinta: #001F40; --superficie: #FFFFFF; /* cartão, campo, balão */ --superficie-2: #FAFBFC; /* painel recuado dentro do cartão, linha em foco */ --superficie-3: #EEF3F8; /* trilho de barra, selo neutro, fundo de chip */ --linha-suave: #EEF1F4; --linha-forte: #B9C7D4; --apagado: #C2C8CE; /* placeholder, "Em branco" */ --folha-fundo: #E6E9EC; /* a moldura em volta da folha A4 */ --azul-claro: #E4EDF6; --azul-borda: #C9D6E4; --azul-borda-forte: #A9C0D6; --verde-suave: #F4FBF9; --verde-borda: #CDE9E1; --verde-tinta: #00614A; /* verde que carrega texto: o --verde não pode */ --amarelo-claro: #FFF8E6; --amarelo-borda: #E8DCC0; --amarelo-tinta: #6B5010; --vermelho-claro: #FCF4F5; --vermelho-borda: #E8D4D8; --lilas: #4B3B8F; /* o acervo e as possibilidades */ --lilas-claro: #F3F0FA; --lilas-borda: #DCD2EC; --r: 14px; --sombra: 0 1px 2px rgba(0, 31, 64, .04), 0 12px 30px rgba(0, 31, 64, .06); } /* Modo noturno. Quem decide o atributo é `public/js/tema.js`, no de cada tela, antes deste arquivo desenhar. Fundo azul-noite e não cinza: é a mesma família da lateral, então a tela escura continua sendo a Imediato. Os preenchimentos (`--azul`) CLAREIAM em vez de escurecer, senão um botão azul-marinho some num cartão azul-noite; o valor escolhido ainda dá 6,9:1 com letra branca. Os tons de fundo (`-claro`, `-suave`) viram a cor mergulhada no escuro, e os de texto (`-tinta`) sobem até passar de 4,5:1 sobre `--superficie`. O Business Case e a ata continuam brancos: são folhas de papel, e o mesmo arquivo vai para o PDF. Só a moldura em volta delas escurece. */ :root[data-tema="escuro"] { color-scheme: dark; --azul: #2B5C8F; --azul-hover: #3A6DA3; --azul-60: #8BA3BC; --cinza: #3F566E; --papel: #081320; --linha: #243950; --ct: #B3C1CF; --hint: #8395A8; --verde-claro: #0F3431; --amarelo: #E2B340; --vermelho: #F07C8F; --tinta: #E4ECF5; --superficie: #0F1D2D; --superficie-2: #132336; --superficie-3: #1A2D43; --linha-suave: #1C3046; --linha-forte: #3A536D; --apagado: #56697E; --folha-fundo: #0B1826; --azul-claro: #1B3350; --azul-borda: #2E4A68; --azul-borda-forte: #3F6286; --verde-suave: #10292B; --verde-borda: #1F5A4D; --verde-tinta: #4CD3AC; --amarelo-claro: #2C2412; --amarelo-borda: #5A4A22; --amarelo-tinta: #EBCB7C; --vermelho-claro: #33161E; --vermelho-borda: #5F2A35; --lilas: #AE9FF0; --lilas-claro: #1F1B3A; --lilas-borda: #3E3566; --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px rgba(0, 0, 0, .28); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--papel); color: var(--ct); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--tinta); text-decoration: none; } a:hover { text-decoration: underline; } /* ------------------------------------------------------ casca / lateral */ /* A barra lateral é fixa e a coluna do grid reserva o espaço dela: assim o conteúdo rola sozinho, sem a navegação subir junto. */ .app-shell { min-height: 100vh; display: grid; grid-template-columns: 276px minmax(0, 1fr); } .sidebar { position: fixed; inset: 0 auto 0 0; width: 276px; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; z-index: 20; background: var(--marca); color: #fff; } /* O filete da marca — verde nos primeiros 84px, cinza no resto — virado na vertical. É o mesmo gesto do cabeçalho dos documentos. */ .sidebar::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, var(--verde) 84px, rgba(255,255,255,.10) 84px); } .sidebar__orbit { position: absolute; right: -74px; top: -66px; width: 200px; height: 200px; opacity: .5; pointer-events: none; } .side-brand { min-height: 82px; display: grid; grid-template-columns: 1fr 32px; align-items: center; gap: 10px 12px; padding: 18px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.09); position: relative; z-index: 1; } .side-brand a { display: block; min-width: 0; } .side-brand img { width: 100%; max-width: 158px; height: auto; display: block; } .side-brand .marca-icone { display: none; width: 34px; height: 34px; max-width: none; } .brand-copy { grid-column: 1 / -1; min-width: 0; } .brand-copy b { display: block; font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.25; } .brand-copy span { display: block; margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.55); } .side-toggle { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(255,255,255,.07); color: #d9e4ef; font-size: 19px; line-height: 1; } .side-toggle:hover { background: rgba(255,255,255,.14); color: #fff; } /* Nova proposta — a única entrada do menu que CRIA algo, então tem peso próprio: fundo verde sobre o azul da barra, acima da navegação. O verde é acento na marca (5-8% da área), e aqui ele cabe justamente porque é um elemento só. */ .side-acao { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 12px 0; padding: 11px 14px; border-radius: 10px; background: var(--verde); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; position: relative; z-index: 1; transition: filter .15s; } .side-acao:hover { filter: brightness(1.08); } .side-acao.is-ativo { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); } .side-acao__mais { font-size: 16px; line-height: 1; } /* Recolhida, sobra só o "+" — o rótulo sairia cortado. */ .sidebar-collapsed .side-acao { margin: 14px 10px 0; padding: 11px 0; } .sidebar-collapsed .side-acao__mais { font-size: 18px; } .side-nav { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; flex: 1; min-height: 0; overflow-y: auto; position: relative; z-index: 1; } .side-nav a, .side-status, .side-config, .side-tema { min-height: 42px; width: 100%; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 10px; padding: 10px 12px; background: transparent; color: rgba(255,255,255,.72); font-size: 13px; font-family: inherit; text-align: left; } .side-nav a:hover, .side-status:hover, .side-config:hover, .side-tema:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; } .side-nav a.is-active, .side-config.is-active { background: rgba(0,170,128,.18); color: #fff; box-shadow: inset 3px 0 0 var(--verde); } /* Fica no rodapé, acima da conta: é ajuste, não navegação do trabalho. Uma linha o separa da identificação de quem está logado. */ .side-config { margin-bottom: 6px; } /* Modo noturno — ajuste de tela, então mora no rodapé junto da configuração. É uma chave e não um item de menu: o rótulo não muda, o que muda é o estado, e é o estado que o leitor de tela anuncia (`role="switch"`). Recolhida a lateral, a chave some com o rótulo e quem diz o estado é o ícone verde. */ .side-tema { margin-bottom: 6px; cursor: pointer; } .side-tema__chave { margin-left: auto; flex-shrink: 0; position: relative; width: 28px; height: 16px; border-radius: 20px; background: rgba(255,255,255,.16); transition: background .15s; } .side-tema__chave::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; } [data-tema="escuro"] .side-tema__chave { background: var(--verde); } [data-tema="escuro"] .side-tema__chave::after { transform: translateX(12px); } [data-tema="escuro"] .side-tema .nav-ico { color: var(--verde); } .nav-ico { width: 22px; min-width: 22px; display: inline-flex; align-items: center; justify-content: center; } .nav-ico svg { width: 17px; height: 17px; display: block; } .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,.09); position: relative; z-index: 1; } .side-status .nav-label { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; } .side-status b { font-size: 12.5px; font-weight: 600; color: #fff; } .side-status small { font-size: 10.5px; color: rgba(255,255,255,.5); } .pin-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--cinza); } .pin-dot.on { background: var(--verde); box-shadow: 0 0 0 3px rgba(0,170,128,.22); } .workspace { grid-column: 2; min-width: 0; } /* Barra de cima só existe no celular, onde a lateral vira gaveta. */ .mobile-topbar { display: none; align-items: center; gap: 12px; padding: 10px 14px; background: var(--marca); position: sticky; top: 0; z-index: 15; } .mobile-topbar img { height: 24px; width: auto; display: block; } .mobile-topbar span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); } .menu-backdrop { display: none; position: fixed; inset: 0; border: 0; padding: 0; background: rgba(0,31,64,.5); z-index: 18; } /* ---- recolhida: só os ícones ---- */ .sidebar-collapsed { grid-template-columns: 84px minmax(0, 1fr); } .sidebar-collapsed .sidebar { width: 84px; } .sidebar-collapsed .side-brand { grid-template-columns: 1fr; justify-items: center; padding: 16px 12px; gap: 10px; } .sidebar-collapsed .side-brand .marca-completa { display: none; } .sidebar-collapsed .side-brand .marca-icone { display: block; } .sidebar-collapsed .brand-copy, .sidebar-collapsed .nav-label, .sidebar-collapsed .side-tema__chave { display: none; } .sidebar-collapsed .side-nav a, .sidebar-collapsed .side-status, .sidebar-collapsed .side-tema { justify-content: center; padding: 10px; } .sidebar-collapsed .side-nav a.is-active { box-shadow: inset 0 -3px 0 var(--verde); } /* Em tela estreita a lateral já nasce recolhida, sem depender da preferência. */ @media (max-width: 1180px) { .app-shell { grid-template-columns: 84px minmax(0, 1fr); } .app-shell .sidebar { width: 84px; } .app-shell .side-brand { grid-template-columns: 1fr; justify-items: center; padding: 16px 12px; gap: 10px; } .app-shell .side-brand .marca-completa { display: none; } .app-shell .side-brand .marca-icone { display: block; } .app-shell .brand-copy, .app-shell .nav-label, .app-shell .side-tema__chave { display: none; } .app-shell .side-nav a, .app-shell .side-status, .app-shell .side-tema { justify-content: center; padding: 10px; } } /* No celular vira gaveta: por cima do conteúdo, com os rótulos de volta. */ @media (max-width: 860px) { .app-shell, .sidebar-collapsed { display: block; } .sidebar, .sidebar-collapsed .sidebar { width: 84px; transform: translateX(-100%); transition: transform .18s ease; box-shadow: 10px 0 30px rgba(0,31,64,.25); } /* Aberta, a gaveta precisa vencer o `.app-shell .sidebar { width: 84px }` da faixa de 1180px, que também vale aqui — daí o seletor mais específico. */ .app-shell.mobile-menu-open .sidebar { transform: translateX(0); width: 284px; max-width: 84%; } .app-shell.mobile-menu-open .brand-copy, .app-shell.mobile-menu-open .nav-label { display: block; } .app-shell.mobile-menu-open .side-status .nav-label { display: flex; } .app-shell.mobile-menu-open .side-tema__chave { display: block; } .app-shell.mobile-menu-open .side-brand { grid-template-columns: 1fr 32px; justify-items: stretch; padding: 18px 18px 16px; gap: 10px 12px; } .app-shell.mobile-menu-open .side-brand .marca-completa { display: block; } .app-shell.mobile-menu-open .side-brand .marca-icone { display: none; } .app-shell.mobile-menu-open .side-nav a, .app-shell.mobile-menu-open .side-status, .app-shell.mobile-menu-open .side-tema { justify-content: flex-start; padding: 10px 12px; } /* A gaveta cobre o canto do ☰, então o fundo clicável é a única saída. */ .app-shell.mobile-menu-open .menu-backdrop { display: block; } .mobile-topbar { display: flex; } .workspace { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } /* -------------------------------------------------------------- layout */ .wrap { max-width: 1240px; margin: 0 auto; padding: 30px 28px 72px; } .wrap--narrow { max-width: 960px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; } .page-head__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta); opacity: .5; margin-bottom: 5px; } h1 { font-size: 25px; font-weight: 700; color: var(--tinta); line-height: 1.2; letter-spacing: -.015em; } h2 { font-size: 16px; font-weight: 600; color: var(--tinta); letter-spacing: -.005em; } .lead { font-size: 13.5px; color: var(--ct); max-width: 68ch; margin-top: 6px; } /* Explicação da tela atrás de um "i" ao lado do título, para quem já a conhece não ler o mesmo parágrafo toda vez. Só CSS: o balão abre no hover e no foco (teclado e toque), sem script — a CSP fecha script-src em 'self' e isto não justifica um módulo. */ .titulo-info { display: flex; align-items: center; gap: 10px; } /* `.rise` anima transform com fill `both`, e cada cartão vira contexto de empilhamento próprio: o que vem depois no HTML pinta por cima do balão. A cabeça sobe acima deles, e fica abaixo da barra e do menu mobile (15+). */ .page-head:has(.info) { position: relative; z-index: 12; } .info { position: relative; display: inline-flex; } .info__botao { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--azul-60); background: transparent; color: var(--azul-60); cursor: help; font: italic 700 12px/1 Georgia, 'Times New Roman', serif; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; } .info:hover .info__botao, .info__botao:focus-visible { background: var(--azul); border-color: var(--azul); color: #fff; outline: none; } .info__balao { position: absolute; top: calc(100% + 8px); left: -10px; z-index: 20; width: max-content; max-width: min(380px, calc(100vw - 48px)); padding: 11px 14px; border-radius: 10px; background: var(--azul); color: #fff; box-shadow: var(--sombra); font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; } .info__balao b { color: #fff; } .info__balao::before { content: ''; position: absolute; bottom: 100%; left: 16px; border: 6px solid transparent; border-bottom-color: var(--azul); } .info:hover .info__balao, .info:focus-within .info__balao { opacity: 1; visibility: visible; transform: none; } .grid { display: grid; gap: 18px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .grid--2, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .grid--2, .grid--4 { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------- cards */ .card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r); box-shadow: var(--sombra); } .card__head { padding: 15px 20px; border-bottom: 1px solid var(--linha); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .card__body { padding: 20px; } .card__title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); display: flex; align-items: center; gap: 9px; } .card__title::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--verde); flex-shrink: 0; } .card__sub { font-size: 12px; color: var(--hint); } /* barra de seção numerada — mesmo componente do documento */ .section-bar { background: var(--azul); color: #fff; padding: 8px 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; } .section-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--verde); } .section-bar .num { color: var(--verde); } /* ----------------------------------------------------------------- kpi */ .kpi { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r); padding: 16px 18px; position: relative; overflow: hidden; } .kpi::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cinza); } .kpi--accent::after { background: var(--verde); } /* O cartão é botão: precisa parecer clicável e mostrar quando está recortando a tela. `text-align` e `font` porque `