/* ========================================================================= TOKENS DE DESIGN — fonte única de verdade (ver referencias/DESIGN-SYSTEM.md). NENHUMA tela deve usar cor/tamanho "cru" (#hex, px soltos). Sempre var(--token). Isto é o que faz o dark mode funcionar no sistema inteiro e mantém tudo leve. ========================================================================= */ :root { /* Marca (fixa nos dois temas) */ --tinta: #141414; /* escuro da marca (topo/login/sidebar) */ /* Texto SOBRE --tinta. Existe porque as telas de autenticação (login, cadeado, trocar senha) põem texto FORA do card branco, direto no fundo escuro da marca — e --tinta é fixo, não acompanha o tema. Usar --suave ali dava contraste 2,45:1 (falha WCAG AA); estes dão 9,14:1 e 15,8:1. Não trocar por token temático. */ --sobre-tinta: #b9b7ab; /* texto secundário sobre o escuro da marca */ --sobre-tinta-forte: #ffffff; /* hover/foco do mesmo texto */ --sobre-tinta-hover-bg: rgba(255, 255, 255, .08); /* realce do hover ali */ --polvo: #f2b705; /* dourado da marca (destaque / primário) */ --polvo-escuro: #b37f00; /* dourado legível sobre claro (links, acentos) */ --coral: #d92d20; /* ação destrutiva */ --verde: #2e9e2b; /* sucesso / ação secundária */ /* Superfícies e texto — neutros QUENTES (escolhidos p/ casar com o dourado) */ --fundo: #f8f8f5; /* fundo da página (g50) */ --card: #ffffff; /* superfície de card/painel/tabela */ --branco-fixo: #fff; /* texto/ícone branco SOBRE cor de marca ou dado do usuário (avatar, badge, chip colorido) — fixo nos 2 temas de propósito */ --card-2: #f2f1ec; /* hover / faixa alternada (g100) */ --borda: #e9e8e1; /* borda padrão (g200) */ --borda-forte: #d7d5ca; /* borda em hover/ênfase (g300) */ --texto: #1a1a14; /* texto primário (g900) */ --suave: #565549; /* texto secundário / rótulos (g600) */ --texto-3: #78766b; /* texto terciário / hints (g500) */ --ativo-bg: #fdf7e6; /* fundo do item de menu ativo (tinta dourada) */ /* Status (fundo / texto / borda) — suaves, estilo Untitled UI */ --ok-bg: #e9f6ec; --ok-tx: #137a3a; --ok-bd: #a7e0b8; --warn-bg: #fdf3e3; --warn-tx: #a5610a; --warn-bd: #f3d29a; --err-bg: #fdecea; --err-tx: #b3392c; --err-bd: #f4c2bc; --info-bg: #eef2f8; --info-tx: #3a5478; --info-bd: #cdd8e8; /* Escala de tipografia (Untitled UI) — base 14px (leveza). px, não rem. */ --fs-display-sm: 30px; /* 30/38 */ --fs-display-xs: 24px; /* 24/32 — títulos de página (h1) */ --fs-xl: 20px; /* 20/30 — h2 de seção */ --fs-lg: 18px; /* 18/28 */ --fs-md: 16px; /* 16/24 */ --fs-sm: 14px; /* 14/20 — CORPO (workhorse) */ --fs-xs: 12px; /* 12/18 — rótulos, hints */ /* Espaçamento (base 4px), cantos e sombras (sutis) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --raio-sm: 6px; --raio-md: 8px; --raio-lg: 10px; --raio-xl: 12px; --sombra-xs: 0 1px 2px rgba(16,24,40,.05); --sombra-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04); --sombra-md: 0 4px 8px -2px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.04); --sombra-lg: 0 12px 20px -4px rgba(16,24,40,.10), 0 4px 8px -4px rgba(16,24,40,.05); --anel: color-mix(in srgb, var(--polvo) 45%, transparent); /* foco */ } /* --------- TEMA ESCURO: só troca os valores dos tokens semânticos --------- */ :root[data-theme="dark"] { --polvo-escuro: #f2b705; /* dourado legível sobre fundo escuro */ --fundo: #0f0f0c; --card: #17170f; --card-2: #201f16; --borda: #2a2920; --borda-forte: #3a382b; --texto: #ececdf; --suave: #a6a498; --texto-3: #85847a; --ativo-bg: #2a2410; --ok-bg: #122a19; --ok-tx: #5cd18a; --ok-bd: #1f5233; --warn-bg: #2a2210; --warn-tx: #f0bf6a; --warn-bd: #544216; --err-bg: #2c1512; --err-tx: #f2a79c; --err-bd: #552420; --info-bg: #161f2c; --info-tx: #8fb0d8; --info-bd: #2c3c52; --sombra-xs: 0 1px 2px rgba(0,0,0,.4); --sombra-sm: 0 1px 3px rgba(0,0,0,.5); --sombra-md: 0 4px 8px rgba(0,0,0,.5); --sombra-lg: 0 12px 24px rgba(0,0,0,.6); } :root[data-theme="dark"] body { color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--fundo); color: var(--texto); line-height: 1.45; font-size: var(--fs-sm); /* 14px base — leveza (Untitled UI application UI) */ } a { color: var(--polvo-escuro); text-decoration: none; } a:hover { text-decoration: underline; } .logo-mark { width: 26px; height: 26px; display: block; } .logo-mark-grande { width: 46px; height: 46px; display: block; margin: 0 auto 6px; } /* ---- Sidebar (VibeUX: sidebar para 4+ itens; Untitled UI: fundo claro, borda sutil) ---- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 232px; z-index: 100; background: var(--card); border-right: 1px solid var(--borda); display: flex; flex-direction: column; } /* Bloco da marca escuro: eco do login e da identidade Uni.Destrava, flat */ .sidebar-marca { background: var(--tinta); color: #fff; font-weight: 700; font-size: 1.12rem; letter-spacing: .3px; display: flex; align-items: center; gap: 9px; padding: 15px 18px; flex: 0 0 auto; } .sidebar-marca span { color: var(--polvo); } /* O texto da marca é um span próprio (pra sumir no trilho); ele fica branco, só o "pus" interno é dourado */ .sidebar-marca .marca-texto { color: #fff; } /* Botão recolher/expandir: ícone de painel na borda superior, ao lado da marca (padrão Untitled UI / Notion / Linear — se reconhece sem ler nada) */ .sb-alternar { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: none; color: rgba(255,255,255,.55); cursor: pointer; } .sb-alternar:hover { background: rgba(255,255,255,.14); color: #fff; } .sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 10px; } .sidebar-rodape { flex: 0 0 auto; border-top: 1px solid var(--borda); padding: 6px 10px 12px; } /* Rótulo de grupo: pequeno, maiúsculo, discreto (600 — nada de negrito pesado) */ .menu-grupo { font-size: .67rem; text-transform: uppercase; letter-spacing: .7px; color: #98a2b3; font-weight: 600; margin: 16px 10px 4px; } .sidebar-rodape .menu-grupo { margin-top: 8px; } .menu-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 13px; margin: 1px 0; border-radius: 8px; color: var(--texto); font-size: .9rem; font-weight: 500; line-height: 1.3; } .menu-item:hover { background: var(--card-2); text-decoration: none; } .menu-item .mi-ico { flex: 0 0 18px; color: var(--suave); } .menu-item:hover .mi-ico { color: var(--texto); } .mi-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Item ativo sempre destacado (VibeUX): fundo dourado-claro + barra à esquerda */ .menu-item.ativo { background: var(--ativo-bg); color: var(--tinta); font-weight: 600; } .menu-item.ativo .mi-ico { color: var(--polvo-escuro); } .menu-item.ativo::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--polvo); } .menu-item.sair, .menu-item.sair .mi-ico { color: var(--coral); } .menu-item.sair:hover { background: #fde8e6; } .sair-nome { margin-left: auto; font-size: .74rem; font-weight: 500; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92px; } /* Badge de pendência no menu (nº de conversas não lidas) */ .badge-menu { background: var(--polvo); color: #141414; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 20px; vertical-align: 2px; } .menu-item .badge-menu { margin-left: auto; vertical-align: 0; } /* Selo "novo" no menu: tela recém-lançada (some sozinho após DIAS_MOSTRAR_NOVO). */ .mi-novo { margin-left: auto; background: var(--verde); color: #fff; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 20px; } html.sb-mini .menu-item .mi-novo { display: none; } /* Conteúdo ao lado da sidebar; min-width:0 deixa filhos largos (kanban) rolarem por dentro. position:relative ancora o selo de módulo no canto superior direito. */ .conteudo { min-height: 100vh; position: relative; } /* Margem de página (MD3: 24-40dp). TODA tela ganha respiro nas laterais/topo — antes só quem usava .container tinha padding, então as telas novas (aquisição, públicos, páginas, recuperação, destinos) ficavam coladas na sidebar/topo. */ .conteudo.com-sidebar { margin-left: 232px; min-width: 0; padding: 36px 40px 56px; } /* Telas de app em tela cheia (Inbox) não levam a margem de página. */ .conteudo.full-bleed { padding: 0; } /* Topo mobile + véu do overlay (só aparecem abaixo de 900px) */ .topo-mobile { display: none; } .veu { display: none; } @media (max-width: 900px) { .topo-mobile { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 90; background: var(--tinta); color: #fff; padding: 10px 14px; } .topo-mobile .marca-mini { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; } .topo-mobile .marca-mini span { color: var(--polvo); } .btn-menu { background: none; border: 0; color: #fff; padding: 4px; cursor: pointer; display: flex; } .conteudo.com-sidebar { margin-left: 0; padding: 20px 16px 40px; } /* MD3 compact: 16dp lateral */ .conteudo.full-bleed { padding: 0; } .sidebar { transform: translateX(-100%); transition: transform .18s ease; } body.menu-aberto .sidebar { transform: none; box-shadow: 0 0 44px rgba(0,0,0,.3); } body.menu-aberto .veu { display: block; position: fixed; inset: 0; z-index: 95; background: rgba(20,20,20,.45); } } /* ═══════════════════════════════════════════════════════════════════════ COMPONENTES (Fase 5) — as classes que os macros de _componentes.html usam. Global e semântico: toda tela nova herda daqui (nunca CSS por tela). ═══════════════════════════════════════════════════════════════════════ */ .ui-cabecalho { margin-bottom: var(--sp-5); } .ui-cabecalho h1 { margin: 0; } .ui-cabecalho .sub { margin: var(--sp-1) 0 0; } /* Variação Δ% (promovido do vendas/financeiro pra global — dedupe) */ .d-badge { font-size: var(--fs-xs); font-weight: 600; margin-left: 6px; vertical-align: 1px; } .d-up { color: var(--ok-tx); } .d-down { color: var(--err-tx); } .d-flat { color: var(--suave); } /* Aviso inline (faixa no topo — chip caído, pendência). tipo = err|warn|ok|info */ .ui-aviso { display: block; margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--raio-lg); font-size: var(--fs-sm); text-decoration: none; border: 1px solid var(--info-bd); background: var(--info-bg); color: var(--info-tx); } a.ui-aviso:hover { border-color: var(--borda-forte); } .ui-aviso.err { background: var(--err-bg); border-color: var(--err-bd); color: var(--err-tx); } .ui-aviso.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-tx); } .ui-aviso.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-tx); } /* Estado vazio (convite pra agir) */ .ui-vazio { text-align: center; padding: var(--sp-8) var(--sp-6); border: 1px dashed var(--borda-forte); border-radius: var(--raio-xl); color: var(--suave); } .ui-vazio-tit { font-weight: 600; color: var(--texto); } .ui-vazio-txt { font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-4); } .ui-vazio .btn { width: auto; margin: 0; } /* Cabeçalho de seção com ação à direita */ .ui-secao-acao { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-2); } .ui-secao-acao .btn { width: auto; margin: 0; } /* (?) com tooltip no hover/foco — explica sem poluir (AJ-1) */ /* Sigla de produto que revela o nome no hover (macro ui.sigla_produto, #35). O tracejado é o único sinal de que há informação escondida ali — sem ele o usuário não descobre que pode passar o mouse. Só entra quando existe nome de verdade pra mostrar (a macro decide). */ .ui-sigla { border-bottom: 1px dotted var(--borda-forte); cursor: help; } .ui-ajuda { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--borda-forte); color: var(--suave); font-size: 10px; font-weight: 700; cursor: help; position: relative; vertical-align: 1px; margin-left: 4px; } .ui-ajuda::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px; background: var(--tinta); color: #fff; font-size: var(--fs-xs); font-weight: 400; line-height: 1.4; text-align: left; padding: 8px 10px; border-radius: var(--raio-md); box-shadow: var(--sombra-lg); opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 1000; pointer-events: none; } /* Bug (Madson 2026-07-25): a dica da (?) ficava ATRÁS do painel de cima. Elevar o z-index da dica e, no hover/foco, elevar o próprio (?) faz o contexto de empilhamento dele vencer os painéis vizinhos. */ .ui-ajuda:hover, .ui-ajuda:focus, .ui-ajuda:focus-within { z-index: 1000; } .ui-ajuda:hover::after, .ui-ajuda:focus::after { opacity: 1; visibility: visible; } /* ── Sininho de notificações (NT-2): flutua no canto superior direito ── */ .sino-wrap { position: fixed; top: 14px; right: 18px; z-index: 120; } .sino-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 1px solid var(--borda); color: var(--suave); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sombra-sm); transition: background .12s, border-color .12s; } .sino-btn:hover { background: var(--card-2); border-color: var(--borda-forte); color: var(--texto); } .sino-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 20px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--card); } .sino-painel { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 90vw; background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-lg); overflow: hidden; } .sino-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--borda); } .sino-topo strong { font-size: var(--fs-sm); color: var(--texto); } .sino-lertodas { background: none; border: 0; color: var(--polvo-escuro); font-size: var(--fs-xs); cursor: pointer; padding: 2px 4px; } .sino-lertodas:hover { text-decoration: underline; } .sino-lista { max-height: 360px; overflow-y: auto; } .sino-item { display: block; padding: 11px 14px; border-bottom: 1px solid var(--borda); text-decoration: none; color: var(--texto); transition: background .1s; } .sino-item:hover { background: var(--card-2); } .sino-item.nao-lida { background: var(--ativo-bg); } .sino-item.nao-lida:hover { background: color-mix(in srgb, var(--ativo-bg) 70%, var(--card-2)); } .sino-item-titulo { display: block; font-size: var(--fs-sm); font-weight: 600; } .sino-item-detalhe { display: block; font-size: var(--fs-xs); color: var(--suave); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sino-item-quando { display: block; font-size: 11px; color: var(--texto-3); margin-top: 3px; } .sino-vazio { padding: 24px 14px; text-align: center; color: var(--texto-3); font-size: var(--fs-sm); } .sino-rodape { display: block; padding: 11px 14px; text-align: center; font-size: var(--fs-xs); color: var(--polvo-escuro); text-decoration: none; border-top: 1px solid var(--borda); } .sino-rodape:hover { background: var(--card-2); } @media (max-width: 900px) { /* no mobile o topo escuro ocupa a direita; desce o sino um pouco e clareia */ .sino-wrap { top: 9px; right: 12px; } .sino-btn { width: 36px; height: 36px; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; } .sino-btn:hover { background: rgba(255,255,255,.24); color: #fff; } .sino-badge { border-color: var(--tinta); } } /* .container agora só CENTRALIZA e limita a largura (MD3: o corpo cresce até um teto e depois só a margem aumenta). O respiro vem do padding de .conteudo. */ .container { max-width: 960px; margin: 0 auto; padding: 0; } /* Tipografia leve (Untitled UI): títulos 600 com tracking justo, nada de negrito pesado */ h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; } h2, h3 { font-weight: 600; } b, strong { font-weight: 600; } .sub { color: var(--suave); margin-bottom: 26px; font-size: .9rem; } /* Títulos globais (Untitled UI) — título de página 24/600, seção 20/600 */ h1 { font-size: var(--fs-display-xs); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; color: var(--texto); } h2 { font-size: var(--fs-xl); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--texto); } h3 { font-size: var(--fs-md); line-height: 1.4; font-weight: 600; color: var(--texto); } .sub { color: var(--suave); font-size: var(--fs-sm); margin: 6px 0 20px; } /* Cards de funcionalidade */ .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio-xl); padding: 20px; box-shadow: var(--sombra-xs); transition: border-color .12s, box-shadow .12s; } /* Hover leve (Untitled UI): sombra rasa — sem "pular" */ .card:hover { box-shadow: var(--sombra-sm); } .card .modulo { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--polvo-escuro); font-weight: 600; } .card h3 { font-size: var(--fs-md); margin: 6px 0 4px; } .card p { font-size: var(--fs-sm); color: var(--suave); } /* Ação do card: link discreto com seta (terciário) — a tela não vira um mar de botões */ .card-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: .84rem; font-weight: 600; color: var(--polvo-escuro); } .card-link svg { transition: transform .12s ease; } .card:hover .card-link svg { transform: translateX(2px); } /* ---- KPIs do painel (Untitled UI: número grande e FINO, rótulo pequeno acima, muito respiro — nada de negrito pesado nem borda gritando) ---- */ .kpi-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 16px; margin: 4px 0 36px; } .kpi { display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--borda); border-radius: 12px; padding: 20px; color: inherit; transition: border-color .12s, box-shadow .12s; } .kpi { box-shadow: var(--sombra-xs); } .kpi:hover { text-decoration: none; box-shadow: var(--sombra-sm); } .kpi-rotulo { font-size: var(--fs-sm); font-weight: 500; color: var(--suave); } .kpi-numero { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--texto); font-variant-numeric: tabular-nums; } .kpi-numero.kpi-alerta { color: var(--coral); } .kpi-desc { font-size: var(--fs-xs); color: var(--suave); line-height: 1.45; } /* Rótulo de seção do painel: separa os KPIs da grade de funcionalidades */ .secao-rotulo { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; color: var(--suave); margin: 0 0 12px; } /* Login */ .login-tela { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--tinta); } .login-caixa { background: #fff; padding: 34px 30px; border-radius: 16px; width: 100%; max-width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,.25); } .login-caixa .logo { text-align: center; font-size: 1.8rem; font-weight: 800; margin-bottom: 4px; color: var(--tinta); } .login-caixa .logo span { color: var(--polvo); } .login-caixa .tag { text-align: center; color: var(--suave); font-size: .85rem; margin-bottom: 22px; } /* ---- Rótulos e campos (Untitled UI) ---- */ label { display: block; font-size: var(--fs-sm); color: var(--texto); margin: 12px 0 4px; font-weight: 500; } .hint { font-size: var(--fs-xs); color: var(--texto-3); } .field { display: flex; flex-direction: column; gap: 6px; } .field label { margin: 0; } input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=search], input[type=time], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio-md); font-size: var(--fs-sm); font-family: inherit; color: var(--texto); background: var(--card); box-shadow: var(--sombra-xs); transition: border-color .12s, box-shadow .12s; } textarea { line-height: var(--lh-sm, 1.45); min-height: 84px; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--texto-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--polvo); box-shadow: 0 0 0 4px var(--anel); } /* ---- Botões ---- */ .btn { width: 100%; margin-top: 18px; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--raio-md); background: var(--polvo); color: var(--tinta); font-weight: 600; font-size: var(--fs-sm); font-family: inherit; cursor: pointer; box-shadow: var(--sombra-xs); transition: background .12s, box-shadow .12s, border-color .12s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; } .btn:hover { background: #e0a800; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--anel); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn svg { width: 16px; height: 16px; } .btn-mini, .btn-sm { width: auto; margin: 0; padding: 8px 12px; font-size: var(--fs-xs); } /* Secundário: superfície + borda */ .btn-sec { background: var(--card); color: var(--texto); border-color: var(--borda-forte); } .btn-sec:hover { background: var(--card-2); } /* Terciário: fantasma */ .btn-ter { background: transparent; color: var(--suave); box-shadow: none; border-color: transparent; } .btn-ter:hover { background: var(--card-2); color: var(--texto); } /* Destrutivo */ .btn-coral { background: var(--coral); color: #fff; } .btn-coral:hover { background: #b42318; } /* Botão-ícone (ações em lista: editar/desligar/excluir) */ .iconbtn { width: 32px; height: 32px; padding: 0; margin: 0; display: inline-grid; place-items: center; border-radius: var(--raio-md); border: 1px solid var(--borda); background: var(--card); color: var(--suave); cursor: pointer; box-shadow: var(--sombra-xs); transition: background .12s, color .12s, border-color .12s; } .iconbtn:hover { background: var(--card-2); color: var(--texto); } .iconbtn.danger:hover { color: var(--err-tx); border-color: var(--err-bd); background: var(--err-bg); } .iconbtn svg { width: 16px; height: 16px; } .erro { background: var(--err-bg); color: var(--err-tx); border: 1px solid var(--err-bd); padding: 9px 12px; border-radius: var(--raio-md); font-size: var(--fs-sm); margin-bottom: 8px; } /* ---- Tabelas (Untitled UI) ---- */ table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--raio-xl); overflow: hidden; border: 1px solid var(--borda); box-shadow: var(--sombra-xs); } /* TRILHO DE ROLAGEM DA TABELA (Madson #19: "no widescreen com meia tela, corta"). A causa era o `overflow: hidden` da regra acima — ele existe pro canto arredondado não vazar, mas quando a tabela não cabe ele CORTA a coluna em vez de deixar rolar, e a informação simplesmente some da tela sem aviso nenhum. Aqui a moldura (borda, raio, sombra) passa pro trilho e o trilho rola de lado; a tabela por dentro fica sem moldura e livre pra crescer. `min-width: 100%` mantém ela ocupando a largura toda quando cabe — ou seja, tabela pequena continua igual, nada de barra de rolagem que não precisa existir. O trilho é aplicado sozinho pelo `envolverTabelas()` do base.html: não dá pra pedir pra 46 telas lembrarem de envolver a tabela na mão. */ .tab-rol { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio-xl); box-shadow: var(--sombra-xs); } .tab-rol > table { width: auto; min-width: 100%; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } /* A linha de baixo já é a borda do trilho — sem isso fica borda dupla no rodapé. */ .tab-rol > table tr:last-child td { border-bottom: 0; } th, td { text-align: left; padding: 12px 16px; font-size: var(--fs-sm); border-bottom: 1px solid var(--borda); } th { background: var(--card-2); color: var(--suave); font-size: var(--fs-xs); font-weight: 600; text-transform: none; letter-spacing: normal; } td { line-height: 1.5; } tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--card-2); } .num { font-variant-numeric: tabular-nums; } .tag-papel { font-size: var(--fs-xs); padding: 2px 9px; border-radius: 999px; font-weight: 500; } .tag-admin { background: var(--ativo-bg); color: var(--polvo-escuro); } .tag-suporte { background: var(--card-2); color: var(--suave); } /* ---- Pílulas / badges de status ---- */ .pilula { display: inline-flex; align-items: center; font-size: var(--fs-xs); padding: 2px 9px; border-radius: 999px; font-weight: 500; border: 1px solid transparent; } .on { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-bd); } .off { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-bd); } .badge { font-size: var(--fs-xs); padding: 2px 9px; border-radius: 999px; font-weight: 500; text-transform: none; letter-spacing: normal; } .badge-pronto { background: var(--ok-bg); color: var(--ok-tx); border: 1px solid var(--ok-bd); } .badge-breve { background: var(--card-2); color: var(--suave); border: 1px solid var(--borda); } .card-off { opacity: .62; } .painel { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio-xl); padding: 20px 24px; margin-top: 18px; box-shadow: var(--sombra-xs); } .painel h2 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 12px; } .linha-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; } .linha-form > div { flex: 1; min-width: 140px; } .check-linha { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--fs-sm); } .check-linha input { width: auto; } .aviso { background: var(--info-bg); border: 1px solid var(--info-bd); color: var(--info-tx); padding: 10px 14px; border-radius: var(--raio-md); font-size: var(--fs-sm); margin-bottom: 14px; } /* ---- Grupos colapsáveis da sidebar (clique no rótulo; estado por grupo em localStorage) ---- */ /* O rótulo vira botão mas mantém o visual de .menu-grupo; só ganha o chevron e a área de clique */ button.grupo-rotulo { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: calc(100% - 20px); background: none; border: 0; padding: 0; font-family: inherit; text-align: left; cursor: pointer; } button.grupo-rotulo:hover, button.grupo-rotulo:hover .chev { color: var(--texto); } .grupo-rotulo .chev { flex: 0 0 12px; color: var(--suave); transition: transform .15s ease; } /* Grupo fechado: chevron aponta pro lado e os itens somem (classe g-*-off no ) */ /* ⚠️ Um par de seletores por grupo do menu. Grupo novo em base.html (a lista GRUPOS do script) precisa entrar NAS DUAS listas abaixo, senão ele nunca fecha. */ html.g-conversas-off .grupo-rotulo[data-grupo="conversas"] .chev, html.g-atendimento-off .grupo-rotulo[data-grupo="atendimento"] .chev, html.g-whatsapp-off .grupo-rotulo[data-grupo="whatsapp"] .chev, html.g-crescimento-off .grupo-rotulo[data-grupo="crescimento"] .chev, html.g-relatorios-off .grupo-rotulo[data-grupo="relatorios"] .chev, html.g-biblioteca-off .grupo-rotulo[data-grupo="biblioteca"] .chev, html.g-financeiro-off .grupo-rotulo[data-grupo="financeiro"] .chev, html.g-entrega-off .grupo-rotulo[data-grupo="entrega"] .chev, html.g-importar-off .grupo-rotulo[data-grupo="importar"] .chev, html.g-config-off .grupo-rotulo[data-grupo="config"] .chev { transform: rotate(-90deg); } html.g-conversas-off .grupo-itens[data-grupo="conversas"], html.g-atendimento-off .grupo-itens[data-grupo="atendimento"], html.g-whatsapp-off .grupo-itens[data-grupo="whatsapp"], html.g-crescimento-off .grupo-itens[data-grupo="crescimento"], html.g-relatorios-off .grupo-itens[data-grupo="relatorios"], html.g-biblioteca-off .grupo-itens[data-grupo="biblioteca"], html.g-financeiro-off .grupo-itens[data-grupo="financeiro"], html.g-entrega-off .grupo-itens[data-grupo="entrega"], html.g-importar-off .grupo-itens[data-grupo="importar"], html.g-config-off .grupo-itens[data-grupo="config"] { display: none; } /* ---- Modo trilho (sb-mini no ): sidebar de 56px só com ícones — desktop apenas; no celular a sidebar segue como overlay completo ---- */ @media (min-width: 901px) { .sidebar { transition: width .18s ease; } .conteudo.com-sidebar { transition: margin-left .18s ease; } html.sb-mini .sidebar { width: 56px; } html.sb-mini .conteudo.com-sidebar { margin-left: 56px; } /* No trilho a marca vira coluna: logo em cima, botão de expandir logo abaixo — o botão continua no MESMO canto de sempre (não some, não muda de lugar) */ html.sb-mini .sidebar-marca { flex-direction: column; gap: 8px; padding: 12px 0 10px; } html.sb-mini .sb-alternar { margin-left: 0; } html.sb-mini .marca-texto { display: none; } html.sb-mini .sidebar-nav { padding: 12px 6px; } html.sb-mini .sidebar-rodape { padding: 6px 6px 8px; } /* Some texto e rótulos; nomes seguem acessíveis pelo title (tooltip nativo) */ html.sb-mini .mi-rotulo, html.sb-mini .sair-nome, html.sb-mini .grupo-rotulo { display: none; } /* No trilho os grupos ficam sempre "expandidos" (só os ícones); vence o g-*-off por especificidade */ html.sb-mini .sidebar .grupo-itens[data-grupo] { display: block; } html.sb-mini .menu-item { justify-content: center; padding: 9px 0; } /* Badge de não lidas vira pontinho dourado sobre o ícone do Inbox */ html.sb-mini .menu-item .badge-menu { position: absolute; top: 4px; right: 12px; margin: 0; width: 10px; height: 10px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; overflow: hidden; border: 2px solid var(--card); } } @media (max-width: 900px) { /* No celular o menu é overlay: recolher em trilho não se aplica */ .sb-alternar { display: none; } } /* ---- Selo de módulo: sobrescrita ACIMA do h1, no fluxo da página. ---- ERA uma pílula com `position:absolute; top:14px; right:72px`, flutuando no canto superior direito. O dono cobrou a mudança de lugar VÁRIAS VEZES e as correções anteriores só mexeram em espaçamento — por isso nunca resolveram. A causa é geométrica, não de respiro: o `
` tem 36px de padding no topo, então o selo ocupava a faixa y≈14–35px e o `

` começava em y=36. O selo ficava por cima da linha do título, e essa linha termina, à direita, justamente na AÇÃO PRIMÁRIA da tela ("Novo setor", "Adicionar domínio"...). Os dois disputavam o mesmo canto. Aumentar margem só empurrava a colisão. Agora ele é uma sobrescrita em fluxo, à esquerda, logo acima do h1: é contexto de navegação, e contexto pertence junto do título, não no canto reservado à ação. Como é o primeiro elemento em fluxo do `
`, isso vale automaticamente para TODAS as telas que têm selo — não só as três em que o problema foi relatado. O `@media (max-width:900px) { display:none }` saiu junto: ele existia porque a pílula flutuante brigava com o sino no celular. Em fluxo não briga com nada, e o contexto passa a aparecer também no celular, onde antes simplesmente sumia. Sem `position`, sem `z-index`, sem `pointer-events`, sem fundo e sem borda — nada disso fazia sentido fora do modo flutuante. (27/07/2026) */ .selo-modulo { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--suave); white-space: nowrap; margin: 0 0 var(--sp-1); } /* ---- Rodapé da sidebar enxuto: um único item "Configurações" (engrenagem) que expande os itens administrativos, + "Sair". Fechado por padrão (Krug: progressive disclosure — o eventual fica escondido até precisar). ---- */ button.menu-item.config-toggle { width: 100%; background: none; border: 0; font-family: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; } .menu-item.config-toggle .chev { margin-left: auto; flex: 0 0 12px; color: var(--suave); transition: transform .15s ease; } html.g-config-off .menu-item.config-toggle[data-grupo="config"] .chev { transform: rotate(-90deg); } /* Itens internos levemente recuados: lê-se como "dentro de Configurações" */ .grupo-itens.grupo-config .menu-item { padding-left: 24px; } @media (min-width: 901px) { /* No trilho (sb-mini) o toggle segue visível como ícone e continua mandando: este seletor (2 classes) vence o "grupo-itens sempre visíveis" do modo mini */ html.sb-mini .menu-item.config-toggle { justify-content: center; padding: 9px 0; } html.sb-mini .menu-item.config-toggle .chev { display: none; } html.sb-mini.g-config-off .sidebar .grupo-itens[data-grupo="config"] { display: none; } html.sb-mini .grupo-itens.grupo-config .menu-item { padding-left: 0; } } /* ==================== MODAL / POP-UP reutilizável ==================== Uso: um