/* Fontes AUTO-HOSPEDADAS. Nada de CDN: o container é privado e não busca nada de fora — e uma fonte que não carrega troca a métrica da tela inteira no meio do uso. Cada arquivo é uma fonte VARIÁVEL: um só cobre a faixa de peso inteira. */ @font-face { font-family:"Onest"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/estatico/fontes/onest-var.woff2") format("woff2"); } @font-face { font-family:"DM Sans"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/estatico/fontes/dmsans-var.woff2") format("woff2"); } :root { --fundo:#F8FAFC; --superficie:#FFFFFF; --superficie-2:#F1F5F9; --tinta:#0F172A; --tinta-fraca:#55637A; --tinta-inversa:#FFFFFF; --acento:#0369A1; --acento-hover:#075985; --ok:#15803D; --alerta:#B45309; --critico:#B91C1C; --ok-fundo:#EEF8F2; --alerta-fundo:#FEF3C7; --critico-fundo:#FEE2E2; --acento-fundo:#DCEEFA; --borda:#E2E8F0; --borda-campo:#64748B; --fonte-titulo:"Onest", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --fonte-texto:"DM Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --fonte-mono:"Cascadia Mono", Consolas, ui-monospace, "SF Mono", monospace; --raio:10px; --raio-grande:14px; /* Altura da faixa do topo. É token porque DUAS regras precisam concordar: a própria faixa (`min-height`, que a impõe) e o teto da barra lateral, que desconta esta altura do viewport. Sem o desconto, a barra media 100vh a partir de baixo da faixa e o rodapé de identidade caía inteiro para fora da tela — medido: viewport 720, faixa 59, rodapé terminando em 779. */ --faixa-altura:60px; --largura-max:1420px; --sombra:0 2px 10px rgba(15,23,42,.07); --sombra-alta:0 10px 22px rgba(15,23,42,.10); /* aliases dos nomes antigos, para as telas já escritas */ --painel:#FFFFFF; --linha:#E2E8F0; --acento2:#075985; --erro:#B91C1C; } /* Camada 2 da otimização de transição (25/08/2026): liga a View Transitions API NATIVA do navegador pra toda navegação same-origin — sem isto era reload puro, sem transição nenhuma. Zero JS: é 1 at-rule só, e navegador sem suporte (fora de Chromium) simplesmente ignora e navega como sempre — progressive enhancement de verdade, nunca quebra. */ @view-transition { navigation: auto; } *, *::before, *::after { box-sizing:border-box; } html, body { margin:0; padding:0; } body { background:var(--fundo); color:var(--tinta); font-family:var(--fonte-texto); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; } h1, h2, h3, .titulo { font-family:var(--fonte-titulo); color:var(--tinta); margin:0; letter-spacing:-.015em; } a { color:var(--acento); text-decoration:none; } a:hover { color:var(--acento-hover); text-decoration:underline; } :focus-visible { outline:3px solid var(--acento); outline-offset:2px; border-radius:4px; } code { font-family:var(--fonte-mono); font-size:.85em; } /* ── faixa do topo ─────────────────────────────────────────────────────────────────── */ .faixa { /* space-between virou flex-start + `.idiomas{margin-left:auto}` (28/08/2026, pedido do Matheus): com o sino no meio, o `space-between` original espalhava marca/sino/idiomas em 3 pontas iguais e o sino sobrava sozinho no centro do cabeçalho. Agora marca+sino ficam juntos à ESQUERDA (nesta ordem no DOM) e só idiomas é empurrado pro extremo direito — funciona igual para quem não tem sino (só marca+idiomas, `{% if notif %}` ausente). */ display:flex; align-items:center; justify-content:flex-start; gap:16px; min-height:var(--faixa-altura); padding:.85rem clamp(1rem,4vw,2rem); border-bottom:1px solid var(--borda); background:var(--superficie); /* Nome próprio = fora do crossfade padrão do : a faixa é IDÊNTICA de página a página, então sem isto ela pisca junto com o conteúdo a cada navegação. */ view-transition-name: oj-topo; } .marca { display:flex; align-items:baseline; gap:2px; font-family:var(--fonte-titulo); font-weight:800; font-size:1.25rem; letter-spacing:-.03em; } .marca .o { color:var(--acento); } .marca .bar { color:var(--borda); font-weight:400; margin:0 3px; } .marca .j { color:var(--tinta); } .marca .sub { font-family:var(--fonte-texto); font-size:.75rem; font-weight:600; color:var(--tinta-fraca); margin-left:.7rem; letter-spacing:.02em; } a.marca { text-decoration:none; } a.marca:hover { text-decoration:none; } a.marca:hover .sub { color:var(--acento); } /* ── sino de Comunicados (RM-68; ícone customizado 28/08/2026, pedido do Matheus) ─────── Único ícone do Portal fora do sistema Material Symbols — os outros ~70 continuam flat/mono de propósito (ver icones.py). Aqui o pedido foi um tratamento dedicado (metal + halo + badge "glassmorphic"), com referência visual em hex; gradiente metálico não dá pra fazer numa ligadura de fonte, então o SVG mora inline no template (`templates/_moldura.html`). O número do badge segue `` de verdade, não imagem — `{{ notif.unread }}` continua ao vivo. */ .sino { position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; text-decoration:none; filter:drop-shadow(0 0 6px rgba(187,222,251,.55)) drop-shadow(0 0 2px rgba(187,222,251,.35)); } .sino:hover { background:var(--superficie-2); text-decoration:none; } .sino-ic { width:22px; height:22px; display:block; } .sino-contador { position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:.69rem; font-weight:700; line-height:1; color:#fff; background:linear-gradient(150deg, rgba(238,68,68,.92), rgba(255,107,107,.85)); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.45); box-shadow:0 2px 6px rgba(211,47,47,.45), inset 0 1px 1px rgba(255,255,255,.5); } /* ── pop-up de comunicado novo (RM-68) ────────────────────────────────────────────────── */ .comunicado-popup-fundo { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(15,23,42,.5); } .comunicado-popup { width:100%; max-width:420px; background:var(--superficie); border-radius:var(--raio-grande); padding:1.4rem 1.5rem; box-shadow:0 20px 50px rgba(15,23,42,.25); } .comunicado-popup-ic { font-size:1.8rem; color:var(--acento); } .comunicado-popup h2 { font-family:var(--fonte-titulo); font-size:1.1rem; margin:.5rem 0 .8rem; } .comunicado-popup-lista { list-style:none; margin:0 0 1.1rem; padding:0; display:flex; flex-direction:column; gap:.5rem; font-size:.88rem; color:var(--tinta); } .comunicado-popup-lista .tag { margin-right:.4rem; } .comunicado-popup-acoes { display:flex; gap:.6rem; } .comunicado-popup-acoes .botao, .comunicado-popup-acoes .botao.secundario { flex:1; } /* ── calendário (vencimentos e chegadas) ──────────────────────────────────────────── */ /* Calendário: a grade é do MÊS, e a cor da célula é por URGÊNCIA, não por volume — o que decide a ação é a data ter passado, não quantos títulos caem nela. Cada dia é um LINK com a data na querystring: assim o estado inteiro da tela cabe na URL e dá para mandar «olha o dia 28» para o gerente regional. */ .cal { padding:1rem 1.1rem 1.2rem; } .cal-topo { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.9rem; } .cal-mes { font-family:var(--fonte-titulo); font-weight:700; font-size:1.1rem; } .cal-mes span { font-family:var(--fonte-texto); font-size:.8rem; font-weight:500; color:var(--tinta-fraca); margin-left:.5rem; } .cal-nav { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--borda-campo); border-radius:8px; color:var(--tinta); text-decoration:none; font-weight:700; } .cal-nav:hover { background:var(--superficie-2); text-decoration:none; } .cal-grade { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; } .cal-dw { text-align:center; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--tinta-fraca); padding-bottom:.2rem; } .cal-vazio { min-height:62px; } .cal-dia { display:flex; flex-direction:column; gap:1px; min-height:66px; padding:.4rem .55rem; border:1px solid var(--borda); border-radius:9px; text-decoration:none; color:var(--tinta); background:var(--superficie); } .cal-dia b { font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums; } /* O valor em uma linha só: em célula estreita ele quebrava em duas e a altura da semana inteira pulava. Com o calendário na largura da página, cabe. */ .cal-dia i { font-style:normal; font-size:.74rem; color:var(--tinta-fraca); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-dia u { text-decoration:none; font-size:.8rem; font-weight:700; } a.cal-dia:hover { text-decoration:none; box-shadow:var(--sombra); } /* Os tons são os mesmos do calendário do Streamlit, para quem alterna entre os dois mundos não achar que está lendo outra coisa. */ .cal-dia.venceu { background:#FEE2E2; border-color:#B91C1C; } .cal-dia.hoje { background:#FFE4CC; border-color:#B45309; } .cal-dia.perto { background:#FEF3C7; border-color:#B45309; } .cal-dia.longe { background:#E0F2FE; border-color:#0369A1; } .cal-dia.vazio { background:var(--fundo); color:var(--tinta-fraca); } .cal-dia.sel { outline:3px solid var(--tinta); outline-offset:-3px; } /* ── barra lateral, do mesmo lado e com as mesmas seções do Portal ────────────────── */ /* A primeira versão pôs os atalhos numa tira no TOPO. Funcionava e estava errada: o Portal tem menu à ESQUERDA, e trocar o lado no meio da navegação faz a pessoa procurar o menu onde ele não está. Continuidade vale mais que originalidade aqui. Passe de 24/08, no desenho do Portal de RH (`estatico/painel.css`, «barra lateral»): a barra deixou de ser uma pilha de pílulas com borda e virou TRÊS faixas — busca fixa no topo, navegação que rola, identidade fixa no rodapé. O que mudou, e por quê: • **Só a navegação rola.** São 61 itens em 14 seções no perfil interno. Com a barra inteira rolando, o campo de busca subia para fora da tela justamente quando ele começa a ser útil, e o nome de quem está logado nunca aparecia sem rolar até o fim. • **Item sem borda.** 61 retângulos desenhados são 61 linhas competindo com o texto que a pessoa foi ler. O que precisa de contorno é UM item — o atual. O resto se separa por espaçamento e responde no hover. • **Ícone à esquerda de tudo.** Os dados sempre existiram (`internal_view._NAV_ICONS`, `dealer_view._DLR_ICONS`) e a moldura os descartava; ver `icones.py`. A coluna do ícone tem largura fixa: sem ela, um item sem ícone desalinha o rótulo de todos os vizinhos. • **A seção da página atual nasce ABERTA.** O comentário do `_moldura.html` já prometia isso desde que a barra existe, mas `menu_lateral` nunca gravava a chave que o template lia — 14 seções fechadas, e nenhuma pista de onde se está. */ /* `align-items:stretch` continua: é ele que faz a linha divisória correr a página inteira. Quem gruda no topo é o miolo (`.lat-interno`) — um elemento esticado até o rodapé já ocupa toda a altura do container e não tem para onde o `sticky` movê-lo. */ .quadro-app { display:flex; align-items:stretch; flex:1; min-height:0; } .lateral { flex:none; width:var(--lat-largura,264px); background:var(--superficie); border-right:1px solid var(--borda); position:relative; /* Mesmo motivo da `.faixa`: nome próprio tira a barra do crossfade do , então só o miolo troca visualmente — a barra fica ESTÁVEL entre páginas. */ view-transition-name: oj-lateral; } .lat-interno { position:sticky; top:0; max-height:calc(100vh - var(--faixa-altura)); display:flex; flex-direction:column; } .miolo-app { flex:1; min-width:0; display:flex; flex-direction:column; } .lateral a { display:block; text-decoration:none; } /* `.lateral a` vence o `[hidden]` da folha do navegador por especificidade (0,1,1 vs 0,0,1). Sem esta linha, a busca marcaria os itens filtrados como escondidos e eles continuariam à vista — o filtro «funcionaria» sem filtrar nada. */ .lateral [hidden] { display:none; } /* ── redimensionar a lateral ────────────────────────────────────────────────────────── Tira de 8px sobre a borda (não a borda inteira: 1px é alvo pequeno demais pro mouse, e coarse/touch nem tenta). `--lat-largura` fica no `:root` (portal.js grava lá, com `localStorage` por navegador — não por papel, é preferência de tela, não de conteúdo). Nasce `display:none`: sem JS a lateral fica nos 264px de sempre, e uma alça que não arrasta nada é só confusão — o script mostra (`display:block`) só depois de prender o listener, mesmo padrão do `.lat-limpar` da busca. */ .lat-resize { position:absolute; top:0; right:-4px; width:8px; height:100%; display:none; cursor:col-resize; z-index:5; touch-action:none; } .lat-resize:hover, .lat-resize.arrastando { background: linear-gradient(to right, transparent 3px, var(--acento) 3px, var(--acento) 5px, transparent 5px); } /* Ícones Material Symbols, AUTO-HOSPEDADOS — 11 KB com exatamente os 69 nomes que o menu usa (`icones.NOMES`), gerados por `tools/gerar_fonte_icones.py`. O `ui.py` do Streamlit busca a fonte inteira no CDN do Google; aqui vale a mesma regra das outras duas fontes. `font-display:block` de propósito: o ícone é uma LIGADURA, então durante o `swap` a pessoa leria a palavra «storefront» no meio do menu. Bloquear esconde o glifo até a fonte chegar — e ela chega da mesma origem, junto com o resto. */ @font-face { font-family:"OJ Symbols"; font-style:normal; font-weight:400; font-display:block; src:url("/estatico/fontes/material-symbols-sub.woff2") format("woff2"); } .msym { font-family:"OJ Symbols"; font-weight:400; font-style:normal; font-size:20px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-smoothing:antialiased; user-select:none; flex:none; } /* ── busca do menu ────────────────────────────────────────────────────────────────── Volta o que o Streamlit tinha (`nav.render_sidebar`, «Buscar módulo…») e a travessia perdeu. Duas diferenças deliberadas em relação ao original: • vale para TODO papel, não só o interno — o concessionário tem 20 itens e também procura por nome; • filtra a barra no lugar, sem recarregar: no Streamlit cada tecla era um rerun. */ .lat-busca { padding:.7rem .65rem; border-bottom:1px solid var(--borda); position:relative; flex:none; } .lat-busca .msym.lupa { position:absolute; left:1.25rem; top:50%; margin-top:-9px; font-size:19px; color:var(--tinta-fraca); pointer-events:none; } .lat-busca input { width:100%; padding:.5rem 2rem .5rem 2.15rem; font-family:var(--fonte-texto); font-size:.92rem; color:var(--tinta); background:var(--fundo); border:1px solid var(--borda-campo); border-radius:var(--raio); } .lat-busca input::placeholder { color:var(--tinta-fraca); } .lat-busca input:focus { border-color:var(--acento); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent); } /* O «X» só existe quando há o que limpar: botão permanente num campo vazio é ruído, e ocupa a metade direita do campo mais estreito da tela. */ .lat-limpar { position:absolute; right:1.1rem; top:50%; margin-top:-13px; width:26px; height:26px; display:none; align-items:center; justify-content:center; padding:0; border:none; background:none; color:var(--tinta-fraca); cursor:pointer; border-radius:6px; } .lat-limpar:hover { background:var(--superficie-2); color:var(--tinta); } .lat-limpar .msym { font-size:19px; } .lat-busca.tem-texto .lat-limpar { display:flex; } /* A contagem responde «achei, mas está fora da tela» — sem ela, uma busca cujo único resultado caiu abaixo da dobra parece uma busca sem resultado. */ .lat-conta { display:none; padding:.5rem .95rem 0; font-size:.76rem; color:var(--tinta-fraca); } .lateral.buscando .lat-conta { display:block; } /* ── navegação ─────────────────────────────────────────────────────────────────────── */ .lat-nav { flex:1; min-height:0; overflow-y:auto; padding:.6rem .65rem .9rem; } /* ⚠️ `.lateral .mitem`, e não `.mitem`: `.lateral a` (0,1,1) vence uma classe sozinha (0,1,0), então o `display:flex` daqui NUNCA valeu — desde a v1. Não dava erro nem parecia errado (em `block` os fluem inline e a linha sai reta), mas `flex:1` e `margin-left:auto` ficavam inertes: foi assim que o caminho da busca caiu para uma segunda linha na v2. Medido no preview: rótulo em y=190, caminho em y=210. */ .lateral .mitem { padding:.48rem .6rem; margin-bottom:2px; border-radius:var(--raio); color:var(--tinta); font-size:calc(.95rem * var(--lat-escala,1)); font-weight:500; display:flex; align-items:center; gap:.6rem; } .mitem:hover { background:var(--fundo); color:var(--acento); text-decoration:none; } .mitem .msym { color:var(--tinta-fraca); font-size:20px; } .mitem:hover .msym { color:var(--acento); } .msec { margin-bottom:1px; } .msec > summary { cursor:pointer; list-style:none; padding:.48rem .6rem; border-radius:var(--raio); font-size:calc(.93rem * var(--lat-escala,1)); font-weight:600; color:var(--tinta-fraca); display:flex; align-items:center; gap:.6rem; user-select:none; } .msec > summary::-webkit-details-marker { display:none; } .msec > summary .rot-sec { flex:1; min-width:0; } .msec > summary .msym { font-size:20px; } /* A seta é o ÚLTIMO filho e gira no `open` — antes era um `›` de texto num `::after`, que herdava a fonte do corpo e mudava de tamanho a cada nível de zoom. */ .msec > summary .seta { font-size:19px; color:var(--tinta-fraca); transition:transform .15s; opacity:.35; } .msec > summary:hover .seta, .msec[open] > summary .seta { opacity:.75; } .msec[open] > summary .seta { transform:rotate(90deg); } .msec > summary:hover { background:var(--fundo); color:var(--acento); } .msec[open] > summary { color:var(--tinta); } /* Fio vertical ligando os itens à seção que os contém: com várias seções abertas ao mesmo tempo — que é o que a busca produz — sem ele não dá para ver onde uma acaba. */ .msec > .msec-itens { margin:1px 0 .35rem .95rem; padding-left:.6rem; border-left:1px solid var(--borda); } .lateral .msub { padding:.38rem .55rem; margin-bottom:1px; border-radius:var(--raio); font-size:calc(.90rem * var(--lat-escala,1)); color:var(--tinta-fraca); display:flex; align-items:center; gap:.55rem; } .msub .msym { font-size:18px; color:var(--tinta-fraca); } /* DIETA (v2): dentro de uma seção aberta o ícone por item é textura, não âncora — o fio já estrutura. Escondido por CSS e NÃO removido do template de propósito: os FIXADOS clonam estes , e o clone (fora de .msec-itens) volta a mostrar o ícone, que lá é âncora. */ .msec-itens .msym { display:none; } .msub:hover { color:var(--acento); background:var(--fundo); text-decoration:none; } .msub:hover .msym { color:var(--acento); } /* A página em que se está fica marcada — sem isso a barra não responde "onde eu estou". O filete à esquerda é o que sobrevive ao daltonismo: o tint sozinho é diferença só de cor, e o fio é diferença de FORMA. */ .mitem.atual, .msub.atual { color:var(--acento); font-weight:700; background:color-mix(in srgb, var(--acento) 10%, var(--superficie)); box-shadow:inset 3px 0 0 var(--acento); } .mitem.atual .msym, .msub.atual .msym { color:var(--acento); } /* Seção que CONTÉM a página atual: some destaque, para achá-la de relance quando ela está fechada (a busca fecha e abre seções o tempo todo). */ .msec.tem-atual > summary { color:var(--acento); } /* Recado de busca sem resultado. Fica no fluxo da navegação, e não sobre ela: sobreposto, cobriria justamente os itens que a pessoa acabou de filtrar. */ .lat-vazio { display:none; padding:.9rem .6rem; font-size:.88rem; color:var(--tinta-fraca); } .lateral.sem-resultado .lat-vazio { display:block; } /* Durante a busca as seções são abertas e fechadas pelo filtro, não pela pessoa: a seta apontaria um estado que ela não escolheu. */ .lateral.buscando .msec > summary .seta { visibility:hidden; } /* ── rodapé: quem está logado ──────────────────────────────────────────────────────── */ /* Vem do Portal de RH (`.side-foot`), e resolve aqui algo que lá não existia: no mundo FastAPI não havia NENHUMA indicação de quem está logado nem caminho de saída — para sair, a pessoa tinha de voltar ao Portal do Streamlit e achar o botão lá. */ .lat-pe { flex:none; border-top:1px solid var(--borda); padding:.6rem .65rem; display:flex; align-items:center; gap:.55rem; } .lat-quem { flex:1; min-width:0; font-size:.82rem; line-height:1.25; } .lat-quem b { display:block; color:var(--tinta); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lat-quem small { display:block; color:var(--tinta-fraca); font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lat-avatar { width:30px; height:30px; border-radius:100px; flex:none; background-image:linear-gradient(135deg, var(--acento), var(--acento-hover)); color:var(--tinta-inversa); display:flex; align-items:center; justify-content:center; font-family:var(--fonte-titulo); font-weight:700; font-size:.76rem; } .lat-sair { flex:none; width:32px; height:32px; border-radius:var(--raio); display:flex; align-items:center; justify-content:center; color:var(--tinta-fraca); } .lat-sair:hover { background:var(--fundo); color:var(--critico); text-decoration:none; } /* ── v2: zonas, fixados, atalho e caminho (plano portal-barra-lateral-v2) ──────────── */ /* Rótulo de ZONA — rótulo, não porta: sem cursor, sem hover, sem foco. É ele que troca «ler 16 linhas» por «varrer 4 grupos». */ .lat-zona { margin:1.05rem .4rem .15rem; font-size:calc(.72rem * var(--lat-escala,1)); font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-fraca); } .lat-nav > .lat-zona:first-child { margin-top:.2rem; } /* Gestão é utilitário: desce para o fim com um divisor — configuração mora perto da identidade, não no meio do trabalho do dia. */ .lat-zona-util { border-top:1px solid var(--borda); padding-top:.95rem; margin-top:1.15rem; } /* FIXADOS — fora do