/* * EXP Design System — Variáveis Canônicas de Identidade Visual * Versão: 1.0 — Maio 2026 * * Como usar: * Importar no de cada módulo, antes dos estilos locais: * * * Esta folha não altera nenhum estilo existente. * Ela apenas define variáveis CSS disponíveis para uso gradual. */ :root { /* ───────────────────────────────────────── NEUTROS Cores de estrutura: texto, fundo, borda ───────────────────────────────────────── */ --grafite: #141414; /* texto principal, fundos escuros */ --cinza: #D0CFC9; /* bordas, divisores principais */ --cinza2: #ECEAE4; /* divisores internos, fundos alternados, linhas de tabela */ --branco: #FFFFFF; /* fundo de superfície pura */ --off: #F7F6F3; /* fundo de página, hover neutro */ /* ───────────────────────────────────────── ACENTOS — IDENTIDADE EXP Quatro cores da paleta oficial da marca ───────────────────────────────────────── */ --verde: #3E7858; /* natural, ativo, institucional */ --verde-hover: #2D9E6B; /* hover/active sobre --verde */ --azul: #4A72B5; /* informação, navegação, neutro-frio */ --ouro: #C49A27; /* valor, destaque, atenção quente */ --terracota: #B85638; /* crítico, alerta forte, remoção */ --roxo: #6B4FA0; /* identidade: contatos, financeiro */ /* ───────────────────────────────────────── SEMÂNTICA DE ESTADO Apelidos com significado funcional. Usar --sucesso em vez de --verde quando o contexto for de estado, não de marca. ───────────────────────────────────────── */ --sucesso: var(--verde); /* concluído, aprovado, ativo */ --info: var(--azul); /* em andamento, informativo, link */ --atencao: var(--ouro); /* pendente, aguardando, alerta leve */ --critico: var(--terracota); /* erro, bloqueado, removido, urgente */ /* ───────────────────────────────────────── SUPERFÍCIES SUAVES Mesma cor com baixa opacidade. Usar em: hover de linha, fundo de badge, fundo de card com acento sutil. ───────────────────────────────────────── */ --verde-soft: rgba(62, 120, 88, 0.08); --azul-soft: rgba(74, 114, 181, 0.08); --ouro-soft: rgba(196, 154, 39, 0.08); --terracota-soft: rgba(184, 86, 56, 0.08); --roxo-soft: rgba(107, 79, 160, 0.10); /* Fundos sólidos suaves — para badges, pills, fundo de linha colorida */ --verde-bg: #EAF5EE; --azul-bg: #EAF0FB; --ouro-bg: #FBF3E8; --terracota-bg: #FBF0EE; --roxo-bg: #F3EFFE; /* Aliases curtos — compatibilidade com módulos */ --az-bg: var(--azul-bg); --am-bg: var(--ouro-bg); --tc-bg: var(--terracota-bg); --verde-l: var(--verde-hover); /* ───────────────────────────────────────── TIPOGRAFIA ───────────────────────────────────────── */ --font-ui: 'Raleway', sans-serif; --font-mono: 'DM Mono', monospace; /* Escala de tamanhos */ --text-label: 8px; /* labels de campo, badges, cabeçalhos de tabela */ --text-body: 12px; /* corpo de texto padrão */ --text-sub: 10px; /* texto secundário, datas, metadados */ --text-title: 13px; /* títulos de seção */ /* Pesos */ --weight-label: 700; --weight-semibold: 600; --weight-body: 400; --weight-light: 300; /* Espaçamento de label */ --label-spacing: 0.06em; /* ───────────────────────────────────────── FORMA — BORDAS E RAIOS Resolve inconsistência entre módulos (modal 8px vs 10px, etc.) ───────────────────────────────────────── */ --radius-shell: 14px; /* cards de módulo e nav lateral */ --radius-card: 8px; /* cards internos, modais, painéis flutuantes */ --radius-modal: 8px; --radius-input: 6px; --radius-btn: 6px; --radius-badge: 4px; --radius-tag: 3px; /* ───────────────────────────────────────── OVERLAY — FUNDO DE MODAL Padrão único para todos os módulos ───────────────────────────────────────── */ --overlay-bg: rgba(0, 0, 0, 0.40); /* ───────────────────────────────────────── SOMBRAS ───────────────────────────────────────── */ --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08); --shadow-modal: 0 4px 24px rgba(0, 0, 0, 0.14); --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.10); /* ───────────────────────────────────────── ESPAÇAMENTO BASE ───────────────────────────────────────── */ --gap-xs: 4px; --gap-sm: 8px; --gap-md: 16px; --gap-lg: 24px; --gap-xl: 32px; --nav-height: 46px; /* ───────────────────────────────────────── TRANSIÇÕES Usar em hover, foco e mudanças de estado ───────────────────────────────────────── */ --transition-fast: 0.15s ease; --transition-normal: 0.22s ease; --transition-slow: 0.35s ease; /* ───────────────────────────────────────── GRADE DE FUNDO Opacidade da grade de linhas no body::before. Usar: opacity: var(--bg-grid-opacity) ───────────────────────────────────────── */ --bg-grid-opacity: 0.45; --nav-active: var(--grafite); /* Foco de input — cada módulo sobrescreve com sua cor de acento */ --mod-focus: var(--azul); --mod-focus-soft: var(--azul-soft); } /* ═══════════════════════════════════════════ DARK MODE Ativado via atributo no elemento raiz: document.documentElement.setAttribute('data-theme','dark') Sobrescreve apenas os tokens que mudam. Tipografia, forma, espaçamento — inalterados. ═══════════════════════════════════════════ */ [data-theme="dark"] { /* Neutros invertidos */ --grafite: #F0EFEC; /* texto principal — quase branco quente */ --cinza: #3E3E3C; /* bordas e divisores */ --cinza2: #2A2A28; /* divisores internos, fundos alternados */ --branco: #1C1C1A; /* superfície de card, modal, input */ --off: #141412; /* fundo de página */ /* Acentos — mesma identidade, levemente mais luminosos para contraste */ --verde: #52A676; --verde-hover: #3DBF80; --azul: #6089CC; --ouro: #D4AA37; --terracota: #CC6848; --roxo: #8B6CC0; /* Semântica — herda dos acentos ajustados acima */ --sucesso: var(--verde); --info: var(--azul); --atencao: var(--ouro); --critico: var(--terracota); /* Superfícies suaves — opacidade levemente maior no escuro */ --verde-soft: rgba(82, 166, 118, 0.13); --azul-soft: rgba(96, 137, 204, 0.13); --ouro-soft: rgba(212, 170, 55, 0.13); --terracota-soft: rgba(204, 104, 72, 0.13); --roxo-soft: rgba(139, 108, 192, 0.13); /* Fundos sólidos suaves — versão dark */ --verde-bg: #1A2E22; --azul-bg: #1A2236; --ouro-bg: #2E2710; --terracota-bg: #2E1A14; --roxo-bg: #251A38; /* Grade de fundo — muito suave no escuro */ --bg-grid-opacity: 0.08; /* Overlay mais denso — fundo já é escuro */ --overlay-bg: rgba(0, 0, 0, 0.65); /* Sombras mais pronunciadas */ --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.35); --shadow-modal: 0 4px 24px rgba(0, 0, 0, 0.55); --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.40); } /* ═══════════════════════════════════════════ FUNDO — Malha de linhas verticais convergentes Identidade EXP: espaçamento logarítmico (g₀ = 400 px, r = 0.72) 20 linhas que vão de 400 px de gap até 1 px — efeito de perspectiva A animação usa apenas opacity: roda no compositor (GPU), custo zero. ═══════════════════════════════════════════ */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,"); background-size: 100% 100%; background-repeat: no-repeat; animation: expBgBreathe 10s ease-in-out infinite; } @keyframes expBgBreathe { 0%, 100% { opacity: 0.38; } 50% { opacity: 0.56; } } @keyframes expBgBreatheDark { 0%, 100% { opacity: 0.06; } 50% { opacity: 0.11; } } [data-theme="dark"] body::before { animation-name: expBgBreatheDark; } @media (prefers-reduced-motion: reduce) { body::before { animation: none; opacity: 0.42; transform: none; } [data-theme="dark"] body::before { animation: none; opacity: 0.08; transform: none; } } /* ═══════════════════════════════════════════ COMPONENTE — THEME TOGGLE Estilo canônico do botão de tema claro/escuro. Usado em todos os módulos da plataforma. HTML esperado: ═══════════════════════════════════════════ */ .theme-toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 3px; border-radius: 20px; flex-shrink: 0; } .ttg-icon { font-size: 9px; opacity: 0; transition: opacity var(--transition-fast); user-select: none; line-height: 1; } /* Em modo claro: mostra a lua levemente (indica que vai para escuro) */ .theme-toggle .ttg-icon:last-child { opacity: .35; } /* Em modo escuro: mostra o sol levemente (indica que vai para claro) */ [data-theme="dark"] .theme-toggle .ttg-icon:first-child { opacity: .65; filter: invert(1); } [data-theme="dark"] .theme-toggle .ttg-icon:last-child { opacity: 0; } /* Hover — ambos visíveis */ .theme-toggle:hover .ttg-icon { opacity: .75; } [data-theme="dark"] .theme-toggle:hover .ttg-icon:first-child { filter: invert(1); } .ttg-track { width: 30px; height: 16px; border-radius: 8px; background: var(--cinza); position: relative; transition: background var(--transition-normal); flex-shrink: 0; } .ttg-knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--transition-normal); } [data-theme="dark"] .ttg-track { background: var(--verde); } [data-theme="dark"] .ttg-knob { transform: translateX(14px); background: #f0efec; } /* ═══════════════════════════════════════════ COMPONENTE — CHECKBOX Dois padrões canônicos. Tokens de cor adaptam automaticamente ao dark mode — sem override extra. ── NATIVO (input) ── Estiliza diretamente. Usar dentro de um para área de clique correta. Texto Variante compacta: adicionar classe exp-cb-sm ao input e exp-cb-row-sm ao label. ── CUSTOM (div, toggled via JS) ── Para checkboxes controladas por JS que alternam .done.

Texto Variante compacta: adicionar classe exp-tick-sm ao div. ═══════════════════════════════════════════ */ /* ── Container de linha ── */ .exp-cb-row { display: inline-flex; align-items: flex-start; gap: var(--gap-xs); cursor: pointer; font-family: var(--font-ui); font-size: var(--text-body); color: var(--grafite); user-select: none; } .exp-cb-row-sm { font-size: var(--text-sub); } /* ── Checkbox nativo ── */ input[type="checkbox"].exp-cb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border: 1.5px solid var(--cinza); border-radius: 4px; background: var(--branco); flex-shrink: 0; cursor: pointer; margin-top: 1px; position: relative; transition: border-color var(--transition-fast), background var(--transition-fast); } input[type="checkbox"].exp-cb::after { content: ''; position: absolute; display: none; left: 4px; top: 1px; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); } input[type="checkbox"].exp-cb:checked { background: var(--verde); border-color: var(--verde); } input[type="checkbox"].exp-cb:checked::after { display: block; } input[type="checkbox"].exp-cb:disabled { opacity: 0.45; cursor: default; } input[type="checkbox"].exp-cb:focus-visible { outline: 2px solid var(--azul-soft); outline-offset: 2px; } /* Hover — unchecked: intenção de marcar → check cinza + borda cinza */ .exp-cb-row:hover input[type="checkbox"].exp-cb:not(:checked):not(:disabled) { border-color: #aaa; } .exp-cb-row:hover input[type="checkbox"].exp-cb:not(:checked):not(:disabled)::after { display: block; border-color: rgba(0, 0, 0, 0.22); } /* Hover — checked: intenção de desmarcar → fundo cinza médio */ .exp-cb-row:hover input[type="checkbox"].exp-cb:checked:not(:disabled) { background: #9E9E9E; border-color: #9E9E9E; } /* Dark mode — fundo do checkbox ligeiramente mais claro que a superfície */ [data-theme="dark"] input[type="checkbox"].exp-cb { background: #242422; } [data-theme="dark"] .exp-cb-row:hover input[type="checkbox"].exp-cb:not(:checked):not(:disabled) { border-color: #666; } [data-theme="dark"] .exp-cb-row:hover input[type="checkbox"].exp-cb:not(:checked):not(:disabled)::after { border-color: rgba(255, 255, 255, 0.22); } [data-theme="dark"] .exp-cb-row:hover input[type="checkbox"].exp-cb:checked:not(:disabled) { background: #6E6E6C; border-color: #6E6E6C; } /* Texto riscado quando marcado */ .exp-cb-label.done, input[type="checkbox"].exp-cb:checked ~ .exp-cb-label { text-decoration: line-through; color: var(--cinza); } /* Variante compacta */ input[type="checkbox"].exp-cb-sm { width: 12px; height: 12px; border-radius: 3px; } input[type="checkbox"].exp-cb-sm::after { left: 3px; top: 0; width: 4px; height: 7px; } /* ── Custom tick (div, JS-toggled) ── */ .exp-tick { width: 15px; height: 15px; border: 1.5px solid var(--cinza); border-radius: 4px; background: var(--branco); flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: transparent; margin-top: 1px; user-select: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .exp-tick::after { content: '✓'; } /* Hover — unchecked: intenção de marcar → check cinza + borda cinza */ .exp-tick:hover:not(.done) { border-color: #aaa; color: rgba(0, 0, 0, 0.22); } /* Hover — done: intenção de desmarcar → fundo cinza médio */ .exp-tick.done:hover { background: #9E9E9E; border-color: #9E9E9E; } .exp-tick.done { background: var(--verde); border-color: var(--verde); color: #fff; } /* Dark mode */ [data-theme="dark"] .exp-tick { background: #242422; } [data-theme="dark"] .exp-tick:hover:not(.done) { border-color: #666; color: rgba(255, 255, 255, 0.22); } [data-theme="dark"] .exp-tick.done:hover { background: #6E6E6C; border-color: #6E6E6C; } /* Variante compacta */ .exp-tick-sm { width: 12px; height: 12px; font-size: 8px; } /* Texto companion */ .exp-tick-label.done { text-decoration: line-through; color: var(--cinza); } /* ── Variante cancel — exp-tick-x (custom) ── Usar quando marcar significa cancelar, encerrar ou remover. Hover: × cinza sutil. Done: × cinza sobre fundo neutro. HTML:

─────────────────────────────────────────────────── */ .exp-tick-x::after { content: '×'; font-size: 11px; font-weight: 400; } .exp-tick-x:hover:not(.done) { border-color: var(--cinza); color: rgba(0, 0, 0, 0.2); } .exp-tick-x.done { background: var(--cinza2); border-color: var(--cinza); color: #888; } [data-theme="dark"] .exp-tick-x:hover:not(.done) { color: rgba(255, 255, 255, 0.2); } [data-theme="dark"] .exp-tick-x.done { background: var(--cinza2); border-color: var(--cinza); color: #888; } /* ── Variante cancel — exp-cb-x (nativo) ── HTML: Hover: × cinza sutil. Checked: × cinza, fundo neutro. ─────────────────────────────────────────────────── */ input[type="checkbox"].exp-cb.exp-cb-x::after { content: '×'; border: none; transform: translate(-50%, -50%); left: 50%; top: 50%; width: auto; height: auto; font-family: var(--font-ui); font-size: 10px; font-weight: 400; color: transparent; display: block; } .exp-cb-row:hover input[type="checkbox"].exp-cb.exp-cb-x:not(:checked):not(:disabled) { border-color: var(--cinza); } .exp-cb-row:hover input[type="checkbox"].exp-cb.exp-cb-x:not(:checked):not(:disabled)::after { color: rgba(0, 0, 0, 0.2); } input[type="checkbox"].exp-cb.exp-cb-x:checked { background: var(--cinza2); border-color: var(--cinza); } input[type="checkbox"].exp-cb.exp-cb-x:checked::after { color: #888; } [data-theme="dark"] .exp-cb-row:hover input[type="checkbox"].exp-cb.exp-cb-x:not(:checked):not(:disabled)::after { color: rgba(255, 255, 255, 0.2); } /* ═══════════════════════════════════════════ COMPONENTE — CAMPOS DE FORMULÁRIO Padrão único para input, textarea e select. Tokens adaptam automaticamente ao dark mode. HTML esperado:

Nome do campo Texto auxiliar opcional

Estado de erro: adicionar .exp-error ao campo. Classes: exp-input · exp-textarea · exp-select ═══════════════════════════════════════════ */ /* ── Wrapper de campo ── */ .exp-field { display: flex; flex-direction: column; gap: 4px; } /* ── Label ── */ .exp-label { display: block; font-family: var(--font-ui); font-size: var(--text-label); font-weight: var(--weight-label); letter-spacing: var(--label-spacing); text-transform: uppercase; color: var(--grafite); opacity: 0.5; } /* ── Base: input, textarea, select ── */ .exp-input, .exp-textarea, .exp-select { width: 100%; box-sizing: border-box; font-family: var(--font-ui); font-size: var(--text-body); font-weight: var(--weight-light); color: var(--grafite); background: var(--branco); border: 1px solid var(--cinza); border-radius: var(--radius-input); padding: 6px 10px; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .exp-input::placeholder, .exp-textarea::placeholder { color: var(--cinza); font-weight: var(--weight-body); } /* Focus — cor vem do módulo via --mod-focus (fallback: --azul) */ .exp-input:focus, .exp-textarea:focus, .exp-select:focus { border-color: var(--mod-focus, var(--azul)); box-shadow: 0 0 0 3px var(--mod-focus-soft, var(--azul-soft)); } /* Disabled */ .exp-input:disabled, .exp-textarea:disabled, .exp-select:disabled { opacity: 0.45; cursor: default; background: var(--off); } /* Erro */ .exp-input.exp-error, .exp-textarea.exp-error, .exp-select.exp-error { border-color: var(--terracota); box-shadow: 0 0 0 3px var(--terracota-soft); } /* Textarea */ .exp-textarea { resize: vertical; min-height: 64px; line-height: 1.5; } /* Select — seta customizada */ .exp-select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23D0CFC9' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } /* Hint / mensagem de apoio */ .exp-field-hint { font-family: var(--font-ui); font-size: var(--text-sub); color: var(--grafite); opacity: 0.45; } /* Dark — seta do select com cor adaptada */ [data-theme="dark"] .exp-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233E3E3C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ═══════════════════════════════════════════ COMPONENTE — NAV Barra de navegação principal, sticky, 46px. Elementos opcionais marcados abaixo. HTML canônico: ┌──────────────────────────────────────────┐ │

│ │ │ │

│ │ │ │ │ │

│ │ │ │

│ │

│ │ │ │ │ │ 📹 │ │ │ │ │ │

│ │ │ │ │ │ │ │ │ │

│ │

│ │ — │ │ │ │

│ │ ▾ │ │

│ │ │ │

│ │

│ └──────────────────────────────────────────┘ ═══════════════════════════════════════════ */ /* ── Estrutura principal ── */ .nav { display: flex; align-items: center; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cinza); padding: 0 16px; height: var(--nav-height); position: sticky; top: 0; z-index: 100; gap: 0; } [data-theme="dark"] .nav { background: rgba(28, 28, 26, 0.95); } /* ── Marca / logo ── */ .nav-brand { display: flex; align-items: center; margin-right: 16px; text-decoration: none; color: inherit; font-size: 14px; font-weight: 700; letter-spacing: 5px; flex-shrink: 0; } .nav-brand:hover { opacity: 0.7; } .nav-brand-logo { height: 20px; width: auto; display: block; } /* ── Separador vertical ── */ .nav-sep { width: 1px; height: 14px; background: var(--cinza); margin-right: 16px; flex-shrink: 0; } .nav-mod { font-family: var(--font-ui); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 1.5px; text-transform: uppercase; color: #999; } /* ── Seletor de módulo ── */ .nav-mod-wrap { position: relative; margin-right: 20px; flex-shrink: 0; } .nav-lbl-btn { background: none; border: none; font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #999; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 4px; } .nav-lbl-btn:hover { color: var(--grafite); } .nav-dropdown { display: none; position: absolute; top: calc(100% + 8px); left: -12px; background: var(--branco); border: 1px solid var(--cinza); min-width: 200px; z-index: 200; box-shadow: var(--shadow-modal); border-radius: var(--radius-card); overflow: hidden; } .nav-dropdown.open { display: block; } .nav-dropdown a { display: block; padding: 7px 16px 7px 12px; font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grafite); text-decoration: none; white-space: nowrap; } .nav-dropdown a:hover { background: var(--off); } .nav-dropdown a.nd-active { font-weight: 700; pointer-events: none; color: var(--nav-active, var(--azul)); } .nd-sep { height: 1px; background: var(--cinza); margin: 4px 0; } /* ── Tabs ── */ .nav-tabs { display: flex; height: 100%; gap: 0; } .ntab { display: flex; align-items: center; padding: 0 11px; font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: #999; border-bottom: 2px solid transparent; border-top: none; border-left: none; border-right: none; background: none; cursor: pointer; white-space: nowrap; transition: color var(--transition-fast); } .ntab:hover { color: var(--grafite); } .ntab.active { color: var(--nav-active, var(--grafite)); border-bottom-color: var(--nav-active, var(--grafite)); } /* ── Área direita ── */ .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ── Indicador de conexão ── */ .conn-dot { width: 7px; height: 7px; border-radius: 50%; background: #ccc; flex-shrink: 0; cursor: default; pointer-events: none; transition: background var(--transition-normal); } .conn-dot.online { background: #22c55e; } .conn-dot.offline { background: var(--terracota); } /* ── EXP Room (opcional) ── */ .exp-room-btn { width: 28px; height: 28px; border: 1px solid var(--verde); background: var(--verde-bg); color: var(--verde); border-radius: var(--radius-btn); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px; flex-shrink: 0; transition: background var(--transition-fast), color var(--transition-fast); } .exp-room-btn:hover { background: var(--verde); color: #fff; } .exp-room-btn.active { background: var(--verde); color: #fff; animation: exp-room-pulse 1.5s ease-in-out infinite; } @keyframes exp-room-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(62, 120, 88, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(62, 120, 88, 0); } } [data-theme="dark"] .exp-room-btn.active { animation-name: exp-room-pulse-dark; } @keyframes exp-room-pulse-dark { 0%, 100% { box-shadow: 0 0 0 0 rgba(82, 166, 118, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(82, 166, 118, 0); } } /* ── Notificações (opcional) ── */ .notif-wrap { position: relative; display: flex; align-items: center; gap: 4px; } .notif-bell { width: 28px; height: 28px; border: 1px solid var(--cinza); background: var(--branco); border-radius: var(--radius-btn); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; font-family: inherit; position: relative; flex-shrink: 0; transition: border-color var(--transition-fast); } .notif-bell:hover { border-color: var(--grafite); } .notif-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; background: var(--terracota); color: #fff; font-size: 8px; font-weight: 700; font-family: var(--font-mono); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--off); pointer-events: none; } /* Botão + lembrete — socio-only (opcional) */ .notif-plus { width: 22px; height: 22px; border: none; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; font-weight: 300; color: #bbb; font-family: inherit; transition: color var(--transition-fast); padding: 0; } .notif-plus:hover { color: var(--grafite); } /* Painel de notificações */ .notif-panel { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: var(--branco); border: 1px solid var(--cinza); border-radius: var(--radius-card); box-shadow: var(--shadow-modal); min-width: 340px; max-height: 520px; overflow-y: auto; z-index: 200; } .notif-panel.open { display: block; } .notif-panel-hd { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 11px; border-bottom: 1px solid var(--cinza2); position: sticky; top: 0; background: var(--branco); z-index: 1; } .notif-panel-hd-t { font-family: var(--font-ui); font-size: var(--text-label); font-weight: var(--weight-label); letter-spacing: var(--label-spacing); text-transform: uppercase; color: var(--grafite); } .notif-panel-clr { background: none; border: none; font-family: var(--font-ui); font-size: 10px; color: var(--cinza); cursor: pointer; padding: 0; transition: color var(--transition-fast); } .notif-panel-clr:hover { color: var(--grafite); } /* ── Itens dentro do painel de notificações ── */ .notif-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-bottom: 1px solid var(--cinza2); cursor: pointer; transition: background var(--transition-fast); } .notif-item:last-child { border-bottom: none; } .notif-item.nova { background: #EEF3FB; } .notif-item:hover { background: var(--off); } .notif-item.nova:hover { background: #E1ECFF; } [data-theme="dark"] .notif-item.nova { background: rgba(74,114,181,.13); } [data-theme="dark"] .notif-item:hover { background: var(--off); } [data-theme="dark"] .notif-item.nova:hover { background: rgba(74,114,181,.20); } .notif-item-row { display: flex; align-items: flex-start; gap: 8px; } .notif-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; } .notif-titulo { font-size: 11px; font-weight: 600; flex: 1; line-height: 1.4; color: var(--grafite); } .notif-corpo { font-size: 10px; color: #666; line-height: 1.4; padding-left: 21px; white-space: pre-wrap; word-break: break-word; } .notif-ts { font-size: 9px; color: #bbb; padding-left: 21px; } .notif-check-btn { width: 20px; height: 20px; border: 1px solid var(--cinza); border-radius: 50%; background: var(--branco); font-size: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #888; font-family: inherit; padding: 0; line-height: 1; transition: border-color var(--transition-fast), color var(--transition-fast); } .notif-check-btn:hover { border-color: var(--verde); color: var(--verde); } [data-theme="dark"] .notif-titulo { color: var(--grafite); } [data-theme="dark"] .notif-corpo { color: #999; } /* ── Separador de seção dentro do painel de notificações ── */ .notif-sec-hd { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--cinza); padding: 7px 14px 4px; border-top: 1px solid var(--cinza2); background: var(--off); position: sticky; top: 0; z-index: 1; } .notif-sec-hd:first-child { border-top: none; } /* ── Chip de usuário ── */ .user-pill-wrap { position: relative; display: inline-flex; min-width: 120px; max-width: 200px; } .user-chip { display: flex; align-items: center; gap: 7px; padding: 3px 9px 3px 3px; border: 1px solid var(--cinza); background: var(--branco); cursor: pointer; border-radius: 20px; width: 100%; box-sizing: border-box; transition: border-color var(--transition-fast); } .user-chip:hover { border-color: var(--grafite); } .uav, .user-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 0.3px; color: #fff; flex-shrink: 0; } .uav.has-avatar, .user-av.has-avatar { overflow: hidden; padding: 0; } .uav img, .user-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .u-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .u-nome { font-family: var(--font-ui); font-size: 10px; font-weight: 500; color: var(--grafite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .u-role { font-family: var(--font-ui); font-size: 8px; font-weight: 400; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .u-caret, .user-chip-arrow { font-size: 8px; color: #bbb; flex-shrink: 0; } /* ── Dropdown de usuário ── */ .user-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; width: 100%; background: var(--branco); border: 1px solid var(--cinza); z-index: 200; box-shadow: var(--shadow-modal); border-radius: var(--radius-card); overflow: hidden; } .user-dropdown.open { display: block; } .user-dropdown button { display: block; width: 100%; padding: 9px 14px; background: none; border: none; font-family: var(--font-ui); font-size: var(--text-sub); font-weight: 500; color: var(--terracota); text-align: left; cursor: pointer; box-sizing: border-box; } .user-dropdown button:hover { background: var(--off); } /* Painel de resumo de identidade no topo do dropdown */ .user-dropdown-summary { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 10px; } .ud-summary-name { font-size: 11px; font-weight: 700; color: var(--grafite); line-height: 1.35; word-break: break-word; } .ud-summary-role { font-size: 10px; color: #777; line-height: 1.35; } .ud-summary-email { font-size: 10px; color: #999; line-height: 1.4; word-break: break-word; } [data-theme="dark"] .ud-summary-name { color: var(--grafite); } [data-theme="dark"] .ud-summary-role { color: #A7A095; } [data-theme="dark"] .ud-summary-email { color: #8F897F; } /* Separador interno do dropdown */ .ud-sep, .user-dropdown-sep { height: 1px; background: var(--cinza2); margin: 3px 0; } /* Item "em breve" — placeholder visual */ .ud-coming { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 14px; box-sizing: border-box; font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--cinza); cursor: default; } .ud-coming::after { content: 'em breve'; font-size: 7px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ouro); opacity: 0.8; flex-shrink: 0; margin-left: 8px; } .user-dropdown-note, .user-term-state { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-family: var(--font-ui); font-size: var(--text-label); line-height: 1.4; } .user-dropdown-note { color: #888; border-top: 1px solid rgba(0, 0, 0, 0.04); } .user-dropdown-note:empty { display: none; } .user-term-state { cursor: pointer; transition: background var(--transition-fast); } .user-term-state.pending { color: var(--azul); background: var(--azul-bg); border-top: 1px solid rgba(74, 114, 181, 0.2); border-bottom: 1px solid rgba(74, 114, 181, 0.2); } .user-term-state.pending:hover { background: #d8e4f7; } .user-term-state.ok { color: #bbb; background: none; } .user-term-state.ok:hover { background: var(--off); } .term-state-hover { display: none; color: #777; font-style: italic; } .user-term-state.ok:hover .term-state-normal { display: none; } .user-term-state.ok:hover .term-state-hover { display: flex; align-items: center; gap: 5px; } .user-term-state-icon, .term-chip-icon { font-size: 11px; flex-shrink: 0; } .term-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--font-ui); font-size: var(--text-label); cursor: pointer; } .term-chip.pending { padding: 4px 10px; border: 1px solid rgba(74, 114, 181, 0.35); border-radius: 999px; color: var(--azul); background: var(--azul-bg); } .term-chip.ok { color: #bbb; padding: 0; border: none; background: none; } /* ── Dark mode — nav ── */ [data-theme="dark"] .nav-mod { color: #666; } [data-theme="dark"] .nav-dropdown, [data-theme="dark"] .user-dropdown, [data-theme="dark"] .notif-panel { box-shadow: var(--shadow-modal); } [data-theme="dark"] .notif-badge { border-color: var(--off); } [data-theme="dark"] .exp-room-btn { background: var(--branco); } [data-theme="dark"] .user-dropdown-note { color: #999; } [data-theme="dark"] .user-term-state.ok { color: #999; background: none; } [data-theme="dark"] .user-term-state.pending { color: #a9c3f6; background: rgba(74, 114, 181, 0.16); border-top-color: rgba(74, 114, 181, 0.25); border-bottom-color: rgba(74, 114, 181, 0.25); } [data-theme="dark"] .user-term-state.pending:hover { background: #1f2d47; } /* ═══════════════════════════════════════════ COMPONENTE — FEEDBACK POPOVER (botão "!") Botão de reportar problema/sugestão presente em todos os módulos. HTML esperado no nav-right:

Problema ou sugestão

...

═══════════════════════════════════════════ */ .nav-feedback-wrap { position: relative; } .nav-feedback-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--cinza); background: var(--branco); color: var(--grafite); display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); } .nav-feedback-btn:hover { border-color: var(--grafite); background: var(--off); transform: translateY(-1px); } .nav-feedback-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 9100; width: min(360px, calc(100vw - 24px)); padding: 12px; display: none; flex-direction: column; gap: 10px; background: var(--branco); border: 1px solid var(--cinza); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); } .nav-feedback-pop.open { display: flex; } .nav-feedback-pop::before { content: ''; position: absolute; top: -6px; right: 12px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--branco); border-top: 1px solid var(--cinza); border-left: 1px solid var(--cinza); } .nav-feedback-title { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #666; } .nav-feedback-sub, .nav-feedback-status { font-size: 10px; color: #888; line-height: 1.45; } .nav-feedback-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } /* Dark mode */ [data-theme="dark"] .nav-feedback-pop { background: var(--branco); border-color: var(--cinza); } [data-theme="dark"] .nav-feedback-pop::before { background: var(--branco); border-color: var(--cinza); } [data-theme="dark"] .nav-feedback-pop select, [data-theme="dark"] .nav-feedback-pop textarea { background: var(--branco); border-color: var(--cinza); color: var(--grafite); } /* ═══════════════════════════════════════════════════════════════ IDENTIDADE POR MÓDULO Cada módulo sobrescreve apenas --nav-active no