/* ═══════════════════════════════════════════ RESET & VARIABLES ═══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Inter variable — self-hosted (fonts/InterVariable.woff2, cacheada 24h) */ @font-face { font-family: 'Inter'; src: url('fonts/InterVariable.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --primary: #1D436F; --primary-dark: #152F50; --primary-light: #D0E4F5; --success: #059669; --warning: #D97706; --danger: #DC2626; --info: #0891B2; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; /* Tokens semânticos — superfícies/texto/borda. Componentes novos usam estes; o dark mode redefine apenas este bloco + a escala de cinzas. */ --surface: #FFFFFF; /* cards, modais, painéis */ --surface-2: var(--gray-50); /* fundo da página, áreas recuadas */ --surface-3: var(--gray-100);/* hovers, faixas, inputs disabled */ --text-1: var(--gray-800);/* texto principal */ --text-2: var(--gray-500);/* texto secundário/labels */ --border-1: var(--gray-200);/* bordas e divisores */ /* Escala de espaçamento — usar nos componentes novos */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sb-w: 260px; --topbar-h: 64px; --radius: 8px; --radius-lg: 12px; --shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05); --shadow-lg: 0 10px 25px rgba(0,0,0,.12), 0 4px 6px rgba(0,0,0,.05); --tx: all .18s ease; } /* ═══════════════════════════════════════════ DARK MODE — ativado via (boot-brand.js aplica antes do primeiro paint; toggle no topbar) Estratégia: inverte a escala de cinzas + redefine tokens semânticos. A maior parte do CSS adapta sozinho por usar var(--gray-*)/tokens. ═══════════════════════════════════════════ */ html[data-theme="dark"] { --gray-50: #1E293B; --gray-100: #243049; --gray-200: #334155; --gray-300: #475569; --gray-400: #64748B; --gray-500: #94A3B8; --gray-600: #CBD5E1; --gray-700: #E2E8F0; --gray-800: #F1F5F9; --gray-900: #F8FAFC; --primary-light: #1E3A5F; --surface: #1E293B; --surface-2: #0F172A; --surface-3: #243049; --text-1: #E2E8F0; --text-2: #94A3B8; --border-1: #334155; --shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 4px 6px rgba(0,0,0,.40), 0 2px 4px rgba(0,0,0,.30); --shadow-lg: 0 10px 25px rgba(0,0,0,.55), 0 4px 6px rgba(0,0,0,.35); color-scheme: dark; /* scrollbars e controles nativos escuros */ } /* Elementos que usam --primary (azul-marinho #1D436F) como COR DE TEXTO ou borda ficam ilegíveis sobre superfícies escuras. Em dark, clareiam. */ html[data-theme="dark"] .tk-id { color: #FFFFFF; } html[data-theme="dark"] .btn-outline { color: #FFFFFF; border-color: var(--gray-300); } html[data-theme="dark"] .btn-outline:hover { background: var(--surface-3); border-color: var(--gray-400); } html[data-theme="dark"] a.link-sm, html[data-theme="dark"] .th-sort-active { color: #7FB3E8; /* azul claro p/ links/sort ativos que usavam --primary */ } html, body { /* Trava overflow horizontal globalmente. Qualquer elemento que por acidente exceda a largura do viewport (img sem max-width, banner fixo mal calculado, etc.) é clipado em vez de gerar barra de rolagem horizontal — comportamento desejado em SPA full-page. */ overflow-x: hidden; } body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 14px; color: var(--text-1); background: var(--surface-2); line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ═══════════════════════════════════════════ ÍCONES SVG (sprite assets/icons.svg — Lucide) ═══════════════════════════════════════════ */ .icon { width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px; /* alinha com texto inline */ stroke-width: 2; } .icon-sm { width: 14px; height: 14px; vertical-align: -2px; } .icon-lg { width: 24px; height: 24px; vertical-align: -5px; } .icon-xl { width: 32px; height: 32px; } /* ═══════════════════════════════════════════ FOCO VISÍVEL (teclado) + microinterações base ═══════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } button, a, .chip, .nav-item, .row-click, .ms-opt { transition: var(--tx); } button:active:not(:disabled) { transform: scale(.97); } /* ═══════════════════════════════════════════ SKELETON LOADERS ═══════════════════════════════════════════ */ @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } .skeleton { display: block; background: var(--border-1); border-radius: 6px; animation: skeleton-pulse 1.4s ease-in-out infinite; } .skeleton-row { height: 14px; margin: 12px 0; } .skeleton-card { background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); } .skeleton-w-30 { width: 30%; } .skeleton-w-50 { width: 50%; } .skeleton-w-70 { width: 70%; } .skeleton-w-90 { width: 90%; } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: .6; } * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ═══════════════════════════════════════════ EMPTY STATES ═══════════════════════════════════════════ */ .empty-state { background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--radius); box-shadow: var(--shadow); padding: 48px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .empty-state-icon { width: 44px; height: 44px; color: var(--gray-300); stroke-width: 1.5; margin-bottom: 6px; } .empty-state-title { font-size: 15px; font-weight: 600; color: var(--text-1); } .empty-state-hint { font-size: 13px; color: var(--text-2); max-width: 420px; } .empty-state .btn { margin-top: 12px; } a { text-decoration: none; color: inherit; } /* ═══════════════════════════════════════════ PAGES ═══════════════════════════════════════════ */ .page { display: none; min-height: 100vh; } .page.active { display: flex; } /* ═══════════════════════════════════════════ LOGIN ═══════════════════════════════════════════ */ #page-login { position: relative; /* Cor de fundo base (visível quando não há imagem ou enquanto carrega) */ background-color: #0F172A; /* Imagem de fundo responsiva: cover = preenche sem distorcer, seja qual for a resolução */ background-size: cover; background-position: center center; background-repeat: no-repeat; /* NB: o display NÃO fica aqui — é definido em #page-login.active para não sobrepor o toggle .page/.page.active (id venceria a classe e a tela de login nunca esconderia após o login). Vide regra .active abaixo. */ /* Padding-bottom reserva espaço para o rodapé fixo (.app-footer-login, ~67 px com 2 linhas) evitando que o card invada a faixa do rodapé. Padding-top default (prod) é apenas folga visual — não há banner no topo. */ padding: 24px 24px 96px; /* Defesa em profundidade: nenhum filho deve transbordar horizontalmente (banner fixo, card, overlay, etc.). overflow-x clipa qualquer transbordo causado por padding-right do banner ou box-shadow. */ overflow-x: hidden; width: 100%; max-width: 100%; } /* Layout só quando a tela de login está ativa (grid de 3 colunas: o card fica na coluna central → centralizado no viewport; o painel de avisos ocupa a coluna esquerda, sem deslocar o login). Especificidade (id+classe) vence .page.active sem quebrar o toggle de exibição. */ #page-login.active { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-items: center; } /* Em ambiente de testes, o banner fixo no topo (.env-test-banner-login, ~36 px) precisa de espaço extra para o card não colar nele. Mantém o mesmo gap visual entre card↔banner e card↔rodapé. */ body.env-test #page-login { padding-top: 60px; } /* Overlay gradiente sobre a imagem — cria o efeito de marca d'água/segundo plano. A opacidade é controlada via CSS variable --login-overlay (padrão 1 = sem imagem). */ #page-login::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 45%, #2563EB 100%); opacity: var(--login-overlay, 1); transition: opacity .4s ease; z-index: 0; } /* Garante que o card de login fique acima do overlay */ .login-bg { position: relative; z-index: 1; /* Limita a largura ao do card pra não criar caixa lateralmente maior que o conteúdo (evita scroll horizontal) */ width: 100%; max-width: 420px; } /* Painel lateral de avisos/status — card próprio à esquerda do login. Fica fora do card de login para não aumentar a altura dele. */ .login-aside { position: relative; z-index: 1; grid-column: 1; /* coluna esquerda */ justify-self: end; /* encosta na borda do card central */ margin-right: 24px; /* gap até o login */ width: 300px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow-lg); } .login-aside.hidden { display: none; } /* Card de login sempre na coluna central → centralizado no viewport */ .login-bg { grid-column: 2; } .login-aside-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; text-align: center; letter-spacing: .02em; color: var(--text-1); } /* Reset das margens internas (que eram afinadas p/ ficar dentro do login-card) */ .login-aside .login-status { margin: 0 auto; } .login-aside .login-notice { margin: 0; } /* Telas estreitas: empilha o painel acima do login (mantém login centrado) */ @media (max-width: 1080px) { #page-login.active { display: flex; flex-direction: column; justify-content: center; gap: 20px; } .login-aside { grid-column: auto; justify-self: auto; margin-right: 0; width: 100%; max-width: 420px; } } .login-card { background: var(--surface); border-radius: 16px; /* topo mais enxuto para não sobrar espaço acima da marca; rodapé do card também reduzido para encurtar a altura total e evitar colisão com o rodapé fixo da página */ padding: 28px 40px 24px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); } .login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; justify-content: center; /* Permite quebra do logo/nome em viewports estreitos sem gerar overflow horizontal no card */ flex-wrap: wrap; } /* Tamanhos específicos da identidade na tela de login (e nas telas forgot/request que herdam .login-brand). Logo recebe destaque maior; texto fica em peso secundário para não competir. Sidebar e outras áreas usam regras próprias e não são afetadas. */ .login-brand .brand-logo-lg { width: 120px; height: 120px; } .login-brand .brand-icon { font-size: 56px; } .login-brand .brand-name { font-size: 24px; font-weight: 600; } .brand-icon { font-size: 30px; } .link-sm { font-size: 13px; color: var(--primary); text-decoration: none; } .link-sm:hover { text-decoration: underline; } .brand-name { font-size: 26px; font-weight: 700; color: var(--primary); letter-spacing: -.5px; } .brand-logo { display: none; object-fit: contain; } .brand-logo:not(.hidden) { display: block; } .brand-logo-lg { width: 56px; height: 56px; } .brand-logo-sm { width: 32px; height: 32px; } .sidebar .brand-logo { filter: brightness(0) invert(1); } .login-title { font-size: 20px; font-weight: 700; text-align: center; color: var(--gray-900); margin-bottom: 6px; } .login-sub { font-size: 14px; text-align: center; color: var(--gray-500); margin-bottom: 28px; } /* Status do sistema (badge centralizado) — cor por data-status */ .login-status { display: flex; align-items: center; gap: 6px; width: fit-content; margin: -10px auto 16px; padding: 4px 12px; border-radius: 999px; background: var(--surface-3); font-size: 12px; font-weight: 600; } .login-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); flex-shrink: 0; } .login-status[data-status="operational"] { color: var(--success); } .login-status[data-status="operational"] .login-status-dot { background: var(--success); } .login-status[data-status="degraded"] { color: var(--warning); } .login-status[data-status="degraded"] .login-status-dot { background: var(--warning); } .login-status[data-status="maintenance"] { color: var(--danger); } .login-status[data-status="maintenance"] .login-status-dot { background: var(--danger); } /* Comunicado (mural) — borda esquerda colorida por data-type */ .login-notice { margin: 0 0 18px; padding: 10px 14px; border-radius: 8px; border-left: 3px solid var(--info); background: var(--surface-3); color: var(--text-1); font-size: 13px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; } .login-notice[data-type="info"] { border-left-color: var(--info); } .login-notice[data-type="success"] { border-left-color: var(--success); } .login-notice[data-type="warning"] { border-left-color: var(--warning); } .login-notice[data-type="maintenance"] { border-left-color: var(--danger); } /* Divisória entre blocos num mesmo card de config */ .cfg-divider { border: none; border-top: 1px solid var(--gray-200); margin: 18px 0; } /* ═══════════════════════════════════════════ FORMS ═══════════════════════════════════════════ */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; } .req { color: var(--danger); } input[type=checkbox], input[type=radio] { width: auto; padding: 0; border: none; box-shadow: none; background: none; appearance: auto; -webkit-appearance: auto; } input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; padding: 10px 13px; border: 1.5px solid var(--gray-300); border-radius: var(--radius); font-size: 14px; font-family: inherit; color: var(--gray-800); background: var(--surface); transition: var(--tx); outline: none; appearance: none; } input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29,67,111,.15); } input:not([type=checkbox]):not([type=radio])::placeholder, textarea::placeholder { color: var(--gray-400); } textarea { resize: vertical; } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } /* ═══════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 500; cursor: pointer; transition: var(--tx); font-family: inherit; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dark); } .btn-secondary { background: var(--gray-100); color: var(--gray-700); } .btn-secondary:hover { background: var(--gray-200); } .btn-outline { background: var(--surface); color: var(--primary); border: 1.5px solid var(--primary); } .btn-outline:hover { background: var(--primary-light); } .btn-danger { background: var(--danger); color: #fff; } .btn-full { width: 100%; } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-lg { padding: 12px 20px; font-size: 15px; } /* ═══════════════════════════════════════════ CHIPS / BADGES ═══════════════════════════════════════════ */ .chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; } .chip-blue { background: #DBEAFE; color: #1D4ED8; } .chip-sky { background: #E0F2FE; color: #0369A1; } .chip-teal { background: #CCFBF1; color: #0F766E; } .chip-green { background: #D1FAE5; color: #065F46; } .chip-green-dark { background: #A7F3D0; color: #064E3B; } .chip-amber { background: #FEF3C7; color: #92400E; } .chip-red { background: #FEE2E2; color: #991B1B; } .chip-purple{ background: #EDE9FE; color: #5B21B6; } .chip-gray { background: #F3F4F6; color: #374151; } .chip-orange{ background: #FFEDD5; color: #9A3412; } .chip-sm { padding: 2px 7px; font-size: 11px; } /* ═══════════════════════════════════════════ CHAR COUNTER ═══════════════════════════════════════════ */ .char-counter { font-size: 12px; color: var(--gray-400); transition: color .2s; } .char-counter.warn { color: #D97706; font-weight: 600; } .char-counter.danger { color: #DC2626; font-weight: 700; } textarea.char-limit-reached { border-color: #DC2626 !important; } /* ═══════════════════════════════════════════ IDLE WARNING BANNER ═══════════════════════════════════════════ */ .idle-warning { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; background: #FEF3C7; color: #92400E; border-bottom: 2px solid #F59E0B; text-align: center; padding: 10px 16px; font-size: 14px; font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,.12); animation: idle-slide-in .3s ease; } @keyframes idle-slide-in { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* ═══════════════════════════════════════════ ALERTS ═══════════════════════════════════════════ */ .alert { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 14px; } .alert-error { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; } .alert-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; } .alert-warn { background: #FFFBEB; color: #92400E; border: 1px solid #FCD34D; } .alert-ok { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; border-radius: 8px; padding: 10px 14px; font-size: 13px; } .mfa-icon { font-size: 40px; text-align: center; margin-bottom: 8px; } .hidden { display: none !important; } /* ═══════════════════════════════════════════ DEMO BOX ═══════════════════════════════════════════ */ .demo-box { border-top: 1px solid var(--gray-200); margin-top: 24px; padding-top: 18px; } .demo-title { font-size: 12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; } .demo-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); cursor: pointer; font-size: 12px; color: var(--gray-600); transition: var(--tx); margin-bottom: 8px; } .demo-row:hover { background: var(--primary-light); border-color: var(--primary); } /* ═══════════════════════════════════════════ LAYOUT — SIDEBAR + MAIN ═══════════════════════════════════════════ */ .layout { flex-direction: row; } /* Sidebar */ .sidebar { width: var(--sb-w); background: #1D436F; color: #fff; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transition: transform .25s ease; } .sb-header { display: flex; align-items: center; padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.1); } .sidebar .brand { display: flex; align-items: center; gap: 10px; } .sidebar .brand-logo-sm { width: calc(var(--sb-w) * 0.4); height: auto; max-height: 64px; } .sidebar .brand-info { display: flex; flex-direction: column; gap: 5px; align-items: center; flex: 1; } .sidebar .brand-name { color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2; } .sidebar .brand-icon { font-size: 20px; } .sb-nav { flex: 1; padding: 10px 0; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: rgba(255,255,255,.65); transition: var(--tx); cursor: pointer; font-size: 14px; border-radius: 0; user-select: none; } .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; } .nav-item.active { background: var(--primary); color: #fff; } .ni { font-size: 17px; flex-shrink: 0; display: flex; align-items: center; } .ni .icon { width: 18px; height: 18px; } .sb-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.1); } .sb-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .sb-name { font-size: 13px; font-weight: 600; color: #fff; } .sb-role { font-size: 11px; color: rgba(255,255,255,.45); } /* Avatar */ .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; } .avatar-admin { background: var(--success); } .avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; } .btn-logout { width: 100%; padding: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); color: rgba(255,255,255,.65); cursor: pointer; font-size: 13px; font-family: inherit; transition: var(--tx); } .btn-logout:hover { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.3); color: #FCA5A5; } /* Linha do rodapé da sidebar: toggle de tema + sair lado a lado */ .sb-actions { display: flex; gap: 8px; } .sb-actions .btn-logout { flex: 1; width: auto; } .btn-theme { padding: 8px 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); color: rgba(255,255,255,.65); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--tx); } .btn-theme:hover { background: rgba(255,255,255,.15); color: #fff; } /* Mostra lua no claro / sol no escuro */ .btn-theme .icon-sun { display: none; } html[data-theme="dark"] .btn-theme .icon-sun { display: block; } html[data-theme="dark"] .btn-theme .icon-moon { display: none; } /* ── Sino de notificações ─────────────────────────────────── */ .btn-notif { position: relative; } .notif-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; } .notif-badge.hidden { display: none; } .notif-panel { position: fixed; left: calc(var(--sb-w) + 14px); bottom: 14px; width: 370px; max-width: calc(100vw - 24px); max-height: 62vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 130; } .notif-panel.hidden { display: none; } .notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border-1); } /* Mostra ~5 itens; o resto (até 50) fica acessível por rolagem. */ .notif-lista { overflow-y: auto; max-height: 410px; } .notif-item { display: flex; flex-direction: column; gap: 2px; padding: 11px 16px; border-bottom: 1px solid var(--border-1); cursor: pointer; transition: var(--tx); } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--surface-3); } .notif-item.unread { background: var(--primary-light); } .notif-item.unread:hover { filter: brightness(.97); } .notif-item-title { font-size: 13px; color: var(--text-1); } .notif-item.unread .notif-item-title { font-weight: 600; } .notif-item-meta { font-size: 11px; color: var(--text-2); } .notif-empty { padding: 28px 16px; text-align: center; color: var(--text-2); font-size: 13px; } @media (max-width: 768px) { .notif-panel { left: 12px; right: 12px; width: auto; bottom: 70px; } } /* Main Wrap */ .main-wrap { flex: 1; margin-left: var(--sb-w); display: flex; flex-direction: column; min-height: 100vh; } /* Topbar */ .topbar { height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; padding: 0 24px; gap: 14px; position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow); } .hamburger { display: none; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--gray-600); padding: 4px; } /* Hamburger flutuante (sem topbar) — só mobile */ .hamburger-float { position: fixed; top: 12px; left: 12px; z-index: 60; background: var(--surface); border: 1px solid var(--gray-200); border-radius: 8px; padding: 6px 10px; box-shadow: var(--shadow); } .topbar-title { font-size: 18px; font-weight: 700; flex: 1; } .topbar-right { display: flex; align-items: center; gap: 10px; } /* Content */ .content { flex: 1; padding: 0; } .sec { display: none; padding: 24px; } .sec.active { display: block; } /* Section header */ .sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .sec-head h2 { font-size: 20px; font-weight: 700; color: var(--gray-900); } .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .filters input { min-width: 180px; width: auto; } .filters select { min-width: 150px; width: auto; } .filter-label { font-size: 13px; color: var(--gray-600); white-space: nowrap; } /* ── Multi-select dropdown (filtro de status) ─────────────── */ .ms-wrap { position: relative; } .ms-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; padding: 10px 13px; border: 1.5px solid var(--gray-300); border-radius: var(--radius); font-size: 14px; font-family: inherit; color: var(--gray-800); background: var(--surface); cursor: pointer; transition: var(--tx); } .ms-btn:hover { border-color: var(--gray-400); } .ms-btn:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29,67,111,.15); outline: none; } .ms-caret { margin-left: auto; font-size: 10px; color: var(--gray-500); } .ms-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; width: max-content; min-width: 100%; max-width: 320px; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; } .ms-panel.hidden { display: none; } /* display:flex + gap explícitos para vencer estilos globais de