/* ========================================================================== SISTEMA DE REEMBOLSOS — folha de estilo única ========================================================================== ORGANIZAÇÃO DESTE ARQUIVO (na ordem em que aparece) 1. Variáveis de tema (cores, sombras, curvas de animação) 2. Base e reset 3. Fundo animado (aurora) 4. Animações reutilizáveis 5. Botões, campos e demais peças de formulário 6. Tela de login 7. Estrutura do app (menu lateral, topo, conteúdo) 8. Cartões, indicadores e gráficos 9. Tabelas 10. Modais, gaveta lateral e avisos 11. Peças específicas (pastilhas de status, linha do tempo, matriz de permissões) 12. Responsivo e impressão COMO O TEMA FUNCIONA Todas as cores são variáveis CSS declaradas em :root para o tema escuro e redeclaradas em [data-tema="claro"]. Trocar de tema é só mudar o atributo no — nenhum componente precisa saber qual tema está ativo. ========================================================================== */ /* ========================================================================== 1. VARIÁVEIS DE TEMA ========================================================================== */ :root { /* superfícies, do fundo para a frente */ --fundo: #070b16; --fundo-2: #0b1120; --superficie: rgba(255, 255, 255, 0.045); --superficie-forte: rgba(255, 255, 255, 0.075); --superficie-solida: #121a2c; --borda: rgba(255, 255, 255, 0.09); --borda-forte: rgba(255, 255, 255, 0.16); /* texto */ --texto: #e9eefb; --texto-medio: #a7b3cc; --texto-suave: #6f7f9e; /* cores de marca e significado */ --primaria: #6366f1; --primaria-clara: #818cf8; --primaria-escura: #4338ca; --acento: #22d3ee; --sucesso: #22c55e; --alerta: #f59e0b; --perigo: #f43f5e; --roxo: #a855f7; --rosa: #ec4899; /* versões translúcidas, para fundos de pastilha */ --primaria-fraca: rgba(99, 102, 241, 0.16); --sucesso-fraca: rgba(34, 197, 94, 0.15); --alerta-fraca: rgba(245, 158, 11, 0.15); --perigo-fraca: rgba(244, 63, 94, 0.15); /* sombras e brilhos */ --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sombra-2: 0 8px 24px -8px rgba(0, 0, 0, 0.55); --sombra-3: 0 24px 60px -20px rgba(0, 0, 0, 0.7); --luz-primaria: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 8px 32px -8px rgba(99, 102, 241, 0.45); /* medidas */ --raio: 14px; --raio-p: 9px; --raio-g: 22px; --lateral-largura: 254px; --lateral-recolhida: 74px; --topo-altura: 68px; /* curvas de animação: "suave" para tudo, "elastico" para entradas */ --suave: cubic-bezier(0.4, 0, 0.2, 1); --elastico: cubic-bezier(0.34, 1.56, 0.64, 1); --fonte: "Segoe UI", system-ui, -apple-system, "Inter", Roboto, Arial, sans-serif; --fonte-mono: "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace; /* * Avisa o navegador que a página é escura. * * Isto não é decoração: partes da interface são desenhadas pelo SISTEMA * OPERACIONAL, não pelo nosso CSS — a listinha que abre num campo de * seleção, o calendário do campo de data, a barra de rolagem. Sem esta * linha, o navegador as desenha claras, e no tema escuro o resultado é * texto escuro sobre fundo escuro: ilegível. */ color-scheme: dark; } /* Tema claro: só as cores mudam; medidas e animações continuam iguais. */ [data-tema="claro"] { --fundo: #eef1f8; --fundo-2: #e5eaf5; --superficie: rgba(255, 255, 255, 0.85); --superficie-forte: #ffffff; --superficie-solida: #ffffff; --borda: rgba(15, 23, 42, 0.1); --borda-forte: rgba(15, 23, 42, 0.18); --texto: #0f172a; --texto-medio: #47536b; --texto-suave: #7b879c; --primaria: #4f46e5; --primaria-clara: #6366f1; --acento: #0891b2; --sucesso: #16a34a; --alerta: #d97706; --perigo: #e11d48; --primaria-fraca: rgba(79, 70, 229, 0.1); --sucesso-fraca: rgba(22, 163, 74, 0.12); --alerta-fraca: rgba(217, 119, 6, 0.12); --perigo-fraca: rgba(225, 29, 72, 0.12); --sombra-1: 0 1px 2px rgba(15, 23, 42, 0.06); --sombra-2: 0 8px 24px -10px rgba(15, 23, 42, 0.18); --sombra-3: 0 24px 60px -22px rgba(15, 23, 42, 0.28); /* No tema claro, os controles do navegador voltam ao normal. */ color-scheme: light; } /* ========================================================================== 2. BASE E RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--fonte); font-size: 14px; line-height: 1.5; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.5s var(--suave), color 0.35s var(--suave); } h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.015em; } p { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } svg { width: 1em; height: 1em; display: block; } a { color: var(--primaria-clara); text-decoration: none; } a:hover { text-decoration: underline; } .oculto { display: none !important; } .so-celular { display: none; } /* barra de rolagem discreta, combinando com o tema */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--texto-suave); background-clip: content-box; } /* foco visível para quem navega pelo teclado */ :focus-visible { outline: 2px solid var(--primaria-clara); outline-offset: 2px; border-radius: 4px; } /* ========================================================================== 3. FUNDO ANIMADO (AURORA) Três círculos borrados que giram devagar. Ficam atrás de tudo (z-index 0) e não capturam clique. A animação usa só transform: a placa de vídeo faz o trabalho e a CPU fica livre. ========================================================================== */ .aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at top left, var(--fundo-2), transparent 60%), var(--fundo); } .brilho { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; } .brilho-1 { width: 46vw; height: 46vw; min-width: 380px; min-height: 380px; top: -14%; left: -8%; background: radial-gradient(circle, rgba(99, 102, 241, 0.55), transparent 68%); animation: passear-1 34s ease-in-out infinite; } .brilho-2 { width: 40vw; height: 40vw; min-width: 320px; min-height: 320px; bottom: -18%; right: -6%; background: radial-gradient(circle, rgba(34, 211, 238, 0.4), transparent 68%); animation: passear-2 42s ease-in-out infinite; } .brilho-3 { width: 34vw; height: 34vw; min-width: 280px; min-height: 280px; top: 42%; left: 46%; background: radial-gradient(circle, rgba(168, 85, 247, 0.32), transparent 68%); animation: passear-3 50s ease-in-out infinite; } [data-tema="claro"] .brilho { opacity: 0.35; filter: blur(110px); } /* malha quadriculada bem discreta por cima das luzes, dá textura */ .grade { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 78%); } [data-tema="claro"] .grade { background-image: linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px); } @keyframes passear-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(9vw, 7vh) scale(1.12); } 66% { transform: translate(-4vw, 12vh) scale(0.93); } } @keyframes passear-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-11vw, -9vh) scale(1.18); } } @keyframes passear-3 { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-62%, -38%) scale(1.15); } 75% { transform: translate(-38%, -60%) scale(0.9); } } /* Quem configurou o sistema para reduzir animações não vê nada se mexendo. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ========================================================================== 4. ANIMAÇÕES REUTILIZÁVEIS ========================================================================== */ @keyframes surgir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes surgir-leve { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } } @keyframes ampliar { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: none; } } @keyframes entrar-lado { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } } @keyframes girar { to { transform: rotate(360deg); } } @keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes brilho-passando { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes bater { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } } .animar-entrada { animation: surgir 0.45s var(--suave) both; } /* Entrada em cascata: cada filho aparece um pouquinho depois do anterior. É o detalhe que faz o painel parecer "montado", e não "jogado" na tela. */ .cascata > * { animation: surgir 0.5s var(--suave) both; } .cascata > *:nth-child(1) { animation-delay: 0.02s; } .cascata > *:nth-child(2) { animation-delay: 0.06s; } .cascata > *:nth-child(3) { animation-delay: 0.10s; } .cascata > *:nth-child(4) { animation-delay: 0.14s; } .cascata > *:nth-child(5) { animation-delay: 0.18s; } .cascata > *:nth-child(6) { animation-delay: 0.22s; } .cascata > *:nth-child(7) { animation-delay: 0.26s; } .cascata > *:nth-child(8) { animation-delay: 0.30s; } .cascata > *:nth-child(n + 9) { animation-delay: 0.34s; } /* ========================================================================== VIDRO — a peça visual básica do sistema Fundo translúcido + desfoque do que está atrás + risco de luz na borda de cima. É o que dá o aspecto de camada de vidro sobre a aurora. ========================================================================== */ .vidro { position: relative; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--sombra-2); } .vidro::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); pointer-events: none; } [data-tema="claro"] .vidro::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); } /* ========================================================================== 5. BOTÕES E CAMPOS ========================================================================== */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie-forte); color: var(--texto); font-size: 13.5px; font-weight: 560; cursor: pointer; white-space: nowrap; transition: transform 0.16s var(--suave), background 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s; } .botao svg { width: 16px; height: 16px; flex: none; } .botao:hover { background: var(--superficie-forte); border-color: var(--borda-forte); transform: translateY(-1px); } .botao:active { transform: translateY(0) scale(0.985); } .botao:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* Botão principal: degradê + brilho que atravessa no hover. O brilho é um pseudo-elemento que desliza da esquerda para a direita. */ .botao-primario { background: linear-gradient(135deg, var(--primaria), var(--primaria-escura)); border-color: transparent; color: #fff; overflow: hidden; box-shadow: 0 4px 16px -4px rgba(99, 102, 241, 0.6); } .botao-primario::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.28) 50%, transparent 75%); transform: translateX(-120%); transition: transform 0.65s var(--suave); } .botao-primario { position: relative; } .botao-primario:hover::after { transform: translateX(120%); } .botao-primario:hover { box-shadow: 0 8px 26px -6px rgba(99, 102, 241, 0.75); } .botao-perigo { background: linear-gradient(135deg, var(--perigo), #be123c); border-color: transparent; color: #fff; } .botao-sucesso { background: linear-gradient(135deg, var(--sucesso), #15803d); border-color: transparent; color: #fff; } .botao-fantasma { background: transparent; border-color: transparent; color: var(--texto-medio); } .botao-fantasma:hover { background: var(--superficie); color: var(--texto); } .botao-grande { padding: 12px 20px; font-size: 15px; width: 100%; } .botao-pequeno { padding: 6px 11px; font-size: 12.5px; } .botao-icone { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--texto-medio); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.16s var(--suave); } .botao-icone svg { width: 18px; height: 18px; } .botao-icone:hover { background: var(--superficie-forte); color: var(--texto); transform: translateY(-1px); } /* selo de contagem sobre o sino de alertas */ .selo { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--perigo); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; animation: bater 0.5s var(--elastico); box-shadow: 0 0 0 2px var(--fundo); } /* --- campos --- */ .campo { display: block; margin-bottom: 14px; } .campo > span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--texto-medio); letter-spacing: 0.01em; } .campo .dica { display: block; margin-top: 5px; font-size: 11.5px; color: var(--texto-suave); } .campo .erro-campo { display: block; margin-top: 5px; font-size: 11.5px; color: var(--perigo); } input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="email"], select, textarea { width: 100%; padding: 9px 12px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } input:hover, select:hover, textarea:hover { border-color: var(--borda-forte); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-fraca); background: var(--superficie-forte); } input::placeholder, textarea::placeholder { color: var(--texto-suave); } textarea { resize: vertical; min-height: 74px; } select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7f9e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px; } /* A LISTA QUE ABRE NO CAMPO DE SELEÇÃO Ela é desenhada pelo sistema operacional, fora do alcance da maior parte do nosso CSS. O `color-scheme` lá em cima já resolve na maioria dos casos, mas alguns navegadores só obedecem se a cor for dita explicitamente em cada opção — sem isto, o tema escuro mostrava texto escuro sobre fundo escuro. */ select option, select optgroup { background-color: var(--superficie-solida); color: var(--texto); padding: 6px 8px; } select option:checked { background-color: var(--primaria); color: #fff; } select option:disabled { color: var(--texto-suave); } /* O ícone do calendário também vem do navegador; o color-scheme já o ajusta. */ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.75; } input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; } .campo-senha { position: relative; } .campo-senha input { padding-right: 42px; } .olho { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent; color: var(--texto-suave); cursor: pointer; border-radius: 7px; display: flex; align-items: center; justify-content: center; } .olho:hover { color: var(--texto); background: var(--superficie-forte); } .olho svg { width: 17px; height: 17px; } /* caixa de seleção estilizada */ .marcar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .marcar input { appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--borda-forte); border-radius: 5px; background: var(--superficie); cursor: pointer; transition: all 0.18s var(--suave); flex: none; } .marcar input:checked { background: var(--primaria); border-color: var(--primaria); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size: 13px; background-position: center; background-repeat: no-repeat; } .marcar input:focus-visible { box-shadow: 0 0 0 3px var(--primaria-fraca); } /* chave liga/desliga */ .chave { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; } .chave input { opacity: 0; width: 0; height: 0; } .chave-trilho { position: absolute; inset: 0; border-radius: 99px; cursor: pointer; background: var(--borda-forte); transition: background 0.25s var(--suave); } .chave-trilho::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-1); transition: transform 0.25s var(--elastico); } .chave input:checked + .chave-trilho { background: linear-gradient(135deg, var(--primaria), var(--primaria-escura)); } .chave input:checked + .chave-trilho::before { transform: translateX(18px); } .chave input:focus-visible + .chave-trilho { box-shadow: 0 0 0 3px var(--primaria-fraca); } /* ========================================================================== 6. TELA DE LOGIN ========================================================================== */ .tela-login { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 24px; animation: aparecer 0.5s var(--suave); } .login-cartao { width: min(420px, 100%); padding: 34px 32px 26px; border-radius: var(--raio-g); box-shadow: var(--sombra-3); animation: ampliar 0.55s var(--elastico) both; } /* A logo ocupa a largura do cartão de login, com o nome do sistema abaixo. */ .login-marca { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; } .login-logo { display: flex; justify-content: flex-start; } .login-titulo h1 { font-size: 21px; } .login-marca h1 { font-size: 21px; } .login-marca p { font-size: 12.5px; color: var(--texto-suave); margin-top: 3px; } /* No menu lateral, a logo divide a linha com o botão de recolher. */ .lateral-logo { flex: 1; min-width: 0; display: flex; align-items: center; } .menu-recolhido .lateral-logo { flex: none; } /* ========================================================================== A MARCA ========================================================================== A logo horizontal tem duas cores: o azul da marca e um cinza quase preto. O cinza fica perfeito sobre fundo claro e SOME no tema escuro — por isso ele não vem fixado no arquivo. Aqui é que se decide: .fil0 → o azul da marca, igual em qualquer tema .fil1 → acompanha o texto da página: escuro no claro, claro no escuro Uma única logo serve aos dois temas, e trocar a marca é trocar um arquivo. ========================================================================== */ .logo { display: block; height: auto; } .logo .fil0 { fill: #4CADE1; } .logo .fil1 { fill: var(--texto); transition: fill 0.35s var(--suave); } /* Sobre a faixa colorida do login, a logo é sempre clara. */ .logo-clara .fil1 { fill: #fff; } .logo-clara .fil0 { fill: #7ecbf0; } .marca-icone { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primaria), var(--primaria-escura)); box-shadow: var(--luz-primaria); } .marca-icone svg { width: 24px; height: 24px; } .marca-icone.pequeno { width: 36px; height: 36px; border-radius: 10px; } .marca-icone.pequeno svg { width: 19px; height: 19px; } /* O símbolo sozinho, usado onde não cabe a logo inteira (menu recolhido). */ .marca-simbolo { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; padding: 8px; background: linear-gradient(135deg, rgba(76, 173, 225, 0.18), rgba(76, 173, 225, 0.06)); border: 1px solid rgba(76, 173, 225, 0.25); } .marca-simbolo svg { width: 100%; height: auto; } .marca-simbolo path { fill: #4CADE1; } .marca-alerta { background: linear-gradient(135deg, var(--alerta), #b45309); box-shadow: 0 8px 32px -8px rgba(245, 158, 11, 0.5); } .login-erro { display: none; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--raio-p); background: var(--perigo-fraca); border: 1px solid rgba(244, 63, 94, 0.3); color: var(--perigo); font-size: 13px; animation: surgir-leve 0.3s var(--suave); } .login-erro.visivel { display: block; } .login-rodape { margin-top: 20px; text-align: center; font-size: 11.5px; color: var(--texto-suave); } /* ========================================================================== 7. ESTRUTURA DO APP ========================================================================== */ .app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--lateral-largura) 1fr; min-height: 100vh; transition: grid-template-columns 0.3s var(--suave); } .app.menu-recolhido { grid-template-columns: var(--lateral-recolhida) 1fr; } /* --- menu lateral --- */ .lateral { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; border-right: 1px solid var(--borda); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: sticky; top: 0; height: 100vh; overflow: hidden; } [data-tema="claro"] .lateral { background: rgba(255, 255, 255, 0.7); } /* O topo do menu. A logo ocupa o espaço com presença — uma marca pequena num canto, com muito vazio ao lado, parece esquecida ali. O botão de recolher é discreto e só ganha destaque quando o mouse passa: ele é uma conveniência, não o assunto principal do topo. */ .lateral-topo { display: flex; align-items: center; gap: 8px; padding: 10px 8px 18px; margin-bottom: 4px; border-bottom: 1px solid var(--borda); } .lateral-topo .recolher { width: 26px; height: 26px; opacity: 0.35; transition: opacity 0.2s, background 0.2s; } .lateral-topo .recolher svg { width: 15px; height: 15px; } .lateral:hover .recolher { opacity: 0.7; } .lateral-topo .recolher:hover { opacity: 1; } .lateral-titulo { flex: 1; min-width: 0; overflow: hidden; } .lateral-titulo strong { display: block; font-size: 15px; white-space: nowrap; } .lateral-titulo small { display: block; font-size: 11px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recolher svg { transition: transform 0.3s var(--suave); } .menu-recolhido .recolher svg { transform: rotate(180deg); } .menu-recolhido .lateral-titulo, .menu-recolhido .usuario-info, .menu-recolhido .menu-grupo-titulo { display: none; } .menu-recolhido .item-menu { justify-content: center; padding-left: 0; padding-right: 0; } .menu-recolhido .item-menu span { display: none; } /* Menu recolhido: a lateral fica com 74px e a linha do topo (logo + botão) não caberia lado a lado — o botão de expandir sairia da área visível e a pessoa ficaria presa com o menu fechado. Por isso, quando recolhido, os dois empilham em coluna e o botão continua sempre clicável. */ .menu-recolhido .lateral-topo { flex-direction: column; gap: 8px; padding: 4px 0 14px; } .menu-recolhido .recolher { width: 100%; border-radius: 9px; background: var(--superficie); } .menu-recolhido .recolher:hover { background: var(--superficie-forte); } .menu-recolhido .usuario-bloco { justify-content: center; padding: 8px 0; } .menu-recolhido .item-menu .contador { display: none; } .menu { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; overflow-x: hidden; padding-right: 2px; } .menu-grupo-titulo { padding: 14px 12px 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--texto-suave); } .item-menu { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--texto-medio); font-size: 13.5px; font-weight: 520; cursor: pointer; text-align: left; width: 100%; position: relative; transition: color 0.2s, background 0.2s; } .item-menu svg { width: 18px; height: 18px; flex: none; } .item-menu:hover { background: var(--superficie); color: var(--texto); } /* barrinha luminosa que marca a tela ativa */ .item-menu.ativo { color: var(--texto); background: var(--primaria-fraca); } .item-menu.ativo::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--primaria); box-shadow: 0 0 12px var(--primaria); animation: surgir-leve 0.25s var(--suave); } .item-menu .contador { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--superficie-forte); color: var(--texto-medio); } .item-menu.ativo .contador { background: var(--primaria); color: #fff; } .lateral-rodape { border-top: 1px solid var(--borda); padding-top: 10px; } .usuario-bloco { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; transition: background 0.2s; } .usuario-bloco:hover { background: var(--superficie); } .avatar { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--primaria), var(--roxo)); } .usuario-info { min-width: 0; flex: 1; } .usuario-info strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .usuario-info small { display: block; font-size: 11px; color: var(--texto-suave); } /* --- topo --- */ .principal { display: flex; flex-direction: column; min-width: 0; } .topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: var(--topo-altura); padding: 0 22px; border-bottom: 1px solid var(--borda); background: color-mix(in srgb, var(--fundo) 78%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .topo-titulo { flex: 1; min-width: 0; } .topo-titulo h2 { font-size: 18px; } .topo-titulo p { font-size: 12px; color: var(--texto-suave); margin-top: 1px; } .topo-acoes { display: flex; align-items: center; gap: 6px; } .busca-global { position: relative; display: flex; align-items: center; } .busca-global svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--texto-suave); pointer-events: none; } .busca-global input { width: 230px; padding: 8px 34px 8px 34px; border-radius: 99px; transition: width 0.28s var(--suave), border-color 0.2s, box-shadow 0.2s; } .busca-global input:focus { width: 320px; } .busca-global kbd { position: absolute; right: 10px; font-size: 10px; font-family: var(--fonte-mono); color: var(--texto-suave); border: 1px solid var(--borda); border-radius: 5px; padding: 1px 5px; pointer-events: none; } .busca-global input:focus + kbd, .busca-global input:not(:placeholder-shown) + kbd { opacity: 0; } .icone-sol { display: none; } [data-tema="claro"] .icone-lua { display: none; } [data-tema="claro"] .icone-sol { display: block; } /* --- conteúdo --- */ .conteudo { flex: 1; padding: 22px; max-width: 1680px; width: 100%; } .secao { margin-bottom: 26px; } .secao-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 13px; flex-wrap: wrap; } .secao-cabecalho h3 { font-size: 15.5px; display: flex; align-items: center; gap: 8px; } .secao-cabecalho h3::before { content: ""; width: 3px; height: 15px; border-radius: 3px; background: linear-gradient(180deg, var(--primaria), var(--acento)); } .secao-cabecalho p { font-size: 12px; color: var(--texto-suave); margin-top: 3px; } .secao-acoes { display: flex; gap: 7px; flex-wrap: wrap; } /* ========================================================================== 8. CARTÕES, INDICADORES E GRÁFICOS ========================================================================== */ .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 17px; position: relative; overflow: hidden; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 0.25s var(--suave), border-color 0.25s, box-shadow 0.25s; } .cartao:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-2); } .grade-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 13px; margin-bottom: 22px; } /* Cartão de indicador. O "traço" colorido no topo e o brilho que segue o mouse (variáveis --mx/--my atualizadas pelo JavaScript) fazem o efeito de luz. */ .kpi { padding: 16px 17px; cursor: default; } .kpi::after { content: ""; position: absolute; inset: 0; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.07), transparent 62%); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .kpi:hover::after { opacity: 1; } .kpi:hover { transform: translateY(-3px); } .kpi-faixa { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cor, var(--primaria)), transparent); } .kpi-topo { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; } .kpi-icone { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--cor, var(--primaria)) 18%, transparent); color: var(--cor, var(--primaria)); } .kpi-icone svg { width: 16px; height: 16px; } .kpi-rotulo { font-size: 11.5px; font-weight: 620; color: var(--texto-medio); text-transform: uppercase; letter-spacing: 0.04em; } .kpi-valor { font-size: 25px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; font-variant-numeric: tabular-nums; } .kpi-detalhe { font-size: 11.5px; color: var(--texto-suave); margin-top: 5px; display: flex; align-items: center; gap: 5px; } .kpi-variacao { font-weight: 650; } .kpi-variacao.sobe { color: var(--sucesso); } .kpi-variacao.desce { color: var(--perigo); } .grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 15px; } .grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 15px; } .grade-lado { display: grid; grid-template-columns: 1.6fr 1fr; gap: 15px; } @media (max-width: 1180px) { .grade-lado { grid-template-columns: 1fr; } } .cartao-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .cartao-titulo h4 { font-size: 13.5px; font-weight: 620; } .cartao-titulo small { font-size: 11.5px; color: var(--texto-suave); } /* --- gráficos SVG --- */ /* A caixa dá a largura; o SVG dentro dela é desenhado exatamente nessa medida (ver App.graficos.responsivo). O gráfico NÃO é esticado para caber — se fosse, o texto seria esticado junto e sairia deformado. */ .grafico-caixa { width: 100%; overflow: hidden; } /* O tamanho precisa estar AQUI, e não só nos atributos do . * * Bem no começo desta folha existe "svg { width: 1em; height: 1em }", que dá * tamanho aos ícones. Essa regra também alcança os gráficos — e, em CSS, uma * regra de folha de estilo vence os atributos width/height do próprio SVG. * O resultado era um gráfico de 1500x250 desenhado dentro de 14x14 pixels: * tudo certo no código, um pontinho invisível na tela. * * Com width 100% e height auto, o viewBox manda no formato — e como ele é * criado já do tamanho medido do container, o desenho fica 1:1, sem esticar * nem borrar o texto. A rosca não entra aqui porque define o tamanho no * próprio elemento, e style inline vence as duas regras. */ .grafico { display: block; overflow: visible; width: 100%; height: auto; } .grafico text { fill: var(--texto-suave); font-size: 10.5px; font-family: var(--fonte); } .grafico .rotulo-forte { fill: var(--texto); font-weight: 600; } .grafico .linha-grade { stroke: var(--borda); stroke-dasharray: 3 4; } .grafico .barra { transition: opacity 0.2s; cursor: pointer; } /* A entrada das barras. * * É ENFEITE, e há uma regra dura por trás: NENHUM QUADRO DESTA ANIMAÇÃO PODE * DEIXAR A BARRA INVISÍVEL. * * Duas versões anteriores erraram nisso — uma crescia a barra a partir de * altura zero dentro de um requestAnimationFrame, outra a partir de * scaleY(0) — e as duas deixavam o gráfico sem barra nenhuma quando a * animação não chegava a rodar ou travava no primeiro quadro. Eixos, grade e * rótulos apareciam; as barras, não. Levou horas para ser encontrado, porque * no código estava tudo certo. * * Por isso a barra nasce do tamanho final (ver graficos.js) e a animação parte * de 25% de opacidade, nunca de zero: no pior cenário imaginável a barra * aparece um pouco apagada, e jamais some. */ @keyframes barra-entrando { from { opacity: 0.25; transform: translateY(7px); } to { opacity: 1; transform: none; } } .grafico .barra-cresce { transform-box: fill-box; animation: barra-entrando 0.55s cubic-bezier(0.4, 0, 0.2, 1) var(--atraso, 0s); } @media (prefers-reduced-motion: reduce) { .grafico .barra-cresce { animation: none; } } .grafico .barra:hover { opacity: 0.82; } .grafico .fatia { transition: transform 0.25s var(--elastico), opacity 0.2s; transform-origin: center; cursor: pointer; } .grafico .fatia:hover { transform: scale(1.035); } .grafico .ponto { transition: r 0.2s; cursor: pointer; } /* legenda dos gráficos */ .legenda { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 13px; } .legenda-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--texto-medio); cursor: default; } .legenda-cor { width: 10px; height: 10px; border-radius: 3px; flex: none; } .legenda-valor { color: var(--texto); font-weight: 620; font-variant-numeric: tabular-nums; } /* balão que segue o mouse nos gráficos */ .balao { position: fixed; z-index: 200; padding: 8px 11px; border-radius: 9px; background: var(--superficie-solida); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-3); font-size: 12px; pointer-events: none; opacity: 0; transform: translate(-50%, -112%) scale(0.96); transition: opacity 0.14s, transform 0.14s; white-space: nowrap; } .balao.visivel { opacity: 1; transform: translate(-50%, -118%) scale(1); } .balao strong { display: block; margin-bottom: 3px; font-size: 12.5px; } .balao span { color: var(--texto-medio); } /* barra de progresso (usada em rankings e no funil) */ .barra-progresso { height: 7px; border-radius: 99px; background: var(--superficie-forte); overflow: hidden; } .barra-progresso > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cor, var(--primaria)), color-mix(in srgb, var(--cor, var(--primaria)) 55%, var(--acento))); width: 0; transition: width 0.9s var(--suave); } /* linha de ranking */ .ranking { display: flex; flex-direction: column; gap: 12px; } .ranking-linha { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; } .ranking-nome { font-size: 12.5px; font-weight: 560; display: flex; align-items: center; gap: 7px; } .ranking-valor { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; } .ranking-linha .barra-progresso { grid-column: 1 / -1; } /* ========================================================================== 9. TABELAS ========================================================================== */ .tabela-caixa { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--superficie); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .tabela-rolagem { overflow-x: auto; } table.tabela { width: 100%; border-collapse: collapse; font-size: 13px; } table.tabela th { position: sticky; top: 0; z-index: 2; padding: 11px 13px; text-align: left; font-size: 11px; font-weight: 680; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-medio); background: color-mix(in srgb, var(--fundo) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); white-space: nowrap; user-select: none; } table.tabela th.ordenavel { cursor: pointer; transition: color 0.2s; } table.tabela th.ordenavel:hover { color: var(--texto); } table.tabela th .seta { display: inline-block; margin-left: 4px; opacity: 0.4; transition: transform 0.2s, opacity 0.2s; } table.tabela th.ordenado .seta { opacity: 1; color: var(--primaria-clara); } table.tabela th.ordenado.desc .seta { transform: rotate(180deg); } table.tabela td { padding: 10px 13px; border-bottom: 1px solid var(--borda); vertical-align: middle; } table.tabela tbody tr { transition: background 0.14s; animation: surgir-leve 0.3s var(--suave) both; } table.tabela tbody tr:hover { background: var(--superficie-forte); } table.tabela tbody tr.selecionada { background: var(--primaria-fraca); } table.tabela tbody tr:last-child td { border-bottom: 0; } table.tabela tbody tr.clicavel { cursor: pointer; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .centro { text-align: center; } .negativo { color: var(--perigo); } .positivo { color: var(--sucesso); } .discreto { color: var(--texto-suave); } .mono { font-family: var(--fonte-mono); font-size: 12px; } .tabela-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-medio); flex-wrap: wrap; } .paginacao { display: flex; align-items: center; gap: 5px; } /* barra de filtros acima das tabelas */ .filtros { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; padding: 14px; margin-bottom: 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .filtro { display: flex; flex-direction: column; gap: 5px; min-width: 132px; } .filtro > label { font-size: 11px; font-weight: 620; color: var(--texto-medio); text-transform: uppercase; letter-spacing: 0.03em; } .filtro input, .filtro select { padding: 7px 10px; font-size: 13px; } .filtros-acoes { display: flex; gap: 7px; margin-left: auto; } /* barra que aparece quando há linhas selecionadas */ .barra-selecao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 15px; margin-bottom: 12px; border-radius: var(--raio); background: var(--primaria-fraca); border: 1px solid rgba(99, 102, 241, 0.32); animation: surgir-leve 0.28s var(--suave); } .barra-selecao strong { font-size: 13.5px; } /* estado vazio */ .vazio { padding: 52px 22px; text-align: center; color: var(--texto-suave); } .vazio svg { width: 44px; height: 44px; margin: 0 auto 14px; opacity: 0.35; } .vazio h4 { font-size: 15px; color: var(--texto-medio); margin-bottom: 5px; } .vazio p { font-size: 13px; max-width: 380px; margin: 0 auto; } /* esqueleto de carregamento */ .esqueleto { border-radius: 7px; background: linear-gradient(90deg, var(--superficie) 25%, var(--superficie-forte) 50%, var(--superficie) 75%); background-size: 200% 100%; animation: brilho-passando 1.4s infinite linear; height: 15px; } .carregando-tela { display: grid; gap: 13px; padding: 8px 0; } .girando { animation: girar 0.9s linear infinite; } /* ========================================================================== 10. MODAIS, GAVETA E AVISOS ========================================================================== */ .modal-fundo { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 22px; background: rgba(3, 6, 15, 0.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: aparecer 0.22s var(--suave); } .modal { width: min(720px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; border-radius: var(--raio-g); background: var(--superficie-solida); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-3); animation: ampliar 0.32s var(--elastico) both; overflow: hidden; } .modal.largo { width: min(1080px, 100%); } .modal.estreito { width: min(460px, 100%); } .modal-topo { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--borda); } .modal-topo h3 { font-size: 16.5px; } .modal-topo p { font-size: 12.5px; color: var(--texto-suave); margin-top: 3px; } .modal-topo .botao-icone { margin-left: auto; } .modal-corpo { padding: 18px 20px; overflow-y: auto; flex: 1; } .modal-rodape { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--borda); background: var(--superficie); } .modal-rodape .esquerda { margin-right: auto; } /* gaveta lateral (alertas) */ .gaveta { position: fixed; inset: 0; z-index: 90; } .gaveta-fundo { position: absolute; inset: 0; background: rgba(3, 6, 15, 0.5); backdrop-filter: blur(3px); animation: aparecer 0.22s; } .gaveta-painel { position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 100%); display: flex; flex-direction: column; border-radius: 0; border-right: 0; border-top: 0; border-bottom: 0; background: var(--superficie-solida); animation: entrar-lado 0.32s var(--suave) both; } .gaveta-painel > header { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; border-bottom: 1px solid var(--borda); } .gaveta-corpo { flex: 1; overflow-y: auto; padding: 13px; display: flex; flex-direction: column; gap: 9px; } /* cartão de alerta */ .alerta-item { display: flex; gap: 11px; padding: 12px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie); cursor: pointer; transition: transform 0.18s var(--suave), border-color 0.2s, background 0.2s; animation: surgir-leve 0.3s var(--suave) both; } .alerta-item:hover { transform: translateX(-3px); border-color: var(--borda-forte); background: var(--superficie-forte); } .alerta-marca { width: 3px; border-radius: 3px; flex: none; background: var(--cor, var(--alerta)); } .alerta-texto { min-width: 0; flex: 1; } .alerta-texto strong { display: block; font-size: 13px; margin-bottom: 3px; } .alerta-texto small { display: block; font-size: 11.5px; color: var(--texto-suave); } .alerta-valor { font-size: 12.5px; font-weight: 650; white-space: nowrap; } /* avisos flutuantes */ .avisos { position: fixed; bottom: 22px; right: 22px; z-index: 300; display: flex; flex-direction: column; gap: 9px; max-width: min(400px, calc(100vw - 44px)); } .aviso { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: var(--raio-p); background: var(--superficie-solida); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-3); animation: entrar-lado 0.35s var(--elastico) both; position: relative; overflow: hidden; } .aviso.saindo { animation: aparecer 0.25s var(--suave) reverse both; } .aviso::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cor, var(--primaria)); } .aviso-icone { width: 19px; height: 19px; flex: none; color: var(--cor, var(--primaria)); margin-top: 1px; } .aviso-texto { flex: 1; min-width: 0; } .aviso-texto strong { display: block; font-size: 13.5px; margin-bottom: 2px; } .aviso-texto span { font-size: 12.5px; color: var(--texto-medio); } .aviso.sucesso { --cor: var(--sucesso); } .aviso.erro { --cor: var(--perigo); } .aviso.atencao { --cor: var(--alerta); } /* ========================================================================== 11. PEÇAS ESPECÍFICAS ========================================================================== */ /* pastilha de status — a cor vem do banco, então é passada por --cor */ .pastilha { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 620; white-space: nowrap; color: var(--cor, var(--texto-medio)); background: color-mix(in srgb, var(--cor, var(--texto-suave)) 15%, transparent); border: 1px solid color-mix(in srgb, var(--cor, var(--texto-suave)) 32%, transparent); } .pastilha::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .pastilha.solida { color: #fff; background: var(--cor); border-color: transparent; } .pastilha.simples::before { display: none; } /* etiqueta neutra */ .etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 560; background: var(--superficie-forte); color: var(--texto-medio); border: 1px solid var(--borda); } /* linha do tempo do histórico */ .linha-tempo { position: relative; padding-left: 26px; } .linha-tempo::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--primaria), transparent); opacity: 0.4; } .evento { position: relative; padding-bottom: 16px; animation: surgir-leve 0.35s var(--suave) both; } .evento::before { content: ""; position: absolute; left: -23px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--superficie-solida); border: 2px solid var(--cor, var(--primaria)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor, var(--primaria)) 18%, transparent); } .evento-topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .evento-topo strong { font-size: 13px; } .evento-topo time { font-size: 11.5px; color: var(--texto-suave); } .evento-corpo { font-size: 12.5px; color: var(--texto-medio); margin-top: 3px; } .evento-corpo .de { color: var(--texto-suave); text-decoration: line-through; } .evento-corpo .para { color: var(--texto); font-weight: 560; } /* matriz de permissões */ .grupo-permissao { border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 11px; overflow: hidden; } .grupo-permissao > header { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--superficie); font-size: 13px; font-weight: 620; cursor: pointer; } .grupo-permissao > header .contagem { margin-left: auto; font-size: 11.5px; color: var(--texto-suave); font-weight: 500; } .permissao-linha { display: flex; align-items: flex-start; gap: 11px; padding: 10px 14px; border-top: 1px solid var(--borda); transition: background 0.18s; } .permissao-linha:hover { background: var(--superficie); } .permissao-texto strong { display: block; font-size: 13px; font-weight: 560; } .permissao-texto small { display: block; font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; } /* cartão de estado do sistema (verde/amarelo/vermelho) */ .estado-cartao { display: flex; align-items: center; gap: 13px; padding: 15px 17px; } .estado-bolha { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--cor); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor) 22%, transparent); animation: pulsar 2.4s ease-in-out infinite; } .estado-ok { --cor: var(--sucesso); } .estado-atencao { --cor: var(--alerta); } .estado-falha { --cor: var(--perigo); } /* abas internas */ .abas { display: flex; gap: 3px; border-bottom: 1px solid var(--borda); margin-bottom: 17px; overflow-x: auto; } .aba { padding: 9px 15px; border: 0; background: transparent; color: var(--texto-medio); font-size: 13.5px; font-weight: 560; cursor: pointer; position: relative; white-space: nowrap; transition: color 0.2s; } .aba:hover { color: var(--texto); } .aba.ativa { color: var(--texto); } .aba.ativa::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--primaria), var(--acento)); border-radius: 2px 2px 0 0; animation: aparecer 0.25s; } /* passo a passo do fluxo (funil de status) */ .funil { display: flex; flex-wrap: wrap; gap: 7px; } .funil-passo { flex: 1; min-width: 108px; padding: 11px 12px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie); position: relative; transition: transform 0.2s var(--suave), border-color 0.2s; cursor: pointer; } .funil-passo:hover { transform: translateY(-2px); border-color: var(--cor); } .funil-passo strong { display: block; font-size: 19px; font-weight: 700; color: var(--cor); font-variant-numeric: tabular-nums; } .funil-passo small { display: block; font-size: 11px; color: var(--texto-medio); margin-top: 2px; line-height: 1.3; } .funil-passo::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; background: var(--cor); border-radius: 2px; width: var(--proporcao, 0%); transition: width 0.8s var(--suave); } /* área de arrastar arquivo */ .solta-arquivo { border: 1.5px dashed var(--borda-forte); border-radius: var(--raio); padding: 30px 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s; } .solta-arquivo:hover, .solta-arquivo.sobre { border-color: var(--primaria); background: var(--primaria-fraca); transform: scale(1.005); } .solta-arquivo svg { width: 34px; height: 34px; margin: 0 auto 11px; color: var(--texto-suave); } .solta-arquivo strong { display: block; font-size: 14px; margin-bottom: 4px; } .solta-arquivo small { font-size: 12px; color: var(--texto-suave); } /* caixa de senha provisória gerada */ .senha-gerada { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-radius: var(--raio-p); background: var(--sucesso-fraca); border: 1px solid rgba(34, 197, 94, 0.32); } .senha-gerada code { font-family: var(--fonte-mono); font-size: 17px; font-weight: 700; letter-spacing: 0.04em; } /* aviso em destaque dentro de formulário */ .nota { display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--raio-p); background: var(--superficie); border: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-medio); margin-bottom: 14px; } .nota svg { width: 17px; height: 17px; flex: none; color: var(--cor, var(--primaria)); margin-top: 1px; } .nota.atencao { --cor: var(--alerta); background: var(--alerta-fraca); border-color: rgba(245, 158, 11, 0.28); } .nota.perigo { --cor: var(--perigo); background: var(--perigo-fraca); border-color: rgba(244, 63, 94, 0.28); } /* formulário em duas colunas */ .form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; } .form-grade .largo { grid-column: 1 / -1; } /* ========================================================================== OPERAÇÕES EM MASSA ========================================================================== A tela onde se cola centenas de linhas da planilha. Duas peças exigem tratamento próprio: a área de colar (que precisa parecer uma planilha, com fonte de largura fixa) e a tabela editável (onde o erro é corrigido no lugar, sem voltar ao Excel). ========================================================================== */ /* -------------------------------------------------------------------------- A PLANILHA EDITÁVEL Precisa parecer uma planilha de verdade, não um formulário: células encostadas, linhas numeradas, cabeçalho com a letra da coluna e o cursor sempre visível. É o ambiente que a mão da pessoa já conhece. -------------------------------------------------------------------------- */ .planilha-cartao { padding: 0; overflow: hidden; } .planilha-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 13px 15px; border-bottom: 1px solid var(--borda); background: var(--superficie); } .planilha-estado { display: flex; gap: 22px; flex-wrap: wrap; } .planilha-contador { display: flex; flex-direction: column; } .planilha-contador strong { font-size: 17px; font-weight: 700; line-height: 1.1; color: var(--cor, var(--texto)); font-variant-numeric: tabular-nums; } .planilha-contador small { font-size: 10.5px; color: var(--texto-suave); margin-top: 2px; } .planilha-acoes { display: flex; gap: 6px; flex-wrap: wrap; } /* A grade rola nos dois sentidos, com o cabeçalho e a coluna de número fixos — sem isso, a pessoa perde a referência ao rolar. */ .planilha-rolagem { overflow: auto; max-height: 56vh; } .planilha-tabela { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: max-content; min-width: 100%; } .planilha-tabela thead th { position: sticky; top: 0; z-index: 3; padding: 7px 9px; text-align: left; background: var(--superficie-solida); border-bottom: 1px solid var(--borda-forte); border-right: 1px solid var(--borda); white-space: nowrap; cursor: pointer; user-select: none; } .planilha-tabela thead th:hover { background: var(--superficie-forte); } .planilha-tabela thead th.obrigatoria { box-shadow: inset 0 -2px 0 var(--primaria); } .planilha-tabela thead th.canto { left: 0; z-index: 4; width: 42px; min-width: 42px; cursor: default; } .coluna-letra { display: block; font-size: 9.5px; font-weight: 700; color: var(--texto-suave); letter-spacing: 0.06em; } .coluna-nome { display: block; font-size: 11.5px; font-weight: 620; color: var(--texto-medio); } /* ALTURA FIXA — a linha não pode mudar de tamanho. Numa grade, qualquer variação de altura faz o conteúdo inteiro "pular" enquanto se digita, e a pessoa perde a referência de onde estava. Por isso a altura é travada e o aviso de erro não ocupa espaço (ver td.com-erro). */ .planilha-tabela td { padding: 0; height: 30px; border-bottom: 1px solid var(--borda); border-right: 1px solid var(--borda); position: relative; } /* A coluna dos números fica fixa à esquerda, como no Excel. */ .numero-linha { position: sticky; left: 0; z-index: 2; width: 42px; min-width: 42px; padding: 0 7px !important; text-align: center; font-size: 10.5px; color: var(--texto-suave); background: var(--superficie-solida); border-right: 1px solid var(--borda-forte) !important; cursor: pointer; user-select: none; } .numero-linha:hover { background: var(--superficie-forte); color: var(--texto); } /* O campo preenche a célula INTEIRA. Se ele fosse menor que a célula, sobraria uma faixa morta em volta: clicar ali não faria nada e o texto pareceria flutuando no meio do retângulo. Ocupando tudo, a célula toda é clicável e o texto fica alinhado à borda. */ .planilha-tabela td input { display: block; width: 100%; height: 100%; padding: 0 8px; border: 0; border-radius: 0; background: transparent; font-size: 12.5px; color: var(--texto); box-sizing: border-box; /* A seta comum, não o traço de texto. A célula só é um campo de digitação quando se entra nela de propósito (duplo clique, F2 ou digitando) — até lá, é só uma célula. */ cursor: default; user-select: none; } .planilha-tabela td input.editando { cursor: text; user-select: text; } .planilha-tabela td input:hover { background: var(--superficie); } /* A célula com o cursor ganha uma borda azul por dentro, sem deslocar nada — usar borda de verdade empurraria o conteúdo e a grade "tremeria". */ .planilha-tabela td input:focus { outline: none; background: var(--superficie-forte); box-shadow: inset 0 0 0 2px var(--primaria); } /* Editando: a borda fica mais viva, para ficar claro que a tecla vai escrever. */ .planilha-tabela td input.editando:focus { box-shadow: inset 0 0 0 2px var(--acento); background: var(--superficie-solida); } .planilha-tabela td.selecionada { background: var(--primaria-fraca); } /* O AVISO DE ERRO NÃO OCUPA ESPAÇO. A primeira versão escrevia o motivo embaixo do valor, dentro da célula — e a linha crescia quando aparecia um erro, empurrando a grade inteira para baixo enquanto a pessoa digitava. Agora o erro é um triângulo no canto da célula, sobre fundo avermelhado. O motivo continua acessível: está no "title", que o navegador mostra ao parar o mouse sobre a célula. */ .planilha-tabela td.com-erro { background: color-mix(in srgb, var(--perigo) 12%, transparent); } .planilha-tabela td.com-erro input { color: var(--perigo); } .planilha-tabela td.com-erro::after { content: ""; position: absolute; top: 0; right: 0; border-width: 0 6px 6px 0; border-style: solid; border-color: transparent var(--perigo) transparent transparent; pointer-events: none; } /* Previsão do arrasto da alça: mostra até onde o preenchimento vai chegar antes de soltar o botão. */ .planilha-tabela td.previsao { background: color-mix(in srgb, var(--primaria) 10%, transparent); box-shadow: inset 0 0 0 1px var(--primaria-clara); } /* O contorno tracejado do que foi copiado — a "formiguinha" do Excel. */ .planilha-tabela td.copiada { box-shadow: inset 0 0 0 1.5px var(--acento); } /* A ALÇA DE PREENCHIMENTO O quadradinho no canto inferior direito da seleção. Fica um pouco para fora da célula, como no Excel, para poder ser agarrado sem esbarrar no texto. O cursor em cruz é o sinal universal de "arraste daqui". */ .alca-preenchimento { position: absolute; right: -4px; bottom: -4px; width: 9px; height: 9px; background: var(--primaria); border: 1.5px solid var(--superficie-solida); border-radius: 2px; cursor: crosshair; z-index: 5; transition: transform 0.12s var(--suave); } .alca-preenchimento:hover { transform: scale(1.35); } .planilha-rodape { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 15px; border-top: 1px solid var(--borda); background: var(--superficie); } /* A tabela editável: cada célula é um campo, e o erro fica visível na célula. */ .tabela-editavel td { padding: 3px 4px; } .tabela-editavel input { width: 100%; min-width: 92px; padding: 5px 7px; font-size: 12.5px; border-color: transparent; background: transparent; } .tabela-editavel input:hover { border-color: var(--borda); background: var(--superficie); } .tabela-editavel input:focus { border-color: var(--primaria); background: var(--superficie-forte); } .tabela-editavel .linha-com-erro { background: color-mix(in srgb, var(--perigo) 7%, transparent); } .tabela-editavel .linha-com-aviso td:first-child { box-shadow: inset 3px 0 0 var(--alerta); } .tabela-editavel .celula-erro input { border-color: var(--perigo); background: color-mix(in srgb, var(--perigo) 10%, transparent); } .erro-dica { display: block; font-size: 10.5px; color: var(--perigo); padding: 2px 7px 0; line-height: 1.3; } /* ========================================================================== MEDIDOR DE FORÇA DA SENHA A barra muda de cor conforme a senha melhora, e a lista abaixo diz o que ainda falta. Mostrar o caminho é o que faz a pessoa aceitar uma regra exigente em vez de brigar com ela. ========================================================================== */ .forca { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .forca-barra { flex: 1; height: 5px; border-radius: 99px; background: var(--superficie-forte); overflow: hidden; } .forca-barra > i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--perigo); transition: width 0.35s var(--suave), background 0.35s var(--suave); } .forca-barra[data-nivel="fraca"] > i { background: var(--perigo); } .forca-barra[data-nivel="razoavel"] > i { background: var(--alerta); } .forca-barra[data-nivel="boa"] > i { background: #06b6d4; } .forca-barra[data-nivel="forte"] > i { background: var(--sucesso); } .forca-rotulo { font-size: 11.5px; font-weight: 650; min-width: 66px; text-align: right; color: var(--texto-medio); text-transform: lowercase; } .forca-problemas { margin: 8px 0 0; padding: 0; list-style: none; } .forca-problemas li { font-size: 11.5px; color: var(--alerta); padding-left: 15px; position: relative; line-height: 1.45; margin-bottom: 3px; animation: surgir-leve 0.25s var(--suave); } .forca-problemas li::before { content: "•"; position: absolute; left: 3px; } .forca-problemas li.ok { color: var(--sucesso); } .forca-problemas li.ok::before { content: "✓"; font-weight: 700; } /* lista das regras, mostrada antes de a pessoa começar a digitar */ .regras-senha { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--raio-p); background: var(--superficie); border: 1px solid var(--borda); } .regras-senha strong { display: block; font-size: 12px; margin-bottom: 7px; color: var(--texto-medio); } .regras-senha ul { margin: 0; padding: 0; list-style: none; } .regras-senha li { font-size: 12px; color: var(--texto-suave); padding-left: 16px; position: relative; line-height: 1.6; } .regras-senha li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--primaria); } /* ========================================================================== ITENS DAS LISTAS (status, tipos, seguradoras) ========================================================================== */ .lista-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--raio-p); border: 1px solid transparent; transition: background 0.16s, border-color 0.16s; animation: surgir-leve 0.3s var(--suave) both; } .lista-item:hover { background: var(--superficie-forte); border-color: var(--borda); } .lista-item.inativo { opacity: 0.5; } .lista-cor { width: 11px; height: 11px; border-radius: 3px; flex: none; box-shadow: 0 0 8px currentColor; } .lista-ordem { width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--superficie-forte); color: var(--texto-suave); } .lista-nome { flex: 1; font-size: 13px; font-weight: 520; } .lista-acoes { display: flex; gap: 3px; opacity: 0; transition: opacity 0.16s; } .lista-item:hover .lista-acoes { opacity: 1; } .lista-acoes .botao { padding: 4px 7px; } /* ========================================================================== CARTÃO DE ESCOLHA DE RELATÓRIO Funciona como um botão grande: o escolhido ganha borda colorida e um pequeno "check" no canto. ========================================================================== */ .tipo-relatorio { cursor: pointer; padding: 17px; } .tipo-relatorio strong { display: block; font-size: 14.5px; margin-bottom: 5px; } .tipo-relatorio p { font-size: 12px; color: var(--texto-suave); line-height: 1.5; } .tipo-icone { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 11px; background: color-mix(in srgb, var(--cor) 16%, transparent); color: var(--cor); transition: transform 0.25s var(--elastico); } .tipo-relatorio:hover { transform: translateY(-3px); border-color: var(--cor); } .tipo-relatorio:hover .tipo-icone { transform: scale(1.08) rotate(-4deg); } .tipo-relatorio.escolhido { border-color: var(--cor); box-shadow: 0 0 0 1px var(--cor), 0 10px 30px -12px color-mix(in srgb, var(--cor) 65%, transparent); } .tipo-relatorio.escolhido::after { content: ""; position: absolute; top: 13px; right: 13px; width: 18px; height: 18px; border-radius: 50%; background: var(--cor); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; animation: ampliar 0.3s var(--elastico); } /* ========================================================================== QUADRO DO PROCESSO (esteira em colunas) Uma coluna por status. Rola na horizontal quando não cabe, e cada coluna rola sozinha na vertical — assim o cabeçalho de cada etapa fica sempre visível, mesmo com centenas de cartões. ========================================================================== */ .quadro { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; scroll-snap-type: x proximity; } .quadro-coluna { flex: 0 0 268px; max-height: calc(100vh - var(--topo-altura) - 140px); display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: surgir 0.45s var(--suave) both; scroll-snap-align: start; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } /* realce enquanto um cartão está sendo arrastado sobre a coluna */ .quadro-coluna.recebendo { border-color: var(--cor); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor) 35%, transparent), var(--sombra-2); background: color-mix(in srgb, var(--cor) 7%, var(--superficie)); } .quadro-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 13px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 2; background: inherit; border-radius: var(--raio) var(--raio) 0 0; } .quadro-titulo { display: flex; align-items: center; gap: 8px; min-width: 0; } .quadro-titulo strong { font-size: 12.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quadro-bolinha { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cor); box-shadow: 0 0 9px var(--cor); } .quadro-numeros { text-align: right; flex: none; } .quadro-contagem { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--cor) 18%, transparent); color: var(--cor); } .quadro-numeros small { display: block; font-size: 10.5px; color: var(--texto-suave); margin-top: 2px; } .quadro-lista { padding: 9px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; } .quadro-vazio { padding: 22px 10px; text-align: center; font-size: 12px; color: var(--texto-suave); } .quadro-cartao { position: relative; padding: 10px 11px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie-forte); cursor: pointer; transition: transform 0.18s var(--suave), border-color 0.2s, box-shadow 0.2s; animation: surgir-leve 0.35s var(--suave) both; } .quadro-cartao:hover { transform: translateY(-2px); border-color: var(--borda-forte); box-shadow: var(--sombra-2); } .quadro-cartao.arrastando { opacity: 0.4; transform: rotate(1.5deg) scale(0.97); } .quadro-cartao.atencao { border-left: 3px solid var(--alerta); } .quadro-cartao.critico { border-left: 3px solid var(--perigo); } .cartao-linha1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .cartao-linha1 strong { font-size: 13px; } .cartao-linha1 small { font-size: 10.5px; } .cartao-linha2 { font-size: 11.5px; color: var(--texto-medio); margin-top: 3px; } .cartao-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; } .cartao-rodape strong { font-size: 12.5px; font-variant-numeric: tabular-nums; } .cartao-dias { font-size: 11px; color: var(--texto-suave); font-weight: 600; } .cartao-dias.atencao { color: var(--alerta); } .cartao-dias.critico { color: var(--perigo); } /* botão de avançar etapa: aparece só quando o mouse passa pelo cartão */ .cartao-avancar { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--borda); background: var(--superficie-solida); color: var(--sucesso); cursor: pointer; display: grid; place-items: center; opacity: 0; transform: scale(0.8); transition: opacity 0.18s, transform 0.18s var(--elastico), background 0.2s; } .quadro-cartao:hover .cartao-avancar { opacity: 1; transform: scale(1); } .cartao-avancar:hover { background: var(--sucesso); color: #fff; border-color: transparent; } /* ========================================================================== 12. RESPONSIVO E IMPRESSÃO ========================================================================== */ @media (max-width: 1000px) { .app { grid-template-columns: 1fr; } .lateral { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: var(--lateral-largura); transform: translateX(-100%); transition: transform 0.3s var(--suave); background: var(--superficie-solida); } .app.menu-aberto .lateral { transform: none; box-shadow: var(--sombra-3); } .so-celular { display: inline-flex; } .busca-global input { width: 150px; } .busca-global input:focus { width: 210px; } .conteudo { padding: 16px; } .grade-lado { grid-template-columns: 1fr; } } @media (max-width: 640px) { .topo { padding: 0 13px; gap: 8px; } .topo-titulo h2 { font-size: 16px; } .busca-global { display: none; } .grade-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; } .kpi-valor { font-size: 20px; } .modal { max-height: 94vh; } .avisos { left: 13px; right: 13px; bottom: 13px; max-width: none; } } /* ========================================================================== MOVIMENTO — "O QUE ACONTECEU" ========================================================================== Peças da seção do painel e do sino refeito. O painel respondia bem "como estamos" e nada sobre "o que aconteceu ontem"; estes blocos existem para dar essa notícia logo na primeira dobra da tela. ========================================================================== */ /* O cartão do dia de hoje ganha a borda acesa: é o único que muda enquanto a pessoa está olhando. */ .cartao-hoje { border-color: var(--primaria); box-shadow: 0 0 0 1px var(--primaria-fraca, rgba(99,102,241,0.25)); } .dia-eventos { display: flex; flex-direction: column; gap: 8px; } .dia-evento { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: var(--superficie); border-left: 3px solid var(--cor, var(--primaria)); } .dia-evento-num { font-size: 20px; font-weight: 700; color: var(--cor, var(--texto)); line-height: 1; } .dia-evento-rotulo { color: var(--texto-suave); font-size: 13px; } .dia-evento-valor { font-weight: 600; font-variant-numeric: tabular-nums; } /* Linha do tempo: um cabeçalho por dia, senão as datas iguais viram borrão. */ .linha-tempo { display: flex; flex-direction: column; gap: 7px; max-height: 460px; overflow-y: auto; } .linha-tempo-dia { display: flex; align-items: baseline; gap: 9px; padding: 11px 2px 4px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--superficie-cartao, var(--superficie)); z-index: 1; } .linha-tempo-dia strong { font-size: 13px; } .linha-tempo-dia small { color: var(--texto-suave); font-size: 11.5px; } /* ---- sino: novidades ---- */ .gaveta-secao { margin: 14px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-suave); } .gaveta-secao:first-child { margin-top: 0; } .novidade-resumo { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; } .novidade-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border-radius: 99px; background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--cor, var(--primaria)); font-size: 12.5px; } .novidade-chip strong { font-size: 15px; color: var(--cor, var(--texto)); } .novidade-chip small { color: var(--texto-suave); font-variant-numeric: tabular-nums; } /* ---- sino: pendências agrupadas ---- Eram 149 linhas soltas, com o mesmo reembolso repetido em dois motivos. Agrupar por tipo cabe na tela e é lido; a lista completa fica a um clique. */ .pendencia-grupo { display: grid; grid-template-columns: 46px 1fr 14px; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie); color: inherit; text-align: left; cursor: pointer; font: inherit; transition: border-color 0.15s, background 0.15s, transform 0.15s; } .pendencia-grupo:hover { border-color: var(--borda-forte); background: var(--superficie-forte); transform: translateX(-2px); } .pendencia-numero { font-size: 21px; font-weight: 700; color: var(--alerta); line-height: 1; } .pendencia-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pendencia-texto strong { font-size: 13px; font-weight: 600; } .pendencia-texto small { color: var(--texto-suave); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pendencia-seta { color: var(--texto-suave); font-size: 19px; line-height: 1; } /* Selo sem número: "tem trabalho acumulado", sem gritar. É o que substituiu o "99+" permanente, que de tão constante deixou de ser lido. */ .selo.selo-ponto { min-width: 9px; width: 9px; height: 9px; padding: 0; top: 6px; right: 6px; } @media print { .aurora, .lateral, .topo, .avisos, .filtros, .secao-acoes, .barra-selecao { display: none !important; } body { background: #fff; color: #000; } .conteudo { padding: 0; } .cartao, .tabela-caixa { border-color: #ccc; box-shadow: none; background: #fff; } }