/* ═══════════════════════════════════════════════════════════════════════════ Portal de Aplicações — folha de estilo compartilhada pelo portal e pela tela de login. ⚠️ Este arquivo é PÚBLICO (a CloudFront Function o libera sem sessão): a tela de login precisa dele antes de existir qualquer cookie. Não coloque aqui nada que revele estrutura interna — o que é público é o visual, e só. As cores são as que o portal já usava; nada de identidade nova. ── Temas ────────────────────────────────────────────────────────────────── O tema vive em `data-theme` no , escrito por um script minúsculo no de cada página (antes da pintura, para não piscar branco). Aqui há três blocos e a ordem importa: :root → claro, o padrão @media (prefers-color-scheme) → escuro automático, só quando a pessoa ainda não escolheu (sem data-theme) :root[data-theme="dark"] → escuro escolhido na mão, vence sempre Regra para quem for mexer: nada de `white`/`#fff` solto nas regras. Onde a cor precisa acompanhar o tema use as variáveis — em especial `--mix`, que é o branco das misturas `color-mix()` no claro e a cor do cartão no escuro. ═══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; --aqua: #1BBDD4; --aqua-2: #15A7BD; --teal-d: #0a7d92; --bg: #eef6f8; --ink: #0b2540; --muted: #5b7387; --card: #ffffff; --border: #dbe9ee; --danger: #c92a2a; --ok: #0e9f6e; --warn: #b45309; /* Base das misturas color-mix() e fundo dos campos de formulário. */ --mix: #ffffff; --field: #ffffff; --chip-ink: #0b2540; /* Faixa do topo e fundo da tela de login. */ --hero-1: var(--teal-d); --hero-2: var(--aqua-2); --hero-3: var(--aqua); /* Os dois claros que dão volume à faixa. No escuro precisam quase sumir: luz branca sobre fundo escuro vira névoa cinzenta. */ --glow-1: rgba(255,255,255,.22); --glow-2: rgba(255,255,255,.12); --shadow: rgba(11,37,64,.2); --shadow-strong: rgba(11,37,64,.34); /* Avisos e selos. */ --err-bg: #fdeaea; --err-ink: #8f2020; --err-br: #f5c6c6; --ok-bg: #e7f8f1; --ok-ink: #0a6b4b; --ok-br: #b9e6d4; --warn-bg: #fef4e7; --warn-ink: #8a4a08; --warn-br: #f6dcb8; --tag-admin-bg: #e7f1fd; --tag-admin-ink: #14539a; --tag-user-bg: #eef2f5; --tag-user-ink: #55697d; --tag-viewer-bg: #f1ecfb; --tag-viewer-ink: #5b3a9c; --tag-owner-bg: #fdf3e0; --tag-owner-ink: #8a5a08; --ico-lift: 0%; } /* ── A paleta escura vem do Wisdom Service ─────────────────────────────────── São os mesmos neutros do `index.css` de lá (zinc-900/800/700 + zinc-50/300/ 400), e o app canônico do portal é ele: quem emparelha é o outro app. ⚠️ ZINC PURO, sem tom azulado. Está anotado lá que slate escuro "lia azul" nos outros apps — e a primeira versão deste tema repetiu o erro por outro caminho: um escuro puxado para o teal da marca, que na tela virou verde. A identidade colorida do portal fica no tema CLARO; no escuro a faixa do topo é o mesmo painel da sidebar do Wisdom Service (#0a0c10). A lista aparece duas vezes de propósito: uma para o escuro automático do sistema (só enquanto não houver escolha) e outra para o escuro escolhido no botão, que precisa vencer o automático nos dois sentidos. O que se repete são apenas as variáveis — nenhuma regra de layout é duplicada. Mexeu em uma, mexa na outra. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #18181b; --ink: #fafafa; --muted: #a1a1aa; --card: #27272a; --border: #3f3f46; --mix: #27272a; --field: #18181b; --chip-ink: #fafafa; --hero-1: #0a0c10; --hero-2: #18181b; --hero-3: #27272a; --glow-1: rgba(255,255,255,.07); --glow-2: rgba(255,255,255,.035); --shadow: rgba(0,0,0,.45); --shadow-strong: rgba(0,0,0,.6); --err-bg: #3a1618; --err-ink: #ffb4b4; --err-br: #5e2225; --ok-bg: #0e2f26; --ok-ink: #7ee0bb; --ok-br: #1c5343; --warn-bg: #35240d; --warn-ink: #f2c98a; --warn-br: #5a3d13; --tag-admin-bg: #13314f; --tag-admin-ink: #9dc8f5; --tag-user-bg: #3f3f46; --tag-user-ink: #d4d4d8; --tag-viewer-bg: #2a2145; --tag-viewer-ink: #c3b0ee; --tag-owner-bg: #3a2d10; --tag-owner-ink: #e9c37a; --ico-lift: 35%; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #18181b; --ink: #fafafa; --muted: #a1a1aa; --card: #27272a; --border: #3f3f46; --mix: #27272a; --field: #18181b; --chip-ink: #fafafa; --hero-1: #0a0c10; --hero-2: #18181b; --hero-3: #27272a; --glow-1: rgba(255,255,255,.07); --glow-2: rgba(255,255,255,.035); --shadow: rgba(0,0,0,.45); --shadow-strong: rgba(0,0,0,.6); --err-bg: #3a1618; --err-ink: #ffb4b4; --err-br: #5e2225; --ok-bg: #0e2f26; --ok-ink: #7ee0bb; --ok-br: #1c5343; --warn-bg: #35240d; --warn-ink: #f2c98a; --warn-br: #5a3d13; --tag-admin-bg: #13314f; --tag-admin-ink: #9dc8f5; --tag-user-bg: #3f3f46; --tag-user-ink: #d4d4d8; --tag-viewer-bg: #2a2145; --tag-viewer-ink: #c3b0ee; --tag-owner-bg: #3a2d10; --tag-owner-ink: #e9c37a; --ico-lift: 35%; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; } body { font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; background: var(--bg); color: var(--ink); min-height: 100vh; } /* ── Cabeçalho ───────────────────────────────────────────────────────────── */ .hero { background: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 45%, var(--hero-3) 100%); padding: 48px 20px 70px; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 320px at 10% -10%, var(--glow-1), transparent 60%), radial-gradient(520px 280px at 96% 110%, var(--glow-2), transparent 60%); } .hero-inner { position: relative; } /* Logo oficial — a mesma arte e a mesma medida do header do site: 80px de altura, 64px no celular. Branca com o arco dourado, então só funciona sobre a faixa colorida; nunca sobre cartão claro. O `srcset` no HTML é o do site e existe por um motivo: entregar o PNG de 806px para um slot de 80px faz o navegador reduzir 10:1 num passo só e o arco dourado sai tracejado. Daí as artes de 160 e 240. */ .brand { display: block; margin: 0 auto 16px; width: auto; height: 80px; filter: drop-shadow(0 3px 12px rgba(0,0,0,.22)); } .hero h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -.6px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.12); } .hero p { color: rgba(255,255,255,.9); margin-top: 12px; font-size: 1.05rem; } /* Barra da sessão: quem está logado e o que dá para fazer. */ .topbar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; max-width: 1080px; margin: 0 auto 10px; padding: 0 4px; } .topbar .who { color: rgba(255,255,255,.95); font-size: .9rem; margin-right: auto; } .topbar .who strong { font-weight: 700; } .topbar button { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); color: #fff; padding: 7px 14px; border-radius: 9px; font-size: .86rem; font-weight: 600; cursor: pointer; transition: background .18s ease; } .topbar button:hover { background: rgba(255,255,255,.28); } /* ── Botão de tema ─────────────────────────────────────────────────────────── Fica sempre sobre a faixa colorida, então usa o mesmo vidro dos botões da sessão nos dois temas. Os dois ícones são SVG e moram os dois no HTML; o script só marca qual aparece, em `data-icon`. Foi a saída para não depender de caractere de fonte: no Windows o "☀" cai para um asterisco. */ /* O seletor é `button.theme-toggle`, com o nome do elemento junto, para empatar em especificidade com `.topbar button` logo acima e vencer pela ordem. Só `.theme-toggle` perdia o `padding: 0` para aquela regra, e aí o botão ficava com 6px de espaço interno e o flex espremia o ícone até virar um pontinho. */ button.theme-toggle { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); color: #fff; cursor: pointer; width: 34px; height: 34px; flex: 0 0 34px; padding: 0; border-radius: 9px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease; } button.theme-toggle:hover { background: rgba(255,255,255,.28); } /* `flex-shrink: 0`: sem isso o ícone é a única parte elástica do botão e cede espaço em vez de manter os 17px. */ .theme-toggle svg { width: 17px; height: 17px; flex: 0 0 auto; display: block; } .theme-toggle .i-sun { display: none; } .theme-toggle[data-icon="sun"] .i-moon { display: none; } .theme-toggle[data-icon="sun"] .i-sun { display: block; } /* Na tela de login não há barra de sessão: o botão flutua no canto. */ .auth-shell .theme-toggle { position: absolute; top: 18px; right: 18px; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 56px; } /* ── Cartões das aplicações ──────────────────────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 28px; position: relative; z-index: 2; } a.card { position: relative; display: block; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; text-decoration: none; color: var(--ink); box-shadow: 0 6px 18px -10px var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow: hidden; } a.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--clr, var(--aqua)); transform: scaleY(0); transform-origin: top; transition: transform .22s ease; } a.card::after { content: "→"; position: absolute; top: 18px; right: 18px; color: var(--clr, var(--aqua)); font-size: 1.1rem; font-weight: 700; opacity: 0; transition: opacity .2s ease, transform .2s ease; transform: translateX(-5px); } a.card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -16px var(--shadow-strong); border-color: color-mix(in srgb, var(--clr, var(--aqua)) 40%, var(--border)); } a.card:hover::before { transform: scaleY(1); } a.card:hover::after { opacity: 1; transform: translateX(0); } /* O ícone é um SVG de traço que herda `currentColor` — por isso a cor vai no contêiner, e não no desenho: cada cartão pinta o seu com a cor da própria aplicação, sem uma regra por aplicação. No escuro a cor da marca precisa clarear um pouco, senão azuis e roxos escuros (Contratos, Currículos) somem contra o fundo zinc. */ .card .ico { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--ink) var(--ico-lift), var(--clr, var(--aqua))); background: color-mix(in srgb, var(--clr, var(--aqua)) 15%, var(--mix)); border: 1px solid color-mix(in srgb, var(--clr, var(--aqua)) 22%, var(--mix)); border-radius: 12px; margin-bottom: 14px; } .card .ico svg { width: 23px; height: 23px; display: block; } .card .name { font-size: 1.04rem; font-weight: 700; color: var(--ink); } .card .desc { color: var(--muted); font-size: .84rem; margin-top: 5px; line-height: 1.4; } /* ── Painéis (Minha conta, Usuários) ─────────────────────────────────────── */ .panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px; margin-top: 22px; box-shadow: 0 6px 18px -10px var(--shadow); position: relative; z-index: 2; } .panel h2 { font-size: 1.15rem; margin-bottom: 4px; } .panel .hint { color: var(--muted); font-size: .86rem; line-height: 1.5; } .panel section { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--border); } .panel section:first-of-type { border-top: 0; margin-top: 10px; padding-top: 0; } .panel h3 { font-size: .98rem; margin-bottom: 8px; } /* ── Formulários ─────────────────────────────────────────────────────────── */ label { display: block; font-size: .84rem; font-weight: 600; margin: 12px 0 5px; } input[type=text], input[type=email], input[type=password], select { width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 9px; font-size: .95rem; font-family: inherit; color: var(--ink); background: var(--field); } input:focus, select:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 22%, transparent); } /* Campo de código do autenticador: monoespaçado e espaçado, para conferir os 6 dígitos de relance. */ input.code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 1.5rem; letter-spacing: .5rem; text-align: center; padding: 12px; } .row { display: flex; gap: 12px; flex-wrap: wrap; } .row > * { flex: 1 1 200px; } button.btn { background: var(--aqua-2); color: #fff; border: 0; padding: 11px 20px; border-radius: 9px; font-size: .92rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .18s ease, opacity .18s ease; } button.btn:hover { background: var(--teal-d); } button.btn:disabled { opacity: .55; cursor: not-allowed; } button.btn.ghost { background: transparent; color: var(--aqua-2); border: 1px solid var(--border); } button.btn.ghost:hover { background: var(--bg); color: var(--teal-d); } button.btn.danger { background: var(--danger); } button.btn.danger:hover { background: #a51f1f; } button.btn.small { padding: 6px 12px; font-size: .8rem; border-radius: 7px; } .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } /* ── Avisos ──────────────────────────────────────────────────────────────── */ .msg { padding: 11px 14px; border-radius: 9px; font-size: .88rem; margin-top: 14px; line-height: 1.5; } /* As três cores saem das variáveis de tema: no escuro viram fundo escuro com texto claro, porque pastilha clara acesa no meio da página escura cansa a vista e rouba a atenção que deveria ser do texto do aviso. */ .msg.error { background: var(--err-bg); color: var(--err-ink); border: 1px solid var(--err-br); } .msg.ok { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-br); } .msg.warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-br); } .msg:empty { display: none; } /* ── Tabela de usuários ──────────────────────────────────────────────────── */ .table-scroll { overflow-x: auto; margin-top: 14px; } table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 620px; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } tr:last-child td { border-bottom: 0; } td .row-actions { display: flex; gap: 6px; flex-wrap: wrap; } .tag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; } .tag.admin { background: var(--tag-admin-bg); color: var(--tag-admin-ink); } .tag.user { background: var(--tag-user-bg); color: var(--tag-user-ink); } /* Leitura: cor própria, para não se confundir com "usuário comum" de relance. */ .tag.viewer { background: var(--tag-viewer-bg); color: var(--tag-viewer-ink); } /* Conta protegida: ninguém além dela mesma a altera. */ .tag.owner { background: var(--tag-owner-bg); color: var(--tag-owner-ink); } .tag.on { background: var(--ok-bg); color: var(--ok-ink); } .tag.off { background: var(--err-bg); color: var(--err-ink); } .tag.pending { background: var(--warn-bg); color: var(--warn-ink); } /* ── Seleção de aplicações ─────────────────────────────────────────────────── O quadro em que se marca a que aplicações a pessoa terá acesso. Cada cartão traz a identidade da aplicação (ícone e cor, os mesmos da grade lá em cima), e só abre a configuração — empresa e perfil — depois de marcado: mostrar dois seletores por aplicação o tempo todo daria uma parede de campos vazios. */ .app-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; margin-top: 12px; } .app-pick { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; background: var(--card); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .app-pick.on { border-color: color-mix(in srgb, var(--clr, var(--aqua)) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr, var(--aqua)) 14%, transparent); } .app-pick .head { display: flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; } /* Mesmo ícone da grade lá em cima, clonado pelo `iconeApp` — por isso a cor vai no contêiner, como no cartão: o SVG herda `currentColor`. */ .app-pick .head .ico { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; border-radius: 10px; color: color-mix(in srgb, var(--ink) var(--ico-lift), var(--clr, var(--aqua))); background: color-mix(in srgb, var(--clr, var(--aqua)) 14%, var(--mix)); border: 1px solid color-mix(in srgb, var(--clr, var(--aqua)) 22%, var(--mix)); } .app-pick .head .ico svg { width: 18px; height: 18px; display: block; } .app-pick .head .t { font-weight: 700; font-size: .92rem; line-height: 1.2; } .app-pick .head input[type=checkbox] { width: 19px; height: 19px; margin-left: auto; flex: 0 0 19px; accent-color: var(--clr, var(--aqua)); cursor: pointer; } /* A configuração só existe para a aplicação marcada. */ .app-pick .conf { display: none; margin-top: 4px; } .app-pick.on .conf { display: block; } .app-pick .conf label { margin: 10px 0 4px; font-size: .78rem; color: var(--muted); } .app-pick .conf select { padding: 8px 10px; font-size: .87rem; } .app-pick .nota { font-size: .76rem; color: var(--muted); margin-top: 8px; line-height: 1.45; } .app-pick .nota.aviso { color: var(--warn); } /* Selo do acesso, na tabela de contas. */ .app-chips { display: flex; gap: 5px; flex-wrap: wrap; } .app-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .73rem; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--clr, var(--aqua)) 12%, var(--mix)); color: color-mix(in srgb, var(--clr, var(--aqua)) 62%, var(--chip-ink)); border: 1px solid color-mix(in srgb, var(--clr, var(--aqua)) 26%, var(--mix)); } /* Falha no provisionamento: precisa saltar aos olhos, porque a pessoa acha que tem acesso e não tem. */ .app-chip.err { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-br); } .app-chip.off { background: var(--tag-user-bg); color: var(--tag-user-ink); border-color: var(--border); } /* ── Presença: quando a pessoa entrou pela última vez naquela aplicação ───── O ponto à esquerda do nome é o ESTADO do acesso, e cada estado é um fato diferente — por isso quatro formas distintas, e não "verde/cinza": .now entrou agora há pouco → ponto verde, pulsando (padrão) já entrou alguma vez → ponto na cor da aplicação .never verificado, e NUNCA entrou → ponto vazado .unmet a aplicação não registra acesso→ ponto tracejado `.never` e `.unmet` parecem iguais de longe e dizem coisas opostas: uma é "medimos, não houve"; a outra é "esta aplicação não sabe responder". O tooltip de cada selo escreve isso por extenso — cor nenhuma explica sozinha. ────────────────────────────────────────────────────────────────────────── */ .app-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--clr, var(--aqua)) 70%, var(--chip-ink)); } /* O SVG vem dos cartões do portal, que o desenham em 24px. Dentro do selo ele precisa caber na altura do texto — daí o tamanho fixo aqui, e não lá. */ .app-chip svg { width: 14px; height: 14px; flex: none; } .app-chip.never .dot { background: none; border: 1.5px solid currentColor; opacity: .45; } .app-chip.unmet .dot { background: none; border: 1.5px dashed currentColor; opacity: .4; } /* Sem acesso registrado o selo inteiro recua: a diferença precisa aparecer na varredura da tabela, não só para quem parar o mouse em cima de um ponto de sete pixels. */ .app-chip.never, .app-chip.unmet { opacity: .62; } /* Verde de "entrou agora" é o MESMO em qualquer aplicação, de propósito: aqui a informação é o estado, não de quem é o sistema. */ .app-chip.now { border-color: #16a34a55; } .app-chip.now .dot { background: #16a34a; animation: pulso 2s ease-in-out infinite; } @keyframes pulso { 0%, 100% { box-shadow: 0 0 0 0 #16a34a66; } 50% { box-shadow: 0 0 0 4px #16a34a00; } } /* Quem prefere a tela parada não perde informação: o ponto continua verde. */ @media (prefers-reduced-motion: reduce) { .app-chip.now .dot { animation: none; } } /* Linha de resumo acima da tabela de contas. */ .presence-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 14px; } .presence-bar .hint { margin: 0; } /* ── Legenda ──────────────────────────────────────────────────────────────── Quatro pontinhos numa tabela não se explicam sozinhos, e ninguém deveria ter de descobrir o significado passando o mouse selo a selo. A legenda usa as MESMAS classes dos selos: o que está escrito aqui é literalmente o que a tabela desenha, e não um desenho parecido que pode divergir depois. */ .presence-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; } .presence-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); } .presence-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--aqua) 70%, var(--chip-ink)); } .presence-legend .now .dot { background: #16a34a; } .presence-legend .never .dot { background: none; border: 1.5px solid currentColor; opacity: .6; } .presence-legend .unmet .dot { background: none; border: 1.5px dashed currentColor; opacity: .6; } /* ── A linha de texto sob os selos ────────────────────────────────────────── O que a pessoa quer saber de relance — ONDE a pessoa está, ou esteve por último — fica escrito, não escondido num tooltip. O detalhe por aplicação continua no tooltip de cada selo. */ .presence-line { font-size: .76rem; margin: 7px 0 0; color: var(--muted); } .presence-line.now { color: #16a34a; font-weight: 700; } .presence-line.never { color: var(--err-ink); font-weight: 600; } /* ── "online" ao lado do nome ─────────────────────────────────────────────── O indicador que responde "quem está usando o sistema agora" no lugar onde se procura por uma pessoa: o nome dela. O ponto pulsa; o rótulo escreve. Cor sozinha não informa quem não distingue verde de cinza. */ .user-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; } .live { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #16a34a; background: #16a34a1a; border: 1px solid #16a34a44; } .live i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; animation: pulso 2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .live i { animation: none; } } /* ── Densidade da tabela de contas ────────────────────────────────────────── Dez selos, oito botões e cinco colunas de texto na mesma linha viraram uma parede. Aqui o que é secundário (selos e ações) encolhe, para o que é lido primeiro — nome, situação e presença — ter espaço. */ #users-body td { vertical-align: top; } #users-body .app-chip { padding: 2px 8px; font-size: .70rem; } #users-body .app-chip svg { width: 12px; height: 12px; } #users-body .app-chips { gap: 4px; } /* A coluna das aplicações precisa de largura para os selos ficarem lado a lado: sem isto eles empilham um por linha e a pessoa vira dez linhas de altura. É a 4ª coluna — pessoa, perfil, situação, APLICAÇÕES, ações. */ #users-table th:nth-child(4), #users-body td:nth-child(4) { min-width: 300px; } /* Sem estes dois mínimos o navegador dá à coluna das aplicações tudo o que ela pede e espreme o resto: o e-mail quebrava no meio ("a.t.b.arnaldo@g / mail.com") e "2FA ligado (exigido)" saía em duas linhas. */ #users-table th:nth-child(1), #users-body td:nth-child(1) { min-width: 212px; } #users-table th:nth-child(3), #users-body td:nth-child(3) { min-width: 158px; } /* A coluna "Último acesso (portal)" foi REMOVIDA em 27/08/2026: o selo ONLINE ao lado do nome e a frase sob os selos já respondiam a mesma pergunta, e a coluna extra empurrava os botões de ação para fora da tela. */ .presence-line .off { color: var(--err-ink); } /* ── Pessoa: nome em cima, e-mail embaixo ─────────────────────────────────── Em 07/09/2026 as colunas "E-mail" e "2FA" deixaram de existir: nome e e-mail identificam a mesma pessoa, e o segundo fator é parte da situação da conta. Sete colunas não cabiam na tela — os botões de ação ficavam cortados. */ /* `anywhere` só parte a palavra quando ela realmente não cabe — `break-word` partia o endereço mesmo havendo espaço na linha seguinte. */ .user-mail { font-size: .8rem; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; } .tag-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } /* ── Filtro acima da tabela ─────────────────────────────────────────────── */ .table-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; } .table-tools input[type=search] { flex: 1 1 260px; max-width: 340px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: .9rem; font-family: inherit; color: var(--ink); background: var(--field); } .table-tools input[type=search]:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 22%, transparent); } .table-tools .hint { margin: 0; font-size: .8rem; } tr.oculto { display: none !important; } /* As ações em duas colunas: a mesma quantidade de botões na metade da altura, e a linha da pessoa deixa de ter o tamanho de uma tela. */ #users-body .row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 208px; } #users-body .row-actions .btn { padding: 5px 7px; font-size: .70rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Menu "Mais" ──────────────────────────────────────────────────────────── As ações que mexem em credencial (senha, segundo fator) ou apagam a conta saíram da linha e ficaram um toque adiante. É `
` puro: abre no clique e no toque, fecha com Esc e é anunciado por leitor de tela sem uma linha de JavaScript. O painel é `absolute` para não esticar a linha da tabela ao abrir — uma linha que cresce empurra as de baixo e a pessoa perde o lugar onde estava. */ .acoes-mais { position: relative; grid-column: 1 / -1; } .acoes-mais > summary { display: block; width: 100%; text-align: center; cursor: pointer; list-style: none; padding: 5px 7px; font-size: .70rem; } .acoes-mais > summary::-webkit-details-marker { display: none; } .acoes-mais > summary::after { content: ' ▾'; opacity: .7; } .acoes-mais[open] > summary::after { content: ' ▴'; } .acoes-mais .menu-itens { position: absolute; right: 0; top: calc(100% + 5px); z-index: 30; display: flex; flex-direction: column; gap: 4px; width: 178px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 14px 30px -12px var(--shadow); } .acoes-mais .menu-itens .btn { text-align: left; } /* ── Códigos de recuperação ──────────────────────────────────────────────── */ .codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 14px 0; } .codes span { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 9px; text-align: center; font-size: .95rem; letter-spacing: .06em; } .qr { display: block; margin: 16px auto; width: 200px; height: 200px; border-radius: 10px; } .secret { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; word-break: break-all; color: var(--muted); text-align: center; } footer { text-align: center; color: var(--muted); font-size: .82rem; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); } footer .dot { opacity: .6; margin: 0 8px; } .hidden { display: none !important; } /* ── Caixa central da tela de login ──────────────────────────────────────── */ .auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; position: relative; background: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 45%, var(--hero-3) 100%); } /* No login o logo fica FORA da caixa: a arte é branca e sumiria sobre o cartão claro. Sobre o gradiente ela aparece nos dois temas. */ .auth-shell .brand { height: 80px; margin-bottom: 26px; } .auth-box { background: var(--card); border-radius: 16px; padding: 32px; width: 100%; max-width: 420px; box-shadow: 0 30px 60px -22px rgba(0,0,0,.5); } .auth-box h1 { font-size: 1.35rem; text-align: center; } .auth-box .sub { color: var(--muted); font-size: .88rem; text-align: center; margin-top: 6px; line-height: 1.5; } .auth-box .btn { width: 100%; margin-top: 20px; } .auth-links { display: flex; justify-content: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; } .auth-links a { color: var(--aqua-2); font-size: .84rem; text-decoration: none; cursor: pointer; } .auth-links a:hover { text-decoration: underline; } /* ── Telas menores ───────────────────────────────────────────────────────── */ @media (max-width: 880px) { .hero { padding: 42px 18px 56px; } .hero h1 { font-size: 2.1rem; } .brand { height: 72px; margin-bottom: 14px; } .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media (max-width: 560px) { .hero { padding: 36px 16px 44px; } .hero h1 { font-size: 1.75rem; } .hero p { font-size: .95rem; } .brand { height: 64px; margin-bottom: 12px; } .auth-shell .brand { height: 64px; margin-bottom: 20px; } .wrap { padding: 0 16px 40px; } .grid { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; } .card .ico { width: 40px; height: 40px; font-size: 1.25rem; margin-bottom: 12px; } .topbar { justify-content: center; } .topbar .who { margin-right: 0; width: 100%; text-align: center; margin-bottom: 6px; } .auth-box { padding: 24px; } } /* ═══════════════════════════════════════════════════════════════════════════ CELULAR: a tabela vira uma lista de cartões ═══════════════════════════════════════════════════════════════════════════ Uma tabela de cinco colunas não cabe em 390px de largura, e rolar a tela de lado para ler a linha de uma pessoa é o tipo de coisa que faz ninguém abrir o portal fora do computador. Aqui cada LINHA vira um cartão e cada CÉLULA vira "rótulo em cima, conteúdo embaixo" — o rótulo vem do `data-label` que o script escreve, e é literalmente o texto do cabeçalho que sumiu. Vale para toda tabela marcada com `.stack` (contas e últimos acessos). O HTML continua sendo uma tabela de verdade: no computador nada muda, e o leitor de tela continua tendo linhas e colunas para anunciar. */ @media (max-width: 900px) { /* Sem tabela larga não há o que rolar de lado — e a rolagem horizontal ficaria capturando o gesto de rolar a página. */ .table-scroll { overflow-x: visible; } table.stack { display: block; min-width: 0; font-size: .9rem; } table.stack thead { display: none; } table.stack tbody, table.stack tr, table.stack td { display: block; width: auto; } table.stack tr { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-bottom: 12px; background: var(--card); } table.stack tr:last-child { margin-bottom: 0; } table.stack td { border-bottom: 0; padding: 8px 0; } /* Célula sem conteúdo não vira rótulo órfão: o "Motivo" dos acessos bem sucedidos é vazio de propósito. */ table.stack td:empty { display: none; } table.stack td::before { content: attr(data-label); display: block; margin-bottom: 5px; font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } /* A primeira célula é o título do cartão — o nome da pessoa não precisa de uma etiqueta dizendo "Pessoa" em cima dele. */ table.stack td:first-child { padding-top: 0; } table.stack td:first-child::before { display: none; } table.stack td:last-child { padding-bottom: 0; } #users-body .user-name { font-size: 1rem; } #users-body .app-chip { font-size: .72rem; padding: 3px 9px; } /* A largura mínima da coluna de aplicações não faz sentido sem colunas. */ #users-table th:nth-child(4), #users-body td:nth-child(4) { min-width: 0; } /* Botão de dedo, não de mouse: 4px de altura útil não se acerta no toque. */ #users-body .row-actions { width: auto; gap: 6px; } #users-body .row-actions .btn { padding: 10px 8px; font-size: .78rem; } .acoes-mais > summary { padding: 10px 8px; font-size: .78rem; } /* No cartão o menu abre no fluxo: não há linha de tabela para esticar, e um painel flutuante de largura fixa cairia para fora da tela estreita. */ .acoes-mais .menu-itens { position: static; width: auto; margin-top: 6px; box-shadow: none; background: var(--bg); } .acoes-mais .menu-itens .btn { padding: 10px 12px; font-size: .78rem; } .table-tools input[type=search] { max-width: none; } .panel { padding: 18px 16px; } /* Um cartão de aplicação por linha: dois em 390px espremem o nome e os seletores de empresa e perfil. */ .app-picker { grid-template-columns: 1fr; } } @media (min-width: 1400px) { .wrap { max-width: 1320px; } .grid { grid-template-columns: repeat(4, 1fr); } .topbar { max-width: 1320px; } } @media (prefers-reduced-motion: reduce) { a.card, a.card::before, a.card::after, button.btn { transition: none; } }