/* ===================================================================== Actus — design system "Dossiê" Linguagem de arquivo/cartório (selo, papel, tinta, ouro) com acabamento de software moderno. Toda cor sai de um token: o tema escuro so' troca os valores em :root[data-theme="dark"] - nenhum componente conhece hex. Prefixo "ac-" mantido de proposito: o Bootstrap do template ja estiliza .modal, .btn-primary, .nav-item etc. ===================================================================== */ :root { --ac-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ac-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --ac-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* papel e tinta */ --ac-bg: #F5F3EE; --ac-surface: #FFFFFF; --ac-surface-2: #FAF9F5; --ac-surface-3: #F0EDE5; --ac-text: #16202D; --ac-text-2: #545D6B; --ac-text-3: #8C939E; --ac-border: #E7E2D7; --ac-border-strong: #D5CEBE; /* marca */ --ac-primary: #1F3A5C; --ac-primary-hover: #152B47; --ac-on-primary: #FFFFFF; --ac-primary-soft: #E9EEF5; --ac-primary-text: #24466F; --ac-gold: #C8963E; --ac-gold-soft: #F7EDD9; --ac-gold-text: #8E6420; /* semanticas */ --ac-danger: #B6432F; --ac-danger-soft: #FBEBE7; --ac-danger-text: #A23B28; --ac-warn: #B7791F; --ac-warn-soft: #FCF2DF; --ac-warn-text: #8A5A12; --ac-ok: #2F6B47; --ac-ok-soft: #E6F2EA; --ac-ok-text: #275C3C; /* barra lateral: segue o tema igual o resto do app (pedido do usuario - antes era tinta escura fixa nos dois temas, de proposito, mas quebrava a harmonia no tema claro). Cada var() aqui reaproveita o token principal correspondente, entao troca sozinha quando :root[data-theme="dark"] troca esses tokens - nao precisa redefinir de novo la embaixo. */ --ac-side-bg: var(--ac-bg); --ac-side-bg-2: var(--ac-surface); --ac-side-text: var(--ac-text-2); --ac-side-text-strong: var(--ac-text); --ac-side-muted: var(--ac-text-3); --ac-side-border: var(--ac-border); --ac-side-hover: var(--ac-surface-3); --ac-side-active: var(--ac-primary-soft); /* "poco" afundado (busca, pilula de idioma) - precisa de valor proprio por tema (nao da' pra so' reaproveitar var() de outro token: no claro e' um cinza bem fraco, no escuro continua o preto forte original). */ --ac-side-well-bg: rgba(16, 20, 28, 0.045); --ac-side-well-shadow: inset 0 1px 2px rgba(16, 20, 28, 0.07); --ac-side-well-hover-bg: rgba(16, 20, 28, 0.07); /* pilula ativa (idioma) dentro do poco - no claro e' so' a propria superficie branca "flutuando" por cima do poco cinza, no escuro continua o vidro translucido original (ver bloco [data-theme="dark"]). */ --ac-side-pill-bg: var(--ac-surface); --ac-side-pill-shadow: inset 0 0 0 1px var(--ac-border), 0 1px 3px rgba(16, 20, 28, 0.12); --ac-shadow-sm: 0 1px 2px rgba(22, 32, 45, 0.05), 0 1px 1px rgba(22, 32, 45, 0.03); --ac-shadow-md: 0 6px 16px -6px rgba(22, 32, 45, 0.14), 0 2px 4px -2px rgba(22, 32, 45, 0.06); --ac-shadow-lg: 0 28px 64px -16px rgba(12, 22, 38, 0.32), 0 8px 20px -8px rgba(12, 22, 38, 0.12); --ac-ring: 0 0 0 3px rgba(200, 150, 62, 0.38); --ac-overlay: rgba(10, 16, 26, 0.48); --ac-radius-sm: 8px; --ac-radius: 12px; --ac-radius-lg: 16px; --ac-radius-xl: 20px; /* Largura do painel de editar/criar processo e tarefa (.ac-detail-panel). js/panel-resize.js atualiza ao arrastar a alca e lembra no localStorage. */ --ac-detail-panel-width: 420px; color-scheme: light; } :root[data-theme="dark"] { --ac-bg: #0A0F17; --ac-surface: #111925; --ac-surface-2: #151E2C; --ac-surface-3: #1A2535; --ac-text: #ECE8E0; --ac-text-2: #A7AFBB; --ac-text-3: #6E7785; --ac-border: #1F2A3A; --ac-border-strong: #2C3A4F; /* no escuro a acao principal vira ouro sobre tinta */ --ac-primary: #D2A04A; --ac-primary-hover: #E2B460; --ac-on-primary: #1B1306; --ac-primary-soft: rgba(210, 160, 74, 0.12); --ac-primary-text: #E3B866; --ac-gold: #D9A84F; --ac-gold-soft: rgba(217, 168, 79, 0.14); --ac-gold-text: #E3B866; --ac-danger: #E0705B; --ac-danger-soft: rgba(224, 112, 91, 0.14); --ac-danger-text: #F08A75; --ac-warn: #E0A84A; --ac-warn-soft: rgba(224, 168, 74, 0.14); --ac-warn-text: #EDBB62; --ac-ok: #5FB487; --ac-ok-soft: rgba(95, 180, 135, 0.14); --ac-ok-text: #7CCB9F; /* --ac-side-bg/text/border etc. nao precisa redefinir aqui: ja' aponta (var()) pros tokens principais la' em cima, que acabaram de trocar neste mesmo bloco. So' o "poco" (well) tem valor proprio, porque o claro usa preto bem fraco e o escuro usa o preto forte original - nao sao o mesmo token mudando de valor, sao desenhos diferentes mesmo. */ --ac-side-well-bg: rgba(0, 0, 0, 0.22); --ac-side-well-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); --ac-side-well-hover-bg: rgba(0, 0, 0, 0.3); --ac-side-pill-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.07)); --ac-side-pill-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.3); --ac-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ac-shadow-md: 0 8px 20px -8px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --ac-shadow-lg: 0 30px 70px -16px rgba(0, 0, 0, 0.75), 0 8px 20px -8px rgba(0, 0, 0, 0.5); --ac-ring: 0 0 0 3px rgba(217, 168, 79, 0.42); --ac-overlay: rgba(2, 5, 10, 0.66); color-scheme: dark; } /* ---------------------------------------------------------------- base */ html, body { font-family: var(--ac-font-sans); background: var(--ac-bg); color: var(--ac-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01"; } body { font-size: 14px; line-height: 1.5; } a { color: var(--ac-primary-text); } ::selection { background: var(--ac-gold-soft); color: var(--ac-text); } .ac-app h1, .ac-app h2, .ac-login-page h1 { font-family: var(--ac-font-serif); font-optical-sizing: auto; margin: 0; color: var(--ac-text); } .ac-app input, .ac-app select, .ac-app button, .ac-app textarea { font-family: inherit; } .ac-app { color: var(--ac-text); } .ac-mono, .ac-doc { font-family: var(--ac-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } :focus-visible { outline: none; box-shadow: var(--ac-ring); } /* .ac-overlay/.ac-detail-panel ganham tabindex="-1" so' pra conseguir foco programatico (FocusAsync ao abrir, pra Esc funcionar sem precisar clicar num campo primeiro antes) - nao sao controles de verdade, entao nao devem ganhar o anel dourado de foco. */ .ac-overlay:focus-visible, .ac-detail-panel:focus-visible { box-shadow: none; } button:focus:not(:focus-visible) { box-shadow: none; } /* FocusOnNavigate (Routes.razor) foca o

a cada navegacao pra leitores de tela - util, mas o anel de foco num titulo parece erro. */ h1:focus, h1:focus-visible, [tabindex="-1"]:focus { outline: none; box-shadow: none; } * { scrollbar-width: thin; scrollbar-color: var(--ac-border-strong) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ac-border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; background: transparent; } .ac-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; font-family: var(--ac-font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ac-text-3); background: var(--ac-surface-2); border: 1px solid var(--ac-border); border-bottom-width: 2px; border-radius: 6px; } /* ------------------------------------------------------------- avatares Paleta estavel por pessoa (Ui.AvatarClass): fundo suave + letra forte, legivel nos dois temas. */ .ac-avatar, .ac-avatar-sm, .ac-avatar-lg { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-weight: 600; letter-spacing: 0.02em; background: var(--ac-primary-soft); color: var(--ac-primary-text); } .ac-avatar { width: 34px; height: 34px; font-size: 12.5px; } .ac-avatar-sm { width: 24px; height: 24px; font-size: 9.5px; } .ac-avatar-lg { width: 40px; height: 40px; font-size: 14px; } .ac-av-0 { background: #E3ECF7; color: #24466F; } .ac-av-1 { background: #F7EBD6; color: #8E6420; } .ac-av-2 { background: #E2F0E7; color: #2A6243; } .ac-av-3 { background: #F5E4E1; color: #9C3A2A; } .ac-av-4 { background: #ECE6F4; color: #5B4285; } .ac-av-5 { background: #E0EFEF; color: #23605F; } .ac-av-6 { background: #F3E6EE; color: #87375F; } .ac-av-7 { background: #EAEAE3; color: #4F5546; } :root[data-theme="dark"] .ac-av-0 { background: #1C2C44; color: #9EC0EA; } :root[data-theme="dark"] .ac-av-1 { background: #33270F; color: #EDC377; } :root[data-theme="dark"] .ac-av-2 { background: #14301F; color: #85D0A4; } :root[data-theme="dark"] .ac-av-3 { background: #3A1B16; color: #F2A291; } :root[data-theme="dark"] .ac-av-4 { background: #2A2140; color: #C5B2EC; } :root[data-theme="dark"] .ac-av-5 { background: #12302F; color: #84D0CD; } :root[data-theme="dark"] .ac-av-6 { background: #36182A; color: #EBA4C9; } :root[data-theme="dark"] .ac-av-7 { background: #26281F; color: #C3C7B4; } .ac-avatar-stack { display: inline-flex; align-items: center; } .ac-avatar-stack .ac-avatar-sm { margin-left: -7px; box-shadow: 0 0 0 2px var(--ac-surface); } .ac-avatar-stack .ac-avatar-sm:first-child { margin-left: 0; } /* =========================================================== shell / sidebar Barra em tinta escura nos dois temas. No desktop ela flutua (descolada das bordas, cantos arredondados), com o selo d'agua girando ao fundo e uma pilula dourada que desliza ate o item ativo (js/actus-ui.js > placeNav). */ .ac-shell { display: flex; min-height: 100vh; background: var(--ac-bg); } /* overflow: clip (nao hidden): o selo d'agua passa da borda, e com hidden a barra vira area rolavel - focar o botao "+" chegou a rola-la 96px pro lado. */ .ac-sidebar { position: relative; isolation: isolate; overflow: hidden; overflow: clip; width: 264px; flex-shrink: 0; display: flex; flex-direction: column; padding: 18px 0 12px; background: radial-gradient(140% 50% at 0% 0%, rgba(200, 150, 62, 0.15), transparent 58%), radial-gradient(100% 38% at 100% 100%, rgba(70, 110, 170, 0.18), transparent 70%), linear-gradient(180deg, var(--ac-side-bg-2) 0%, var(--ac-side-bg) 55%); color: var(--ac-side-text); border-right: 1px solid var(--ac-side-border); } .ac-sidebar::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); pointer-events: none; } .ac-sidebar::after { content: ""; position: absolute; z-index: -1; right: -96px; bottom: 96px; width: 270px; height: 270px; background: url("../img/actus-watermark.svg") center / contain no-repeat; opacity: 0.05; pointer-events: none; animation: ac-seal-spin 180s linear infinite; } /* marca */ .ac-brand { padding: 0 16px 16px 20px; display: flex; align-items: center; gap: 12px; } /* display:contents = o some da arvore de layout, os filhos (mark/text) viram flex-item direto de .ac-brand de novo, igual antes do link existir - mesmo truque de .ac-sidebar-actions form acima. */ .ac-brand-link { display: contents; cursor: pointer; } .ac-brand-mark { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ac-brand-mark::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 150, 62, 0.36), rgba(200, 150, 62, 0) 70%); opacity: 0.85; transition: opacity 0.4s; } .ac-brand-mark:hover::before { opacity: 1; } .ac-brand-mark svg { position: relative; width: 42px; height: 42px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)); } .ac-brand-mark .ac-seal-teeth { transform-origin: 190px 190px; animation: ac-seal-spin 40s linear infinite; } .ac-brand-mark .ac-seal-arc { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ac-seal-pulse 1.9s ease-in-out infinite; } .ac-brand-mark .ac-seal-arc-2 { animation-delay: 0.15s; } .ac-brand-mark .ac-seal-arc-3 { animation-delay: 0.3s; } @keyframes ac-seal-spin { to { transform: rotate(360deg); } } @keyframes ac-seal-pulse { 0% { opacity: 0; } 35% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } .ac-brand-text { display: flex; flex-direction: column; min-width: 0; } .ac-brand-text span { font-family: var(--ac-font-serif); font-size: 24px; font-weight: 450; color: var(--ac-side-text-strong); letter-spacing: 0.035em; line-height: 1; } .ac-sidebar-pin-toggle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 0 0 auto; border: none; border-radius: 9px; background: transparent; color: var(--ac-side-muted); cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .ac-sidebar-pin-toggle:hover { background: var(--ac-side-hover); color: var(--ac-side-text-strong); } /* escritorio (workspace) */ .ac-workspace { display: flex; align-items: center; gap: 10px; margin: 0 14px 12px; padding: 9px 10px; min-width: 0; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)); border: 1px solid var(--ac-side-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .ac-workspace-mark { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ac-gold); background: rgba(200, 150, 62, 0.13); box-shadow: inset 0 0 0 1px rgba(200, 150, 62, 0.24); } .ac-workspace-text { display: flex; flex-direction: column; min-width: 0; } .ac-workspace-cap { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac-side-muted); line-height: 1.4; } .ac-workspace-name { font-size: 12.5px; font-weight: 600; color: var(--ac-side-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; } /* busca (paleta Ctrl+K) + criar */ .ac-side-tools { position: relative; display: flex; gap: 8px; margin: 0 14px 12px; } .ac-side-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 12px; border-radius: 11px; border: 1px solid var(--ac-side-border); background: var(--ac-side-well-bg); box-shadow: var(--ac-side-well-shadow); color: var(--ac-side-muted); font-size: 13px; cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s, color 0.15s; } .ac-side-search:hover { background: var(--ac-side-well-hover-bg); border-color: var(--ac-side-muted); color: var(--ac-side-text); } .ac-side-search span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-side-search .ac-kbd { background: var(--ac-side-hover); border-color: var(--ac-side-border); color: var(--ac-side-muted); } /* Brilho reduzido (era pensado pra "flutuar" sobre fundo escuro - contra o poco claro novo, o glow forte + risco branco em cima ficavam pesados). */ .ac-quick-btn { width: 38px; flex-shrink: 0; border: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1B1306; background: linear-gradient(180deg, #E4BA66 0%, #C8963E 100%); box-shadow: 0 4px 10px -4px rgba(200, 150, 62, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22); transition: filter 0.15s, transform 0.12s, box-shadow 0.15s; } .ac-quick-btn svg { transition: transform 0.28s cubic-bezier(.2, .8, .2, 1); } .ac-quick-btn:hover { filter: brightness(1.07); } .ac-quick-btn:active { transform: translateY(1px); } .ac-quick-btn.is-open svg { transform: rotate(135deg); } .ac-quick-backdrop { position: fixed; inset: 0; z-index: 60; } .ac-quick-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 61; padding: 6px; border-radius: 15px; background: var(--ac-side-bg-2); border: 1px solid var(--ac-side-border); box-shadow: var(--ac-shadow-lg); animation: ac-pop-in 0.16s ease-out; } .ac-quick-title { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac-side-muted); padding: 7px 8px 6px; } .ac-quick-menu a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--ac-side-text-strong); font-size: 13px; font-weight: 500; text-decoration: none; transition: background 0.12s; } .ac-quick-menu a:hover { background: var(--ac-side-hover); color: var(--ac-side-text-strong); } .ac-quick-ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ac-gold); background: rgba(200, 150, 62, 0.13); } /* menu */ .ac-nav { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 0 12px 8px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .ac-nav::-webkit-scrollbar { display: none; } /* Altura fixa nos rotulos e itens de proposito: recolhida ou expandida, cada item fica na mesma posicao vertical - a pilula deslizante nao desalinha. */ /* line-height fixa: as faixas compactas (telas baixas) encolhem a altura do rotulo e o texto nao pode passar dela - o .ac-nav rola e cortaria o topo das letras */ .ac-nav-label { display: flex; align-items: flex-end; gap: 10px; height: 38px; box-sizing: border-box; flex-shrink: 0; font-size: 9.5px; line-height: 12px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--ac-side-muted); padding: 0 12px 8px; white-space: nowrap; } .ac-nav-label::after { content: ""; flex: 1; height: 1px; margin-bottom: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent); } .ac-nav-label:first-child { height: 26px; } .ac-nav-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 38px; box-sizing: border-box; flex-shrink: 0; padding: 9px 12px; border-radius: 11px; color: var(--ac-side-text); cursor: pointer; text-decoration: none; transition: color 0.2s, background 0.2s; } .ac-nav-item:hover { color: var(--ac-side-text-strong); background: var(--ac-side-hover); } .ac-nav-item svg { flex-shrink: 0; opacity: 0.78; transition: opacity 0.2s, color 0.2s, transform 0.28s cubic-bezier(.2, .8, .2, 1); } .ac-nav-item:hover svg { opacity: 1; transform: translateX(1.5px); } .ac-nav-item span { font-size: 13.5px; font-weight: 500; letter-spacing: 0.005em; } .ac-nav-item .ac-duo { fill: transparent; transition: fill 0.3s; } .ac-nav-item:hover .ac-duo { fill: rgba(255, 255, 255, 0.07); } .ac-nav-item.ac-active { color: var(--ac-side-text-strong); background: var(--ac-side-active); } .ac-nav-item.ac-active svg { color: var(--ac-gold); opacity: 1; } .ac-nav-item.ac-active .ac-duo { fill: rgba(200, 150, 62, 0.3); } .ac-nav-item.ac-active span { font-weight: 600; } /* antes do JS medir (primeiro paint) o item ativo se destaca sozinho */ .ac-nav-item.ac-active::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ac-gold); box-shadow: 0 0 12px rgba(200, 150, 62, 0.6); } /* indicador deslizante: pilula + fio dourado, posicionados pelo placeNav */ .ac-nav::before, .ac-nav::after { content: ""; position: absolute; pointer-events: none; opacity: 0; z-index: 0; } .ac-nav::before { left: 12px; right: 12px; top: var(--ind-top, 0); height: var(--ind-h, 0); border-radius: 11px; background: linear-gradient(90deg, rgba(200, 150, 62, 0.19), rgba(200, 150, 62, 0.05)); box-shadow: inset 0 0 0 1px rgba(200, 150, 62, 0.18), 0 10px 24px -14px rgba(200, 150, 62, 0.6); } .ac-nav::after { left: 0; width: 3px; top: calc(var(--ind-top, 0px) + 10px); height: calc(var(--ind-h, 0px) - 20px); border-radius: 0 3px 3px 0; background: var(--ac-gold); box-shadow: 0 0 14px rgba(200, 150, 62, 0.8); } .ac-nav.has-active::before, .ac-nav.has-active::after { opacity: 1; } .ac-nav.is-ready::before, .ac-nav.is-ready::after { transition: top 0.36s cubic-bezier(.2, .8, .2, 1), height 0.36s cubic-bezier(.2, .8, .2, 1), opacity 0.2s; } .ac-nav.has-active .ac-nav-item.ac-active { background: transparent; } .ac-nav.has-active .ac-nav-item.ac-active::before { display: none; } .ac-notif-badge-wrap { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .ac-notif-count { position: relative; margin-left: auto; background: var(--ac-gold); color: #1B1306; font-size: 10.5px; font-weight: 700; min-width: 19px; height: 19px; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } .ac-notif-count::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 1.5px solid rgba(200, 150, 62, 0.65); animation: ac-ping 2.6s cubic-bezier(0, 0, .2, 1) infinite; } @keyframes ac-ping { 0% { transform: scale(0.92); opacity: 0.9; } 75%, 100% { transform: scale(1.45); opacity: 0; } } /* rodape: idioma + pessoa */ .ac-sidebar-footer { padding: 10px 14px 0; display: flex; flex-direction: column; gap: 10px; } .ac-lang-switcher { display: block; margin: 0; } .ac-lang-seg { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; background: var(--ac-side-well-bg); border: 1px solid var(--ac-side-border); border-radius: 11px; box-shadow: var(--ac-side-well-shadow); } .ac-lang-seg::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 8px; background: var(--ac-side-pill-bg); box-shadow: var(--ac-side-pill-shadow); transition: transform 0.28s cubic-bezier(.2, .8, .2, 1); } .ac-lang-seg[data-active="1"]::before { transform: translateX(100%); } .ac-lang-seg[data-active="2"]::before { transform: translateX(200%); } .ac-lang-seg button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: none; background: transparent; padding: 5px 0; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--ac-side-muted); cursor: pointer; border-radius: 8px; transition: color 0.2s; } .ac-lang-seg button:hover { color: var(--ac-side-text); } .ac-lang-seg button.ac-lang-switch-active { color: var(--ac-side-text-strong); } .ac-flag { width: 14px; height: 10px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); opacity: 0.55; filter: saturate(0.7); transition: opacity 0.2s, filter 0.2s; } .ac-lang-seg button:hover .ac-flag, .ac-lang-switch-active .ac-flag { opacity: 1; filter: none; } .ac-sidebar-user { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)); border: 1px solid var(--ac-side-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .ac-sidebar-identity { display: flex; align-items: center; gap: 11px; padding: 2px 2px 0; min-width: 0; } .ac-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .ac-avatar-wrap .ac-avatar { width: 36px; height: 36px; font-size: 13px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); } .ac-presence { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #4CC38A; box-shadow: 0 0 0 2.5px var(--ac-side-bg); } .ac-sidebar-footer-info { flex: 1; min-width: 0; } .ac-sidebar-footer-name { font-size: 13.5px; font-weight: 600; color: var(--ac-side-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } .ac-sidebar-footer-plan { overflow: hidden; white-space: nowrap; margin-top: 2px; } .ac-role-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-gold); } .ac-role-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px rgba(200, 150, 62, 0.8); } .ac-sidebar-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding-top: 8px; border-top: 1px solid var(--ac-side-border); } .ac-sidebar-actions form { display: contents; } .ac-sidebar-actions .ac-icon-btn { width: 100%; height: 30px; border-radius: 9px; background: transparent; color: var(--ac-side-muted); transition: background 0.15s, color 0.15s; } .ac-sidebar-actions .ac-icon-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--ac-side-text-strong); } .ac-sidebar-actions .ac-icon-btn-logout:hover { background: rgba(224, 112, 91, 0.14); color: #F2A291; } .ac-sidebar-version { text-align: center; font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-side-muted); opacity: 0.6; padding-bottom: 2px; } /* botao de tema mostra o destino (lua no claro, sol no escuro); o atributo do decide, sem estado no .NET */ .ac-ico-to-light { display: none; } :root[data-theme="dark"] .ac-ico-to-dark { display: none; } :root[data-theme="dark"] .ac-ico-to-light { display: block; } /* ---- barra recolhida: trilha de icones que expande por cima ao passar o mouse */ .ac-shell.ac-sidebar-rail .ac-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 72px; z-index: 50; transition: width 0.22s cubic-bezier(.2, .8, .2, 1), box-shadow 0.22s; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover { width: 264px; box-shadow: 24px 0 60px rgba(0, 0, 0, 0.38); } .ac-shell.ac-sidebar-rail .ac-main { margin-left: 72px; } .ac-shell.ac-sidebar-rail .ac-sidebar .ac-brand-text, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-workspace-text, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-quick-btn, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-nav-item span, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-side-search span, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-side-search .ac-kbd, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-lang-switcher, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-sidebar-footer-info, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-sidebar-actions, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-sidebar-version { display: none; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-brand-text, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-workspace-text { display: flex; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-quick-btn { display: flex; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-nav-item span, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-side-search span { display: inline-flex; } /* recolhida: o rotulo vira so' um filete curto centralizado, mantendo a altura */ .ac-shell.ac-sidebar-rail .ac-sidebar .ac-nav-label { font-size: 0; letter-spacing: 0; justify-content: center; padding-left: 0; padding-right: 0; } .ac-shell.ac-sidebar-rail .ac-sidebar .ac-nav-label::after { flex: 0 0 18px; background: rgba(255, 255, 255, 0.14); } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-nav-label { font-size: 9.5px; letter-spacing: 0.17em; justify-content: flex-start; padding-left: 12px; padding-right: 12px; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-nav-label::after { flex: 1; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent); } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-lang-switcher, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-sidebar-footer-info, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-sidebar-version { display: block; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-side-search .ac-kbd { display: inline-flex; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-sidebar-actions { display: grid; } .ac-shell.ac-sidebar-rail .ac-brand { flex-wrap: wrap; justify-content: center; padding: 0 0 14px; } .ac-shell.ac-sidebar-rail .ac-sidebar .ac-sidebar-pin-toggle { margin: 8px auto 0; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-brand { flex-wrap: nowrap; justify-content: flex-start; padding: 0 16px 16px 20px; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-sidebar-pin-toggle { margin: 0 0 0 auto; } .ac-shell.ac-sidebar-rail .ac-sidebar .ac-workspace { justify-content: center; padding: 6px 0; background: none; border-color: transparent; box-shadow: none; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-workspace { justify-content: flex-start; padding: 9px 10px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)); border-color: var(--ac-side-border); } .ac-shell.ac-sidebar-rail .ac-sidebar .ac-side-search { justify-content: center; padding-left: 0; padding-right: 0; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-side-search { justify-content: flex-start; padding: 9px 9px 9px 12px; } .ac-shell.ac-sidebar-rail .ac-sidebar .ac-nav-item { justify-content: center; padding-left: 0; padding-right: 0; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-nav-item { justify-content: flex-start; padding-left: 12px; padding-right: 12px; } .ac-shell.ac-sidebar-rail .ac-sidebar .ac-notif-badge-wrap { flex: 0; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-notif-badge-wrap { flex: 1; } .ac-shell.ac-sidebar-rail .ac-sidebar .ac-sidebar-user { align-items: center; padding: 8px 0; background: none; border-color: transparent; box-shadow: none; } .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-sidebar-user { align-items: stretch; padding: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)); border-color: var(--ac-side-border); } /* desktop: a barra flutua, descolada das bordas */ @media (min-width: 901px) { .ac-sidebar { margin: 10px 0 10px 10px; border: 1px solid var(--ac-side-border); border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(6, 12, 22, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.06); } .ac-shell.ac-sidebar-pinned .ac-sidebar { position: sticky; top: 10px; height: calc(100vh - 20px); align-self: flex-start; box-sizing: border-box; } .ac-shell.ac-sidebar-rail .ac-sidebar { top: 10px; left: 10px; bottom: 10px; margin: 0; } .ac-shell.ac-sidebar-rail .ac-main { margin-left: 82px; } } /* telas baixas (notebook 1366x768 e afins): compacta a barra pra todos os itens caberem sem rolagem. A pilula do item ativo se remede sozinha (actusUi.placeNav). */ @media (min-width: 901px) and (max-height: 860px) { .ac-brand, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-brand { padding-bottom: 10px; } .ac-brand-mark svg { width: 36px; height: 36px; } .ac-workspace, .ac-side-tools { margin-bottom: 8px; } .ac-workspace, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-workspace { padding-top: 6px; padding-bottom: 6px; } .ac-nav-item { min-height: 34px; padding-top: 7px; padding-bottom: 7px; } .ac-nav-label { height: 30px; padding-bottom: 6px; } .ac-nav-label:first-child { height: 22px; } .ac-sidebar-footer { gap: 8px; padding-top: 8px; } .ac-sidebar-user, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-sidebar-user { gap: 8px; padding-top: 8px; padding-bottom: 8px; } .ac-sidebar .ac-sidebar-version, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-sidebar-version { display: none; } } @media (min-width: 901px) and (max-height: 720px) { .ac-sidebar .ac-workspace { display: none; } .ac-side-tools { margin-bottom: 6px; } .ac-nav-item { min-height: 32px; padding-top: 6px; padding-bottom: 6px; } .ac-nav-label { height: 22px; padding-bottom: 4px; } .ac-nav-label:first-child { height: 16px; } .ac-lang-seg button { padding-top: 3px; padding-bottom: 3px; } .ac-sidebar-user, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-sidebar-user { gap: 6px; padding-top: 6px; padding-bottom: 6px; } .ac-sidebar-actions { padding-top: 6px; } .ac-sidebar-actions .ac-icon-btn { height: 26px; } } @media (min-width: 901px) and (max-height: 640px) { .ac-brand, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-brand { padding-bottom: 4px; } .ac-brand-mark svg { width: 32px; height: 32px; } .ac-side-tools { margin-bottom: 4px; } .ac-nav-item { min-height: 30px; padding-top: 5px; padding-bottom: 5px; } .ac-nav-label { height: 18px; padding-bottom: 3px; } .ac-nav-label:first-child { height: 14px; padding-bottom: 2px; } .ac-sidebar-footer { gap: 6px; padding-top: 6px; } } /* Quando nem assim cabe (janela muito baixa), o menu rola: o pe' esmaece pra avisar que tem mais item embaixo (classe posta pelo actusUi.placeNav). */ .ac-nav.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); } /* ============================================================ conteudo */ .ac-main { flex-grow: 1; min-width: 0; padding: 36px 44px 48px; max-width: 1600px; animation: ac-page-in 0.32s cubic-bezier(.2, .8, .2, 1); } @keyframes ac-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ac-page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; } .ac-page-head h1 { font-size: 34px; font-weight: 450; letter-spacing: -0.015em; line-height: 1.1; } .ac-page-sub { font-size: 14px; color: var(--ac-text-2); margin-top: 8px; } .ac-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ac-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-gold-text); } .ac-search { display: flex; align-items: center; gap: 8px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 10px; padding: 8px 12px; width: 260px; transition: border-color 0.15s, box-shadow 0.15s; } .ac-search:focus-within { border-color: var(--ac-border-strong); box-shadow: var(--ac-ring); } .ac-search svg { color: var(--ac-text-3); flex-shrink: 0; stroke: currentColor; } .ac-search input { border: none; outline: none; font-size: 14px; width: 100%; color: var(--ac-text); background: transparent; } .ac-search input::placeholder { color: var(--ac-text-3); } /* ------------------------------------------------------------- botoes */ .ac-btn-primary, .ac-btn-ghost, .ac-btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.3; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.08s; } .ac-btn-primary:active, .ac-btn-ghost:active, .ac-btn-danger:active { transform: translateY(1px); } .ac-btn-primary { background: var(--ac-primary); color: var(--ac-on-primary); border: 1px solid transparent; box-shadow: var(--ac-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .ac-btn-primary:hover { background: var(--ac-primary-hover); color: var(--ac-on-primary); } .ac-btn-primary:disabled, .ac-btn-primary:disabled:hover { background: var(--ac-surface-3); color: var(--ac-text-3); cursor: not-allowed; box-shadow: none; } .ac-btn-ghost { border: 1px solid var(--ac-border); background: var(--ac-surface); color: var(--ac-text); box-shadow: var(--ac-shadow-sm); } .ac-btn-ghost:hover { border-color: var(--ac-border-strong); background: var(--ac-surface-2); } .ac-btn-ghost:disabled { opacity: 0.55; cursor: not-allowed; } .ac-btn-danger { background: var(--ac-danger); color: #fff; border: 1px solid transparent; } .ac-btn-danger:hover { filter: brightness(0.92); } /* "Excluir" no rodape dos paineis: discreto e longe do Salvar (empurrado pra esquerda) */ .ac-btn-delete { margin-right: auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--ac-danger-text); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .ac-btn-delete:hover { background: var(--ac-danger-soft); border-color: color-mix(in srgb, var(--ac-danger) 30%, transparent); } .ac-btn-delete:disabled { opacity: 0.55; cursor: not-allowed; } .ac-btn-loader { width: 18px; height: 18px; display: block; } .ac-link { font-size: 13px; font-weight: 600; color: var(--ac-primary-text); text-decoration: none; } .ac-link:hover { text-decoration: underline; text-underline-offset: 3px; } .ac-icon-btn { width: 32px; height: 32px; border-radius: 9px; border: none; background: var(--ac-surface-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ac-text-2); transition: background 0.15s, color 0.15s; flex-shrink: 0; } .ac-icon-btn:hover { color: var(--ac-text); background: var(--ac-border); } .ac-edit-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ac-text-3); margin-left: auto; transition: background 0.15s, color 0.15s, border-color 0.15s; } .ac-edit-btn:hover { background: var(--ac-surface-3); color: var(--ac-text); } .ac-row-actions { display: flex; gap: 2px; margin-left: auto; justify-content: flex-end; } .ac-row-actions .ac-edit-btn { margin-left: 0; } .ac-delete-btn:hover { background: var(--ac-danger-soft); color: var(--ac-danger-text); } .ac-delete-btn:disabled { opacity: 0.35; cursor: not-allowed; } .ac-delete-btn:disabled:hover { background: transparent; color: var(--ac-text-3); } /* ------------------------------------------------- carregando / vazio */ .ac-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 90px 20px; color: var(--ac-text-3); font-size: 13.5px; } .ac-loader-img { width: 52px; height: 52px; } :root[data-theme="dark"] .ac-loader-img { filter: brightness(1.6) saturate(0.8); } .ac-empty-state { background: var(--ac-surface); border: 1.5px dashed var(--ac-border-strong); border-radius: var(--ac-radius-lg); padding: 64px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; } .ac-empty-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ac-surface-3); color: var(--ac-text-3); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .ac-empty-title { font-size: 16px; font-weight: 600; color: var(--ac-text); } .ac-empty-text { font-size: 13px; color: var(--ac-text-2); max-width: 380px; line-height: 1.55; } /* ------------------------------------------------------------- cartoes */ .ac-card, .ac-section-card { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-lg); box-shadow: var(--ac-shadow-sm); } .ac-section-card { padding: 24px 26px; } .ac-card { padding: 22px 24px; min-width: 0; } .ac-section-head, .ac-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ac-section-head h2, .ac-card-title { font-family: var(--ac-font-serif); font-size: 19px; font-weight: 500; letter-spacing: -0.005em; margin: 0; color: var(--ac-text); } .ac-card-sub { font-size: 12.5px; color: var(--ac-text-3); margin-top: 3px; } .ac-mini-list { display: flex; flex-direction: column; margin-top: 10px; } .ac-mini-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--ac-border); gap: 12px; } .ac-mini-row:last-child { border-bottom: none; } .ac-mini-name { font-size: 14px; font-weight: 600; color: var(--ac-text); } .ac-mini-sub { font-size: 12px; color: var(--ac-text-2); margin-top: 2px; } .ac-settings-grid { display: flex; flex-direction: column; gap: 20px; max-width: 980px; } /* cartoes com formulario solto (Configuracoes): sem o gap do .ac-modal-body, o rotulo "Endereco" e as linhas de campos ficavam colados uns nos outros */ .ac-section-card > .ac-divider { margin: 22px 0 16px; } .ac-section-card > .ac-section-label { margin-bottom: 12px; } .ac-section-card > .ac-row-addr + .ac-row-2, .ac-section-card > .ac-row-2 + .ac-row-2 { margin-top: 14px; } .ac-home-link { color: inherit; text-decoration: none; } /* stat cards antigos (ainda usados fora da Inicio) */ .ac-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 26px; } .ac-stat-grid.ac-stat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ac-stat-card { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-lg); padding: 20px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; box-shadow: var(--ac-shadow-sm); } .ac-stat-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--ac-primary-soft); color: var(--ac-primary-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ac-stat-value { font-family: var(--ac-font-serif); font-size: 32px; font-weight: 450; color: var(--ac-text); line-height: 1; } .ac-stat-label { font-size: 13px; color: var(--ac-text-2); margin-top: 8px; } .ac-stat-sub { font-size: 12px; color: var(--ac-text-3); margin-top: 6px; } .ac-stat-card.ac-stat-alert .ac-stat-value { color: var(--ac-danger-text); } /* ------------------------------------------------------------ banners */ .ac-banner { display: flex; align-items: center; gap: 12px; background: var(--ac-primary-soft); border: 1px solid color-mix(in srgb, var(--ac-primary-text) 22%, transparent); color: var(--ac-primary-text); border-radius: var(--ac-radius); padding: 13px 16px; font-size: 13.5px; margin-bottom: 24px; } .ac-banner svg { flex-shrink: 0; } .ac-banner-error { background: var(--ac-danger-soft); border-color: color-mix(in srgb, var(--ac-danger) 30%, transparent); color: var(--ac-danger-text); } /* ----------------------------------------------------- chips e selos */ .ac-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 100px; font-size: 12.5px; font-weight: 600; background: var(--ac-surface); border: 1px solid var(--ac-border); color: var(--ac-text-2); white-space: nowrap; text-decoration: none; } .ac-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.9; } .ac-chip-danger { background: var(--ac-danger-soft); border-color: transparent; color: var(--ac-danger-text); } .ac-chip-warn { background: var(--ac-warn-soft); border-color: transparent; color: var(--ac-warn-text); } .ac-chip-ok { background: var(--ac-ok-soft); border-color: transparent; color: var(--ac-ok-text); } .ac-status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 100px; white-space: nowrap; background: var(--ac-surface-3); color: var(--ac-text-2); } .ac-status-late { background: var(--ac-danger-soft); color: var(--ac-danger-text); } .ac-status-pending { background: var(--ac-warn-soft); color: var(--ac-warn-text); } .ac-status-done { background: var(--ac-ok-soft); color: var(--ac-ok-text); } .ac-badge-soon { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ac-gold-text); background: var(--ac-gold-soft); padding: 3px 8px; border-radius: 100px; margin-top: 8px; } .ac-priority-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; padding: 3px 8px 3px 7px; border-radius: 100px; } .ac-priority-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ac-priority-alta { background: var(--ac-danger-soft); color: var(--ac-danger-text); } .ac-priority-media { background: var(--ac-warn-soft); color: var(--ac-warn-text); } .ac-priority-baixa { background: var(--ac-ok-soft); color: var(--ac-ok-text); } .ac-lang-badge, .ac-fase-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--ac-text-2); background: var(--ac-surface-3); padding: 3px 9px; border-radius: 100px; white-space: nowrap; } /* ================================================================ inicio */ .ac-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; } .ac-hero-title { font-family: var(--ac-font-serif); font-size: 42px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; margin: 10px 0 0; color: var(--ac-text); } .ac-hero-title em { font-style: italic; font-weight: 400; color: var(--ac-gold-text); } .ac-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .ac-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; } .ac-kpi { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-lg); padding: 18px 20px 16px; box-shadow: var(--ac-shadow-sm); text-decoration: none; color: inherit; transition: transform 0.18s cubic-bezier(.2, .8, .2, 1), box-shadow 0.18s, border-color 0.18s; } .ac-kpi:hover { transform: translateY(-2px); box-shadow: var(--ac-shadow-md); border-color: var(--ac-border-strong); color: inherit; } .ac-kpi-top { display: flex; align-items: center; justify-content: space-between; } .ac-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac-text-3); } .ac-kpi-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--ac-surface-3); color: var(--ac-text-2); } .ac-kpi-value { font-family: var(--ac-font-serif); font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--ac-text); font-variant-numeric: lining-nums tabular-nums; margin-top: 6px; } .ac-kpi-foot { font-size: 12px; color: var(--ac-text-3); } .ac-kpi::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ac-kpi-accent, transparent); } .ac-kpi-alert { --ac-kpi-accent: var(--ac-danger); background: linear-gradient(180deg, var(--ac-danger-soft), var(--ac-surface) 70%); border-color: color-mix(in srgb, var(--ac-danger) 26%, var(--ac-border)); } .ac-kpi-alert .ac-kpi-value { color: var(--ac-danger-text); } .ac-kpi-alert .ac-kpi-icon { background: var(--ac-danger-soft); color: var(--ac-danger-text); } .ac-dash-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; } .ac-dash-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .ac-dash-wide { grid-column: 1 / -1; } /* agenda de prazos */ .ac-agenda { display: flex; flex-direction: column; margin-top: 8px; } .ac-agenda-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-text-3); padding: 16px 0 6px; } .ac-agenda-label::after { content: ""; flex: 1; height: 1px; background: var(--ac-border); } .ac-agenda-label.is-danger { color: var(--ac-danger-text); } .ac-agenda-label.is-today { color: var(--ac-gold-text); } .ac-agenda-item { display: flex; align-items: center; gap: 14px; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; text-decoration: none; color: inherit; transition: background 0.15s; } .ac-agenda-item:hover { background: var(--ac-surface-2); color: inherit; } .ac-cal { width: 46px; flex-shrink: 0; border-radius: 10px; overflow: hidden; text-align: center; background: var(--ac-surface); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); } .ac-cal-mon { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 0 2px; background: var(--ac-surface-3); color: var(--ac-text-2); } .ac-cal-day { display: block; font-family: var(--ac-font-serif); font-size: 19px; font-weight: 500; line-height: 1; padding: 5px 0 6px; color: var(--ac-text); } .ac-cal.is-danger .ac-cal-mon { background: var(--ac-danger); color: #fff; } .ac-cal.is-today .ac-cal-mon { background: var(--ac-gold); color: #1B1306; } .ac-cal.is-none .ac-cal-day { color: var(--ac-text-3); } .ac-agenda-body { flex: 1; min-width: 0; } .ac-agenda-title { font-size: 14px; font-weight: 600; color: var(--ac-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-agenda-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ac-text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-agenda-sub svg { flex-shrink: 0; color: var(--ac-text-3); } .ac-agenda-empty { padding: 26px 0 8px; text-align: center; color: var(--ac-text-3); font-size: 13px; } /* pipeline (processos por fase) */ .ac-pipe-total { font-family: var(--ac-font-serif); font-size: 30px; font-weight: 400; color: var(--ac-text); line-height: 1; } .ac-pipe-total small { font-family: var(--ac-font-sans); font-size: 12px; color: var(--ac-text-3); margin-left: 6px; font-weight: 500; } .ac-pipe-bar { display: flex; gap: 3px; height: 12px; margin: 16px 0 14px; border-radius: 100px; overflow: hidden; background: var(--ac-surface-3); } .ac-pipe-seg { height: 100%; min-width: 6px; transition: filter 0.15s; } .ac-pipe-seg:hover { filter: brightness(1.12); } .ac-pipe-legend { display: flex; flex-direction: column; gap: 2px; } .ac-pipe-row { display: grid; grid-template-columns: 10px 1fr auto 42px; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 9px; font-size: 13px; text-decoration: none; color: var(--ac-text); } .ac-pipe-row:hover { background: var(--ac-surface-2); color: var(--ac-text); } .ac-pipe-dot { width: 10px; height: 10px; border-radius: 3px; } .ac-pipe-count { font-weight: 600; font-variant-numeric: tabular-nums; } .ac-pipe-pct { text-align: right; font-size: 12px; color: var(--ac-text-3); font-variant-numeric: tabular-nums; } /* minhas tarefas */ .ac-mytask { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ac-border); text-decoration: none; color: inherit; } .ac-mytask:last-child { border-bottom: none; } .ac-mytask:hover .ac-mytask-title { color: var(--ac-primary-text); } .ac-mytask-check { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--ac-border-strong); flex-shrink: 0; } .ac-mytask-body { flex: 1; min-width: 0; } .ac-mytask-title { font-size: 13.5px; font-weight: 600; color: var(--ac-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s; } .ac-mytask-sub { font-size: 12px; color: var(--ac-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* clientes recentes */ .ac-client-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .ac-client-tile { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--ac-border); background: var(--ac-surface-2); text-decoration: none; color: inherit; min-width: 0; transition: border-color 0.15s, transform 0.18s, box-shadow 0.18s; } .ac-client-tile:hover { border-color: var(--ac-border-strong); transform: translateY(-2px); box-shadow: var(--ac-shadow-md); color: inherit; } .ac-client-tile-name { font-size: 13.5px; font-weight: 600; color: var(--ac-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-client-tile-sub { font-size: 11.5px; color: var(--ac-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .ac-client-tile-foot { display: flex; align-items: center; justify-content: space-between; } /* fases (versao antiga, mantida pra compatibilidade) */ .ac-home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } .ac-phase-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .ac-phase-row { display: grid; grid-template-columns: 124px 1fr 28px; align-items: center; gap: 12px; font-size: 13px; } .ac-phase-track { height: 8px; border-radius: 100px; background: var(--ac-surface-3); overflow: hidden; } .ac-phase-fill { height: 100%; border-radius: 100px; background: var(--ac-primary); } .ac-phase-fill.ac-phase-fill-done { background: var(--ac-ok); } .ac-phase-count { text-align: right; font-weight: 600; } /* ================================================================ kanban O quadro ocupa a altura da janela: cabecalho em cima, colunas rolando por dentro. box-sizing border-box pq o .ac-main tem padding. */ .ac-main:has(.ac-kanban-page) { height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 24px; } .ac-kanban-page { max-width: 1600px; width: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; transition: padding-right 0.18s; } .ac-kanban-page.ac-panel-open { padding-right: calc(var(--ac-detail-panel-width) + 24px); } .ac-kanban { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; gap: 14px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; } .ac-kanban-col { flex: 1 1 0; min-width: 200px; min-height: 0; display: flex; flex-direction: column; background: var(--ac-surface-2); border: 1px solid var(--ac-border); border-top: 3px solid var(--ac-col-accent, var(--ac-border)); border-radius: var(--ac-radius-lg); padding: 12px 10px 10px; } .ac-kanban-col-head { display: flex; align-items: center; gap: 9px; padding: 2px 6px 12px; } .ac-kanban-col-head h3 { font-family: var(--ac-font-sans); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ac-text); flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; } .ac-kanban-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; font-size: 11.5px; font-weight: 600; color: var(--ac-text-2); background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 100px; padding: 1px 8px; } /* coluna inteira e' alvo de drop (ver nota em Tasks.razor/Cases.razor) */ .ac-kanban-col-body { display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; margin: -4px; border-radius: 12px; transition: background-color 0.12s, box-shadow 0.12s; } .ac-kanban-col-body-over { background: var(--ac-primary-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ac-primary) 45%, transparent); } .ac-kanban-empty { font-size: 12px; color: var(--ac-text-3); text-align: center; padding: 22px 8px; border: 1.5px dashed var(--ac-border-strong); border-radius: 12px; } .ac-kanban-dropzone { font-size: 12px; font-weight: 600; color: var(--ac-primary-text); text-align: center; padding: 16px 8px; border: 1.5px dashed var(--ac-primary); border-radius: 12px; background: var(--ac-primary-soft); } .ac-kanban-dot-wrap { position: relative; display: inline-flex; width: 10px; height: 10px; border-radius: 50%; cursor: pointer; flex-shrink: 0; } .ac-kanban-dot-wrap:hover { outline: 2px solid var(--ac-border-strong); outline-offset: 3px; } .ac-kanban-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; pointer-events: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); } .ac-color-input { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); opacity: 0; cursor: pointer; border: none; padding: 0; } .ac-kanban-card { position: relative; background: var(--ac-surface); border: 1px solid var(--ac-border); border-left-width: 1px; border-radius: 12px; padding: 13px 14px 12px 16px; cursor: grab; box-shadow: var(--ac-shadow-sm); transition: box-shadow 0.18s, transform 0.18s cubic-bezier(.2, .8, .2, 1), border-color 0.18s; } /* a cor da coluna vem inline no border-left-color (Cases/Tasks.razor); aqui vira um fio interno */ .ac-kanban-card::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: inherit; background: var(--ac-card-accent, transparent); } .ac-kanban-card:hover { box-shadow: var(--ac-shadow-md); transform: translateY(-1px); border-color: var(--ac-border-strong); } .ac-kanban-card:active { cursor: grabbing; } .ac-kanban-card-dragging { opacity: 0.4; } .ac-kanban-card-over { box-shadow: 0 -3px 0 0 var(--ac-primary), var(--ac-shadow-md); } .ac-kanban-card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 9px; } .ac-kanban-card-title { font-size: 13.5px; font-weight: 600; color: var(--ac-text); margin-bottom: 4px; line-height: 1.38; } .ac-kanban-card-client { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ac-text-2); margin-bottom: 11px; } .ac-kanban-card-client svg { color: var(--ac-text-3); flex-shrink: 0; } .ac-kanban-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--ac-border); } .ac-kanban-due { font-size: 11.5px; font-weight: 500; color: var(--ac-text-2); display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; } .ac-kanban-due svg { color: var(--ac-text-3); } .ac-kanban-due-late, .ac-kanban-due-late svg { color: var(--ac-danger-text); font-weight: 600; } .ac-card-processo { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 11.5px; font-weight: 600; color: var(--ac-primary-text); text-decoration: none; margin-bottom: 4px; } .ac-card-processo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-card-processo svg { flex-shrink: 0; } .ac-card-processo:hover { text-decoration: underline; text-underline-offset: 2px; } .ac-card-tags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; } .ac-subtask-progress { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ac-text-3); margin: 0 0 11px; } .ac-subtask-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--ac-surface-3); overflow: hidden; } .ac-subtask-bar > span { display: block; height: 100%; background: var(--ac-ok); border-radius: 4px; } /* =========================================================== painel lateral Folha que desliza da direita (editar/criar processo e tarefa). */ .ac-detail-panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--ac-detail-panel-width); background: var(--ac-surface); border-left: 1px solid var(--ac-border); box-shadow: -24px 0 60px -28px rgba(10, 16, 26, 0.35); padding: 24px 26px 0; overflow-y: auto; z-index: 40; display: flex; flex-direction: column; animation: ac-sheet-in 0.26s cubic-bezier(.2, .8, .2, 1); } @keyframes ac-sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } .ac-detail-footer { position: sticky; bottom: 0; left: 0; right: 0; z-index: 5; margin-top: auto; margin-left: -26px; margin-right: -26px; padding: 14px 26px; background: color-mix(in srgb, var(--ac-surface) 88%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--ac-border); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; } .ac-panel-resize-handle { position: fixed; top: 0; bottom: 0; right: calc(var(--ac-detail-panel-width) - 6px); width: 12px; cursor: col-resize; z-index: 41; display: none; touch-action: none; } .ac-panel-resize-handle.ac-panel-resize-visible { display: block; } .ac-panel-resize-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 44px; transform: translate(-50%, -50%); border-radius: 3px; background: var(--ac-border-strong); transition: background 0.15s, height 0.15s; } .ac-panel-resize-handle:hover::after, .ac-panel-resize-handle.ac-panel-resizing::after { background: var(--ac-gold); height: 72px; } .ac-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .ac-detail-eyebrow { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ac-gold-text); } .ac-detail-name { font-family: var(--ac-font-serif); font-size: 25px; font-weight: 450; letter-spacing: -0.01em; color: var(--ac-text); margin: 6px 0 4px; line-height: 1.2; } .ac-detail-sub { font-size: 13px; color: var(--ac-text-2); margin-bottom: 16px; } .ac-detail-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ac-border); } .ac-detail-section-title { display: flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-text-2); margin-bottom: 12px; } .ac-detail-form { display: flex; flex-direction: column; gap: 16px; } .ac-detail-processo { margin: -8px 0 14px; } .ac-back-link { font-size: 12px; font-weight: 600; color: var(--ac-primary-text); background: none; border: none; padding: 0; margin: 0 0 8px; cursor: pointer; text-align: left; } .ac-back-link:hover { text-decoration: underline; } .ac-checklist-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ac-text); padding: 7px 0; cursor: pointer; } .ac-checklist-row input, .ac-subtask-row input, .ac-checkbox-row input { accent-color: var(--ac-primary); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; } .ac-checklist-row.ac-checklist-done { color: var(--ac-text-3); text-decoration: line-through; } .ac-history-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ac-border); } .ac-history-row:last-child { border-bottom: none; } .ac-history-text { font-size: 13px; color: var(--ac-text); min-width: 0; } .ac-history-time { font-size: 11.5px; color: var(--ac-text-3); margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; } .ac-linked-task { cursor: pointer; border-radius: 9px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; } .ac-linked-task:hover { background: var(--ac-surface-2); } .ac-task-group-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 4px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ac-text-3); } .ac-task-group-head .ac-kanban-count { text-transform: none; letter-spacing: 0; } .ac-subtask-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ac-border); font-size: 13px; } .ac-subtask-row:last-of-type { border-bottom: none; } .ac-subtask-title { flex: 1; min-width: 0; color: var(--ac-text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-subtask-title:hover { text-decoration: underline; } .ac-subtask-title.ac-subtask-done { color: var(--ac-text-3); text-decoration: line-through; } .ac-subtask-add { display: flex; gap: 8px; margin-top: 12px; } /* ================================================================ tabelas */ .ac-table-card { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-lg); overflow: hidden; box-shadow: var(--ac-shadow-sm); } .ac-table-head, .ac-table-row { display: grid; grid-template-columns: 2.2fr 1.3fr 1.7fr 0.9fr 1fr 0.8fr; gap: 14px; align-items: center; } .ac-table-head { padding: 12px 22px; background: var(--ac-surface-2); border-bottom: 1px solid var(--ac-border); } .ac-table-head div { font-size: 10.5px; font-weight: 600; color: var(--ac-text-3); text-transform: uppercase; letter-spacing: 0.12em; } .ac-table-row { padding: 13px 22px; border-bottom: 1px solid var(--ac-border); transition: background 0.12s; } .ac-table-row:last-child { border-bottom: none; } .ac-table-row:hover { background: var(--ac-surface-2); } .ac-table-row .ac-row-actions { opacity: 0.55; transition: opacity 0.15s; } .ac-table-row:hover .ac-row-actions, .ac-table-row:focus-within .ac-row-actions { opacity: 1; } .ac-companies-table .ac-table-head, .ac-companies-table .ac-table-row { grid-template-columns: 2fr 1fr 90px; } .ac-users-table .ac-table-head, .ac-users-table .ac-table-row { grid-template-columns: 2.4fr 1fr 1.2fr 1fr 0.8fr; } .ac-cell-person { display: flex; align-items: center; gap: 12px; min-width: 0; } .ac-cell-person > div { min-width: 0; } .ac-client-name { font-size: 14px; font-weight: 600; color: var(--ac-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-client-type { font-size: 12px; color: var(--ac-text-3); margin-top: 1px; } .ac-doc { font-size: 12.5px; color: var(--ac-text-2); } .ac-email { font-size: 13px; color: var(--ac-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-phone { font-size: 12px; color: var(--ac-text-3); margin-top: 2px; font-variant-numeric: tabular-nums; } .ac-notif-icons { display: flex; gap: 6px; } .ac-notif-icon { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .ac-notif-on { background: var(--ac-ok-soft); color: var(--ac-ok-text); } .ac-notif-off { background: var(--ac-surface-3); color: var(--ac-text-3); opacity: 0.7; } .ac-table-empty { padding: 40px 22px; text-align: center; color: var(--ac-text-3); font-size: 13px; } /* ============================================================== formularios */ .ac-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ac-field label { font-size: 12.5px; font-weight: 600; color: var(--ac-text-2); } .ac-field input, .ac-field select, .ac-field textarea, .ac-combo-input, .ac-person-role, .ac-subtask-input, .ac-atend-input, .ac-assignee-add, .ac-template-title, .ac-template-field input, .ac-template-field select, .ac-filter-bar select { border: 1px solid var(--ac-border-strong); border-radius: 10px; padding: 9px 12px; font-size: 14px; outline: none; color: var(--ac-text); background: var(--ac-surface); width: 100%; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .ac-field select, .ac-person-role, .ac-filter-bar select, .ac-assignee-add, .ac-template-field select { appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C939E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .ac-field textarea { font-family: inherit; line-height: 1.55; resize: vertical; min-height: 88px; } .ac-field input::placeholder, .ac-field textarea::placeholder, .ac-combo-input::placeholder, .ac-subtask-input::placeholder { color: var(--ac-text-3); } .ac-field input:hover, .ac-field select:hover, .ac-field textarea:hover, .ac-combo-input:hover { border-color: color-mix(in srgb, var(--ac-border-strong) 60%, var(--ac-text-3)); } .ac-field input:focus, .ac-field select:focus, .ac-field textarea:focus, .ac-combo-input:focus, .ac-person-role:focus, .ac-subtask-input:focus, .ac-atend-input:focus, .ac-template-title:focus, .ac-template-field input:focus, .ac-template-field select:focus, .ac-filter-bar select:focus { border-color: var(--ac-gold); box-shadow: var(--ac-ring); } .ac-field input:disabled, .ac-field select:disabled, .ac-field textarea:disabled { color: var(--ac-text-3); background-color: var(--ac-surface-2); cursor: not-allowed; } .ac-field-hint { font-size: 12px; color: var(--ac-text-3); line-height: 1.45; } .ac-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ac-row-addr { display: grid; grid-template-columns: 3fr 1fr; gap: 16px; } .ac-checkbox-row { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ac-text-2); cursor: pointer; user-select: none; } .ac-divider { height: 1px; background: var(--ac-border); } .ac-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-text-2); } .ac-role-note { font-size: 12.5px; color: var(--ac-text-3); margin: -10px 0 18px 2px; } .ac-filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .ac-filter-bar select { width: auto; font-size: 13px; padding: 8px 32px 8px 12px; } /* validacao padrao do Blazor (app.css usava outline vermelho cru) */ .ac-app .validation-message { color: var(--ac-danger-text); font-size: 12px; } .ac-app .validation-errors { color: var(--ac-danger-text); font-size: 13px; padding-left: 18px; margin: 0; } .ac-app .invalid { outline: none; border-color: var(--ac-danger) !important; } .ac-app .valid.modified:not([type=checkbox]) { outline: none; } .ac-segmented { display: inline-flex; background: var(--ac-surface-3); border-radius: 11px; padding: 3px; width: fit-content; gap: 2px; } .ac-segmented button { border: none; border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; color: var(--ac-text-2); transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .ac-segmented button:hover { color: var(--ac-text); } .ac-segmented button.ac-active { background: var(--ac-surface); color: var(--ac-text); box-shadow: var(--ac-shadow-sm); } .ac-tag-group { display: flex; flex-wrap: wrap; gap: 6px; } .ac-tag-toggle { border: 1px solid var(--ac-border-strong); background: var(--ac-surface); color: var(--ac-text-2); border-radius: 100px; padding: 5px 12px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; } .ac-tag-toggle:hover { color: var(--ac-text); border-color: var(--ac-text-3); } .ac-tag-on, .ac-tag-on:hover { background: var(--ac-primary-soft); border-color: color-mix(in srgb, var(--ac-primary) 55%, transparent); color: var(--ac-primary-text); font-weight: 600; } .ac-person-row { display: grid; grid-template-columns: 1fr 130px 26px; gap: 8px; align-items: start; margin-bottom: 8px; } .ac-person-role { font-size: 13px; } .ac-add-person { margin-top: 2px; width: fit-content; } .ac-doc-form { margin-top: 12px; padding: 14px; border: 1px solid var(--ac-border); border-radius: 12px; background: var(--ac-surface-2); display: flex; flex-direction: column; gap: 10px; } .ac-atend-input { font-size: 13px; resize: vertical; font-family: inherit; } .ac-subtask-input { font-size: 13px; } .ac-combo { position: relative; } .ac-combo-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 12px; box-shadow: var(--ac-shadow-lg); max-height: 240px; overflow-y: auto; z-index: 20; padding: 4px; animation: ac-pop-in 0.14s ease-out; } .ac-combo-option { padding: 8px 10px; font-size: 13.5px; cursor: pointer; color: var(--ac-text); border-radius: 8px; } .ac-combo-option:hover { background: var(--ac-surface-3); } .ac-combo-option-clear { color: var(--ac-text-3); font-style: italic; } .ac-combo-person { display: flex; align-items: center; gap: 10px; } .ac-combo-person small { display: block; font-size: 11.5px; color: var(--ac-text-3); } .ac-combo-empty { padding: 9px 10px; font-size: 13px; color: var(--ac-text-3); } .ac-assignee-picker { display: flex; flex-direction: column; gap: 8px; } .ac-assignee-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ac-assignee-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ac-surface-3); border-radius: 100px; padding: 3px 8px 3px 3px; font-size: 12px; color: var(--ac-text); } .ac-chip-remove { border: none; background: none; cursor: pointer; color: var(--ac-text-3); font-size: 16px; line-height: 1; padding: 0 3px; border-radius: 6px; } .ac-chip-remove:hover { color: var(--ac-danger-text); } .ac-assignee-add { width: fit-content; font-size: 13px; color: var(--ac-text-2); } /* ------------------------------------------------------------ date picker */ .ac-datepicker { position: relative; } .ac-datepicker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 1px solid var(--ac-border-strong); border-radius: 10px; padding: 9px 12px; font-size: 14px; background: var(--ac-surface); color: var(--ac-text); cursor: pointer; text-align: left; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .ac-datepicker-trigger:hover { border-color: var(--ac-text-3); } .ac-datepicker-trigger:focus-visible { border-color: var(--ac-gold); box-shadow: var(--ac-ring); } .ac-datepicker-trigger svg { flex-shrink: 0; color: var(--ac-text-3); } .ac-datepicker-placeholder { color: var(--ac-text-3); } .ac-datepicker-value { color: var(--ac-text); font-weight: 500; font-variant-numeric: tabular-nums; } .ac-datepicker-backdrop { position: fixed; inset: 0; z-index: 1060; background: transparent; } /* StyledSelect.razor: reaproveita .ac-combo-dropdown/.ac-combo-option (mesmo visual do combobox de responsaveis), so' troca position:absolute por fixed (top/left/width vem inline, calculados em C# - mesma razao do datepicker: position:absolute cortaria na rolagem de um modal longo). */ .ac-styled-select-pop { position: fixed; right: auto; z-index: 1061; } .ac-combo-option.is-selected { background: var(--ac-primary-soft); color: var(--ac-primary-text); font-weight: 600; } .ac-datepicker-pop { position: fixed; z-index: 1061; width: 300px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 16px; box-shadow: var(--ac-shadow-lg); padding: 16px; animation: ac-pop-in 0.16s ease-out; } .ac-datepicker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .ac-datepicker-month { font-family: var(--ac-font-serif); font-size: 17px; font-weight: 500; color: var(--ac-text); text-transform: capitalize; } .ac-datepicker-nav { width: 30px; height: 30px; border-radius: 9px; border: none; background: var(--ac-surface-3); color: var(--ac-text); display: flex; align-items: center; justify-content: center; cursor: pointer; } .ac-datepicker-nav:hover { background: var(--ac-border); } .ac-datepicker-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; } .ac-datepicker-weekdays span { text-align: center; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ac-text-3); padding-bottom: 6px; } .ac-datepicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .ac-datepicker-day { width: 36px; height: 36px; border: none; background: transparent; border-radius: 10px; font-size: 13.5px; color: var(--ac-text); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; font-family: inherit; font-variant-numeric: tabular-nums; } .ac-datepicker-day:hover:not(:disabled) { background: var(--ac-surface-3); } .ac-datepicker-day:disabled { visibility: hidden; cursor: default; } .ac-datepicker-day-today { color: var(--ac-gold-text); font-weight: 700; } .ac-datepicker-day-today::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--ac-gold); } .ac-datepicker-day-selected, .ac-datepicker-day-selected:hover { background: var(--ac-primary) !important; color: var(--ac-on-primary); font-weight: 700; } .ac-datepicker-foot { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ac-border); } .ac-datepicker-link { border: none; background: transparent; color: var(--ac-text-2); font-size: 13px; font-weight: 600; cursor: pointer; padding: 5px 8px; border-radius: 8px; } .ac-datepicker-link:hover { background: var(--ac-surface-3); color: var(--ac-text); } .ac-datepicker-link-primary { color: var(--ac-primary-text); } /* ================================================================== modal */ .ac-overlay { position: fixed; inset: 0; background: var(--ac-overlay); backdrop-filter: blur(5px); display: flex; align-items: flex-start; justify-content: center; padding: 56px 24px; overflow-y: auto; z-index: 1050; animation: ac-fade-in 0.18s ease-out; } .ac-modal { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-xl); width: 680px; max-width: 100%; box-shadow: var(--ac-shadow-lg); animation: ac-modal-in 0.24s cubic-bezier(.2, .8, .2, 1); } .ac-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px 18px; border-bottom: 1px solid var(--ac-border); } .ac-modal-head h2 { font-size: 23px; font-weight: 450; letter-spacing: -0.01em; } .ac-modal-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; max-height: 64vh; overflow-y: auto; } .ac-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 28px; border-top: 1px solid var(--ac-border); background: var(--ac-surface-2); border-radius: 0 0 var(--ac-radius-xl) var(--ac-radius-xl); } .ac-modal-confirm { width: 440px; } .ac-modal-sm { width: 470px; } .ac-confirm-body { display: flex; gap: 16px; align-items: flex-start; padding: 28px; } .ac-confirm-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: var(--ac-danger-soft); color: var(--ac-danger-text); display: flex; align-items: center; justify-content: center; } .ac-confirm-body h3 { font-family: var(--ac-font-serif); font-size: 19px; font-weight: 500; margin: 0 0 6px; color: var(--ac-text); } .ac-confirm-body p { font-size: 14px; color: var(--ac-text-2); margin: 0; line-height: 1.55; } @keyframes ac-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ac-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes ac-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ======================================================== notificacoes */ .ac-notif-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-text-3); margin: 22px 0 10px; } .ac-notif-group-label:first-child { margin-top: 4px; } .ac-notif-list { display: flex; flex-direction: column; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-lg); box-shadow: var(--ac-shadow-sm); overflow: hidden; } .ac-notif-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--ac-border); background: transparent; transition: background 0.12s; } .ac-notif-row:last-child { border-bottom: none; } .ac-notif-row:hover { background: var(--ac-surface-2); } .ac-notif-row-unread { background: color-mix(in srgb, var(--ac-gold-soft) 55%, transparent); } .ac-notif-row-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ac-gold); } .ac-notif-icon-wrap { width: 36px; height: 36px; border-radius: 11px; background: var(--ac-primary-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ac-primary-text); } .ac-notif-icon-wrap.is-danger { background: var(--ac-danger-soft); color: var(--ac-danger-text); } .ac-notif-icon-wrap.is-today { background: var(--ac-warn-soft); color: var(--ac-warn-text); } .ac-notif-row-body { flex: 1; min-width: 0; cursor: pointer; } .ac-notif-row-text { font-size: 13.5px; color: var(--ac-text); } .ac-notif-row-unread .ac-notif-row-text { font-weight: 600; } .ac-notif-row-time { font-size: 12px; color: var(--ac-text-3); margin-top: 2px; } .ac-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac-gold); flex-shrink: 0; box-shadow: 0 0 0 3px var(--ac-gold-soft); } .ac-notif-row .ac-link { background: none; border: none; cursor: pointer; white-space: nowrap; padding: 6px 8px; border-radius: 8px; } .ac-notif-row .ac-link:hover { background: var(--ac-surface-3); text-decoration: none; } .ac-toast-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 2000; } /* Sempre escuro de proposito (igual um toast/snackbar do Material) - nao segue o tema, ao contrario da barra lateral agora: por isso e' cor fixa, nao var(--ac-side-bg) (que virou claro no tema claro - esse toast flutua sobre o conteudo, nao e' a sidebar). */ .ac-toast { display: flex; align-items: center; gap: 12px; background: #10192A; color: #F3EFE7; padding: 13px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--ac-shadow-lg); font-size: 13.5px; animation: ac-toast-in 0.32s cubic-bezier(.2, .8, .2, 1); } .ac-toast svg { flex-shrink: 0; color: var(--ac-gold); } @keyframes ac-toast-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } /* ========================================================= historico */ .ac-timeline { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-lg); padding: 6px 24px; box-shadow: var(--ac-shadow-sm); } .ac-timeline-row { display: flex; gap: 16px; padding: 16px 0; position: relative; } .ac-timeline-row::before { content: ""; position: absolute; left: 16px; top: 50px; bottom: -6px; width: 1px; background: var(--ac-border); } .ac-timeline-row:last-child::before { display: none; } .ac-timeline-avatar { position: relative; z-index: 1; width: 33px; height: 33px; font-size: 11.5px; } .ac-timeline-body { flex: 1; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 1px; } .ac-timeline-main { min-width: 0; } .ac-timeline-text { font-size: 13.5px; color: var(--ac-text-2); line-height: 1.5; } .ac-timeline-text strong { font-weight: 600; color: var(--ac-text); } .ac-timeline-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .ac-timeline-time { font-size: 12px; color: var(--ac-text-3); white-space: nowrap; flex-shrink: 0; padding-top: 2px; font-variant-numeric: tabular-nums; } /* ==================================================== configuracoes / modelos */ .ac-template-intro, .ac-template-why { font-size: 13px; color: var(--ac-text-2); line-height: 1.6; margin-top: 8px; } .ac-template-defs { margin: 12px 0 0; padding: 12px 16px 12px 34px; background: var(--ac-surface-2); border: 1px solid var(--ac-border); border-radius: 12px; font-size: 13px; color: var(--ac-text); line-height: 1.55; } .ac-template-defs li + li { margin-top: 6px; } .ac-template-note { font-size: 12px; color: var(--ac-text-3); margin-top: 6px; } .ac-template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; margin-top: 18px; } .ac-template-area { border: 1px solid var(--ac-border); border-radius: 14px; padding: 16px; background: var(--ac-surface-2); display: flex; flex-direction: column; gap: 10px; } .ac-template-area-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; } .ac-template-area-head h3 { font-family: var(--ac-font-serif); font-size: 16px; font-weight: 500; color: var(--ac-text); margin: 0; } .ac-template-row { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--ac-border); border-radius: 12px; background: var(--ac-surface); } .ac-template-title { min-height: 58px; font-size: 13px; line-height: 1.45; resize: vertical; field-sizing: content; } .ac-template-meta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .ac-template-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--ac-text-3); } .ac-template-field input, .ac-template-field select { font-size: 13px; padding: 7px 9px; } .ac-template-field input { width: 84px; } .ac-template-field-fase select { min-width: 160px; padding-right: 30px; } .ac-template-remove { margin-left: auto; align-self: center; font-size: 18px; padding: 4px 6px; } /* =============================================================== login */ .ac-login-page { min-height: 100vh; display: flex; background: var(--ac-bg); } .ac-login-aside { position: relative; flex: 1 1 52%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 48px 56px; color: #F3EFE7; background: radial-gradient(110% 80% at 0% 0%, rgba(200, 150, 62, 0.18), transparent 55%), linear-gradient(160deg, #12223A 0%, #0B1524 55%, #070C14 100%); } .ac-login-aside-glow { position: absolute; inset: -20%; background: radial-gradient(34% 38% at 22% 30%, rgba(200, 150, 62, 0.28), transparent 70%), radial-gradient(40% 46% at 80% 72%, rgba(70, 110, 170, 0.22), transparent 72%); filter: blur(12px); animation: ac-aurora-drift 24s ease-in-out infinite alternate; pointer-events: none; } @keyframes ac-aurora-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-3%, 2%, 0) scale(1.06); } 100% { transform: translate3d(2%, -3%, 0) scale(1.02); } } .ac-login-aside-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(80% 70% at 30% 40%, #000 30%, transparent 85%); pointer-events: none; } .ac-login-aside-watermark { position: absolute; right: -140px; bottom: -150px; width: 560px; height: 560px; opacity: 0.09; pointer-events: none; animation: ac-seal-spin 120s linear infinite; } .ac-login-aside-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; } .ac-login-aside-top img { width: 46px; height: 46px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)); } .ac-login-aside-top span { font-family: var(--ac-font-serif); font-size: 24px; letter-spacing: 0.06em; color: #F3EFE7; } .ac-login-aside-content { position: relative; z-index: 1; max-width: 520px; } .ac-login-aside-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ac-gold); } .ac-login-aside-headline { font-family: var(--ac-font-serif); font-size: 48px; font-weight: 300; line-height: 1.06; letter-spacing: -0.02em; margin: 18px 0 0; color: #F6F2EA; } .ac-login-aside-headline em { font-style: italic; color: #E6BF74; } .ac-login-aside-tagline { margin-top: 20px; font-size: 15px; line-height: 1.65; color: rgba(243, 239, 231, 0.7); max-width: 440px; } .ac-login-aside-features { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; flex-wrap: wrap; position: relative; z-index: 1; } .ac-login-aside-features li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(243, 239, 231, 0.82); } .ac-login-feat-icon { width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ac-gold); } .ac-login-main { position: relative; flex: 1 1 48%; display: flex; align-items: center; justify-content: center; padding: 24px; } .ac-login-lang-switcher { position: absolute; top: 28px; right: 32px; display: flex; gap: 8px; z-index: 2; } .ac-login-lang-switcher button { width: 30px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ac-border); border-radius: 7px; background: var(--ac-surface); overflow: hidden; cursor: pointer; opacity: 0.5; transition: opacity 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .ac-login-lang-switcher button svg { width: 100%; height: 100%; display: block; } .ac-login-lang-switcher button:hover { opacity: 0.9; transform: translateY(-1px); } .ac-login-lang-switcher button.ac-active { opacity: 1; border-color: var(--ac-gold); box-shadow: var(--ac-ring); } .ac-login-theme { position: absolute; top: 24px; left: 28px; z-index: 2; } .ac-login-card { width: 100%; max-width: 400px; padding: 8px 4px; } .ac-login-brand { display: none; } .ac-login-brand-rule { width: 36px; height: 3px; border-radius: 3px; background: var(--ac-gold); margin: 0 0 22px; } .ac-login-heading { font-size: 36px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 8px; } .ac-login-subheading { font-size: 14.5px; color: var(--ac-text-2); margin: 0 0 30px; line-height: 1.55; } .ac-login-card .ac-field { margin-bottom: 16px; } .ac-login-card .ac-field input { padding-top: 12px; padding-bottom: 12px; font-size: 15px; } .ac-login-card .ac-btn-primary { width: 100%; justify-content: center; margin-top: 10px; padding: 13px 18px; font-size: 15px; border-radius: 12px; } .ac-login-card .ac-input-icon-wrap { position: relative; display: flex; align-items: center; } .ac-login-card .ac-input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ac-text-3); pointer-events: none; } .ac-login-card .ac-input-icon-wrap input { padding-left: 40px; } .ac-login-foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ac-border); font-size: 12px; color: var(--ac-text-3); display: flex; align-items: center; gap: 8px; } .ac-login-foot svg { color: var(--ac-ok-text); flex-shrink: 0; } .ac-login-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 28px; } .ac-login-mobile-brand img { width: 40px; height: 40px; } .ac-login-mobile-brand span { font-family: var(--ac-font-serif); font-size: 24px; letter-spacing: 0.05em; color: var(--ac-text); } /* ============================================== paleta de comandos (Ctrl+K) */ .ac-cmdk-overlay { position: fixed; inset: 0; z-index: 1200; background: var(--ac-overlay); backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: ac-fade-in 0.14s ease-out; } .ac-cmdk { width: 640px; max-width: 100%; max-height: 70vh; display: flex; flex-direction: column; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 18px; box-shadow: var(--ac-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.02); overflow: hidden; animation: ac-modal-in 0.2s cubic-bezier(.2, .8, .2, 1); } .ac-cmdk-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--ac-border); } .ac-cmdk-head svg { color: var(--ac-text-3); flex-shrink: 0; } .ac-cmdk-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 16px; color: var(--ac-text); font-family: inherit; } .ac-cmdk-input::placeholder { color: var(--ac-text-3); } .ac-cmdk-input:focus-visible { box-shadow: none; } .ac-cmdk-list { overflow-y: auto; padding: 6px 8px 8px; } .ac-cmdk-group { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-text-3); padding: 12px 10px 6px; } .ac-cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: none; background: transparent; border-radius: 10px; cursor: pointer; text-align: left; color: var(--ac-text); font-family: inherit; } .ac-cmdk-item.is-active { background: var(--ac-surface-3); } .ac-cmdk-item.is-active .ac-cmdk-enter { opacity: 1; } .ac-cmdk-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--ac-surface-3); color: var(--ac-text-2); } .ac-cmdk-item.is-active .ac-cmdk-icon { background: var(--ac-surface); color: var(--ac-gold-text); } .ac-cmdk-text { flex: 1; min-width: 0; } .ac-cmdk-title, .ac-cmdk-sub { display: block; } .ac-cmdk-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-cmdk-title mark { background: none; color: var(--ac-gold-text); font-weight: 700; padding: 0; } .ac-cmdk-sub { font-size: 12px; color: var(--ac-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-cmdk-enter { opacity: 0; color: var(--ac-text-3); flex-shrink: 0; transition: opacity 0.1s; } .ac-cmdk-empty { padding: 38px 16px; text-align: center; color: var(--ac-text-3); font-size: 13.5px; } .ac-cmdk-foot { display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--ac-border); background: var(--ac-surface-2); font-size: 11.5px; color: var(--ac-text-3); } .ac-cmdk-foot span { display: inline-flex; align-items: center; gap: 6px; } .ac-cmdk-foot .ac-cmdk-brand { margin-left: auto; font-family: var(--ac-font-serif); font-size: 13px; letter-spacing: 0.04em; color: var(--ac-text-3); } /* ======================================== 404 / acesso negado */ .ac-state-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; } .ac-login-page.ac-state-page { min-height: 100vh; } .ac-state { max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; } .ac-state-code { font-family: var(--ac-font-serif); font-size: 104px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--ac-gold-text); font-style: italic; } .ac-state-icon { width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: var(--ac-gold-soft); color: var(--ac-gold-text); margin-bottom: 8px; } .ac-state h1, .ac-state h2 { font-family: var(--ac-font-serif); font-size: 30px; font-weight: 400; letter-spacing: -0.015em; margin: 4px 0 0; color: var(--ac-text); } .ac-state p { font-size: 14.5px; color: var(--ac-text-2); line-height: 1.6; margin: 0 0 14px; } /* ===================================================== movimento reduzido */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .ac-brand-mark .ac-seal-teeth, .ac-brand-mark .ac-seal-arc { animation: none; opacity: 1; } } /* =========================================================== responsivo */ @media (max-width: 1280px) { .ac-client-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ac-client-strip > :nth-child(n+4) { display: none; } } @media (max-width: 1100px) { .ac-dash-grid { grid-template-columns: 1fr; } .ac-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Celular e tablet: a barra lateral vira faixa no topo (marca + idioma + usuario) com o menu rolando na horizontal logo abaixo. Vem por ultimo pra vencer as regras da barra recolhida. */ @media (max-width: 900px) { .ac-shell { flex-direction: column; min-height: 100vh; } .ac-sidebar, .ac-shell.ac-sidebar-rail .ac-sidebar, .ac-shell.ac-sidebar-rail .ac-sidebar:hover { position: sticky; top: 0; left: auto; bottom: auto; width: 100%; height: auto; z-index: 30; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; border-right: none; border-bottom: 1px solid var(--ac-side-border); box-sizing: border-box; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4); overflow: visible; } .ac-sidebar-pin-toggle, .ac-nav-label, .ac-workspace, .ac-quick-btn, .ac-quick-menu, .ac-quick-backdrop { display: none !important; } .ac-sidebar { margin: 0; border-radius: 0; } .ac-sidebar::after { display: none; } .ac-side-tools, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-side-tools { order: 2; margin: 0; } /* no celular o menu rola na horizontal: sem pilula deslizante, destaque direto no item */ .ac-nav::before, .ac-nav::after { display: none; } .ac-nav.has-active .ac-nav-item.ac-active { background: var(--ac-side-active); } .ac-avatar-wrap .ac-avatar { width: 30px; height: 30px; font-size: 11px; } .ac-presence { width: 9px; height: 9px; } .ac-lang-seg button .ac-flag { display: none; } .ac-brand, .ac-shell.ac-sidebar-rail .ac-brand, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-brand { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; gap: 10px; flex-wrap: nowrap; justify-content: flex-start; } .ac-brand-mark svg { width: 34px; height: 34px; } .ac-brand-text, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-brand-text { display: flex; } .ac-brand-text span { font-size: 19px; } .ac-brand-text small { display: none; } .ac-side-search, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-side-search { order: 2; margin: 0; padding: 8px; width: 36px; height: 36px; justify-content: center; } .ac-side-search span, .ac-side-search .ac-kbd, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-side-search span, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-side-search .ac-kbd { display: none; } .ac-sidebar-footer, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-sidebar-footer { order: 3; flex: none; flex-direction: row; align-items: center; margin: 0; padding: 0; gap: 8px; } .ac-lang-switcher, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-lang-switcher { display: block; } .ac-lang-seg { width: 108px; box-sizing: border-box; } .ac-sidebar-user, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-sidebar-user, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-sidebar-user { flex-direction: row; align-items: center; gap: 6px; background: none; border: none; padding: 0; } .ac-sidebar-identity .ac-sidebar-footer-info, .ac-sidebar-footer-info, .ac-sidebar-version, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-sidebar-footer-info, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-sidebar-version { display: none; } .ac-sidebar-identity { padding: 0; } .ac-sidebar-identity .ac-avatar { width: 30px; height: 30px; font-size: 11px; } .ac-sidebar-actions, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-sidebar-actions { display: flex; gap: 2px; padding-top: 0; border-top: none; } .ac-sidebar-actions .ac-icon-btn { width: 30px; } .ac-nav { order: 10; flex: 0 0 100%; flex-direction: row; gap: 2px; padding: 2px 0 0; overflow-x: auto; scrollbar-width: none; } .ac-nav::-webkit-scrollbar { display: none; } .ac-nav-item, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-nav-item, .ac-shell.ac-sidebar-rail .ac-sidebar:hover .ac-nav-item { flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 4px; min-width: 66px; padding: 7px 10px; text-align: center; } .ac-nav-item span, .ac-shell.ac-sidebar-rail .ac-sidebar .ac-nav-item span { display: inline-flex; font-size: 11px; white-space: nowrap; } .ac-nav-item.ac-active::before { left: 18px; right: 18px; top: auto; bottom: -1px; width: auto; height: 2px; border-radius: 2px; } .ac-notif-badge-wrap { flex: 0 !important; } .ac-notif-count { position: absolute; top: 2px; right: 10px; } .ac-shell.ac-sidebar-rail .ac-main { margin-left: 0; } .ac-main { flex: 1 1 auto; min-width: 0; width: 100%; max-width: none; padding: 22px 16px 40px; } .ac-main:has(.ac-kanban-page) { height: auto; align-self: flex-start; overflow: visible; display: block; } .ac-page-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; } .ac-page-head h1 { font-size: 28px; } .ac-hero-title { font-size: 32px; } .ac-head-actions { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 10px; } .ac-search { width: 100%; } .ac-stat-grid, .ac-stat-grid.ac-stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ac-kpi-value { font-size: 36px; } .ac-row-2, .ac-row-addr { grid-template-columns: 1fr; } .ac-section-card, .ac-card { padding: 20px 18px; } .ac-home-grid { grid-template-columns: 1fr; } .ac-timeline { padding: 6px 16px; } .ac-table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ac-table-head, .ac-table-row { min-width: 760px; } .ac-companies-table .ac-table-head, .ac-companies-table .ac-table-row { min-width: 480px; } .ac-person-row { grid-template-columns: minmax(0, 1fr) 110px 26px; } .ac-template-grid { grid-template-columns: 1fr; } .ac-kanban { flex-direction: row; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; gap: 12px; } .ac-kanban-col { flex: 0 0 min(86vw, 340px); min-width: 0; scroll-snap-align: start; } .ac-kanban-col-body { min-height: 0; max-height: calc(100vh - 250px); overflow-y: auto; overflow-x: hidden; } .ac-kanban-page.ac-panel-open { padding-right: 0; } .ac-detail-panel { width: 100%; } .ac-panel-resize-handle { display: none !important; } .ac-overlay { padding: 16px 12px; } .ac-modal-head, .ac-modal-foot { padding: 16px 20px; } .ac-modal-body { padding: 20px; } .ac-login-aside { display: none; } .ac-login-mobile-brand { display: flex; } .ac-cmdk-overlay { padding-top: 8vh; } .ac-client-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ac-client-strip > :nth-child(n+3) { display: none; } .ac-toast-wrap { left: 16px; right: 16px; bottom: 16px; } } @media (max-width: 480px) { .ac-main { padding: 18px 12px 36px; } .ac-page-head h1 { font-size: 25px; } .ac-hero-title { font-size: 28px; } .ac-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .ac-kpi { padding: 14px 14px 12px; } .ac-kpi-value { font-size: 30px; } .ac-lang-seg { width: 96px; } .ac-login-lang-switcher { top: 16px; right: 16px; gap: 6px; } }