/* Ativação de Scroll Magnético Suave (aplicada ao container principal) */
html {
scroll-behavior: smooth;
scrollbar-gutter: stable; /* Reserva espaço para a barra de rolagem, evitando saltos de layout */
}
/* Legacy global scrollbar rules removed to avoid visual clutter.
Scroll styling is scoped to `.nexus-scroll-area` containers. */
/* Bloco 1: Variáveis, Reset e Configuração Dark Mode */
:root {
/* Tipografia — mapeada para tokens globais em shared-lib */
--font-sans: var(--font-family-base, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
--font-mono: var(--font-family-mono, "Geist Mono", "JetBrains Mono", "Fira Code", monospace);
--base-font-size: var(--fs-lg, 16px);
/* Branding e controles: variáveis unificadas */
--logo-size: 40px; /* Unificação do tamanho da marca */
/* Cores — mapear para tokens do shared-lib quando disponíveis */
--bg-app: var(--bg-main, #f3f4f6); /* Fundo principal */
--bg-card: var(--bg-surface, #ffffff); /* Fundo de cartões, painéis, widgets */
--bg-sidebar: var(--bg-sidebar, #ffffff); /* Sidebar fixa / drawer mobile */
--primary: var(--accent, #3b82f6); /* Accent global */
--primary-hover: var(--accent, #2563eb); /* Hover baseado no accent */
/* =======================================================================
BLOCO: IDENTIDADE VISUAL NEXUS (BASE + VARIAÇÃO POR APP)
======================================================================= */
--nexus-app-accent: var(--primary);
--nexus-app-border: rgba(59, 130, 246, 0.22);
--nexus-app-bg: var(--nexus-app-bg, linear-gradient(180deg, var(--bg-main, #f8fafc) 0%, var(--bg-app, #f3f4f6) 100%));
--text-main: #1f2937; /* Quase preto */
--text-muted: #6b7280; /* Cinza para descrições */
--danger: #ef4444; /* Erros, avisos */
--border: #e5e7eb; /* Divisores */
/* Tokens de Interação (UI States) */
--nav-hover-bg: rgba(59, 130, 246, 0.08);
--nav-active-bg: var(--primary);
--nav-active-text: #ffffff;
--logo-url: url('/static/img/nexus_logo.png');
/* Layout (Variáveis CRÍTICAS para sincronização de Micro-Apps)
Nota: `--sidebar-width` e `--sidebar-width-collapsed` são definidos
centralmente em `shared-lib/css/nexus-core-tokens.css`. Não sobrescrever
aqui para manter um único ponto de verdade. Caso seja necessário um
fallback local, usar var(--sidebar-width, 250px) no uso. */
--inner-max-width: 1200px; /* Largura padrão do conteúdo */
--inner-padding-x: 25px; /* Respiro lateral unificado */
--app-right-col-width: var(--sidebar-width, 400px);
--app-right-col-total: calc(var(--app-right-col-width) + var(--standard-padding));
--breakpoint-md: 900px;
--breakpoint-lg: 901px; /* Breakpoint unificado para Tablet/Desktop */
/* Offsets e medidas padrão (padronização de alinhamento) */
--standard-padding: 25px; /* Afastamento lateral fixo */
--header-height: 64px; /* Altura do cabeçalho sticky (padronizado em 64px) */
--main-content-padding-top: 0px; /* Offset adicional do conteúdo abaixo do header */
/* Responsivo: padding e tamanhos são tratados nos blocos consolidados de breakpoint. */
max-width: 100%;
/* Tokens de z-index e tamanhos específicos para o toggle (fonte única da verdade) */
--z-toggle: 500000;
--z-loader: 999999;
--z-app-overlay: 200000;
--nexus-toggle-size-mobile: 35px; /* reduzido ~20% */
--nexus-toggle-size-desktop: 26px; /* reduzido ~20% */
--nexus-toggle-icon-size: 14px; /* reduzido ~20% */
}
/* =======================================================================
BLOCO: TEMA POR MICRO-APP (PADRÃO COMPARTILHADO)
======================================================================= */
body[data-app-path="/"],
body[data-app-path="/dashboard"] {
--nexus-app-accent: #3b82f6;
--nexus-app-border: rgba(59, 130, 246, 0.22);
--nexus-app-bg: var(--bg-viewport-grad, linear-gradient(180deg, var(--bg-main, #f8fafc) 0%, var(--bg-card, #f1f5f9) 100%));
}
body[data-app-path="/nexus_beam_analysis"] {
--nexus-app-accent: #06b6d4;
--nexus-app-accent-rgb: 6, 182, 212;
--nexus-app-border: rgba(6, 182, 212, 0.30);
--nexus-app-bg: var(--bg-viewport-grad, linear-gradient(180deg, var(--nexus-app-bg-start, #ecfeff) 0%, var(--nexus-app-bg-end, #e0f2fe) 100%));
}
body[data-app-path="/nexus_solver"] {
/* Use shared tokens so theme (dark/light) controls the final background */
--nexus-app-accent: var(--solver-primary, #6366f1);
--nexus-app-accent-rgb: var(--solver-primary-rgb, 99,102,241);
--nexus-app-border: rgba(var(--solver-primary-rgb, 99,102,241), 0.28);
--nexus-app-bg: var(--bg-viewport-grad, linear-gradient(180deg, var(--nexus-app-bg-start, #eef2ff) 0%, var(--nexus-app-bg-end, #e0e7ff) 100%));
}
body[data-app-path="/unit_converter"] {
--nexus-app-accent: #0ea5e9;
--nexus-app-accent-rgb: 14, 165, 233;
--nexus-app-border: rgba(14, 165, 233, 0.28);
--nexus-app-bg: var(--bg-viewport-grad, linear-gradient(180deg, var(--nexus-app-bg-start, #eff6ff) 0%, var(--nexus-app-bg-end, #e0f2fe) 100%));
}
body[data-app-path="/nexus_memorial"] {
--nexus-app-accent: #8b5cf6;
--nexus-app-accent-rgb: 139, 92, 246;
--nexus-app-border: rgba(139, 92, 246, 0.26);
--nexus-app-bg: var(--bg-viewport-grad, linear-gradient(180deg, var(--nexus-app-bg-start, #f5f3ff) 0%, var(--nexus-app-bg-end, #ede9fe) 100%));
}
/* =======================================================================
BLOCO: ACESSIBILIDADE TEMA CLARO (OVERRIDES DE CONTRASTE WCAG)
Cores interceptadas para garantir legibilidade impecável em fundos brancos.
======================================================================= */
html[data-theme="light"] body[data-app-path="/"] {
--nexus-app-accent: #1d4ed8; /* Blue 700 */
--nexus-app-accent-rgb: 29, 78, 216;
--nexus-app-border: rgba(29, 78, 216, 0.35);
}
html[data-theme="light"] body[data-app-path="/nexus_beam_analysis"] {
--nexus-app-accent: #0891b2; /* Cyan 600 - Escuro e rico */
--nexus-app-accent-rgb: 8, 145, 178;
--nexus-app-border: rgba(8, 145, 178, 0.40);
}
html[data-theme="light"] body[data-app-path="/nexus_solver"] {
--nexus-app-accent: #4f46e5; /* Indigo 600 */
--nexus-app-accent-rgb: 79, 70, 229;
--nexus-app-border: rgba(79, 70, 229, 0.35);
}
html[data-theme="light"] body[data-app-path="/unit_converter"] {
--nexus-app-accent: #0284c7; /* Sky 600 */
--nexus-app-accent-rgb: 2, 132, 199;
--nexus-app-border: rgba(2, 132, 199, 0.35);
}
html[data-theme="light"] body[data-app-path="/nexus_memorial"] {
--nexus-app-accent: #7c3aed; /* Violet 600 */
--nexus-app-accent-rgb: 124, 58, 237;
--nexus-app-border: rgba(124, 58, 237, 0.35);
}
/* Reset Global Anti-Margem e Layout Limpo */
html {
margin: 0;
padding: 0;
height: 100%;
/* Reativa o scroll nativo com Snap Magnético direto na raiz */
overflow-y: auto;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
/* Correção CRÍTICA: 'hidden' destrói o position:sticky nativo do CSS.
'clip' previne rolagem horizontal vazada sem criar um scroll-container nocivo. */
overflow-x: clip;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
font-family: var(--font-sans);
}
/* Links */
a {
color: inherit;
text-decoration: none;
}
/* Botões */
button {
font: inherit;
background: transparent;
border: none;
cursor: pointer;
color: inherit;
}
/* Campos */
input, textarea, select {
font: inherit;
background: transparent;
border: none;
outline: none;
color: inherit;
}
/* Classe utilitária para áreas roláveis internas */
.nexus-scroll {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Bloco 2 — Estrutura do Layout (Sidebar fixa + Drawer Mobile + Main Content) */
/* Bloco 2: Layout Base (Flexbox Nativo, sem Grid redundante) */
.app-layout {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
background: var(--bg-app);
}
/* Bloco 2: Sidebar NEXUS - estado padrão (overlay, escondida) */
.sidebar {
width: var(--sidebar-width);
height: 100vh;
background: var(--bg-sidebar);
/* PADRÃO GAVETA: FIXA e OCULTA, com sombra de overlay */
position: fixed;
top: 0;
left: 0;
right: auto;
border-right: 1px solid var(--border);
box-shadow: 6px 0 28px rgba(2,6,23,0.28);
/* Default above main content; specific open state increases z-index */
z-index: 11100;
display: flex;
flex-direction: column;
padding: 0 var(--space-4);
/* CRÍTICO: Permite botão vazar - overflow clip permite elementos vazarem */
/* Permitir que elementos posicionados absolutamente (ex: botão de fechar)
possam ultrapassar a borda da sidebar sem serem cortados. "clip" impedía
a visualização do botão quando deslocado parcialmente para fora. */
overflow: visible;
/* Posição inicial oculta para Mobile e Tablet */
transform: translateX(-105%);
opacity: 0;
transition: transform var(--trans-med) var(--trans-ease), opacity var(--trans-med);
}
.sidebar.right, #app-contextual-actions {
width: var(--sidebar-width, 400px);
position: fixed;
right: 0;
top: var(--header-height);
left: auto;
height: calc(100vh - var(--header-height));
background: var(--bg-sidebar);
border-left: 1px solid var(--nexus-app-border);
z-index: 11110; /* acima do conteúdo principal */
}
/* Unidade de Anúncio Flutuante */
.floating-ad-unit {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
z-index: 12000;
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: auto;
}
/* Esconde o anúncio quando o micro-app está focado no topo da tela */
body.app-focused .floating-ad-unit {
opacity: 0;
transform: translateY(20px);
pointer-events: none;
}
/* Define o container que conterá apenas a lista de links rolável */
.sidebar-nav-content {
flex: 1;
min-height: 0;
padding: var(--space-5) 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Quando houver variação futura para sidebar mini */
.sidebar.sidebar--collapsed {
width: var(--sidebar-width-collapsed);
}
/* Abrir a sidebar esquerda (overlay) */
.sidebar.left.open {
transform: translateX(0) !important;
opacity: 1 !important;
pointer-events: auto !important;
top: 0 !important;
height: 100vh !important;
z-index: 11100 !important;
}
/* Bloco 2: Comportamento principal do conteúdo (Full Bleed) */
.main-content {
display: flex;
flex-direction: column;
flex: 1; /* Força expansão segura preenchendo o app-layout */
width: 100%;
background: transparent;
padding: 0;
/* REMOVIDO: height: 100vh e overflow-y: auto para permitir scroll global na window */
min-height: auto;
overflow: visible;
}
/* Layout da Área de Trabalho (Migrado do HTML) */
.nexus-viewport-area {
display: flex;
flex-wrap: nowrap !important;
align-items: stretch;
width: 100%;
flex: 1;
position: relative;
/* Propriedades de Snap nativo deletadas. O JavaScript tem o controle absoluto agora. */
/* -- DELIMITAÇÃO VISUAL DA VIEWPORT (DEBUG) -- */
min-height: 100vh; /* Ocupa 100% da tela e garante margem física para o scroll nativo */
/* border-top: 1px solid var(--nexus-app-border); */
/* border-bottom: 1px solid var(--nexus-app-border); */
background: var(--nexus-app-bg);
}
/* ==========================================================================
BLOCO 12: NEXUS COCKPIT OVERLAY HOST PARA MICRO-APPS INJETADOS
========================================================================== */
.nexus-module-host {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 100000;
display: flex;
transform: translateX(100%);
transition: transform 0.58s cubic-bezier(0.19, 1, 0.22, 1);
pointer-events: none;
background: rgba(5, 8, 12, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.nexus-module-host.is-active {
transform: translateX(0);
pointer-events: auto;
}
.nexus-module-glass {
flex: 1;
background: var(--bg-main);
box-shadow: -15px 0 40px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
position: relative;
border-left: 1px solid var(--field-border);
}
.nexus-module-flap {
width: 38px;
height: 120px;
margin-top: calc(50vh - 60px);
background: var(--accent);
color: #000;
border: none;
border-radius: 8px 0 0 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: -4px 0 16px rgba(var(--accent-rgb, 59, 130, 246), 0.35);
transition: transform 0.2s ease, background 0.2s ease, width 0.2s ease;
flex-shrink: 0;
}
.nexus-module-flap .material-icons-round {
font-weight: 700;
font-size: 24px;
transition: transform 0.2s ease;
}
.nexus-module-flap:hover {
width: 44px;
background: #ffffff;
}
.nexus-module-flap:hover .material-icons-round {
transform: translateX(2px);
}
.nexus-module-inner {
flex: 1;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
/* ---------------------------------------------------------------------
/* Default behavior: hide visual scrollbar in central content while JS
initializes to avoid flicker. Micro-apps that require a visible
scrollbar should opt-in by adding `nexus-show-central-scrollbar`
to the element at runtime. The rules below avoid overuse of
`!important` so opt-in can be reliably controlled by the host or
by app-specific selectors without fragile hacks. */
/* Hide visuals by default for main-content and nested nexus-scroll helpers */
.main-content,
.main-content .nexus-scroll {
-ms-overflow-style: none; /* IE/Edge */
scrollbar-width: none; /* Firefox */
}
.main-content::-webkit-scrollbar,
.main-content .nexus-scroll::-webkit-scrollbar {
width: 0px; /* Chrome/Safari */
height: 0px;
}
/* ==========================================================================
BLOCO: FIXAR MICRO-APP — BOTÃO DE PIN (SETAS / CADEADO ABERTO / CADEADO FECHADO)
- Contém estilos do botão flutuante, estado visual e ícones SVG embutidos.
- Uso: adicionar o elemento HTML `.microapp-pin-button` próximo ao container do micro-app
- Atributos esperados no elemento: `data-state="arrow|open|locked"` e `data-name` (texto do tooltip)
========================================================================== */
.microapp-pin-button {
position: fixed;
right: 18px;
bottom: 18px;
width: var(--nexus-toggle-size-mobile, 44px);
height: var(--nexus-toggle-size-mobile, 44px);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-card);
color: var(--nexus-app-accent);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
border: 1px solid rgba(0,0,0,0.06);
z-index: var(--z-toggle, 500000);
cursor: pointer;
transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.microapp-pin-button:active { transform: scale(0.98); }
/* NEXUS TOPBAR REFINEMENT */
.header-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 8px;
color: var(--text-muted);
transition: all 0.2s ease;
text-decoration: none;
}
.header-icon-btn:hover {
background: var(--hover-overlay);
color: var(--accent);
}
.header-divider-v {
width: 1px;
height: 24px;
background: var(--border);
margin: 0 4px;
}
.user-profile-pill {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 12px 4px 6px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 20px;
text-decoration: none;
color: var(--text-main);
font-size: 13px;
font-weight: 600;
transition: border-color 0.2s;
}
.user-profile-pill:hover { border-color: var(--accent); }
.header-btn-exit {
background: transparent;
border: none;
color: var(--eng-danger);
cursor: pointer;
display: flex;
padding: 8px;
border-radius: 8px;
transition: background 0.2s;
}
.header-btn-exit:hover { background: rgba(var(--eng-danger-rgb), 0.1); }
.microapp-pin-button .pin-icon {
width: calc(var(--nexus-toggle-icon-size, 18px));
height: calc(var(--nexus-toggle-icon-size, 18px));
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* Estados via atributo data-state */
.microapp-pin-button[data-state="arrow"] { color: var(--nexus-app-accent); }
.microapp-pin-button[data-state="open"] { color: var(--nexus-app-accent); }
.microapp-pin-button[data-state="locked"] { color: #ffffff; background: var(--nexus-app-accent); border-color: rgba(0,0,0,0.06); }
/* Ícones SVG embutidos (usar currentColor para herdar a cor do botão) */
.microapp-pin-button[data-state="arrow"] .pin-icon {
background-image: url('data:image/svg+xml;utf8,');
}
.microapp-pin-button[data-state="open"] .pin-icon {
background-image: url('data:image/svg+xml;utf8,');
}
.microapp-pin-button[data-state="locked"] .pin-icon {
background-image: url('data:image/svg+xml;utf8,');
}
/* Locked state: make icon lines red for both legacy and microapp pin buttons */
.nexus-pin-button.state-locked,
.microapp-pin-button[data-state="locked"] {
color: #ef4444; /* red stroke color */
}
.nexus-pin-button.state-locked .icon,
.microapp-pin-button[data-state="locked"] .pin-icon {
stroke: currentColor;
color: inherit;
}
/* Force stroke color on svg elements/path for locked state to avoid
inheritance being overridden by other rules. Targets rect/path elements. */
.nexus-pin-button.state-locked svg.icon,
.nexus-pin-button.state-locked svg.icon path,
.nexus-pin-button.state-locked svg.icon rect,
.microapp-pin-button[data-state="locked"] svg.icon,
.microapp-pin-button[data-state="locked"] svg.icon path,
.microapp-pin-button[data-state="locked"] svg.icon rect {
stroke: #ef4444;
color: #ef4444;
}
/* Tooltip simples exibindo o nome do estado (texto definido via data-name) */
.microapp-pin-button::after {
content: attr(data-name);
position: absolute;
bottom: calc(100% + 10px);
right: 0;
transform: translateY(6px);
background: rgba(0,0,0,0.78);
color: #fff;
padding: 6px 8px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease, transform 0.12s ease;
}
.microapp-pin-button:hover::after { opacity: 1; transform: translateY(0); }
/* REMOVIDO: Regras de travamento de página (nexus-pin-locked).
O botão permanece com estados visuais, mas toda lógica/estilos que
imobilizam a página foram removidos para evitar efeitos colaterais. */
/* Quando travado, o botão fica com ênfase de cor e sombra reduzida */
.microapp-pin-button.locked { box-shadow: 0 6px 12px rgba(0,0,0,0.12); }
/* Adaptividade: reduzir tamanho em telas grandes, usar variáveis de token se disponíveis */
@media (min-width: 900px) {
.microapp-pin-button { width: var(--nexus-toggle-size-desktop, 33px); height: var(--nexus-toggle-size-desktop, 33px); right: 22px; bottom: 22px; }
}
/* Nota: o controle fino do bloqueio de scroll e da rolagem interna do micro-app
será tratado via JavaScript para garantir que apenas o container interno
(ex: .microapp-container .nexus-scroll) receba eventos de rolagem quando
o estado estiver travado. */
/* ======================================================================
BLOCO: LOCK UI — quando o shell inteiro é travado (classe aplicada no root)
- Adiciona `nexus-pin-locked` em `html`/`body` para esconder a barra de
scroll externa e evitar encadeamento de eventos.
- Containers internos (area de trabalho / micro-apps) devem continuar
acionando scroll interno normalmente.
====================================================================== */
html.nexus-pin-locked, body.nexus-pin-locked {
overflow: hidden; /* remove a barra de rolagem externa */
height: 100%;
overscroll-behavior: none; /* evita chaining/scroll-bounce para o root */
}
/* As áreas internas que representam a "tela de trabalho" devem conter o
overscroll e permitir scroll interno sem vazar para o root. */
.nexus-viewport-area,
.nexus-viewport-area .nexus-scroll,
.nexus-viewport-area .nexus-content-inner {
overscroll-behavior: contain; /* impede que o scroll vaze para o root */
-webkit-overflow-scrolling: touch; /* suaviza rolagem em iOS */
}
/* Reserva estável do espaço da barra de rolagem para evitar layout shift
quando o overflow do root é alterado (fallback em navegadores modernos).
Browsers que suportam `scrollbar-gutter` vão manter o espaço, caso contrário
o JS aplica padding-right durante o lock. */
.main-content,
.nexus-viewport-area,
html, body {
scrollbar-gutter: stable;
}
/* Fallback leve: garante compatibilidade sem usar !important
Mantém regras para os seletores legados `.nexus-pin-button` e para
`.microapp-pin-button` sem overrides agressivos. */
.microapp-pin-button, #microapp-pin, .nexus-pin-button {
display: inline-flex;
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.microapp-pin-button .pin-icon,
.nexus-pin-button .icon {
min-width: calc(var(--nexus-toggle-icon-size, 18px));
min-height: calc(var(--nexus-toggle-icon-size, 18px));
display: inline-block;
}
.microapp-pin-action,
.nexus-btn-square {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Opt-in: show central scrollbar visuals (Firefox & Webkit)
Herda as definições do nexus-base-reset.css via tokens globais */
html.nexus-show-central-scrollbar .main-content,
html.nexus-show-central-scrollbar .main-content .nexus-scroll {
scrollbar-width: thin;
scrollbar-color: var(--accent) var(--bg-main);
}
html.nexus-show-central-scrollbar .main-content::-webkit-scrollbar,
html.nexus-show-central-scrollbar .main-content .nexus-scroll::-webkit-scrollbar {
display: block;
width: 6px;
height: 6px;
}
/* Limpeza de padding global - Layout Full Bleed */
.main-content > * {
width: 100%;
padding: 0;
margin: 0;
}
/* ==========================================================================
BLOCO: CONTAINMENT / CONTRATO DE LAYOUT
- Evita que micro-apps expandam o fluxo do shell (min-width em filhos flex,
overflow controlado e container interno com largura máxima).
- Regras mínimas e seguras: não removem scrollbar padrão de apps e permitem
que micro-apps escolham scroll interno via `.nexus-scroll` quando necessário.
========================================================================== */
.nexus-main-content {
width: 100%;
min-width: 0; /* permite que filhos flex encolham corretamente */
box-sizing: border-box;
/* Correção: clip previne overspill sem criar scroll-container, ressuscitando position:sticky */
overflow: clip;
}
.nexus-content-inner {
flex: 1;
width: 100%;
min-width: 0;
box-sizing: border-box;
/* Remove paddings/borders globais para permitir micro-app full-bleed.
Micro-apps que precisarem de espaçamento devem declarar localmente. */
max-width: none;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
overflow: visible;
}
/* Segurança adicional: imagens e tabelas não devem forçar overflow */
.nexus-content-inner img,
.nexus-content-inner table {
max-width: 100%;
height: auto;
}
/* Regras migradas do template: sidebar contextual, contenção e blocos manuais */
#microapp-focus-node {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: stretch; /* força a Área de Trabalho e a Sidebar a terem a mesma altura */
width: 100%;
box-sizing: border-box;
}
#app-contextual-actions {
position: relative;
width: var(--app-right-col-width);
background: var(--bg-sidebar);
border-left: 1px solid var(--border);
padding: 0 var(--space-4);
flex-shrink: 0;
overflow-y: auto;
}
.manual-section {
/* Aumenta espaçamento horizontal para evitar que títulos encostem nas bordas */
padding: 80px calc(var(--inner-padding-x) + 12px);
background: var(--bg-app);
border-top: 1px solid var(--border);
}
.manual-section .nexus-content-inner { max-width: 1100px; margin: 24px auto 0 auto; }
.step-card {
background: var(--bg-card);
padding: 24px;
border-radius: 12px;
border: 1px solid var(--border);
margin-bottom: 20px;
transition: transform 0.2s ease;
}
.step-card:hover { transform: translateY(-2px); }
/* Footer: container básico, restante do estilo pode ficar nos componentes */
.footer-sitemap {
background: var(--bg-card);
border-top: 1px solid var(--border);
padding: 40px var(--standard-padding);
}
.footer-container { max-width: 1200px; margin: 0 auto; }
/* Força absoluta: garante que micro-apps não desloquem o grid do footer */
.footer-sitemap .footer-container {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--inner-padding-x);
padding-right: var(--inner-padding-x);
box-sizing: border-box !important;
}
/* Estilo do container de busca */
.sidebar-search {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) 0;
}
.sidebar-search input {
flex-grow: 1;
padding: 0;
}
/* ========================================================================== */
/* BLOCO: BOTÕES TOGGLE DAS SIDEBARS — CONFIGURAÇÃO BASE */
/* ========================================================================== */
/* Nota: Posicionamento específico varia por breakpoint (desktop vs mobile).
Estas são as regras compartilhadas e o comportamento de visibilidade. */
/* Regra Base: Todos os botões toggle (Purificada) */
body #nexus-open-btn,
body #nexus-close-btn,
body #contextual-open-btn,
body #contextual-close-btn {
position: fixed;
z-index: var(--z-toggle);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bg-card, #ffffff);
border: 1px solid var(--border, #e2e8f0);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
cursor: pointer;
transition: all 0.2s ease;
font-size: 16px;
}
/* Animação suave para o botão de fechar da sidebar esquerda */
#nexus-close-btn {
opacity: 0;
transform: translateX(-12px);
pointer-events: none;
}
body.nexus-open #nexus-close-btn {
animation: nexusCloseBtnIn 0.24s ease forwards;
animation-delay: 0.24s; /* espera a gaveta concluir (animação ~0.3s) */
pointer-events: auto;
}
body:not(.nexus-open) #nexus-close-btn {
animation: none;
opacity: 0;
transform: translateX(-12px);
pointer-events: none;
}
@keyframes nexusCloseBtnIn {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); pointer-events: auto; }
}
/* Tamanhos do toggle movidos para o bloco consolidado ao final do arquivo. */
/* Hover: Sidebar ESQUERDA (Nexus) — com movimento */
#nexus-open-btn:hover,
#nexus-close-btn:hover {
background-color: var(--bg-card, #f9fafb);
transform: scale(1.05);
}
/* Caso a configuração em Settings desative o botão, esconder via classe raiz */
html.nexus-disable-open-btn #nexus-open-btn,
html.nexus-disable-open-btn #nexus-close-btn {
display: none !important;
}
/* Hover: Sidebar DIREITA (Contextual) — sutil, sem movimento */
#contextual-open-btn:hover,
#contextual-close-btn:hover {
background-color: var(--border, #e2e8f0);
}
/* Animação suave para o botão de fechar da sidebar direita */
#contextual-close-btn {
opacity: 0;
transform: translateX(12px);
pointer-events: none;
}
body.contextual-open #contextual-close-btn {
animation: contextualCloseBtnIn 0.24s ease forwards;
animation-delay: 0.24s; /* espera a gaveta concluir (~0.3s) */
pointer-events: auto;
}
body:not(.contextual-open) #contextual-close-btn {
animation: none;
opacity: 0;
transform: translateX(12px);
pointer-events: none;
}
@keyframes contextualCloseBtnIn {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); pointer-events: auto; }
}
/* Responsivo: padding e tamanhos são tratados nos blocos consolidados de breakpoint. */
@media (min-width: 901px) {
/* Grid em Desktop: por padrão reserve apenas a coluna central.
A coluna contextual (direita) só será adicionada ao grid quando
o elemento `#app-contextual-actions` contiver conteúdo visível.
Usa `:has()` para evitar reservar espaço quando a sidebar estiver vazia. */
/* .app-layout usa layout flex do base; evitar grid reservado no shell */
/* Não criar segunda coluna em nenhum caso — contextual será posicionada
dentro do microapp sem alterar o grid do shell. */
/* Sidebar NEXUS (left): Overlay em Desktop também — FECHADA por padrão */
.sidebar.left {
position: fixed !important;
width: var(--sidebar-width);
height: 100vh;
left: 0;
top: 0;
transform: translateX(-105%) !important;
opacity: 0 !important;
box-shadow: 6px 0 28px rgba(2,6,23,0.28);
z-index: 11100;
padding: 0 var(--space-4);
overflow-x: visible !important;
overflow-y: auto !important;
transition: transform 0.3s ease, opacity 0.3s ease !important;
}
/* Sidebar NEXUS aberta em Desktop */
.sidebar.left.open {
transform: translateX(0) !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* Oculta o search-icon (lupa) no Tablet */
.sidebar-search .search-icon {
display: none;
}
/* main-content: Limpeza de grid legados */
.main-content {
padding: 0 !important;
margin-right: 0 !important;
}
/* Configuração para o conteúdo interno */
.main-content > * {
max-width: none;
margin-left: auto;
margin-right: auto;
width: 100%;
padding: 0;
}
/* Host pode ocultar a contextual em mobile (incluindo botões de toggle) */
/* Host can hide contextual column; use clean selectors without !important
and rely on specificity/order to control visibility. */
html.nexus-contextual-hidden .sidebar.right,
html.nexus-contextual-hidden #contextual-open-btn,
html.nexus-contextual-hidden #contextual-close-btn {
display: none;
}
/* Contextual volta ao fluxo padrão em >900px (posicionamento gerenciado pelo shell)
Nota: o template pode sobrescrever estas regras para posicionamento absoluto. */
#app-contextual-actions {
right: auto;
top: auto;
transform: none;
opacity: 1;
pointer-events: auto;
width: var(--app-right-col-width);
min-width: var(--app-right-col-width);
max-width: var(--app-right-col-width);
height: 100%; /* Permite herdar a altura */
grid-column: auto; /* não force uma coluna no grid do shell */
box-shadow: none;
border-left: 1px solid var(--border);
padding: 0 var(--space-4);
align-self: stretch; /* CRÍTICO: Permite que estique no Flexbox */
position: static;
}
/* Esconde controles específicos em desktop/tablet (sem !important).
Se for necessário sobrescrever, usar seletores com maior especificidade
no template do micro-app. */
body:not(.is-mobile) .sidebar-close-btn { display: none; }
body:not(.is-mobile) #contextual-toggle { display: none; }
body:not(.is-mobile) .contextual-fab { display: none; }
/* Botão de ABRIR contextual não é necessário em desktop (sidebar visível) */
body:not(.is-mobile) #contextual-open-btn { display: none; }
/* Botão de FECHAR contextual (desktop): flutua na borda esquerda da sidebar */
#contextual-close-btn {
top: 50%;
right: calc(var(--app-right-col-width) - 18px);
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--color-on-primary, #fff);
background-color: var(--accent, #3b82f6);
border: none;
box-shadow: -2px 0 8px rgba(var(--accent-rgb,59,130,246), 0.3);
}
/* visibilidade controlada por animação/opacity e Z-index padronizado */
/* Toggle NEXUS: regras antigas removidas aqui (consolidadas no final do arquivo)
Ver bloco consolidado: 'TOGGLE NEXUS (CONSOLIDADO)' */
/* Desktop: Fixar a sidebar contextual na borda direita da viewport
e alinhar sua altura com a área visível abaixo do header. */
/* Força absoluta na direita — usa seletor com maior especificidade e
!important para sobrescrever regras genéricas de `.sidebar.right`. */
/* Sidebar contextual faz parte do fluxo do micro-app e usa sticky
para acompanhar a rolagem do container principal. */
body.has-contextual #app-contextual-actions.sidebar.right {
min-height: 100%;
z-index: 100;
}
/* Icon sizing consolidated later to use variables (see consolidated block). */
/* Adsense rules removed: advertising footer/component disabled project-wide */
/* .adsense-container { max-width: 1100px; margin: 24px auto; } */
/* Garante que o backdrop não apareça em desktop/tablet */
.sidebar-backdrop {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
/* PROTOCOLO MOBILE (max-width: 900px)
- Ambas Colunas: Ocultas (Overlay).
- Botão NEXUS: Visível para expandir.
------------------------------------------------------------------------- */
@media (max-width: 900px) {
/* On mobile, left sidebar is overlay and right contextual column is hidden
so header should be full-width (no left offset, no right column) */
/* Note: CSS variables already defined in global :root above; only override specific values if needed */
/* Ensure contextual toggle is visible on mobile so users can open the right column */
body #contextual-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 240;
}
/* Floating contextual FAB - Fixo e centralizado verticalmente na viewport */
body .contextual-fab {
display: inline-flex;
position: fixed; /* Garante que ignore o scroll do pai e foque na viewport */
right: 14px;
top: 50vh; /* Centralização absoluta baseada na altura da tela */
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
align-items: center;
justify-content: center;
background: var(--primary);
color: var(--color-on-primary, #fff);
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
border: 1px solid rgba(255,255,255,0.08);
z-index: 260;
cursor: pointer;
}
.contextual-fab .material-icons-round {
font-size: 20px;
line-height: 1;
}
/* .app-layout herda comportamento flex do base; remover grid redundante */
/* Sidebar NEXUS: Garante o estado overlay (hidden) */
body .app-layout .sidebar.left {
transform: translateX(-105%);
opacity: 0;
padding-top: 0;
padding-bottom: var(--space-4);
left: 0;
right: auto;
overflow-x: visible; /* Permite botão aparecer fora */
overflow-y: auto;
}
/* Coluna Contextual (Direita): Oculta, apenas aparece com classe .open (JS) */
body .app-layout .sidebar.right {
transform: translateX(105%);
opacity: 0;
right: 0;
left: auto;
}
body .app-layout .main-content {
/* Mobile: Full Bleed */
padding: 0;
align-items: stretch;
margin-right: 0;
}
.main-content > * {
margin-left: 0;
margin-right: 0;
max-width: none;
width: 100%;
padding: 0;
}
/* Host pode ocultar a contextual em mobile */
/* Mobile: host can hide contextual column */
html.nexus-contextual-hidden .sidebar.right { display: none; }
/* Contextual ancorada à Viewport em mobile (Absolute Wrapper + Sticky Content) */
body #app-contextual-actions {
position: absolute;
right: 0;
left: auto;
top: 0;
height: 100%;
width: var(--app-right-col-width);
padding: 0;
transform: translateX(100%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
pointer-events: none;
z-index: 1999;
background: var(--bg-sidebar);
}
body #app-contextual-actions.open {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
box-shadow: -4px 0 25px rgba(0,0,0,0.15); /* Adiciona profundidade à gaveta */
}
/* Wrapper de Toggle - Sticky para deslizar na viewport organicamente */
body .contextual-toggles-wrapper {
position: sticky;
top: 50vh;
right: 0;
width: 0;
height: 0;
z-index: 2000;
align-self: flex-start;
}
/* Botões descolados da regra base, absolutos ao wrapper */
body .contextual-toggles-wrapper #contextual-open-btn,
body .contextual-toggles-wrapper #contextual-close-btn {
position: absolute;
top: 0;
transform: translateY(-50%);
}
/* Botão de abrir e lógica de ocultamento ao acionar a gaveta */
body .contextual-toggles-wrapper #contextual-open-btn {
right: 0;
left: auto;
}
body.contextual-open .contextual-toggles-wrapper #contextual-open-btn,
body.contextual-open #contextual-open-btn {
display: none;
opacity: 0;
pointer-events: none;
}
/* Botão de fechar: Recuado para alinhar com a borda da gaveta */
body .contextual-toggles-wrapper #contextual-close-btn {
right: calc(var(--app-right-col-width) - 18px);
left: auto;
}
/* Garante que o conteúdo interno acompanhe a visão do usuário durante o scroll */
body #app-contextual-actions .contextual-content {
position: sticky;
top: 0;
height: 100vh;
max-height: 100vh;
padding: var(--space-4);
overflow-y: auto;
}
/* Backdrop somente quando contextual aberta */
body.contextual-open .sidebar-backdrop {
display: block;
opacity: 1;
pointer-events: auto;
}
/* Botões TOGGLE Contextual (Sidebar Direita) — MOBILE */
#contextual-open-btn {
top: 50%;
right: 0;
transform: translateY(-50%);
width: 28px;
height: 48px;
border-radius: 6px 0 0 6px;
background-color: #3b82f6;
color: var(--color-on-primary, #fff);
border: none;
box-shadow: -2px 0 8px rgba(59, 130, 246, 0.3);
}
/* When contextual is open, hide the open button. Keep without !important. */
body.contextual-open #contextual-open-btn { display: none; }
/* Fechar: alinhar ao meio da borda esquerda da sidebar (consistência com desktop) */
#contextual-close-btn {
top: 50%;
right: calc(var(--app-right-col-width) - 18px);
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--color-on-primary, #fff);
background-color: #3b82f6;
border: none;
box-shadow: -2px 0 8px rgba(59, 130, 246, 0.3);
}
/* visibilidade controlada por animação/opacity */
#contextual-open-btn:hover { background-color: var(--accent, #2563eb); }
#contextual-close-btn:hover { background-color: var(--accent, #2563eb); }
/* Regras de rotação de ícones controladas por JS/texto; limpeza de estilos redundantes aplicada. */
/* Sidebar NEXUS em overlay + toggles (mobile) */
body #app-nexus {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: var(--sidebar-width);
transform: translateX(-105%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
pointer-events: none;
z-index: 1999;
}
body #app-nexus.open {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
/* Toggle NEXUS (mobile) posicionado limpo via hierarquia */
body .nexus-toggle-btn.open-btn { left: 0; }
body .nexus-toggle-btn.close-btn { left: var(--sidebar-width); }
/* Grids responsivos (mobile) */
.nexus-grid-3,
.nexus-grid-2 {
grid-template-columns: 1fr;
}
.kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
/* AdSense mobile rules removed: advertising footer/component disabled project-wide */
/* .adsense-container { padding: 0 16px; margin: 16px 0; }
.adsense-container .adsbygoogle { min-height: 50px; max-height: 100px; } */
/* Bloco 1: Accordion Responsivo — Reduz padding em mobile para evitar quebra de linha */
.accordion-header {
padding: var(--space-2) var(--space-3);
font-size: 0.9rem;
gap: var(--space-2);
}
.accordion-content {
padding: 0 var(--space-3);
}
.accordion-item.active .accordion-content {
padding: var(--space-2) var(--space-3);
}
/* Antigo `.menu-toggle` removido - controlado via `.nexus-toggle-btn` */
}
/* Hide floating FAB whenever the contextual drawer is open (body class applied by JS) */
.contextual-open .contextual-fab {
display: none !important;
}
/* Quando a sidebar está aberta (usado por JS em Mobile/Tablet) */
.sidebar.open {
transform: translateX(0) !important;
opacity: 1 !important;
}
/* CRÍTICO: Oculta o botão de menu quando body tem classe nexus-open */
/* Removed legacy `.menu-toggle` visibility rules (now handled by `.nexus-toggle-btn`) */
/* Backdrop para o overlay - DESATIVADO */
.sidebar-backdrop {
display: none !important;
}
/* Bloco 2: Utilitários relacionados */
.with-sidebar-open .main-content {
transition: none !important;
}
/* Bloco 2: Pequenas regras de foco para acessibilidade */
.sidebar:focus {
outline: none;
}
/* Removed legacy `.menu-toggle:focus` rules */
/* Bloco 2: Estilos de Componentes do Header e Configurações */
/* --- Dropdown do Cabeçalho (User Menu) --- */
.dropdown-container {
position: relative;
display: inline-block;
margin-left: 10px;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background-color: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px; /* ALTERADO: Aumentando o arredondamento para um visual mais suave */
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); /* Aumentando ligeiramente a sombra para destaque */
min-width: 280px;
max-width: 320px;
z-index: 1500; /* AUMENTADO: Garantindo que o menu apareça acima de quase tudo (headers, sidebars, etc.) */
display: none; /* Ocultar por padrão */
margin-top: 8px;
padding: 4px 0;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown-menu.show {
display: block;
opacity: 1;
transform: translateY(0);
}
.dropdown-item {
display: flex;
align-items: center;
padding: 8px 12px;
text-decoration: none;
color: var(--text-main);
white-space: nowrap;
font-size: 0.95rem;
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
}
.dropdown-item:hover {
background-color: var(--bg-app);
}
.dropdown-item .material-icons-round {
margin-right: 8px;
font-size: 20px;
color: var(--primary);
}
/* --- Novo Botão de Usuário no Header --- */
.header-user-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: 9999px; /* Pill shape */
background: var(--bg-card);
transition: background 0.2s ease, border-color 0.2s ease;
}
.header-user-btn:hover {
background: var(--bg-app);
border-color: var(--primary);
}
.header-user-btn .user-name {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-main);
}
.header-actions .avatar-sm {
/* Avatar no botão principal */
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--primary);
color: white;
font-size: 16px;
line-height: 24px;
text-align: center;
}
/* --- Estilos do Dropdown de Perfil Detalhado --- */
.dropdown-header {
display: flex;
flex-direction: column;
align-items: center;
padding: 18px 16px 12px 16px;
gap: 8px;
}
.dropdown-header .avatar-lg {
/* Avatar grande dentro do menu */
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--primary);
color: white;
font-size: 30px;
line-height: 60px;
text-align: center;
margin-bottom: 4px;
}
.dropdown-header .user-info {
text-align: center;
}
.dropdown-header .user-info .name {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-main);
margin: 0;
}
.dropdown-header .user-info .email {
font-size: 0.85rem;
color: var(--text-muted);
margin: 0;
}
.dropdown-divider {
height: 1px;
background: var(--border);
margin: 4px 0;
}
/* --- Estilos da Página de Configurações (Settings) --- */
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.settings-card {
display: flex;
flex-direction: column;
padding: 15px 20px;
}
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 1rem;
}
.setting-item:last-child {
border-bottom: none;
}
.setting-item label {
color: var(--text-main);
}
/* --- Toggle Switch (Tema Escuro) --- */
.toggle-switch {
width: 40px;
height: 22px;
background-color: var(--text-muted); /* Cinza claro quando off */
border: none;
border-radius: 11px;
cursor: pointer;
position: relative;
transition: background-color 0.3s;
padding: 0;
flex-shrink: 0; /* Não encolher */
}
.toggle-switch.active {
background-color: var(--primary);
}
.toggle-switch .slider {
position: absolute;
content: '';
height: 16px;
width: 16px;
top: 3px;
left: 3px;
background-color: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
transition: transform 0.3s;
border-radius: 50%;
}
.toggle-switch.active .slider {
transform: translateX(18px);
}
/* DARK MODE ADJUSTMENTS */
.body.dark-mode .dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.body.dark-mode .toggle-switch {
background-color: var(--border);
}
/* ================================
Bloco 3 — Sidebar NEXUS (Componentes Internos)
================================ */
/* Modern scrollbar system: scoped to known scroll containers so apps
inherit consistent tokens without applying a universal `*` selector.
Avoid `!important` and let component-specific rules override when needed. */
.nexus-scroll-system,
.nexus-scroll,
.nexus-scroll-area {
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--accent) var(--bg-main);
}
/* WebKit pseudo-elements scoped to common scroll containers */
.nexus-scroll-area::-webkit-scrollbar,
.nexus-scroll::-webkit-scrollbar,
.nexus-scroll-system .nexus-scroll::-webkit-scrollbar,
.nexus-scroll-system .nexus-scroll-area::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.nexus-scroll-area::-webkit-scrollbar-track,
.nexus-scroll::-webkit-scrollbar-track,
.nexus-scroll-system .nexus-scroll::-webkit-scrollbar-track,
.nexus-scroll-system .nexus-scroll-area::-webkit-scrollbar-track {
background: rgba(var(--bg-main-rgb), 0.06);
}
.nexus-scroll-area::-webkit-scrollbar-thumb,
.nexus-scroll::-webkit-scrollbar-thumb,
.nexus-scroll-system .nexus-scroll::-webkit-scrollbar-thumb,
.nexus-scroll-system .nexus-scroll-area::-webkit-scrollbar-thumb {
background-color: rgba(var(--accent-rgb), 0.28);
border-radius: 999px;
border: 1px solid transparent;
background-clip: padding-box;
}
.nexus-scroll-area::-webkit-scrollbar-thumb:hover,
.nexus-scroll::-webkit-scrollbar-thumb:hover,
.nexus-scroll-system .nexus-scroll::-webkit-scrollbar-thumb:hover,
.nexus-scroll-system .nexus-scroll-area::-webkit-scrollbar-thumb:hover {
background-color: rgba(var(--accent-rgb), 0.6);
}
/* Dark theme overrides for Firefox scrollbar-color removed to allow global solid color inheritance */
/* Sobrescrita de Tokens para Modo Escuro */
html[data-theme="dark"] {
--bg-app: #0f172a;
--bg-card: #1e293b;
--bg-sidebar: #1e293b;
--text-main: #f8fafc;
--text-muted: #94a3b8;
--border: #334155;
--nav-hover-bg: rgba(255, 255, 255, 0.05);
--logo-url: url('/static/img/nexus_logo_dark.png');
}
.brand-header img {
content: var(--logo-url); /* Troca de asset via CSS */
}
/* LINKS PADRÃO / BOTÕES / INPUTS (Movido do antigo Bloco 3)
---------------------------------------------*/
a {
text-decoration: none;
color: inherit;
}
button {
cursor: pointer;
font-family: inherit;
}
input, select, textarea {
font-family: inherit;
outline: none;
}
/* CONTAINER DA SIDEBAR (Removido CSS estrutural conflituoso)
---------------------------------------------*/
#nexus-sidebar-header {
font-size: 1.6rem;
font-weight: 800;
color: var(--primary);
margin-bottom: 25px;
letter-spacing: -1px;
}
/* LISTA DE APLICAÇÕES / MENU
---------------------------------------------*/
#nexus-menu {
display: flex;
flex-direction: column;
gap: 8px;
}
.nexus-menu-item {
padding: 12px 14px;
background: var(--bg-card);
border-radius: 8px;
border: 1px solid var(--border);
font-size: 0.95rem;
color: var(--text-main);
transition: all 0.25s ease;
}
.nexus-menu-item:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: translateX(4px);
}
/* ESTADO ATIVO DO MENU */
.nexus-menu-item.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
/* Botão de fechar movido para sidebar.css para modularidade */
/* ================================
Bloco 4 — Header + Cards + Widgets
================================ */
/* HEADER INTERNO DO DASHBOARD
---------------------------------------------*/
#nexus-page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
/* Cabeçalho Global (Header.html) - estilos restaurados */
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
--header-vertical-padding: 6px;
padding-top: var(--header-vertical-padding);
padding-bottom: var(--header-vertical-padding);
/* Header relativo permite o scroll para revelar a viewport */
position: relative;
top: 0;
/* Snap nativo removido para não conflitar com a lógica Matemática do JS */
/* Padding lateral fixo com Safe Zone (acomoda o botão fixed de 40px + 12px de folga) */
padding-left: calc(var(--standard-padding) + 52px);
padding-right: var(--standard-padding);
width: 100%;
margin-left: 0;
margin-right: 0;
height: var(--header-height);
line-height: var(--header-height);
margin: 0 !important;
background: var(--bg-app, #fff);
z-index: 11000;
box-sizing: border-box;
}
/* Elementos internos do header - alinhamento conservador */
.app-header > div,
.app-header h1,
.app-header a,
.app-header .header-actions,
.app-header .dropdown-container {
display: flex;
align-items: center;
}
.app-header h1 {
margin: 0;
padding: 0;
line-height: 1.2;
font-size: inherit;
}
.app-header .material-icons-round {
vertical-align: middle;
font-size: 1.1rem;
line-height: 1.2;
}
.app-header .header-actions { display: flex; align-items: center; gap: 6px; padding: 0; }
.app-header .header-user-btn {
padding: 2px 6px;
line-height: 1;
}
/* ======= Header local typography & layout moved from header.html ======= */
/* Ensure header text inherits the header font-size and compact line-height */
.app-header{ --header-font-size: 1rem; font-size: var(--header-font-size); }
.app-header h1,
.app-header a,
.app-header .header-user-btn,
.app-header .header-user-btn .user-name,
.app-header .dropdown-menu.user-dropdown-menu,
.app-header .dropdown-menu.user-dropdown-menu .dropdown-item,
.app-header .dropdown-header .user-info p {
font-size: inherit;
line-height: 1.2;
}
.app-header .avatar-sm,
.app-header .avatar-lg { font-size: 0.9rem; }
/* Layout interno: esquerda (Breadcrumbs + Título) e ação (direita) */
.app-header .header-left { display: flex; align-items: center; gap: 8px; }
/* Breadcrumbs SaaS Moderno */
.header-breadcrumbs { display: flex; align-items: center; gap: 8px; margin-right: 8px; }
.breadcrumb-home {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 8px;
background: var(--bg-app); border: 1px solid var(--border);
color: var(--text-muted); text-decoration: none; transition: all 0.2s ease;
}
.breadcrumb-home:hover {
background: var(--nav-hover-bg); color: var(--primary); border-color: var(--primary); transform: translateY(-1px);
}
.breadcrumb-home .material-icons-round { font-size: 1.1rem; }
.breadcrumb-separator { font-size: 1.2rem; color: var(--text-muted); opacity: 0.5; }
/* Título e Badge da Aplicação */
.app-header .header-title { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.app-header .app-icon-badge {
display: inline-flex; align-items: center; justify-content: center;
padding: 6px; border-radius: 8px;
background: rgba(59, 130, 246, 0.1); color: var(--primary);
font-size: 1.1rem;
}
/* Utilitários do Header (Ícones e Autenticação) */
.header-icon-btn {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
color: var(--text-muted); transition: background 0.2s, color 0.2s;
position: relative;
}
.header-icon-btn:hover { background: var(--nav-hover-bg); color: var(--primary); }
.header-icon-btn .material-icons-round { font-size: 1.25rem; }
.notification-dot {
position: absolute; top: 6px; right: 8px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--danger); border: 2px solid var(--bg-card);
}
/* Container de botões CTAs para visitantes */
.auth-actions { display: flex; align-items: center; gap: 12px; }
.header-btn-ghost {
font-size: 0.9rem; font-weight: 600; color: var(--text-main);
padding: 6px 12px; border-radius: 6px; transition: background 0.2s;
text-decoration: none;
}
.header-btn-ghost:hover { background: rgba(0,0,0,0.05); }
.body.dark-mode .header-btn-ghost:hover { background: rgba(255,255,255,0.1); }
.header-btn-primary {
font-size: 0.9rem; font-weight: 600; color: var(--color-on-primary, #fff);
background: var(--primary); padding: 6px 16px; border-radius: 6px;
transition: background 0.2s, transform 0.1s; text-decoration: none;
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}
.header-btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
/* NOVO ESTILO: Container dos Botões de Ação Global (Tema, Notificação, Perfil) */
.header-actions {
display: flex;
align-items: center;
gap: var(--space-4); /* Espaçamento entre os botões */
}
#nexus-page-title {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-main);
}
#nexus-page-subtitle {
font-size: 1rem;
color: var(--text-muted);
margin-top: 4px;
}
/* BOTÕES PADRÃO
---------------------------------------------*/
.nexus-btn {
padding: 10px 16px;
border-radius: 8px;
border: none;
background: var(--primary);
color: white;
font-size: 0.95rem;
transition: background 0.25s ease;
}
.nexus-btn:hover {
background: var(--primary-hover);
}
.nexus-btn-outline {
padding: 10px 16px;
border-radius: 8px;
border: 1px solid var(--primary);
background: transparent;
color: var(--primary);
font-size: 0.95rem;
transition: all 0.25s ease;
}
.nexus-btn-outline:hover {
background: var(--primary);
color: white;
}
/* ============================================
/* Bloco 5 — Tabelas, Badges, Alertas, Chips, Tooltips */
/* TABELAS CORPORATIVAS NEXUS
---------------------------------------------*/
.nexus-table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--bg-card);
}
.nexus-table thead {
background: var(--bg-app);
}
.nexus-table th {
padding: 12px 16px;
font-weight: 600;
text-align: left;
font-size: 0.9rem;
color: var(--text-main);
border-bottom: 1px solid var(--border);
}
.nexus-table td {
padding: 12px 16px;
font-size: 0.95rem;
color: var(--text-main);
border-bottom: 1px solid var(--border);
}
.nexus-table tr:hover td {
background: rgba(0, 0, 0, 0.03);
}
/* BADGES / STATUS
---------------------------------------------*/
.nexus-badge {
padding: 5px 10px;
font-size: 0.78rem;
font-weight: 600;
border-radius: 50px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.nexus-badge.green {
background: var(--state-success-bg, rgba(var(--eng-success-rgb,46,204,113),0.12));
color: var(--state-success-fg, var(--eng-success, #065f46));
}
.nexus-badge.yellow {
background: var(--state-warn-bg, rgba(250,240,200,0.6));
color: var(--state-warn-fg, #854d0e);
}
.nexus-badge.red {
background: var(--state-danger-bg, rgba(var(--eng-danger-rgb,255,77,77),0.08));
color: var(--state-danger-fg, var(--eng-danger, #991b1b));
}
.nexus-badge.blue {
background: var(--state-info-bg, rgba(var(--accent-rgb,0,212,255),0.08));
color: #1e3a8a;
}
/* ALERTAS
---------------------------------------------*/
.nexus-alert {
padding: 15px 20px;
border-radius: 12px;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
}
.nexus-alert.success {
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #065f46;
}
.nexus-alert.warning {
background: #fffbeb;
border: 1px solid #fcd34d;
color: #92400e;
}
.nexus-alert.error {
background: #fef2f2;
border: 1px solid #fca5a5;
color: #991b1b;
}
.nexus-alert.info {
background: #eff6ff;
border: 1px solid #93c5fd;
color: #1e40af;
}
/* CHIPS / TAGS
---------------------------------------------*/
.nexus-chip {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 50px;
background: var(--bg-app);
border: 1px solid var(--border);
color: var(--text-main);
font-size: 0.85rem;
gap: 6px;
}
.nexus-chip .material-icons-round {
font-size: 16px;
}
/* TOOLTIP
---------------------------------------------*/
.nexus-tooltip {
position: relative;
display: inline-block;
cursor: help;
}
.nexus-tooltip:hover::after {
content: attr(data-tip);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: #1f2937;
color: var(--color-on-primary, #fff);
padding: 6px 10px;
font-size: 0.75rem;
border-radius: 6px;
white-space: nowrap;
z-index: 10;
opacity: 1;
}
.nexus-tooltip:hover::before {
content: "";
position: absolute;
bottom: 110%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: #1f2937 transparent transparent transparent;
z-index: 11;
}
/* ============================================
Bloco 6 — Inputs, Formulários, Selects, Switch,
Checkbox, Radio, Textareas
============================================ */
/* WRAPPERS GERAIS DE FORMULÁRIO
---------------------------------------------*/
.nexus-form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 18px;
}
.nexus-form-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-main);
}
/* INPUT PADRÃO
---------------------------------------------*/
.nexus-input, .sidebar-search input, .sidebar-feedback input, .sidebar-feedback textarea {
width: 100%;
padding: 10px 14px;
font-size: 0.95rem;
border: 1px solid var(--border);
background: var(--bg-card);
border-radius: 10px;
color: var(--text-main);
transition: border-color 0.2s, box-shadow 0.2s;
}
.nexus-input:focus, .sidebar-search input:focus, .sidebar-feedback input:focus, .sidebar-feedback textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.nexus-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
/* INPUT INVALIDO
---------------------------------------------*/
.nexus-input.invalid {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}
/* TEXTAREA
---------------------------------------------*/
.nexus-textarea {
width: 100%;
min-height: 120px;
padding: 10px 14px;
resize: vertical;
border-radius: 10px;
font-size: 0.95rem;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-main);
}
.nexus-textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
/* SELECT PADRÃO
---------------------------------------------*/
.nexus-select {
width: 100%;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-main);
font-size: 0.95rem;
transition: 0.2s ease;
}
.nexus-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
/*************************************************
* SWITCH (ON/OFF)
*************************************************/
/* Padrão migrado para o shared-lib para evitar redundância e conflito de especificidade. */
/*************************************************
* CHECKBOX
*************************************************/
.nexus-checkbox {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.nexus-checkbox input {
width: 18px;
height: 18px;
accent-color: var(--primary);
}
/*************************************************
* RADIO
*************************************************/
.nexus-radio {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.nexus-radio input {
width: 18px;
height: 18px;
accent-color: var(--primary);
}
/* ============================================
Bloco 8 — Componentes Interativos:
Modais, Dropdowns, Tooltips, Tabs, Accordions, Steps
============================================ */
/* =====================================================
MODAL (overlay + conteúdo)
===================================================== */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity var(--trans-med) var(--trans-ease);
z-index: 500;
}
.modal-backdrop.active {
opacity: 1;
visibility: visible;
}
.modal {
background: var(--bg-card);
border-radius: var(--radius-lg);
padding: var(--space-6);
max-width: 600px;
width: 90%;
box-shadow: var(--shadow-md);
transform: translateY(-20px);
transition: all var(--trans-med) var(--trans-ease);
}
.modal-backdrop.active .modal {
transform: translateY(0);
}
/* =====================================================
TOOLTIP
===================================================== */
.tooltip {
position: absolute;
background: var(--bg-card);
color: var(--text-main);
border-radius: var(--radius-md);
padding: 4px 8px;
font-size: 0.75rem;
font-weight: 500;
box-shadow: var(--shadow-md);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all var(--trans-fast) var(--trans-ease);
pointer-events: none;
z-index: 400;
}
.tooltip.show {
opacity: 1;
visibility: visible;
}
/* =====================================================
TABS
===================================================== */
.tabs {
display: flex;
border-bottom: 1px solid var(--border);
gap: var(--space-4);
}
html {
margin: 0;
padding: 0;
height: 100%;
overflow-y: auto;
/* Snap desativado no CSS para permitir controle total via JS Logic */
scroll-snap-type: none;
scroll-behavior: smooth;
}
.tab.active {
color: var(--primary);
border-color: var(--primary);
}
/* =====================================================
ACCORDION
===================================================== */
.accordion {
border-radius: var(--radius-md);
border: 1px solid var(--border);
overflow: hidden;
}
.accordion-item {
border-bottom: 1px solid var(--border);
}
.accordion-header {
padding: var(--space-4);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
background: var(--bg-card);
transition: background var(--trans-fast);
}
.accordion-header:hover {
background: rgba(var(--accent-rgb), 0.06);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height var(--trans-med) var(--trans-ease);
padding: 0 var(--space-4);
}
.accordion-item.active .accordion-content {
max-height: 500px; /* grande o suficiente para conteúdo */
padding: var(--space-3) var(--space-4);
}
/* =====================================================
STEPS / Wizard
===================================================== */
.steps {
display: flex;
gap: var(--space-6);
align-items: center;
justify-content: flex-start;
}
.step {
display: flex;
align-items: center;
gap: var(--space-3);
font-weight: 600;
color: var(--text-muted);
position: relative;
}
.step-circle {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: var(--bg-card);
}
.step.active .step-circle {
background: var(--primary);
color: var(--bg-card);
}
.step:not(:last-child)::after {
content: '';
height: 2px;
background: var(--border);
flex: 1;
display: block;
margin-left: var(--space-3);
}
.step.active:not(:last-child)::after {
background: var(--primary);
}
/* ===========================================================
Bloco 10 — Estilos da Logo/Brand Header (Tema)
=========================================================== */
.brand-header {
/* Garante que o container da logo e texto usem cores de tema */
color: var(--text-main);
margin-bottom: var(--space-6);
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-2);
}
.brand-header img {
/* Imagem da marca: tamanho controlado por variável unificada */
width: var(--logo-size);
height: var(--logo-size);
object-fit: contain;
transition: opacity 0.18s ease;
}
/* Nota: a troca da imagem do logo por tema é realizada via JS (applyTheme),
evitando o uso de `content:url` no CSS que causa problemas de layout
e dificulta a manipulação responsiva das imagens. */
/* [NEXUS BRANDING] Motor de Alternância de Logos */
.logo-theme-dark, .logo-theme-light { display: none; }
/* Se o HTML estiver em modo dark, mostra a versão light (branca) */
html[data-theme="dark"] .logo-theme-light { display: block; }
/* Se o HTML estiver em modo light, mostra a versão dark (escura) */
html[data-theme="light"] .logo-theme-dark { display: block; }
/* Bloco 13: Estilos da Sidebar NEXUS (Refatoração de 2025) */
.sidebar.left .nav-group-title {
/* Cor e Tamanho do Título do Grupo */
font-size: 0.75rem; /* Títulos menores para seções */
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 10px 15px 5px 15px; /* Manter padding lateral interno para os títulos */
/* CRÍTICO: Espaçamento para separação de grupo */
margin-top: 20px;
}
/* Garante que o primeiro grupo não tenha margem superior excessiva */
.sidebar.left .nav-links .nav-group-title:first-child {
margin-top: 0;
}
/* Ajusta o padding interno dos links para alinhar com o padding do título */
.sidebar.left .nav-link {
padding-left: 15px;
padding-right: 15px;
}
/* Ajusta a aparência do rodapé */
.sidebar-footer {
padding: 20px 15px 10px 15px;
border-top: 1px solid var(--border);
margin-top: auto; /* Empurra para o fundo da sidebar */
text-align: center;
}
.sidebar-footer > span {
display: block;
font-size: 0.7rem;
color: var(--text-muted);
margin-top: 5px;
}
/* contextual content: ensure vertical scrolling inside the contextual content */
/* contextual content: ensure vertical scrolling inside the contextual content */
#app-contextual-actions .contextual-content {
display: flex;
flex-direction: column;
/* Allow the contextual content to grow and shrink inside the sidebar */
flex: 1 1 auto;
min-height: 0; /* allow flex children to shrink and enable scrolling */
overflow: hidden; /* ensure inner element handles scrolling */
}
#app-contextual-actions .contextual-content .contextual-content,
#app-contextual-actions .contextual-content .nexus-scroll {
display: flex;
flex-direction: column;
/* contextual list should take remaining space and be scrollable */
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Desktop: não forçar 100vh globalmente (mobile overlay o faz dentro do media query).
Permitimos que o container use altura automática; o conteúdo interno terá
um `max-height` para permitir scroll calculado corretamente. */
#app-contextual-actions {
height: auto;
}
#app-contextual-actions .contextual-content {
/* max-height: calc(100vh - var(--header-height)); /* limita o conteúdo ao viewport menos header */
height: auto;
overflow-y: auto;
}
/* Scrollbar styling for the contextual list removed here — visual styling
now delegated to the shell staging process. If necessary, reintroduce via
`html.nexus-show-central-scrollbar` opt-in. */
/* Dynamic control: ocultar / exibir a coluna contextual a partir do host
é tratado nos blocos consolidados de breakpoint. */
/* Reduce internal padding for contextual content to bring items closer to the grid edge */
#app-contextual-actions .contextual-content .contextual-content,
#app-contextual-actions .contextual-content {
padding-left: 0;
padding-right: 8px; /* leave small gap for scrollbar */
gap: 10px; /* spacing between contextual items */
}
/* Slightly tighten contextual item spacing if items use margin */
#app-contextual-actions .contextual-content .contextual-item,
#app-contextual-actions .contextual-item {
margin-bottom: 12px;
}
/* Ensure delete button stays inside the contextual card and aligns with the header 'Input' */
/* Make more room for the math-field result by reducing reserved right padding
and ensuring the math-field occupies the remaining width while keeping the
delete icon inside the card. */
#app-contextual-actions .contextual-item {
position: relative; /* container for absolute-positioned delete button */
padding-right: 28px !important; /* reduced reserve to allow more content width */
box-sizing: border-box;
}
#app-contextual-actions .contextual-item .delete-btn {
position: absolute !important;
right: 8px !important; /* place the icon inside the reduced padded area */
top: 8px !important; /* slightly higher to align visually with header */
background: transparent !important;
padding: 4px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Force the math-field result to take the available width minus a small gap
so it reaches closer to the card's right edge without overlapping the delete btn. */
#app-contextual-actions .contextual-item .contextual-result {
flex: 1 1 auto !important;
min-width: 0 !important;
width: calc(100% - 36px) !important; /* reserves ~36px for the delete icon and gap */
max-width: 100% !important;
}
/* webkit scrollbar pseudo-elements removed here; inherit global visuals */
/* Mobile contextual toggle buttons (open/close pair) */
.contextual-toggle-btn {
position: fixed;
z-index: 12000; /* acima da coluna contextual (z=1999) e backdrop */
width: 44px;
height: 44px;
border: none;
background: var(--primary);
color: white;
border-radius: 50%;
cursor: pointer;
transition: opacity 0.3s;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
display: none;
}
.contextual-toggle-btn:hover {
opacity: 0.85;
}
.contextual-toggle-btn.open-btn {
top: 50%;
right: 14px;
transform: translateY(-50%);
align-items: center;
justify-content: center;
}
.contextual-toggle-btn.close-btn {
top: 50%;
right: calc(var(--app-right-col-width) - 22px);
transform: translateY(-50%);
align-items: center;
justify-content: center;
}
/* NEXUS (left) mobile toggle buttons - base styles moved to media queries for better specificity */
/* Base styles are now defined in desktop and mobile media queries to avoid conflicts */
.nexus-toggle-btn:hover { opacity: 0.95; }
/* Icon sizing inside the nexus toggle (same across all devices) */
.nexus-toggle-btn .material-icons-round,
.nexus-toggle-btn i {
font-size: var(--nexus-toggle-icon-size) !important;
line-height: 1 !important;
display: inline-block !important;
}
/* contextual toggle (button that lives in header) - hidden by default, visible only on mobile */
#contextual-toggle {
display: none;
}
/* ============================================================
GOOGLE ADSENSE - ÁREA DE PROPAGANDA
============================================================ */
.adsense-container {
width: 100%;
margin: 20px 0;
display: block; /* Garante que não interfira no grid do footer */
clear: both;
}
/* ============================================================ */
/* === TOGGLE NEXUS (CONSOLIDADO) === */
/* Bloco final consolidado — fonte única de verdade para tamanhos e layering */
body #nexus-open-btn,
body #nexus-close-btn,
body .nexus-toggle-btn {
position: fixed;
z-index: var(--z-toggle);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
transform: none;
overflow: visible;
}
/* Open button - Estrutura Base */
body #nexus-open-btn,
body .nexus-toggle-btn.open-btn {
width: var(--nexus-toggle-size-mobile);
height: var(--nexus-toggle-size-mobile);
padding: 4px;
border-radius: 6px;
top: 12px;
left: 12px;
transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.2s, color 0.2s;
}
/* Estado Inicial Oculto: Enquanto o Snap não reporta conclusão */
body:not(.nexus-snap-ready) #nexus-open-btn,
body:not(.nexus-snap-ready) .nexus-toggle-btn.open-btn {
opacity: 0;
pointer-events: none;
transform: translateX(-15px);
}
/* Estado Concluído: Visível e interativo após o Snap */
body.nexus-snap-ready #nexus-open-btn,
body.nexus-snap-ready .nexus-toggle-btn.open-btn {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
/* Garantir que o botão permaneça fluido caso a sidebar seja aberta */
body.nexus-open #nexus-open-btn {
display: flex;
}
/* Close button variants:
- slim vertical bar used by `.nexus-toggle-btn.close-btn`
- round floating `#nexus-close-btn` aligned to the right edge of the opened sidebar
*/
body .nexus-toggle-btn.close-btn {
width: 7px;
height: 98px;
padding: 6px;
}
/* Round floating close button for left sidebar */
body #nexus-close-btn {
width: var(--nexus-toggle-size-mobile);
height: var(--nexus-toggle-size-mobile);
padding: 4px;
border-radius: 50%;
top: 12px;
left: calc(var(--sidebar-width) + 10px);
background-color: #ef4444;
color: #fff;
border: none;
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
/* Icon sizing */
body #nexus-open-btn .material-icons-round,
body #nexus-close-btn .material-icons-round,
body .nexus-toggle-btn .material-icons-round {
font-size: var(--nexus-toggle-icon-size);
line-height: 1;
display: inline-block;
}
@media (min-width: 768px) {
body #nexus-open-btn,
body .nexus-toggle-btn.open-btn {
width: var(--nexus-toggle-size-desktop);
height: var(--nexus-toggle-size-desktop);
}
body #nexus-close-btn {
width: var(--nexus-toggle-size-desktop);
height: var(--nexus-toggle-size-desktop);
}
body .nexus-toggle-btn.close-btn {
width: 7px;
height: 98px;
}
}
/* Forçar compatibilidade visual e evitar inheritance inesperado */
body #nexus-open-btn,
body #nexus-close-btn,
body .nexus-toggle-btn {
zoom: 1;
}
/* Banner horizontal AdSense */
.adsense-container .adsbygoogle {
display: block;
width: 100%;
min-height: 90px;
max-height: 250px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
/* Responsivo de AdSense e toggles já coberto nos blocos consolidados. */
/* --------------------------------------------------------------------------
Fallback mínimo e isolado: Botão fixar (nexus-pin-button)
- Inserido ao final do arquivo para minimizar impacto
- Regras conservadoras, sem uso de !important
- z-index usa fallback alinhado com outros componentes (evita layering excessivo)
-------------------------------------------------------------------------- */
.nexus-pin-button {
position: fixed;
left: 16px;
bottom: 16px;
z-index: calc(var(--z-toggle, 1500) + 10);
display: inline-block;
pointer-events: auto;
}
.nexus-btn-square {
--size: var(--nexus-toggle-size-mobile);
width: var(--size);
height: var(--size);
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-card);
color: var(--nexus-app-accent);
border: 1px solid var(--nexus-app-border);
border-radius: 8px;
box-shadow: 0 6px 14px rgba(2,6,23,0.12);
transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.nexus-btn-square:active { transform: translateY(1px) scale(0.995); }
.nexus-btn-square:focus { outline: 3px solid rgba(59,130,246,0.12); }
.nexus-pin-button .icon { display: none; width: calc(var(--nexus-toggle-icon-size)); height: calc(var(--nexus-toggle-icon-size)); stroke: currentColor; }
.nexus-pin-button.state-roam .icon-arrow { display: block; }
.nexus-pin-button.state-unlocked .icon-unlocked { display: block; }
.nexus-pin-button.state-locked .icon-locked { display: block; }
/* Ensure locked icon stroke color wins over earlier rules by placing
this selector at the end of the file with higher specificity. */
#nexus-pin-button.state-locked .icon path,
#nexus-pin-button.state-locked .icon rect,
#nexus-pin-button.state-locked .icon line,
#nexus-pin-button.state-locked .icon circle,
.nexus-pin-button.state-locked svg.icon path,
.nexus-pin-button.state-locked svg.icon rect,
.nexus-pin-button.state-locked svg.icon line,
.nexus-pin-button.state-locked svg.icon circle,
.nexus-pin-button.state-locked .icon,
.nexus-pin-button.state-locked svg.icon {
stroke: #ef4444;
color: #ef4444;
}
/* Quando o micro-app estiver abaixo do snap (viewport deslocada para baixo),
aplicamos a classe `arrow-down` no container para girar visualmente a seta.
Isso inverte apenas o ícone de seta (estado roaming), sem alterar os outros ícones. */
/* Pin icon orientation: explicit states to avoid visual flicker when swapping
the active icon. Transitions are suppressed during state changes so the
icon direction is applied immediately by JS (setPinState()). */
.nexus-pin-button svg.icon-arrow {
transform: rotate(180deg); /* default: down */
transition: none; /* supress animation during state flip */
}
.nexus-pin-button.arrow-up svg.icon-arrow {
transform: rotate(0deg); /* up */
transition: none;
}
.nexus-pin-button.arrow-down svg.icon-arrow {
transform: rotate(180deg); /* explicit down state */
transition: none;
}
/* NEXUS TOPBAR: MODERN ARCHITECTURE (contrast fixes) */
.app-header {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
/* Cor de fundo dinâmica baseada no tema */
background: var(--bg-header, rgba(255, 255, 255, 0.9));
border-bottom: 1px solid var(--border);
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px 0 calc(24px + var(--hud-fixed-button-top-padding));
position: sticky;
top: 0;
z-index: 1000;
/* Adiciona sombra no tema claro para profundidade */
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.nexus-context-switcher {
display: flex;
align-items: center;
background: var(--bg-switcher, rgba(0,0,0,0.05));
padding: 3px;
border-radius: 12px;
border: 1px solid var(--border);
}
.context-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: 9px;
text-decoration: none;
/* Cor do texto ajustada para o tema claro */
color: var(--text-header, #475569);
font-size: 13px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.context-item.active {
background: var(--accent);
color: #fff !important;
box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}
.context-item:not(.active):hover {
background: rgba(0,0,0,0.05);
color: var(--accent);
}
/* NEXUS PROFESSIONAL TOPBAR: ADAPTATIVA */
.app-header {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: var(--bg-header, rgba(255, 255, 255, 0.9));
border-bottom: 1px solid var(--border);
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px 0 calc(24px + var(--hud-fixed-button-top-padding));
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--header-shadow, 0 1px 3px rgba(0,0,0,0.05));
}
.nexus-context-switcher {
display: flex;
align-items: center;
background: var(--bg-switcher, rgba(0,0,0,0.05));
padding: 4px;
border-radius: 10px;
border: 1px solid var(--border);
}
.context-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 8px;
text-decoration: none;
color: var(--text-header, #475569);
font-size: 13px;
font-weight: 600;
transition: all 0.18s ease;
}
.context-item.active {
background: var(--accent);
color: #fff !important;
box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}
.context-item:not(.active):hover {
background: rgba(var(--accent-rgb), 0.08);
color: var(--accent);
}
.context-divider { width: 1px; height: 16px; background: var(--border); margin: 0 8px; }
.header-action-icon { color: var(--text-header); padding: 8px; border-radius: 8px; transition: 0.16s; display: flex; }
.header-action-icon:hover { background: rgba(var(--accent-rgb), 0.08); color: var(--accent); }
.user-profile-widget {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 12px;
border-radius: 30px;
background: var(--bg-switcher);
border: 1px solid transparent;
text-decoration: none;
color: var(--text-header);
}
.user-profile-widget:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.05); }
.user-avatar-circle { color: var(--accent); display: flex; align-items: center; }
.user-role-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; color: inherit; }
.btn-exit-system { background: transparent; border: none; color: var(--eng-danger); cursor: pointer; padding: 8px; margin-left: 8px; border-radius: 8px; transition: 0.16s; display: flex; }
.btn-exit-system:hover { background: rgba(239, 68, 68, 0.1); }
/* COMPORTAMENTO RETRÁTIL (POSIÇÃO DE TRABALHO) - REFINAMENTO FLUIDO */
.app-header {
/* Retorna ao fluxo normal da página - ele fica parado no topo e some ao rolar */
position: relative;
background: var(--bg-header, #ffffff);
border-bottom: 1px solid var(--border);
height: 64px; /* Mantemos a altura visual profissional */
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px 0 calc(24px + var(--hud-fixed-button-top-padding));
z-index: 1000;
box-shadow: var(--header-shadow, 0 1px 3px rgba(0,0,0,0.05));
}
/* REMOVIDO: Comportamento retrátil e ocultação automática */
/* O cabeçalho agora se comporta como um elemento comum da página */
/* .nexus-viewport-area { /*
/* Garante que a área de trabalho comece logo após o header sem saltos */
/* margin-top: 0; */
/* } */