/* DEMO-HUB Business Platform — dark ScaleForge theme. Chart palette validated (dataviz six-checks) against surface #15181F: series #3987e5 #199e70 #c98500 #9085e9 #e66767 — all PASS (CVD ΔE 15.7+, ≥3:1). */ html { color-scheme: var(--scheme, dark); } :root { /* ── A FISICA DA CASA (roadmap OS-inteiro ①, curador 2026-08-23h): UMA curva e UMA escala de tempos para toda superficie. A curva e' a do dock — a que o curador aprovou no movimento. Duracao: micro (icones/hover) · ui (popovers/toggles) · surface (panes/janelas) · hero (zoom-from-icon). Nova animacao NUNCA inventa curva propria: consome estes tokens. */ --ease-casa: cubic-bezier(.22,.61,.36,1); --t-micro: .13s; --t-ui: .2s; --t-surface: .3s; --t-hero: .42s; --bg: #0E1014; --surface-1: #15181F; --surface-2: #1B1F28; --accent: #3987e5; --accent: oklch(0.6692 0.1607 245); --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781; --grid: #2c2c2a; --baseline: #383835; --border: rgba(255,255,255,0.08); --s1: #3987e5; --s2: #199e70; --s3: #c98500; --s4: #9085e9; --s5: #e66767; --good: #0ca30c; --warn: #fab219; --serious: #ec835a; --critical: #d03b3b; --scroll: #2a3242; --scroll-h: #3a4458; --home-g1: #223049; --home-g2: #2a2140; --home-g3a: #1a2030; --home-g3b: #141824; --tile-g1: #2b3346; --tile-g2: #1c2233; --tile-ink: #aab6cc; --tile-shadow: rgba(0,0,0,.34); --scheme: dark; --radius: 10px; --font: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* escala de ícones (ONDA-0 §2.2): ícone é infraestrutura, nunca protagonista */ --ico-tile: 64px; /* tile da home (era 92) */ --ico-glyph: 28px; /* glifo dentro do tile (era 46) */ --ico-nav: 18px; /* ícone de menu/navegação */ --ico-inline: 14px; /* ícone inline em texto/tabela/alerta */ /* ── DESIGN LANGUAGE · ONDA 1 (HSF-628082c2): os tokens da casa que faltavam. Aditivos — nenhum token acima muda. Toda superfície/app consome DAQUI; app nunca reinventa o valor. */ /* M5 · Elevação em 2 níveis, theme-aware. Nenhum rgba(0,0,0,.4+) literal novo na casa. --shadow-1 = repouso (cards) · --shadow-2 = flutuante (popover/modal/sheet). Light ~metade. */ --shadow-1: 0 1px 3px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.22); --shadow-2: 0 8px 24px rgba(0,0,0,.34), 0 24px 60px rgba(0,0,0,.44); /* M6 · Escala de raio curta. Squircles proporcionais dos ícones (lado*.27) NÃO entram aqui. */ --r-ctl: 8px; /* controles (botão, input, chip) */ --r-card: 12px; /* cards, popovers */ --r-win: 16px; /* modais, sheets, janelas */ /* M7 · Escada tipográfica declarada (tamanhos; peso/tracking vêm na regra de uso). Piso 11px. Convivem com --t-micro/ui/surface/hero, que são TEMPOS de motion, não tamanhos. */ --t-large: 24px; /* large-title 22-26 / 700 / -.02em */ --t-title: 19px; /* título 19 / 700 */ --t-head: 15px; /* headline 15 / 600 */ --t-body: 13.5px; /* corpo 13-14 */ --t-foot: 12.5px; /* rodapé / meta 12.5 */ --t-cap: 11px; /* caption 11 / 600 / uppercase / +.06em */ /* M4 · Um material de vidro, uma receita. Espessura regular (82%). blur+saturate juntos — sem o saturate a superfície fica cinzenta e morta (lição do dock). */ --glass-bg: color-mix(in oklab, var(--surface-1) 82%, transparent); --glass-blur: blur(20px) saturate(160%); /* M1 · Overshoot NOMEADO, ao lado da curva da casa. Exceção de motion vira token, nunca acaso. */ --ease-pop: cubic-bezier(.34, 1.56, .64, 1); } :root[data-theme="light"] { --bg: #cdd8e6; /* era #d8e0ea — mais profundidade, menos estouro */ --surface-1: #f7f9fc; /* era #ffffff — off-white; o branco puro cansava */ --surface-2: #e9eef6; --ink: #1a2330; --ink-2: #3d4756; --muted: #4d5d73; --grid: #cfd9e8; --baseline: #bfcada; --border: rgba(10, 25, 50, 0.14); --warn: #8a6d00; --good: #178a63; --serious: #b95c2a; --critical: #b02a2a; --scroll: #a8b6c8; --scroll-h: #8fa1b8; --home-g1: #b9cbe3; --home-g2: #cfc4e6; --home-g3a: #dee6f0; --home-g3b: #c9d4e2; --tile-g1: #fbfcfe; --tile-g2: #e4ebf5; --tile-ink: #44536a; --tile-shadow: rgba(25,40,65,.22); --scheme: light; /* M5 · elevação theme-aware: opacidade ~metade no claro (sombra fria de tinta, não preta). */ --shadow-1: 0 1px 3px rgba(15,23,42,.14), 0 4px 12px rgba(15,23,42,.10); --shadow-2: 0 8px 24px rgba(15,23,42,.16), 0 24px 60px rgba(15,23,42,.22); } #biview { background: var(--bg); } /* #theme-btn SAIU (curador 2026-08-25: "tirar o botao ali de cima"). O tema passou a ter TRÊS estados — automático (default) / claro fixo / escuro fixo — e o seletor mora na secção Aparência do menu do utilizador (e no ⌘K). A regra de estilo do botão foi com ele; fica só esta nota, porque o `sf-feedback.js` ainda descreve o #fb-btn por comparação com este quadro de 30×30 e uma remoção sem rasto deixaria aquele comentário a apontar para nada. */ /* ---- ícones do sprite (herdam cor do contexto via currentColor) ---- */ svg.ico { width: var(--ico-nav); height: var(--ico-nav); display: inline-block; vertical-align: -3px; flex: 0 0 auto; } svg.ico.inline { width: var(--ico-inline); height: var(--ico-inline); vertical-align: -2px; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } /* ---- layout: topbar / main / chat ---- */ #topbar { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--surface-1); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } /* Identidade do cabeçalho (curador 2026-07-20): o nome do HOSPITAL é o protagonista (era 16px, ficou pequeno); "Business Platform" ganha presença. Degradê MONOCROMÁTICO FRIO (azul→índigo): mantém a assinatura visual do gradiente sem o rosa — plataforma de negócios, não festa. */ #topbar .brand { font-weight: 700; font-size: 20px; letter-spacing: .1px; cursor: pointer; line-height: 1.25; } #topbar .brand b { color: var(--ink); font-weight: 750; } #topbar .brand .bp, .sb-title .bp { background: linear-gradient(90deg,#5b8def,#7b6cf0); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; letter-spacing: .25px; } :root[data-theme="light"] #topbar .brand .bp, :root[data-theme="light"] .sb-title .bp { background: linear-gradient(90deg,#2563c9,#5b4bd6); /* mais escuro no claro = contraste real */ -webkit-background-clip: text; background-clip: text; } .selo { font-size: 11px; font-weight: 600; color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 2px 10px; letter-spacing: .4px; white-space: nowrap; } #topbar .crumb { color: var(--muted); font-size: 13px; margin-left: 4px; } #topbar .spacer { flex: 1; } #topbar button.home { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; cursor: pointer; font-family: var(--font); } #topbar button.home:hover { color: var(--ink); border-color: var(--accent); } body { height: 100vh; display: flex; flex-direction: column; overflow: hidden; } #topbar { flex: 0 0 auto; } #view { flex: 1 1 auto; overflow-y: auto; padding: 22px 26px; min-height: 0; } /* ---- Carlo — COLUNA lateral direita (split 80/20). SEM caixa: fundo transparente, o texto do Carlo FLUI e EXPANDE nos 20% livres; o orb no topo é a presença. Nunca sobrepõe o gráfico. ---- */ #chat { flex: 0 0 0; width: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: transparent; transition: flex-basis var(--t-surface) var(--ease-casa), width var(--t-surface) var(--ease-casa); } /* OVERLAY 100% (curador 2026-07-23d — completa o Stage 3, que só zerou o #stage do modo voz): o painel de chat NUNCA reserva coluna do #stage / empurra o conteúdo. Vira overlay FIXED ancorado à direita, por CIMA da plataforma, em TODA tela. (carlo-open hoje é caminho legado; a regra fica overlay-safe.) */ body.carlo-open #chat { position: fixed; top: 56px; right: 0; bottom: 0; z-index: 46; flex: none; width: min(92vw, 380px); min-width: 0; background: color-mix(in oklab, var(--surface-1) 94%, transparent); backdrop-filter: blur(10px); border-left: 1px solid var(--border); } #chat-scrim { display: none; } @media (max-width: 720px) { body.carlo-open #chat { width: 100%; } } /* header sem barra: orb + nome + fechar, fundo transparente */ #chat header { padding: 16px 16px 4px; border: 0; background: transparent; display: flex; align-items: center; } .carlo-head { display: flex; align-items: center; gap: 10px; flex: 1; } .carlo-orb-sm { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; box-shadow: 0 0 16px color-mix(in oklab, #7aa2ff 55%, transparent); } .carlo-head .t { font-weight: 700; font-size: 15px; background: linear-gradient(90deg,#9db8ff,#c79bff,#ff9ec2); -webkit-background-clip: text; background-clip: text; color: transparent; } .carlo-head .s { font-size: 11px; color: var(--muted); } .chat-x { background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 0 4px; } .chat-x:hover { color: var(--ink); } /* log: o texto do Carlo FLUI livre (sem bolhas de caixa) e expande na coluna */ #chat-log { flex: 1; overflow-y: auto; padding: 10px 16px 8px; display: flex; flex-direction: column; gap: 16px; } .msg { max-width: 100%; padding: 0; border-radius: 0; background: none; font-size: 14px; white-space: pre-wrap; line-height: 1.62; } .msg.user { align-self: stretch; color: var(--muted); font-size: 12.5px; } .msg.user::before { content: "você — "; } .msg.cos { align-self: stretch; color: var(--ink); } .msg.cos .nav-chip { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--accent); } .msg.typing { color: var(--muted); font-style: italic; } /* form minimal: input em pílula, sem barra/borda de topo */ #chat form { display: flex; gap: 8px; padding: 8px 14px 14px; border: 0; background: transparent; align-items: center; } #chat input { flex: 1; background: color-mix(in oklab, var(--surface-2) 55%, transparent); border: 1px solid var(--border); color: var(--ink); border-radius: 999px; padding: 9px 14px; font-family: var(--font); font-size: 13.5px; } #chat input:focus { outline: none; border-color: var(--accent); } #chat button { background: var(--accent); color: #fff; border: 0; border-radius: 50%; width: 38px; height: 38px; padding: 0; cursor: pointer; font-weight: 600; font-family: var(--font); } #chat button:disabled { opacity: .5; cursor: default; } #carlo-mic { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); font-size: 15px; padding: 0; width: 38px; height: 38px; border-radius: 50%; } #carlo-mic.on { background: #e0435a; border-color: #e0435a; color: #fff; animation: mic-pulse 1.1s ease-in-out infinite; } @keyframes mic-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,67,90,.5) } 50% { box-shadow: 0 0 0 6px rgba(224,67,90,0) } } /* ---- Carlo orb (shared) + floating fab ---- */ .orb-svg, .carlo-home-orb { display: block; width: 100%; height: 100%; animation: cos-rot 22s linear infinite; } .orb-svg .rib, .carlo-home-orb .rib { animation: cos-flow 6s ease-in-out infinite alternate; } .orb-svg .r2, .carlo-home-orb .r2 { animation-duration: 7.6s; animation-delay: -2.2s; } .orb-svg .r3, .carlo-home-orb .r3 { animation-duration: 5.2s; animation-delay: -1s; } @keyframes cos-flow { from { transform: translate(-2.5px,-1px) } to { transform: translate(2.5px,1px) } } @keyframes cos-rot { to { transform: rotate(360deg) } } @media (prefers-reduced-motion: reduce) { .orb-svg, .carlo-home-orb, .rib { animation: none !important } } /* #carlo-fab REMOVIDO (2026-08-23): o Carlo mora no dock; o orb flutuante duplicava-o. */ /* REFERENCIA CLICAVEL bp:// nas respostas do Carlo (roadmap ②) — sublinhado pontilhado + ↗ */ .bpref { color: var(--accent); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; } .bpref::after { content: "\2197"; font-size: 10px; margin-left: 2px; opacity: .7; } /* orb flutuante SEMPRE visível (home e sobre o BI) — some só quando o painel do Carlo está aberto */ /* ---- HUD do modo VOICE-FIRST (S2S direto — o Carlo navega falando) ---- */ #carlo-hud { position: fixed; right: 22px; bottom: 20px; left: auto; transform: none; display: none; align-items: center; gap: 10px; z-index: 45; background: color-mix(in oklab, var(--surface-1) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px 8px 8px; max-width: min(92vw, 560px); box-shadow: 0 8px 30px rgba(0,0,0,.45), 0 0 16px color-mix(in oklab, #7aa2ff 35%, transparent); } body.carlo-voice #carlo-hud { display: flex; } #carlo-hud .hud-orb { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; box-shadow: 0 0 12px color-mix(in oklab, #7aa2ff 60%, transparent); animation: mic-pulse 1.6s ease-in-out infinite; } #carlo-hud .hud-txt { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; } #carlo-hud .hud-b { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; } #carlo-hud .hud-b:hover { border-color: var(--accent); color: var(--ink); } /* PUSH-TO-TALK (HSF-1858, como o Atlas 2): mic PISCANDO VERMELHO enquanto grava */ #carlo-hud .hud-b#hud-mic.rec { background: #e0435a; border-color: #e0435a; color: #fff; animation: mic-pulse 1.1s ease-in-out infinite, mic-blink 1s steps(1, end) infinite; } /* CÍRCULO MORFO (curador 2026-07-23, padrão Atlas 2/WhatsApp): vazio = mic · com texto = enviar · gravando = vermelho (rec vence o send) */ #carlo-hud .hud-b#hud-mic .ic-send { display: none; } #carlo-hud .hud-b#hud-mic.send:not(.rec) .ic-mic { display: none; } #carlo-hud .hud-b#hud-mic.send:not(.rec) .ic-send { display: block; } #carlo-hud .hud-b#hud-mic.send:not(.rec) { border-color: var(--accent); color: var(--accent); } @keyframes mic-blink { 0%, 100% { opacity: 1 } 50% { opacity: .4 } } /* caixa de texto da pílula — TEXTAREA auto-expansível (par da voz): cresce de 1 linha até ~7 e depois rola, pra escrever parágrafos. Estilo da casa: painel-2, hairline, radius alto. A pílula (align-items:flex-end) acomoda o crescimento PRA CIMA sem cobrir o conteúdo (mesmo espírito do balão). */ #carlo-hud { align-items: flex-end; } #carlo-hud .hud-orb, #carlo-hud .hud-b, #carlo-hud .hud-txt { align-self: center; } #carlo-hud .hud-input { flex: 1 1 160px; min-width: 120px; max-width: 340px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; color: var(--ink); font: 13px/1.45 var(--font-sans, inherit); padding: 7px 14px; outline: none; resize: none; overflow-y: hidden; max-height: 168px; box-sizing: border-box; transition: border-color .15s; } /* barra de scroll SÓ quando precisa — o grow() liga */ #carlo-hud .hud-input::placeholder { color: var(--muted); } #carlo-hud .hud-input:focus { border-color: var(--accent); } /* caixa >1 linha DESTACA acima da pílula (curador 2026-07-23f): vira um compose flutuante ancorado ao topo do pill — o pill continua FINO (a caixa sai do fluxo). Mesma física de crescer PRA CIMA do balão; some junto com o texto (o grow() tira a classe). */ #carlo-hud.input-big .hud-input { position: absolute; bottom: calc(100% + 10px); right: 6px; width: min(520px, calc(100vw - 60px)); max-width: none; background: var(--surface-1); border-color: var(--accent); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 14px color-mix(in oklab, #7aa2ff 25%, transparent); } /* timer de gravação padrão Atlas 2 (HSF-1895): ⏺ m:ss + barra de progresso /5:00 + ✍ N recortes */ #carlo-hud .vtimer { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 700; color: #ff8a8a; } #carlo-hud .vtimer .vlim { color: var(--muted); font-weight: 500; } #carlo-hud .vtimer .vbar { width: 72px; height: 5px; border-radius: 3px; background: color-mix(in oklab, var(--muted) 25%, transparent); overflow: hidden; } #carlo-hud .vtimer .vbar i { display: block; height: 100%; background: #e0435a; transition: width 1s linear; } #carlo-hud .vtimer.warn { color: #ffb454; } #carlo-hud .vtimer.warn .vbar i { background: #ffb454; } #carlo-hud .vparts { color: var(--accent); font-size: 10.5px; margin-left: 6px; } #carlo-mute { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; padding: 0 6px; } #carlo-mute:hover { color: var(--ink); } /* ---- balão de PENSAMENTO do Carlo (voice-first): ações/ciclos ao vivo; gráficos e respostas maiores EXPANDEM o balão (.big). Clique fora do conteúdo = recolhe. ---- */ #carlo-thought { position: fixed; right: 22px; bottom: 86px; left: auto; transform: none; display: none; flex-direction: column; gap: 8px; z-index: 44; background: color-mix(in oklab, var(--surface-1) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 16px; padding: 12px 16px; width: clamp(300px, 22vw, 400px); max-height: 200px; overflow-y: auto; box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 14px color-mix(in oklab, #7aa2ff 25%, transparent); transition: width .25s ease, max-height .25s ease; font-size: 13px; } #carlo-thought.on { display: flex; } /* cresce PRA CIMA dentro da faixa reservada à direita (nunca cobre o gráfico à esquerda) */ #carlo-thought.big { width: clamp(340px, 30vw, 520px); max-height: min(70vh, 560px); } /* ---- CARREGAR MAIS por overscroll (curador 2026-08-23p): correr um restinho de scroll para cima revela a bolinha, com o elástico da Apple — a banda cresce em ALTURA (o conteúdo desce naturalmente, sem transform) e volta com overshoot ao soltar. O laço vive em _thElastico. ---- */ #carlo-thought .th-band { height: calc(var(--pull, 0) * 1px); flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; overflow: visible; margin: -4px 0 0; } #carlo-thought .th-band.solta { transition: height .42s cubic-bezier(.34,1.56,.64,1); } #carlo-thought .th-bob { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; border: 2.5px solid var(--border); border-top-color: #5ee0a0; margin-bottom: 7px; transform: scale(var(--ps, 0)) rotate(calc(var(--pull, 0) * 4deg)); transition: transform .1s; } #carlo-thought .th-band.load .th-bob { animation: thspin .7s linear infinite; transform: scale(1); } @keyframes thspin { to { transform: scale(1) rotate(360deg); } } #carlo-thought .th-band .th-fim { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; } /* turnos ANTIGOS prepensados — compactos, mais apagados que a resposta corrente */ #carlo-thought .th-old { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); opacity: .88; padding: 6px 9px; border-radius: 10px; background: color-mix(in oklab, var(--surface-2) 60%, transparent); } #carlo-thought .th-old.u { border-left: 2px solid #5ee0a0; color: var(--ink); background: none; padding: 2px 9px; border-radius: 0; font-weight: 600; } #carlo-thought .th-beat { color: var(--muted); font-size: 12.5px; opacity: .5; transition: opacity .2s; } #carlo-thought .th-beat:last-child { color: var(--ink-2); opacity: 1; } /* texto ESTÁTICO (curador 2026-07-23e): NENHUMA animação/cor/underline de hover — parecia link. (supersede o hover theme-safe de 23d; o clique continua funcionando, só não se anuncia.) */ #carlo-thought .th-reply { color: var(--ink); white-space: pre-wrap; font-size: 13.5px; line-height: 1.52; cursor: default; } /* ---- resposta ESTRUTURADA no balão (curador 2026-07-29): a tela do Carlo passou a ser escaneada, não narrada. `white-space: pre-wrap` some no modo markdown — as quebras agora são

/, e mantê-lo dobraria cada quebra de linha do fonte. ---- */ #carlo-thought .th-md { white-space: normal; } #carlo-thought .th-md > :first-child { margin-top: 0; } #carlo-thought .th-md > :last-child { margin-bottom: 0; } #carlo-thought .th-md p { margin: 0 0 9px; } #carlo-thought .th-md .th-h { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--dim, #8a94a6); margin: 15px 0 7px; font-weight: 600; } #carlo-thought .th-md ul, #carlo-thought .th-md ol { margin: 0 0 9px; padding-left: 19px; } #carlo-thought .th-md li { margin: 3px 0; } #carlo-thought .th-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: #8a94a61f; border-radius: 5px; padding: 1px 5px; } #carlo-thought .th-md strong { font-weight: 650; } /* tabela larga rola DENTRO do próprio bloco — o balão nunca rola na horizontal */ #carlo-thought .th-tabwrap { overflow-x: auto; margin: 0 0 11px; } #carlo-thought .th-tab { border-collapse: collapse; font-size: 12.8px; min-width: 100%; } #carlo-thought .th-tab th { text-align: left; font-weight: 600; color: var(--dim, #8a94a6); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 5px 13px 5px 0; border-bottom: 1px solid #33405455; white-space: nowrap; } #carlo-thought .th-tab td { padding: 6px 13px 6px 0; border-bottom: 1px solid #33405422; vertical-align: top; } #carlo-thought .th-tab tr:last-child td { border-bottom: 0; } /* número em coluna própria: tabular-nums impede a coluna de dançar entre linhas */ #carlo-thought .th-tab td:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- scrollbars ESCUROS em todo o demo (comunicação visual; curador 2026-07-06) ---- */ * { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-h); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } #carlo-thought .th-chart .chat-chart { max-width: 100%; } body.carlo-open #carlo-thought { display: none; } /* painel aberto = o balão sai da frente */ /* ---- HOME springboard (estilo iPad — visual mais claro) ---- */ /* homepage mais clara/arejada: um backdrop suave em vez do quase-preto */ body.on-home #view { padding: 0; background: radial-gradient(1100px 620px at 50% -8%, var(--home-g1) 0%, transparent 60%), radial-gradient(900px 520px at 80% 108%, var(--home-g2) 0%, transparent 62%), linear-gradient(180deg, var(--home-g3a) 0%, var(--home-g3b) 100%); } .springboard { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: clamp(24px, 4.2vh, 52px) clamp(12px, 1.8vw, 30px) clamp(18px, 2.8vh, 36px); box-sizing: border-box; } /* ── A HOME É PROPORCIONAL, NÃO MEDIDA EM PIXÉIS (curador 2026-08-25: «o hub voltou a ficar pequeno, deveria ser reativo em %, para inclusive evitar que com estagios diferentes de zoom, mude o layout») ────────────────────────────────────────────────────────────────────────── CAUSA MEDIDA do encolhimento: `grid-template-columns: repeat(4, 96px)` com `gap: 20px 28px` dava 4×96 + 3×28 = 468px de grelha FIXA, em qualquer ecrã. Num 1920 isso é 24% da largura — a «faixa estreita no centro» do print. E como 468 é px e a viewport é que muda com o zoom, a mesma home valia 19,5% a 80% de zoom e 30% a 125%: o zoom mexia no LAYOUT em vez de escalar. TUDO deriva agora de UMA variável, `--sb-col` (a largura da coluna = a largura do azulejo): ícone, rótulo, gaps e a moldura do modo de edição são frações dela. Como `--sb-col` é `min(vw, vh)`, e vw e vh mudam JUNTOS com o zoom, a razão grelha/ecrã fica constante — o zoom volta a ser uma lupa. O `vh` no `min` não é enfeite: com 4 linhas de 16 azulejos, um teto só em `vw` estourava a altura em ecrãs baixos (1920×1080 a 125% já é 864px de altura CSS). Os limites do `clamp` são o único sítio onde o px reaparece — pisos e tetos de sanidade, não a medida do desenho. 4 COLUNAS mantêm-se: a paginação é de 16 = 4×4 (SB_POR_PAGINA). */ /* `--sb-col` nasce no .springboard E no .sb-grid COM O MESMO VALOR: as setas de paginação (.sb-parrow, irmãs da .sb-pages) posicionam-se em relação à BORDA DA GRELHA — antes eram px fixos do centro (306px, calibrados para a grelha de 468px) e a grelha fluida passou por cima delas (curador 2026-08-25: o azulejo "ficou por cima das setas"). Declarar a var no contêiner é o que deixa a seta e a grelha lerem a MESMA medida. Um só valor, dois seletores. */ .springboard, .sb-grid { --sb-col: clamp(80px, min(8.6vw, 14vh), 210px); } .sb-grid { display: grid; /* .58, não os .667 de origem (64/96): o curador achou o ícone "um pouco grande" na coluna fluida (2026-08-25) — a coluna e os gaps FICAM (mesmo espaço ocupado), só o desenho dentro dela encolhe ~13%. */ --ico-tile: calc(var(--sb-col) * .58); grid-template-columns: repeat(4, var(--sb-col)); /* o vão horizontal é .38 e não os .29 de origem (28px sobre 96): a grelha é limitada pela ALTURA (4 linhas têm de caber sem rolar), e alargar o vão é a única forma de ocupar mais largura sem crescer em altura. Continua a ser uma fração de `--sb-col` — e não um `vw` — para que a forma da grelha não dependa do zoom, só o tamanho. */ gap: calc(var(--sb-col) * .18) calc(var(--sb-col) * .38); justify-content: center; align-content: start; margin: 0 auto; } /* A PASTA é um modal de largura fixa (.folder-box, max-width 560px) e reutiliza a MESMA .sb-grid. Sem este travão, um `--sb-col` de 210 dava 4×210 + 3×63 = 1029px dentro de uma caixa de 560 e a pasta transbordava. Aqui a coluna fica no tamanho de sempre: 492px úteis / 4,9 ≈ 100. */ .folder-box .sb-grid { --sb-col: clamp(64px, min(7vw, 11vh), 100px); } .ipad-app { display: flex; flex-direction: column; align-items: center; gap: calc(var(--sb-col, 96px) * .085); cursor: pointer; width: var(--sb-col, 96px); position: relative; transition: transform .18s cubic-bezier(.22,.61,.36,1); } /* a curva do dock */ /* SEM lift no hover (curador 2026-08-23c, paridade com o dock): o dock nao levita — CRESCE. O realce do grid passa a ser a mesma dupla do dock: magnificacao gaussiana + acender. */ .ipad-ico { width: var(--ico-tile); height: var(--ico-tile); border-radius: calc(var(--ico-tile) * .27); /* o squircle do dock, na mesma proporcao */ display: grid; place-items: center; color: var(--tile-ink); background: linear-gradient(160deg, var(--tile-g1) 0%, var(--tile-g2) 100%); border: 1px solid var(--border); /* a MESMA sombra do dock (0 5px 14px + inset .14) — era a maior diferenca de "peso" entre as duas casas: o tile do grid flutuava numa sombra 24px que o dock nao tem */ box-shadow: 0 5px 14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14); /* magnificacao SO' NO PROPRIO icone sob o rato (curador 2026-08-23e: "me arrependi ... só tirar a parte que ele magnifica os que estao ao redor; só clarear ficou mt dull") — scale por :hover, sem motor gaussiano: vizinho nenhum se mexe. translateZ(0) NAO e' cargo-cult (curador 2026-08-23f: "ao diminuir, muda o asset e ele levemente se move dentro do tile"): sem camada propria o browser re-rasteriza o icone ao FIM da transicao e o glifo re-encaixa com 1px de diferenca. Camada permanente = mesma rasterizacao sempre. E 1.125 em vez de 1.14 porque 64x1.125 = 72 EXATO — escala fracionaria e' outra fonte do mesmo tremor. */ transform: translateZ(0); transition: transform .13s cubic-bezier(.22,.61,.36,1), box-shadow .18s cubic-bezier(.22,.61,.36,1), border-color .18s, color .18s, filter .18s; } .ipad-app:hover .ipad-ico { transform: translateZ(0) scale(1.125); } .home-edit .ipad-app:hover .ipad-ico { transform: translateZ(0); } /* em edicao manda o tremer/arrasto */ /* glifo a 50% do lado, como no dock (era px fixo — dessincronizava ao mudar o tile) */ .ipad-ico svg.ico { width: 50%; height: 50%; } /* hover generico (tiles NEUTROS — fantasmas/estaticos): tambem ACENDE, sem glow-sombra — paridade com o dock em toda a grelha, nao so' nos coloridos (curador 2026-08-23c) */ .ipad-app:hover .ipad-ico { filter: brightness(1.12); } /* AZULEJO COLORIDO (curador 2026-08-23) — a mesma linguagem do dock: cor por app (--dk-bg do _dkCor), glifo branco, realce por brilho e nao por troca de cor. Fantasmas/locked ficam de fora (nao tem .ipad-cor) e continuam no neutro esbatido. */ .ipad-app.ipad-cor .ipad-ico { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.10)), var(--dk-bg, var(--surface-2)); border-color: color-mix(in oklab, var(--dk-bg, var(--surface-2)) 65%, var(--border)); } /* VEU ESCURO no tema dark (curador 2026-08-23d: "a cor muito forte ... colocar um veu, uns 30%"). Um degrade escuro POR CIMA da cor, so' no dark — a cor continua a mesma (o atalho do dock segue reconhecivel), mas assenta no fundo em vez de gritar. No light nada muda. */ [data-theme=dark] .ipad-app.ipad-cor .ipad-ico { background: linear-gradient(rgba(9,13,21,.30), rgba(9,13,21,.30)), linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.10)), var(--dk-bg, var(--surface-2)); } /* O hover ACENDE, como no dock — brightness, nao sombra-brilho (curador 2026-08-23b: "no dock eles acendem, e no grid e' uma sombra; toda essa interacao precisa ficar consistente"). A sombra de base fica exactamente como esta' — o realce e' luz no proprio azulejo. */ .ipad-app.ipad-cor:hover .ipad-ico { color: #fff; filter: brightness(1.12); border-color: color-mix(in oklab, var(--dk-bg, var(--surface-2)) 80%, #fff); } .ipad-app.ipad-cor .ipad-ico svg:not(.ico) { width: 50%; height: 50%; } /* o rótulo escala com a coluna (era 12.5px fixo — num azulejo de 145px ficava legenda de miniatura, e era mais uma coisa que o zoom mexia de forma diferente do resto) */ .ipad-name { font-size: clamp(11.5px, calc(var(--sb-col, 96px) * .105), 17px); font-weight: 600; color: var(--ink); text-align: center; letter-spacing: .01em; /* MAXIMO 2 LINHAS (curador 2026-08-23e) — a 3a linha desalinha a fileira inteira do grid */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ipad-app.soon { opacity: .5; cursor: default; } .ipad-app.soon:hover { transform: none; } .ipad-app.soon:hover .ipad-ico { border-color: rgba(255,255,255,.10); box-shadow: 0 10px 24px rgba(0,0,0,.34); } .ipad-soon { font-size: 10.5px; color: var(--warn); } /* Carlo — o botão home central (orb grande, estilo botão home do iPhone) */ .carlo-home { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; margin-top: 30px; padding-top: 22px; user-select: none; } .carlo-home-orb { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 28px color-mix(in oklab, #7aa2ff 55%, transparent), 0 8px 26px rgba(0,0,0,.4), inset 0 0 12px rgba(255,255,255,.30); transition: transform .16s; } .carlo-home:hover .carlo-home-orb { transform: scale(1.05); } .carlo-home-name { font-size: 17px; font-weight: 800; letter-spacing: .02em; background: linear-gradient(90deg,#9db8ff,#c79bff,#ff9ec2); -webkit-background-clip: text; background-clip: text; color: transparent; } .carlo-home-sub { font-size: 12px; color: var(--muted); } /* ── MOBILE (curador 2026-08-23i, Galaxy Z Fold 7 nos DOIS estados) ───────────────────────── O objetivo e' ENCAIXAR: a home cabe no ecra sem rolagem vertical — "mesmo que tivesse que diminuir o tamanho dos icones". Fechado (~380px css): 4 colunas magras; a regra antiga de 3 colunas de 88px saiu — 3x88+2x24 = 312px cabiam, mas 16 tiles em 3 colunas = 6 fileiras, que e' o que estourava a altura e obrigava o scroll que ele reportou. 4 colunas = 4 fileiras. */ /* QUALQUER dispositivo de TOQUE (curador 2026-08-23l: "garantir que esse padrao vai funcionar em qualquer dispositivo em modo mobile, fold dobrado ou aberto, maior ou menor"). O seletor e' pointer:coarse — e' o DEDO que define o modo, nao um numero magico de largura; os tamanhos sao FLUIDOS (clamp com vw): num cover de 380px o tile fecha em ~52px, num fold aberto de ~980px em ~64px, sempre 4 colunas, sempre cabendo. Desktop (pointer fino) intocado. */ @media (pointer: coarse) { /* 4 colunas SEMPRE cabendo (curador 2026-08-23o, Note/Fold estreito descentralizado): 1fr puro — a coluna e' a fracao do que EXISTE, nunca um minimo que estoura a viewport */ /* ALINHADO AO CONTAINER, nao a' viewport (curador 2026-08-23r, Fold fechado ainda cortado): 94vw ignorava o padding da pagina (34px de cada lado) — em 380px de ecra o grid media 357px dentro de 312px uteis e a 4a coluna saia cortada. 100% mede o que EXISTE. */ .sb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: clamp(10px, 2.4vw, 20px) clamp(6px, 1.6vw, 22px); width: min(100%, 560px); } /* e o padding da pagina tambem vira fluido — 34px fixos eram 18% de um cover de 380px */ .sb-page { padding: 56px clamp(8px, 2.5vw, 24px) 30px !important; } .ipad-app { width: auto; min-width: 0; max-width: 100%; } .ipad-ico { width: clamp(48px, 13vw, 64px); height: clamp(48px, 13vw, 64px); margin: 0 auto; } .ipad-ico svg.ico, .ipad-app.ipad-cor .ipad-ico svg:not(.ico) { width: clamp(22px, 6vw, 30px); height: clamp(22px, 6vw, 30px); } .ipad-name { font-size: clamp(10px, 2.6vw, 12px); } .springboard.sb-apps { padding: clamp(10px, 2vh, 20px) 8px clamp(120px, 16vh, 170px); gap: 12px; } /* dots JUNTO do grid no toque (curador 2026-08-23m: "muito proximas do dock quando deveriam estar mais proximas do grid") — voltam ao fluxo, logo abaixo das paginas */ .sb-dots { position: static; margin: 10px 0 0; } /* ✕/⭐ dos dinamicos ficam MUITO pequenos no dedo — saem do toque; a gestao fina desses atalhos vai morar no menu pessoal (decisao do curador, ajuste vira com aquele trabalho) */ .dk-x, .dk-star, .dk-rm { display: none !important; } /* EDICAO no toque: sem touch-action none o navegador rouba o gesto para rolar/paginar e o arrasto morre em pointercancel — "entra no modo edicao mas nao consegue arrastar" */ body.home-edit .sb-pages, body.home-edit .ipad-app { touch-action: none; } .ipad-app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .sb-prev { left: 2px; } .sb-next { right: 2px; } /* topbar: o atalho ⌘K nao existe no toque; o subtitulo aperta em ecra estreito */ #tb-search kbd { display: none; } } @media (pointer: coarse) and (max-width: 560px) { .sf-stack .bp { display: none; } } /* ── TOQUE (hover: none) — o :hover que GRUDA era o "icones ficam se mexendo": no dedo, a magnificacao sticky e a bolha presa saem; o feedback do toque e' o :active e o bounce. ── */ @media (hover: none) { .ipad-app:hover .ipad-ico { transform: translateZ(0); filter: none; } .ipad-app[data-gtip]:not([data-gtip=""]):hover::after { opacity: 0; } .dk-item::after { display: none !important; } /* tooltip do dock e' de rato */ .dk-item:hover .dk-ico { filter: none; } } /* ---- generic app chrome ---- */ h2.app-title { font-size: 19px; margin: 0 0 2px; } p.app-sub { color: var(--muted); margin: 0 0 18px; font-size: 13px; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; } .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .card.wide { grid-column: 1 / -1; } .card h3 { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .card .foot { color: var(--muted); font-size: 11.5px; margin-top: 10px; } /* stat tiles */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; } .stat { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .stat .v { font-size: 21px; font-weight: 700; } .stat .l { color: var(--muted); font-size: 12px; margin-top: 2px; } .stat .v.accent { color: var(--accent); } .warn-flag { color: var(--warn); } /* tables */ table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; padding: 6px 8px; border-bottom: 1px solid var(--baseline); } table.data td { padding: 7px 8px; border-bottom: 1px solid var(--grid); color: var(--ink-2); } table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; } table.data tr:hover td { background: rgba(255,255,255,0.02); color: var(--ink); } .scroll-x { overflow-x: auto; } .scroll-y { max-height: 380px; overflow-y: auto; } /* charts */ .chart svg { display: block; width: 100%; height: auto; } .chart text { font-family: var(--font); } .legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--ink-2); } .legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } #tooltip { position: fixed; z-index: 99; pointer-events: none; display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; box-shadow: 0 4px 14px rgba(0,0,0,.4); } /* alerts (qualidade › atenção) — ícone SVG 14px herdando a cor da severidade */ .alert { display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--muted); margin-bottom: 8px; } .alert .sev { padding-top: 2px; color: var(--muted); } .alert.info { border-left-color: var(--s1); } .alert.info .sev { color: var(--s1); } .alert.atencao { border-left-color: var(--warn); } .alert.atencao .sev { color: var(--warn); } .alert.serio { border-left-color: var(--serious); } .alert.serio .sev { color: var(--serious); } .alert.critico { border-left-color: var(--critical); } .alert.critico .sev { color: var(--critical); } .alert .t { font-weight: 600; font-size: 13px; } .alert .d { color: var(--muted); font-size: 12px; } /* nexus flow */ .flow-step { margin-bottom: 16px; } .flow-step .step-n { color: var(--accent); font-weight: 700; font-size: 12px; letter-spacing: .5px; } textarea.pedido { width: 100%; min-height: 96px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: var(--font); font-size: 13.5px; resize: vertical; } textarea.pedido:focus { outline: none; border-color: var(--accent); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; } .chip:hover { border-color: var(--accent); color: var(--ink); } .chip.on { border-color: var(--accent); color: var(--accent); } .btn { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 9px 18px; font-weight: 600; cursor: pointer; font-family: var(--font); font-size: 13.5px; } .btn.ghost { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); } .btn.ghost:hover { color: var(--ink); border-color: var(--accent); } .btn:disabled { opacity: .5; cursor: default; } .pend-box { background: rgba(250,178,25,0.08); border: 1px solid var(--warn); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-top: 12px; } .pend-box b { color: var(--warn); } .proto { background: rgba(12,163,12,0.1); border: 1px solid var(--good); border-radius: 8px; padding: 12px 16px; margin-top: 12px; font-size: 14px; } .proto b { color: var(--good); font-size: 16px; } select.sel { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-family: var(--font); font-size: 13.5px; } /* experts */ .exp-card { display: flex; flex-direction: column; gap: 8px; } .exp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .exp-title { font-weight: 700; font-size: 14.5px; } .exp-meta { color: var(--muted); font-size: 12px; } .switch { position: relative; width: 38px; height: 21px; flex: none; cursor: pointer; } .switch input { opacity: 0; width: 0; height: 0; } .switch .track { position: absolute; inset: 0; background: var(--baseline); border-radius: 999px; transition: .15s; } .switch .track::before { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: .15s; } .switch input:checked + .track { background: var(--accent); } .switch input:checked + .track::before { transform: translateX(17px); } .insight { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; } .insight .grau { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; border-radius: 4px; padding: 1px 6px; } .insight .grau.aplicado { color: var(--good); border: 1px solid var(--good); } .insight .grau.regra { color: var(--muted); border: 1px solid var(--muted); } .insight .p { color: var(--muted); font-size: 12px; margin-top: 4px; } /* semantic BI */ .ask-row { display: flex; gap: 8px; margin-bottom: 10px; } .ask-row input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); border-radius: 8px; padding: 10px 12px; font-family: var(--font); font-size: 14px; } .ask-row input:focus { outline: none; border-color: var(--accent); } .bi-answer { background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 8px; padding: 12px 16px; margin: 10px 0; font-size: 14.5px; } /* oxygen kanban */ .kanban { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; } .kcol { flex: 1; min-width: 170px; background: var(--surface-2); border-radius: 8px; padding: 8px; } .khead { padding: 6px 8px 8px; margin-bottom: 8px; font-size: 13px; } .kcard { background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; } .kcard .kname { font-size: 12.5px; font-weight: 600; } .kcard .kval { font-size: 12.5px; color: var(--accent); } .kcard .kmeta { font-size: 11px; color: var(--muted); } /* ---- controladoria: dashboard tabs + toolbar ---- */ .ctrl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .tabs { display: flex; gap: 6px; flex-wrap: wrap; } .tab { background: var(--surface-1); border: 1px solid var(--border); color: var(--ink-2); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; transition: border-color .12s, color .12s; } .tab:hover { color: var(--ink); border-color: var(--accent); } .tab.on { background: var(--accent); color: #fff; border-color: var(--accent); } .ctrl-bar .spacer { flex: 1; } .ctrl-bar .comp-label { color: var(--muted); font-size: 12px; } .tab-groups { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .tab-group { display: flex; flex-direction: column; gap: 5px; } .tab-glabel { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; } .tab-group .tabs { gap: 5px; } .tab-group .tab { padding: 6px 11px; font-size: 12px; } /* semáforo card (cockpit/benchmark) */ .sem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .sem-card { background: var(--surface-1); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius); padding: 13px 15px; } .sem-card.ok { border-left-color: var(--good); } .sem-card.alerta { border-left-color: var(--warn); } .sem-card .sem-nome { color: var(--ink-2); font-size: 12.5px; font-weight: 600; } .sem-card .sem-val { font-size: 22px; font-weight: 700; margin: 3px 0; } .sem-card .sem-faixa { color: var(--muted); font-size: 11px; } .sem-badge { font-size: 10.5px; padding: 1px 8px; border-radius: 999px; float: right; } .sem-badge.ok { color: var(--good); border: 1px solid var(--good); } .sem-badge.alerta { color: var(--warn); border: 1px solid var(--warn); } /* aging heatmap */ .heat { border-collapse: collapse; font-size: 12px; width: 100%; } .heat th { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; padding: 5px 6px; text-align: right; font-weight: 600; } .heat th:first-child { text-align: left; } .heat td { padding: 5px 6px; text-align: right; font-variant-numeric: tabular-nums; border: 1px solid var(--bg); } .heat td:first-child { text-align: left; color: var(--ink-2); font-weight: 600; } /* ONDA-1 (P4): extremos do heatmap — outline no pico e no vale; célula sem amostra */ .heat td.hx { font-weight: 700; color: var(--ink); } .heat td.hx-max { outline: 2px solid var(--warn); outline-offset: -2px; } .heat td.hx-min { outline: 2px dashed var(--muted); outline-offset: -2px; } .heat td.hnull { color: var(--muted); } /* ONDA-1 (P5): quadro de metas — bullet fpo generalizado (realizado × meta) */ .metas-quadro { display: flex; flex-direction: column; } .meta-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--grid); } .meta-row:last-child { border-bottom: none; } .meta-row .meta-nome { font-weight: 600; font-size: 13px; } .meta-row .meta-detalhe { color: var(--muted); font-size: 11.5px; } .meta-row .meta-detalhe b { color: var(--ink-2); } .meta-row .meta-note { color: var(--warn); font-size: 11.5px; margin-top: 2px; } .meta-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; } .meta-badge.ok { color: var(--good); border: 1px solid var(--good); } .meta-badge.fora { color: var(--warn); border: 1px solid var(--warn); } .meta-badge.neutro { color: var(--muted); border: 1px solid var(--muted); } .fpo-bar .teto.meta { background: var(--ink-2); } /* mini-bullet no card do cockpit (realizado × meta) */ .mini-bullet { position: relative; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-top: 6px; } .mini-bullet .fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; } .mini-bullet .teto { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--ink-2); } .sem-meta { color: var(--muted); font-size: 10.5px; margin-top: 3px; } /* funil (glosa) */ .funil { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; } .funil-step { display: flex; align-items: center; gap: 10px; } .funil-bar { height: 26px; border-radius: 5px; display: flex; align-items: center; padding: 0 10px; color: #fff; font-size: 12px; font-weight: 600; min-width: 60px; white-space: nowrap; } .funil-lbl { width: 120px; color: var(--ink-2); font-size: 12.5px; } /* KPI card com benchmark + sparkline */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .kpi { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .kpi .kpi-nome { color: var(--ink-2); font-size: 12.5px; font-weight: 600; } .kpi .kpi-val { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .kpi .kpi-val.up { color: var(--good); } .kpi .kpi-val.down { color: var(--critical); } .kpi .kpi-val.band { color: var(--accent); } .kpi .kpi-val.neutral { color: var(--ink); } .kpi .kpi-bench { color: var(--muted); font-size: 11px; line-height: 1.35; } .kpi .kpi-bench b { color: var(--ink-2); } .kpi .spark svg { width: 100%; height: 34px; display: block; } /* DRE hierárquica */ table.dre { width: 100%; border-collapse: collapse; font-size: 13px; } table.dre td { padding: 6px 8px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; } table.dre td.num { text-align: right; } table.dre td.pct { text-align: right; color: var(--muted); font-size: 12px; width: 62px; } table.dre td.var { text-align: right; font-size: 12px; width: 62px; } table.dre tr.n1 td { font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--baseline); background: rgba(255,255,255,0.015); } table.dre tr.n2 td:first-child { padding-left: 22px; color: var(--ink-2); } table.dre tr.total td { color: var(--accent); } .up-good { color: var(--good); } .down-bad { color: var(--critical); } /* FPO semáforo */ .fpo-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--grid); } .fpo-row .fpo-nome { font-weight: 600; font-size: 13px; } .fpo-row .fpo-bloco { color: var(--muted); font-size: 11px; } .fpo-bar { position: relative; height: 20px; background: var(--surface-2); border-radius: 5px; overflow: hidden; grid-column: 1 / -1; margin-top: 4px; } .fpo-bar .fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 5px; } .fpo-bar .teto { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--warn); } .fpo-tag { font-size: 11px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; } .fpo-tag.ok { color: var(--good); border: 1px solid var(--good); } .fpo-tag.estouro { color: var(--warn); border: 1px solid var(--warn); } .fpo-tag.fixo { color: var(--accent); border: 1px solid var(--accent); } /* ---- Controladoria: shell com MENU À ESQUERDA (modelo nexus/radar/compass) ---- */ .cx-shell { display: flex; gap: 0; height: 100%; margin: -22px -26px; min-height: 0; } .cx-side { width: 208px; flex: 0 0 auto; background: var(--surface-1); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; } .cx-side-head { padding: 16px 16px 10px; font-weight: 800; font-size: 15px; color: var(--ink); display: flex; flex-direction: column; gap: 1px; } .cx-side-head span { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .cx-nav { flex: 1; padding: 4px 0 14px; } .cx-group { margin-bottom: 8px; } .cx-glabel { padding: 8px 16px 3px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; } .cx-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid transparent; color: var(--ink-2); font-family: var(--font); font-size: 13px; padding: 7px 16px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .cx-item:hover { background: var(--surface-2); color: var(--ink); } .cx-item.on { color: var(--ink); background: color-mix(in oklab, var(--accent) 15%, transparent); border-left-color: var(--accent); font-weight: 600; } .cx-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } /* cx-bar em 3 camadas: (1) manchete-insight computada · (2) pergunta · (3) filtros */ .cx-bar { display: flex; align-items: baseline; gap: 8px 12px; padding: 12px 22px; border-bottom: 1px solid var(--border); flex: 0 0 auto; flex-wrap: wrap; } .cx-bar .spacer { flex: 1; } .cx-title { font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.35; max-width: 72ch; } .cx-pergunta { font-size: 12.5px; color: var(--muted); flex-basis: 100%; order: 5; } .i-btn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; line-height: 1; vertical-align: -1px; } .i-btn:hover { color: var(--accent); } .cx-content { flex: 1 1 auto; overflow-y: auto; padding: 20px 22px; min-height: 0; } /* chat conversational chart */ .chat-chart { margin-top: 8px; background: var(--surface-1); border-radius: 8px; padding: 8px; } .loading { color: var(--muted); padding: 30px; text-align: center; } .err { color: var(--critical); } /* ---- ficha "i" da métrica (drawer lateral · fin_metric_semantics) ---- */ #info-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 330px; max-width: 88vw; display: flex; flex-direction: column; background: var(--surface-1); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform var(--t-ui) var(--ease-casa); z-index: 42; box-shadow: -10px 0 30px rgba(0,0,0,.4); } body.info-open #info-drawer { transform: translateX(0); } #info-drawer header { padding: 13px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } #info-drawer header .t { font-weight: 700; font-size: 14.5px; flex: 1; } #info-body { flex: 1; overflow-y: auto; padding: 16px; font-size: 13px; } #info-body .if-b { margin-bottom: 14px; } #info-body .if-l { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; } #info-body .if-v { color: var(--ink-2); line-height: 1.55; } #info-body .if-v code { background: var(--surface-2); border-radius: 5px; padding: 2px 7px; font-size: 12px; display: inline-block; } #info-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 41; } body.info-open #info-scrim { opacity: 1; pointer-events: auto; } /* selo de dado sintético no rodapé dos painéis */ .synth { color: var(--warn); font-size: 10px; letter-spacing: .04em; } @media (max-width: 760px) { .cx-shell { flex-direction: column; margin: -22px -26px; } .cx-side { width: 100%; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); } .cx-side-head { display: none; } .cx-nav { display: flex; padding: 6px; } .cx-group { display: flex; align-items: center; margin: 0; } .cx-glabel { display: none; } .cx-item { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; } .cx-item.on { border-left: 0; border-bottom-color: var(--accent); } } /* ---- NEXUS fork Auravale: iframe full-bleed dentro do #view ---- */ body.on-nexus #view { padding: 0; overflow: hidden; } .nx-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; } /* ═══════════════════════════════════════════════════════════════════════════ Celebration fork — SPLIT 80/20 layout. #stage = flex row: #left (springboard OU iframe de BI) + #chat (painel do Carlo, right 20%, entra empurrando o #left, NÃO sobrepõe → a transcrição/gráfico nunca colidem). O BI é o pane ESQUERDO que desliza sobre o springboard. O orb flutua acima de tudo (menos o painel). ═══════════════════════════════════════════════════════════════════════════ */ #stage { flex: 1 1 auto; display: flex; min-height: 0; overflow: hidden; padding-right: 0; } #left { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } /* ⚠️ Carlo v2/v8 — OVERLAY 100% (curador 2026-07-23d): o Carlo NÃO reserva/empurra faixa em NENHUM estado, em NENHUMA tela — pílula/balão/painel são overlays FIXED por cima. Completa o Stage 3 (que só zerava o modo voz): agora TODO estado do Carlo garante #stage sem reserva à direita. */ body.carlo-voice #stage, body.carlo-listening #stage, body.carlo-open #stage { padding-right: 0; } /* ✕ do balão de pensamento: fecha o texto e deixa só a fala (curador 2026-07-23) */ #carlo-thought .th-x { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border: 0; border-radius: 8px; background: color-mix(in oklab, var(--surface-1) 70%, transparent); color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; } #carlo-thought .th-x:hover { color: #fff; background: color-mix(in oklab, #e05a5a 40%, transparent); } @media (max-width: 820px) { body.carlo-voice #stage { padding-right: 0; } /* telas estreitas: sem reserva */ #carlo-hud { right: 50%; transform: translateX(50%); } #carlo-thought, #carlo-thought.big { right: 12px; left: 12px; width: auto; } } /* BI = pane esquerdo (desliza da direita sobre o springboard) */ #bi-pane { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: var(--bg); transform: translateX(100%); transition: transform var(--t-surface) var(--ease-casa); } body.bi-open #bi-pane { transform: translateX(0); } /* AS REGRAS DA #bi-bar / #bi-back / #bi-title SAIRAM daqui (curador 2026-08-25: «o voltar e' so' o breadcrumbs e a logo»). O AI Chat ja' escondia esta barra com `body.bi-chat`; a decisao de 2026-08-25 e' que ela nao devia existir para rota nenhuma — todo caminho que lhe escrevia o titulo ja' chamava `setCrumbs` na mesma linha, e a raiz clicavel da trilha mais a logo sao o caminho de volta. A classe `body.bi-chat` CONTINUA a ser posta pelo `openMenu` e continua a valer para o resto do cromo do modo embutido; ela so' deixa de ter uma barra para esconder. */ #biview { flex: 1 1 auto; width: 100%; border: 0; /* enquanto a página do iframe não pinta, mostra o MESMO backdrop do menu (nada de chapado com banding) */ background: radial-gradient(1100px 620px at 50% -8%, var(--home-g1) 0%, transparent 60%), radial-gradient(900px 520px at 80% 108%, var(--home-g2) 0%, transparent 62%), linear-gradient(180deg, var(--home-g3a) 0%, var(--home-g3b) 100%); } /* HOME springboard (grid de apps; só o BI clicável, o resto com cadeado) */ /* O padding-bottom NAO e' respiro decorativo: a home centra o grid na vertical, e o dock agora ocupa ~104px do fundo (18 do wrap + a barra). Sem descontar essa faixa o grid centra no ECRA e fica visualmente baixo em relacao ao espaco livre topo→dock (curador 2026-08-23: "precisa centralizar com a nova distancia entre o topo e o dock"). Com flex-center, padding-bottom de certo desloca o centro optico para a metade do espaco livre. O valor NAO saiu de conta de cabeca: 145 = pt(46) + faixa do dock(99). A versao anterior media 200 porque os DOTS ainda dava 145 e o centro ficava 23px baixo — o padding assimetrico das .sb-page (26 topo, 34 fundo) e o proprio grid pesam; mede-se, nao se teoriza. centroGrid==dockTop/2 provado. */ .springboard.sb-apps { justify-content: center; gap: 30px; padding-bottom: 229px; } .sb-head { text-align: center; } .sb-foot { color: #6f7788; font-size: 11px; letter-spacing: .02em; margin-top: 4px; } .sb-title { text-align: center; color: var(--ink); margin: 4px 0 2px; font-size: 20px; font-weight: 800; } .sb-title b { color: var(--ink); } .sb-sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 6px; } /* tiles bloqueados (cadeado): esmaecidos, sem hover-lift, badge no canto do ícone */ .ipad-app .ipad-ico { position: relative; } .ipad-app.locked { opacity: .5; cursor: default; } .ipad-app.locked:hover { transform: none; } .ipad-app.locked:hover .ipad-ico { border-color: rgba(255,255,255,.10); color: #aab6cc; box-shadow: 0 10px 24px rgba(0,0,0,.34); } .ipad-lock { position: absolute; right: -7px; top: -7px; width: 24px; height: 24px; border-radius: 50%; background: #1b2233; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; color: #cfd6e6; box-shadow: 0 4px 12px rgba(0,0,0,.45); } .ipad-lock svg.ico { width: 13px; height: 13px; } /* v22: marca ScaleForge no topbar */ #sf-mark { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; user-select: none; } #sf-mark svg { color: var(--accent); } .tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 12px 0 12px; flex: 0 0 auto; } /* v23: logo real + toggle do modo cientista (identificável; perto da lua) */ #sf-mark img { border-radius: 6px; display: block; } #sci-btn { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); border-radius: 16px; background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); font-size: 12px; font-weight: 700; padding: 5px 12px; cursor: pointer; letter-spacing: .02em; transition: opacity .15s, background .15s; } #sci-btn.off-context { display: none; } #sci-btn.on { background: var(--accent); color: #fff; } /* v24: clique/foco dos tiles sem quadrado desalinhado */ .ipad-app { outline: none; -webkit-tap-highlight-color: transparent; } .ipad-app:focus-visible .ipad-ico { outline: 2px solid var(--accent); outline-offset: 3px; } .ipad-app:active .ipad-ico { transform: translateZ(0) scale(.96); } /* ═══════ BP OS · APP SHELL (rota /[/]) — física kernel 3-estados · visual nexus ═══════ */ #app-pane { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: 245px 1fr; background: var(--bg); transform: translateX(100%); transition: transform var(--t-surface) var(--ease-casa), grid-template-columns .26s var(--ease-casa); } body.app-open #app-pane { transform: translateX(0); } /* hero zoom-from-icon (roadmap ⑦): enquanto o WAAPI conduz, o slide de CSS cala-se */ #app-pane.sem-slide { transition: none !important; } /* estado 2: painel aberto (busy) → rail 60px; estado 3: pin/hover-peek re-expande */ /* rail FINO de volta (curador 2026-08-23i: 86px "ficou feio, muito largo"). O corte de antes resolve-se pelo OUTRO caminho que ele proprio ofereceu: no rail a CONTAGEM some e o recuo zera — glifos alinhados numa coluna magra; contagem e recuo voltam ao expandir. */ #app-pane.busy { grid-template-columns: 64px 1fr; } /* SO' com o rail de facto fechado (nem hold, nem hover): contagem some e recuo zera; o !important e' porque o recuo dos sub-niveis chega INLINE (style=padding-left) do render */ #app-pane.busy:not(.sb-hold):not(:has(#app-sb:hover)) #app-sb .sb-ct { display: none; } #app-pane.busy:not(.sb-hold):not(:has(#app-sb:hover)) #app-sb .sb-clsum { padding-left: 8px !important; } #app-pane.busy.sb-pin, #app-pane.busy.sb-hold, #app-pane.busy:has(#app-sb:hover) { grid-template-columns: 245px 1fr; } #app-sb { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--surface-1); border-right: 1px solid var(--border); } #app-sb .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .12s ease; } /* rail: rótulos somem (ficam os glifos); pin/hover devolve */ #app-pane.busy #app-sb .nm, #app-pane.busy #app-sb .sb-search input, #app-pane.busy #app-sb .sb-cos-lb, #app-pane.busy #app-sb .sb-unm, #app-pane.busy #app-sb .sb-pinbtn, #app-pane.busy #app-sb .chev { opacity: 0; pointer-events: none; } #app-pane.busy.sb-pin #app-sb .nm, #app-pane.busy.sb-hold #app-sb .nm, #app-pane.busy:has(#app-sb:hover) #app-sb .nm, #app-pane.busy.sb-pin #app-sb .sb-search input, #app-pane.busy.sb-hold #app-sb .sb-search input, #app-pane.busy:has(#app-sb:hover) #app-sb .sb-search input, #app-pane.busy.sb-pin #app-sb .sb-cos-lb, #app-pane.busy.sb-hold #app-sb .sb-cos-lb, #app-pane.busy:has(#app-sb:hover) #app-sb .sb-cos-lb, #app-pane.busy.sb-pin #app-sb .sb-unm, #app-pane.busy.sb-hold #app-sb .sb-unm, #app-pane.busy:has(#app-sb:hover) #app-sb .sb-unm, #app-pane.busy.sb-pin #app-sb .sb-pinbtn, #app-pane.busy.sb-hold #app-sb .sb-pinbtn, #app-pane.busy:has(#app-sb:hover) #app-sb .sb-pinbtn, #app-pane.busy.sb-pin #app-sb .chev, #app-pane.busy.sb-hold #app-sb .chev, #app-pane.busy:has(#app-sb:hover) #app-sb .chev { opacity: 1; pointer-events: auto; } .sb-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 12px 10px; } .sb-appico { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); } .sb-appico svg.ico { width: 17px; height: 17px; } .sb-appnm { font-weight: 700; font-size: 14px; color: var(--ink); flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .12s; } #app-pane.busy .sb-appnm { opacity: 0; } #app-pane.busy.sb-pin .sb-appnm, #app-pane.busy.sb-hold .sb-appnm, #app-pane.busy:has(#app-sb:hover) .sb-appnm { opacity: 1; } .sb-pinbtn { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--muted); display: grid; place-items: center; transition: color .12s, border-color .12s, opacity .12s; } .sb-pinbtn:hover { color: var(--ink); border-color: var(--border); } #app-pane.sb-pin .sb-pinbtn { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); } .sb-pinbtn svg.ico { width: 14px; height: 14px; } .sb-search { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 2px 10px 8px; padding: 7px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); } .sb-search svg.ico { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; } .sb-search input { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font-size: 13px; font-family: var(--font); transition: opacity .12s; } .sb-search input::placeholder { color: var(--muted); } .sb-search:focus-within { border-color: var(--accent); } .sb-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 2px 8px 8px; } .sb-cl { margin-bottom: 2px; } .sb-cl.q-hide, .sb-item.q-hide { display: none; } .sb-clsum { display: flex; align-items: center; gap: 9px; padding: 8px 8px; border-radius: 9px; cursor: pointer; color: var(--ink-2); font-size: 13px; font-weight: 600; user-select: none; } .sb-clsum:hover { background: color-mix(in oklab, var(--surface-2) 70%, transparent); color: var(--ink); } .sb-clsum svg.ico, .sb-clsum .emo { width: 16px; height: 16px; flex: 0 0 auto; font-size: 15px; } .sb-clsum .nm { flex: 1 1 auto; } .sb-clsum .chev { width: 13px; height: 13px; color: var(--muted); transition: transform .16s ease, opacity .12s; } .sb-cl.open .sb-clsum .chev { transform: rotate(90deg); } /* acordeão de velocidade constante (kernel): 0fr→1fr com --dur = altura/1150px/s */ .sb-clbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur, .16s) ease; } .sb-cl.open > .sb-clbody { grid-template-rows: 1fr; } .sb-clbody > div { overflow: hidden; min-height: 0; } .sb-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px 7px 14px; margin: 1px 0 1px 12px; border-radius: 8px; border-left: 2px solid transparent; cursor: pointer; color: var(--ink-2); font-size: 12.8px; } .sb-item:hover { background: color-mix(in oklab, var(--surface-2) 70%, transparent); color: var(--ink); } .sb-item.on { background: color-mix(in oklab, var(--accent) 13%, transparent); border-left-color: var(--accent); color: var(--ink); } .sb-item svg.ico { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); } .sb-item.on svg.ico { color: var(--accent); } .sb-item.empty { color: var(--muted); font-style: italic; cursor: default; } .sb-item.empty:hover { background: none; } #app-pane.busy .sb-item { padding-left: 8px; margin-left: 0; } /* rodapé FIXO do menu: o CoS mora AQUI (sai do canto inferior direito) + usuário logo abaixo */ .sb-cos { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); cursor: pointer; } .sb-cos:hover { background: color-mix(in oklab, var(--surface-2) 70%, transparent); } .sb-cos-orb { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; box-shadow: 0 0 12px color-mix(in oklab, #7aa2ff 45%, transparent); } .sb-cos-orb svg { width: 100%; height: 100%; display: block; } .sb-cos-lb { display: flex; flex-direction: column; min-width: 0; transition: opacity .12s; } .sb-cos-lb b { font-size: 12.5px; color: var(--ink); font-weight: 700; white-space: nowrap; } .sb-cos-lb i { font-size: 10.5px; color: var(--muted); font-style: normal; white-space: nowrap; } .sb-user { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); cursor: pointer; } .sb-user:hover { background: color-mix(in oklab, var(--surface-2) 70%, transparent); } .sb-unm { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .12s; } /* conteúdo do app */ #app-main { position: relative; display: flex; min-width: 0; min-height: 0; } #appview { flex: 1 1 auto; width: 100%; border: 0; background: radial-gradient(1100px 620px at 50% -8%, var(--home-g1) 0%, transparent 60%), radial-gradient(900px 520px at 80% 108%, var(--home-g2) 0%, transparent 62%), linear-gradient(180deg, var(--home-g3a) 0%, var(--home-g3b) 100%); } /* ROLAGEM DO CONTEÚDO DO APP (curador 2026-07-28): a pasta Operações do WeKnow tem 180 painéis — 4.879px de conteúdo num viewport de 988. #stage e #left são `overflow:hidden` de propósito (a pílula do Carlo é overlay e depende disso), e nenhum container intermediário rolava: 3.976px ficavam cortados e INALCANÇÁVEIS. Este é o container que deve rolar. `safe center` e não `center`: com grid centrado e conteúdo mais alto que o container, metade estoura para CIMA e não se alcança nem com scroll — o `safe` cai para `start` exatamente nesse caso e mantém o centramento quando o conteúdo cabe (a home continua centrada). */ #app-welcome { flex: 1 1 auto; display: grid; place-items: safe center; overflow-y: auto; padding: 30px; background: radial-gradient(1100px 620px at 50% -8%, var(--home-g1) 0%, transparent 60%), linear-gradient(180deg, var(--home-g3a) 0%, var(--home-g3b) 100%); } .aw-box { text-align: center; max-width: 460px; } .aw-ico { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 20px; background: linear-gradient(160deg, var(--tile-g1) 0%, var(--tile-g2) 100%); border: 1px solid var(--border); color: var(--tile-ink); margin-bottom: 16px; box-shadow: 0 10px 24px var(--tile-shadow); } .aw-ico svg.ico { width: 34px; height: 34px; } .aw-box h2 { margin: 0 0 8px; font-size: 21px; color: var(--ink); } .aw-box p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.55; } .aw-hint { font-size: 12px; color: var(--muted); opacity: .8; } /* ── HOME: identidade de FOLDER (aba de pasta + contagem — sem mini-grid) + animação de abertura ── */ .ipad-ico.folder { position: relative; } .f-tab { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 44%; height: 3.5px; border-radius: 3px; background: currentColor; opacity: .45; } .f-count { position: absolute; right: 6px; bottom: 6px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: color-mix(in oklab, var(--accent) 26%, var(--surface-2)); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); color: var(--ink); } .folder-box.pop { animation: fpop .26s cubic-bezier(.34, 1.3, .4, 1); } @keyframes fpop { from { transform: scale(.18); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ── conta (canto superior direito + modal; sem botão "sair" no topo) ── */ /* margin-left: 0 (era 10px) — curador 2026-08-24: o gap do #topbar governa o espaçamento dos 3 controles da direita (feedback · avatar · tema) por IGUAL; margin próprio desalinhava. */ #acct-btn { background: none; border: 0; cursor: pointer; padding: 0; margin-left: 0; line-height: 0; } .acct-av { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg, var(--tile-g1) 0%, var(--tile-g2) 100%); border: 1px solid var(--border); color: var(--ink); font-weight: 700; font-size: 14px; } .acct-av.sm { width: 27px; height: 27px; font-size: 11px; } #acct-btn:hover .acct-av { border-color: var(--accent); color: var(--accent); } .sb-av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); font-weight: 700; font-size: 10.5px; } #acct-ov { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(6, 8, 14, .55); backdrop-filter: blur(8px); animation: fdin var(--t-ui) var(--ease-casa); } :root[data-theme="light"] #acct-ov { background: rgba(244, 246, 250, .7); } .acct-box { position: relative; text-align: center; background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px; padding: 34px 44px 30px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); min-width: 280px; animation: sup var(--t-ui) var(--ease-casa); } #acct-ov.closing { animation: fdout var(--t-micro) ease forwards; } #acct-ov.closing .acct-box { animation: sdown var(--t-micro) ease forwards; } /* ── AJUSTE DO DOCK (curador 2026-08-25): dock ALL-ON-TOP + SLIDE do popup ──────────────── Enquanto o slider "Tamanho do Dock" esta' em arrasto (body.dk-ajuste, ligado no app.js): o dock sobe ACIMA do menu do usuario (z90 > z80 do #acct-ov) e o popup INTEIRO desliza para cima o bastante para nao ter clash com o dock (--dk-lift medido em JS). E' um SLIDE com --ease-casa — nao o fade do fosco: a pessoa ve o dock E continua vendo o menu, que desce de volta no settle do slider. reduced-motion: sem transicao, o salto e' honesto. */ .acct-box { transition: transform .34s var(--ease-casa); } /* :has(#acct-ov): se o popup fechar no meio do arrasto e a classe ficar orfã no body, a regra morre sozinha — nenhum estado preso deixa o dock por cima do resto do shell */ body.dk-ajuste:has(#acct-ov) .dock-wrap { z-index: 90; } body.dk-ajuste #acct-ov .acct-box { transform: translateY(calc(var(--dk-lift, 150px) * -1)); } @media (prefers-reduced-motion: reduce) { .acct-box { transition: none; } } :root.motion-reduz .acct-box { transition: none; } /* ── CROP REDONDO DO AVATAR (#foto-crop, curador 2026-08-25) — popup de vidro da casa ────── */ #foto-crop { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; background: rgba(6, 8, 14, .55); backdrop-filter: blur(8px); animation: fdin var(--t-ui) var(--ease-casa); } :root[data-theme="light"] #foto-crop { background: rgba(244, 246, 250, .7); } #foto-crop.closing { animation: fdout var(--t-micro) ease forwards; } #foto-crop.closing .fc-box { animation: sdown var(--t-micro) ease forwards; } .fc-box { background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-radius: var(--r-win); padding: 22px 26px 20px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; align-items: center; gap: 14px; animation: sup var(--t-ui) var(--ease-casa); } .fc-t { font-size: 14px; font-weight: 700; color: var(--ink); } .fc-vp { position: relative; border-radius: 50%; overflow: hidden; touch-action: none; cursor: grab; border: 1px solid var(--border); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent), var(--shadow-1); } .fc-vp:active { cursor: grabbing; } .fc-vp img { position: absolute; max-width: none; user-select: none; pointer-events: none; } .fc-zoom { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--muted); font-size: 15px; font-weight: 700; } .fc-dica { margin: 0; font-size: 11px; color: var(--muted); } .fc-row { display: flex; gap: 10px; justify-content: flex-end; width: 100%; } /* .pf-range — slider da casa (M10: nunca o range nativo cru do SO) */ .pf-range { flex: 1; appearance: none; -webkit-appearance: none; height: 22px; background: transparent; cursor: pointer; } .pf-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: color-mix(in oklab, var(--ink-2) 32%, transparent); } .pf-range::-moz-range-track { height: 4px; border-radius: 2px; background: color-mix(in oklab, var(--ink-2) 32%, transparent); } .pf-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: var(--shadow-1); transition: transform var(--t-micro) var(--ease-casa); } .pf-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: var(--shadow-1); } .pf-range:active::-webkit-slider-thumb { transform: scale(1.15); } .pf-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; } .acct-box .folder-x svg.ico { width: 15px; height: 15px; } .acct-nm { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 12px; } .acct-sub { font-size: 12px; color: var(--muted); margin-top: 4px; } /* ── CONFIGURACOES (roadmap ⑥) — System-Settings: sidebar de seccoes + conteudo ── */ .prefs-box { text-align: left; padding: 0; display: grid; grid-template-columns: 218px 1fr; width: min(760px, 94vw); height: min(520px, 86vh); overflow: hidden; } .prefs-sb { background: color-mix(in oklab, var(--surface-2) 60%, transparent); border-right: 1px solid var(--border); padding: 18px 10px; display: flex; flex-direction: column; gap: 2px; } .prefs-quem { display: flex; gap: 10px; align-items: center; padding: 4px 8px 14px; } .prefs-quem .acct-av { margin: 0; width: 38px; height: 38px; font-size: 15px; } .prefs-nm { font-weight: 700; font-size: 13.5px; color: var(--ink); } .prefs-sub { font-size: 11px; color: var(--muted); } .prefs-it { text-align: left; background: none; border: 0; color: var(--ink-2); font-size: 13px; padding: 7px 10px; border-radius: 8px; cursor: pointer; } .prefs-it:hover { background: color-mix(in oklab, var(--surface-2) 80%, transparent); } .prefs-it.on { background: var(--accent); color: #fff; } .prefs-corpo { padding: 20px 24px; overflow-y: auto; } .prefs-corpo h3 { margin: 0 0 14px; font-size: 15px; color: var(--ink); } .prefs-lin { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); font-size: 13px; color: var(--ink-2); } .prefs-lin b { color: var(--ink); font-weight: 600; } .pf-sim { color: #2fa36b; } .pf-nao { color: var(--muted); } .prefs-nota { font-size: 11.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; } .prefs-vazio { color: var(--muted); font-size: 13px; padding: 12px 0; } .prefs-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } .prefs-seg button { background: none; border: 0; color: var(--ink-2); font-size: 12.5px; padding: 5px 12px; cursor: pointer; } .prefs-seg button.on { background: var(--accent); color: #fff; } .prefs-tgl { width: 40px; height: 24px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); position: relative; cursor: pointer; padding: 0; transition: background var(--t-ui) var(--ease-casa); } .prefs-tgl i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-2); transition: transform var(--t-ui) var(--ease-casa); } .prefs-tgl.on { background: var(--accent); } .prefs-tgl.on i { transform: translateX(16px); background: #fff; } /* Tamanho do Dock — slider com marcas (50/75/100), a leitura em % ao lado (2026-08-25) */ .prefs-dk { display: inline-flex; align-items: center; gap: 10px; } .prefs-dk input[type=range] { width: 150px; accent-color: var(--accent); } #pf-dk-v { color: var(--ink); font-weight: 600; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; } .prefs-uso { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 2px; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); } .pu-nm { font-size: 13px; color: var(--ink); font-weight: 600; } .pu-ac { grid-row: 1 / span 3; align-self: center; display: flex; gap: 4px; } .pu-ac button { background: none; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; font-size: 12px; padding: 3px 6px; } .pu-ac button:hover { border-color: var(--accent); } .pu-bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .pu-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .pu-met { font-size: 11px; color: var(--muted); } .pf-rm { background: none; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); font-size: 11px; padding: 3px 8px; cursor: pointer; } .pf-rm:hover { color: #d5544a; border-color: #d5544a; } /* toggle manual "reduzir movimento": corta as animacoes de CSS da casa inteira */ :root.motion-reduz *, :root.motion-reduz *::before, :root.motion-reduz *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } @media (max-width: 640px) { .prefs-box { grid-template-columns: 1fr; height: 90vh; } .prefs-sb { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); } } /* ═══════ BP OS v41 · topbar reorganizada + breadcrumb clicável + busca global ═══════ */ #sf-block { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } #sf-block img { border-radius: 8px; } .sf-stack { display: flex; flex-direction: column; line-height: 1.18; } .sf-stack .sf-nm { font-weight: 700; font-size: 13.5px; color: var(--ink); letter-spacing: .2px; } .sf-stack .bp { font-size: 11.5px; } #crumbs { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; } #crumbs .cr-root { font-weight: 600; font-size: 12.5px; } /* tenant menor (curador) */ /* pop da trilha (curador 2026-08-23j): quando o breadcrumb nao cabe, um toque abre TODOS os niveis para baixo — mesmo vidro e mesma fisica dos popovers da casa */ #cr-pop { position: fixed; z-index: 95; min-width: 220px; max-width: 86vw; padding: 6px; border-radius: 12px; background: color-mix(in oklab, var(--surface-1) 88%, transparent); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(0,0,0,.45); display: flex; flex-direction: column; animation: sup var(--t-ui,.2s) var(--ease-casa,ease); } /* a setinha ^ apontando a ancora — posicionada por --notch-x (o corpo pode ser clampado a' viewport; o notch continua apontando o botao) */ #cr-pop::before { content: ""; position: absolute; top: -7px; left: var(--notch-x, 24px); transform: translateX(-50%); width: 12px; height: 12px; rotate: 45deg; background: inherit; border-left: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: 3px 0 0 0; } /* trilha colapsada: o botao-icone de hierarquia (sai o "H" decapitado) */ .cr-mini { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: none; border: 1px solid var(--border); color: var(--muted); cursor: pointer; } .cr-mini:hover { color: var(--accent); border-color: var(--accent); } .cr-mini svg.ico { width: 15px; height: 15px; } #cr-pop.closing { animation: sdown var(--t-micro,.13s) ease forwards; } .cr-pop-it { text-align: left; background: none; border: 0; color: var(--ink-2); font-size: 13px; padding: 8px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-pop-it:hover { background: color-mix(in oklab, var(--surface-2) 80%, transparent); color: var(--ink); } .cr-pop-it.cur { color: var(--ink); font-weight: 700; cursor: default; } .cr-pop-recuo { color: var(--muted); font-size: 11px; } #crumbs .cr-seg { color: var(--muted); cursor: pointer; transition: color .12s; } #crumbs .cr-seg:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } #crumbs .cr-cur { color: var(--ink-2); font-weight: 600; } #crumbs .cr-sep { color: var(--muted); opacity: .55; } #tb-search { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 9px; padding: 6px 11px; font-size: 12.5px; cursor: pointer; font-family: var(--font); transition: color .12s, border-color .12s; } #tb-search:hover { color: var(--ink); border-color: var(--accent); } #tb-search svg.ico { width: 13px; height: 13px; } #tb-search kbd { font-family: var(--font); font-size: 10px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; } #cmdp { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; padding-top: 12vh; background: rgba(6, 8, 14, .5); backdrop-filter: blur(6px); animation: fdin var(--t-ui) var(--ease-casa); } :root[data-theme="light"] #cmdp { background: rgba(244, 246, 250, .66); } /* ENTRADA/SAIDA (roadmap ①): antes o ⌘K abria e fechava SECO. Entrada = fade+rise+scale na fisica da casa; saida = classe .closing (posta por _fechaAnimado) com a inversa mais curta — saida sempre ~60% da entrada, a assimetria que faz parecer resposta e nao lentidao. */ .cmdp-box { width: min(560px, 92vw); background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); animation: sup var(--t-ui) var(--ease-casa); } #cmdp.closing { animation: fdout var(--t-micro) ease forwards; } #cmdp.closing .cmdp-box { animation: sdown var(--t-micro) ease forwards; } @keyframes sup { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes sdown { to { opacity: 0; transform: translateY(-6px) scale(.98); } } @keyframes fdout { to { opacity: 0; } } .cmdp-in { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); } .cmdp-in svg.ico { width: 15px; height: 15px; color: var(--muted); } .cmdp-in input { flex: 1 1 auto; background: none; border: 0; outline: none; color: var(--ink); font-size: 14.5px; font-family: var(--font); } .cmdp-in input::placeholder { color: var(--muted); } .cmdp-ls { max-height: 320px; overflow-y: auto; padding: 6px; } .cmdp-it { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 8px; cursor: pointer; } .cmdp-it:hover, .cmdp-it.sel { background: color-mix(in oklab, var(--accent) 12%, transparent); } .cmdp-it .nm { color: var(--ink-2); font-size: 13px; } .cmdp-it:hover .nm, .cmdp-it.sel .nm { color: var(--ink); } .cmdp-it .ht { color: var(--muted); font-size: 11px; flex: 0 0 auto; } .cmdp-empty { color: var(--muted); font-size: 12.5px; padding: 14px; text-align: center; } /* ── estados dos botões da pílula (KER-1632, recuperado do arquivo 2026-07-20): vermelho + CORTE diagonal = desligado/mudo. O ícone NÃO troca (🔊 fixo, 🎙 fixo) — o estado é o corte. O JS já aplicava .muted/.off; faltava o CSS que os desenha, então não pintava nada. ── */ #carlo-hud .hud-b { position: relative; } #carlo-hud .hud-b.muted, #carlo-hud .hud-b.off { border-color: #e5484d; color: #e5484d; background: color-mix(in oklab, #e5484d 12%, var(--surface-2)); } #carlo-hud .hud-b.muted::after, #carlo-hud .hud-b.off::after { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 2px; background: #e5484d; border-radius: 1px; transform: rotate(-45deg); pointer-events: none; } #carlo-hud #hud-mic.on { border-color: var(--accent); color: var(--accent); } /* ── BARRAMENTO (HSF-1911): app do canal de dados — 4 abas ── */ /* FIX do scroll: #app-welcome é `display:grid; place-items:center`, que centraliza o conteúdo e NÃO deixa rolar quando ele é mais alto que a área. Para este app o conteúdo manda: alinha no topo e devolve o scroll vertical. */ body.app-open #app-welcome:has(#br) { place-items: start stretch; overflow-y: auto; padding: 22px 26px 48px; } #br { max-width: 1080px; margin: 0 auto; padding: 4px 2px 40px; text-align: left; width: 100%; } /* aba Arquitetura: tela inteira (curador) — sem margem de leitura, a topologia é o conteúdo */ #br.br-full { max-width: none; padding: 0; height: 100%; display: flex; flex-direction: column; } body.app-open #app-welcome:has(#br.br-full) { overflow: hidden; padding: 14px 18px 16px; } /* o leitor Miller ocupa o pane INTEIRO (as colunas rolam por dentro; a página, nunca) */ body.app-open #app-welcome:has(#nt2) { place-items: stretch; overflow: hidden; padding: 0; } #br.br-full #br-corpo { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .br-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; } .br-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 9px 14px; font-size: 13.5px; cursor: pointer; margin-bottom: -1px; } .br-tab:hover { color: var(--ink); } .br-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .br-intro { color: var(--ink-2); font-size: 13.5px; margin: 0 0 18px; } .br-vazio { color: var(--muted); font-size: 13px; background: var(--surface-2); border: 1px dashed var(--border); border-radius: 10px; padding: 14px 16px; margin: 10px 0; line-height: 1.5; } .br-nota { color: var(--muted); font-size: 11.5px; margin: 0 0 8px; font-style: italic; } .br-aviso { background: color-mix(in oklab, #ffb454 12%, var(--surface-2)); border: 1px solid #ffb454; border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 16px; line-height: 1.5; } /* cards de fonte */ .br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .br-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; } .br-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .br-amb { color: var(--muted); font-size: 11px; margin-left: auto; } .br-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); } .br-dot.ok { background: #3fb950 } .br-dot.ruim { background: #e5484d } .br-dot.aviso { background: #ffb454 } .br-dot.cinza { background: var(--muted) } .br-sem { font-size: 12px; font-weight: 600; margin-bottom: 8px; } .br-sem.ok { color: #3fb950 } .br-sem.ruim { color: #e5484d } .br-sem.aviso { color: #ffb454 } .br-sem.cinza { color: var(--muted) } .br-linha { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; color: var(--muted); } .br-linha b { color: var(--ink-2); font-weight: 600; } .br-linha b.ruim { color: #e5484d; } .br-det { color: var(--muted); font-size: 11px; margin-top: 4px; line-height: 1.45; } .br-ressalva { color: #ffb454; font-size: 11px; margin-top: 5px; line-height: 1.45; } .br-chip { display: inline-block; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-2); margin-top: 6px; } .br-chip.ok { color: #3fb950; border-color: #3fb950 } .br-chip.ruim { color: #e5484d; border-color: #e5484d } .br-chip.cinza { color: var(--muted) } /* ── TOPOLOGIA (aba Arquitetura) — o desenho é do Cytoscape+ELK; aqui só a moldura ── */ .topo-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; flex: 0 0 auto; } .topo-flex { flex: 1 1 auto; } .topo-dica { color: var(--muted); font-size: 12px; max-width: 620px; line-height: 1.4; } .topo-leg { display: inline-flex; align-items: center; gap: 6px; background: transparent; cursor: pointer; border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; font-size: 11px; color: var(--muted); transition: border-color .15s, color .15s, opacity .15s; opacity: .6; } .topo-leg:hover { color: var(--ink-2); opacity: .9; } .topo-leg.on { opacity: 1; color: var(--ink); border-color: var(--accent); } .topo-leg i { width: 14px; height: 2.5px; border-radius: 2px; display: inline-block; } .topo-leg.topo-faq, .topo-leg.topo-zoom { width: 26px; height: 26px; padding: 0; justify-content: center; font-weight: 700; opacity: .75; } .topo-wrap { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); } #topo-cy { width: 100%; height: 100%; min-height: 420px; } /* card pequeno do hover */ .topo-mini { position: fixed; z-index: 96; max-width: 268px; background: var(--surface-1); border: 1px solid var(--accent); border-radius: 11px; padding: 10px 13px; box-shadow: 0 14px 34px rgba(0,0,0,.45); pointer-events: none; } .topo-mini b { font-size: 12.5px; display: block; margin-bottom: 4px; } .topo-mini-papel { color: var(--ink-2); font-size: 11.5px; line-height: 1.45; } .topo-mini-par { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 11px; color: var(--ink-2); } .topo-mini-par span { color: var(--muted); display: block; font-size: 10px; } .topo-mini-dica { margin-top: 7px; color: var(--accent); font-size: 10px; } /* arquitetura (lista antiga — mantida para a seção de mal-entendidos) */ .br-camada { margin-bottom: 22px; } .br-camada-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .br-camada-cab b { font-size: 13.5px; } .br-camada-cab span { color: var(--muted); font-size: 12px; } .br-pecas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .br-peca { background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; cursor: pointer; transition: border-color .15s; } .br-peca:hover { border-color: var(--accent); } .br-peca-top { display: flex; align-items: center; gap: 8px; } .br-peca-top b { font-size: 13px; flex: 1; } .br-i { width: 21px; height: 21px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; font-style: italic; cursor: pointer; flex: 0 0 auto; line-height: 1; } .br-i:hover { border-color: var(--accent); color: var(--accent); } .br-peca-papel { color: var(--muted); font-size: 11.5px; margin-top: 5px; line-height: 1.45; } .br-faq-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; margin-bottom: 8px; } .br-faq-item b { font-size: 12.5px; display: block; margin-bottom: 5px; } .br-faq-item div { color: var(--ink-2); font-size: 12.5px; line-height: 1.55; } /* modal da peça */ .br-modal { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 24px; } :root[data-theme="light"] .br-modal { background: rgba(120,130,145,.45); } .br-modal-box { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px; padding: 26px 30px; max-width: 660px; width: 100%; max-height: 84vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.5); } .br-modal-box h2 { margin: 0 0 4px; font-size: 19px; } .br-modal-box h3 { margin: 20px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .br-x { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; } .br-x:hover { color: var(--ink); } .br-papel { color: var(--accent); font-size: 13px; margin-bottom: 14px; } .br-sobre p { color: var(--ink-2); font-size: 13.5px; line-height: 1.65; margin: 0 0 11px; } .br-param { width: 100%; border-collapse: collapse; font-size: 12.5px; } .br-param td { padding: 6px 0; border-bottom: 1px solid var(--border); vertical-align: top; } .br-param td:first-child { color: var(--muted); width: 42%; padding-right: 14px; } .br-cuidados { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 12.5px; line-height: 1.6; } .br-cuidados li { margin-bottom: 7px; } /* tabelas */ .br-tab-pol { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 8px; } .br-tab-pol th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--border); } .br-tab-pol td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); vertical-align: top; } .br-tab-pol code { font-size: 11px; color: var(--muted); } #br h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 26px 0 10px; } /* ── ATLAS MEETING v0 (HSF-1907): a tela do gravador ── */ #meet { max-width: 520px; margin: 8vh auto 0; text-align: center; } #meet h2 { margin: 0 0 4px; } #meet .meet-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 26px; } .meet-big { background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 16px 34px; font-size: 16px; font-weight: 700; cursor: pointer; } .meet-big:hover { filter: brightness(1.08); } .meet-big.rec { background: #e0435a; animation: mic-pulse 1.1s ease-in-out infinite; } .meet-st { margin-top: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; min-height: 20px; } .meet-ls { margin-top: 26px; text-align: left; display: grid; gap: 8px; } .meet-it { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 13px; } .meet-it .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meet-it .ht { color: var(--muted); font-size: 11.5px; white-space: nowrap; } .meet-it .dl { color: var(--accent); text-decoration: none; font-weight: 600; } /* pílula (iOS) de rascunhos — curador 2026-07-21: "tipo do iPhone, que você clica e é a pílula" */ #tb-draft.sw { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; padding:4px 6px; border:0; background:transparent; } #tb-draft.sw input { position:absolute; opacity:0; width:0; height:0; } .sw-trilho { position:relative; width:38px; height:22px; border-radius:11px; background:var(--surface-2,#2a2f3a); border:1px solid var(--border,rgba(255,255,255,.12)); transition:background .18s ease, border-color .18s ease; flex:0 0 auto; } .sw-bola { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .18s ease; } #tb-draft.sw input:checked + .sw-trilho { background:var(--accent,#3987e5); border-color:transparent; } #tb-draft.sw input:checked + .sw-trilho .sw-bola { transform:translateX(16px); } #tb-draft.sw input:focus-visible + .sw-trilho { outline:2px solid var(--accent,#3987e5); outline-offset:2px; } .sw-rot { font-size:12.5px; color:var(--muted,#898781); } #tb-draft.sw input:checked ~ .sw-rot { color:var(--ink-2,#c3c2b7); } /* Pilula 'Rascunhos' so na RAIZ do hub (curador 2026-07-21): dentro de um app ela nao tem efeito sobre o que esta na tela, entao so polui a topbar. */ /* MEDIDO no browser: o body mantem `on-home` mesmo com o app aberto — `app-open` e SOMADA, nao substituida (bodyClass = "on-home app-open"). Entao a condicao certa e esconder QUANDO ha app aberto, nao mostrar quando ha on-home. */ body.app-open #tb-draft{ display:none !important; } /* Visao de TOPICO — cards dos paineis da pasta (curador 2026-07-21) */ .tp-wrap{ width:100%; max-width:1180px; margin:auto; padding:26px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; animation:tp-in .26s ease both; } @keyframes tp-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } .tp-head{ display:flex; align-items:baseline; gap:12px; margin:0 0 18px; justify-content:center; } .tp-head h2{ margin:0; font-size:19px; font-weight:700; color:var(--ink); } .tp-n{ font-size:12px; color:var(--muted); } .tp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,168px)); gap:12px; justify-content:center; width:100%; } .tp-card{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; padding:13px 13px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-1); cursor:pointer; font:inherit; color:var(--ink); transition:border-color .15s ease, transform .12s ease, background .15s ease; } .tp-card:hover{ border-color:var(--accent); transform:translateY(-2px); background:color-mix(in oklab, var(--accent) 6%, var(--surface-1)); } .tp-ico{ display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--surface-2); color:var(--accent); } .tp-ico svg.ico{ width:16px; height:16px; } .tp-nm{ font-size:12.5px; font-weight:600; line-height:1.32; } .tp-ds{ font-size:11.5px; color:var(--muted); line-height:1.45; } .tp-vazio{ color:var(--muted); font-size:13px; padding:20px 2px; } .tp-q{ font-size:11px; color:var(--muted); font-weight:600; } .tp-card{ animation:tp-card .24s ease both; } .tp-card:nth-child(2){ animation-delay:.04s; } .tp-card:nth-child(3){ animation-delay:.08s; } .tp-card:nth-child(4){ animation-delay:.12s; } .tp-card:nth-child(5){ animation-delay:.16s; } .tp-card:nth-child(6){ animation-delay:.2s; } @keyframes tp-card{ from{ opacity:0; transform:translateY(9px) scale(.97); } to{ opacity:1; transform:none; } } .tp-card:active{ transform:translateY(0) scale(.98); } @media (prefers-reduced-motion: reduce){ .tp-wrap,.tp-card{ animation:none !important; transition:none !important; } } /* ── ATLAS MEETING v1 — overlay persistente de gravação ────────────────────────────────────────── Fica FIXO no canto e é filho do : a reunião continua gravando enquanto o curador navega o hub inteiro (folders, painéis, Carlo). O ponto vermelho pulsa para não existir dúvida de que a sala está sendo gravada — em reunião presencial isso é requisito de transparência, não enfeite. z-index acima de tudo, mas o overlay é pequeno e não intercepta clique fora dele. */ #am-ov { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .28); font: 500 13px var(--font); color: var(--ink-2); } #am-ov .am-dot { width: 10px; height: 10px; border-radius: 50%; background: #e0435a; flex: none; animation: am-blink 1.1s ease-in-out infinite; } #am-ov .am-tm { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); } #am-ov .am-sub { color: var(--muted); font-size: 11.5px; } #am-ov .am-stop { margin-left: 4px; background: transparent; color: #e0435a; border: 1px solid #e0435a; border-radius: 999px; padding: 3px 12px; font: 600 11.5px var(--font); cursor: pointer; } #am-ov .am-stop:hover { background: #e0435a; color: #fff; } @keyframes am-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* respeita quem pediu menos movimento: o ponto continua vermelho, só para de piscar */ @media (prefers-reduced-motion: reduce) { #am-ov .am-dot { animation: none; } } /* enrollment: quem está na sala (some enquanto grava — o overlay já diz o estado) */ #meet-quem { text-align: left; margin: 0 0 18px; } .meet-lb { display: block; font-size: 12px; color: var(--muted); margin: 0 0 6px; } .meet-quem-txt { width: 100%; box-sizing: border-box; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font: 400 13px var(--font); resize: vertical; } .meet-quem-txt:focus { outline: none; border-color: var(--accent); } .meet-it { flex-wrap: wrap; } /* ---- NOTÍCIAS 📰 v2 — leitor MILLER (mecânica Feedbin, tokens desta casa; HSF-3652) ---- */ #nt2 { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; height: 100%; min-height: 0; gap: 0; } #nt-lista { border-right: 1px solid var(--border); overflow-y: auto; min-height: 0; display: flex; flex-direction: column; background: color-mix(in oklab, var(--surface-1) 55%, transparent); } .nt-l-cab { display: flex; align-items: center; gap: 9px; padding: 12px 14px 6px; } .nt-l-cab b { font-size: 15px; color: var(--ink); } .nt-sub { color: var(--muted); font-size: 11.5px; } .nt-l-busca { padding: 4px 14px 10px; } .nt-l-busca input { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 6px 11px; color: var(--ink); font: inherit; font-size: 12.5px; outline: none; } .nt-l-busca input:focus { border-color: var(--accent); } .nt-cards { display: flex; flex-direction: column; } .nt-card { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; cursor: pointer; border-top: 1px solid color-mix(in oklab, var(--border) 55%, transparent); } .nt-card:hover { background: color-mix(in oklab, var(--surface-2) 70%, transparent); } .nt-card.sel { background: var(--accent); } .nt-card.sel .nt-c-tit, .nt-card.sel .nt-c-meta, .nt-card.sel .nt-c-res { color: #fff; } .nt-c-tit { color: var(--ink); font-weight: 600; font-size: 13.5px; line-height: 1.35; } .nt-c-meta { color: var(--muted); font-size: 11px; } .nt-c-res { color: var(--ink-2); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nt-card.lida:not(.sel) .nt-c-tit { color: var(--ink-2); font-weight: 500; } .nt-nova { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5ea2ff; margin-right: 7px; vertical-align: 1px; flex: none; } /* o selo do portal: squircle na cor do portal, sigla dentro — o "favicon" desenhado em casa */ .nt-fav { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 5px; background: var(--c, #5a6b8a); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } #app-sb .sb-item .nt-fav { margin-right: 2px; } .nt-ass { margin-left: auto; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); border-radius: 9px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer; transition: border-color .15s, color .15s; } .nt-ass:hover { border-color: var(--accent); color: var(--ink); } .nt-ass.on { background: #5ee0a0; border-color: #5ee0a0; color: #08130d; } /* a MATÉRIA (3ª coluna) */ #nt-le { overflow: hidden; display: flex; flex-direction: column; min-height: 0; } .nt-le-vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; } .nt-le-cab { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); flex: none; } .nt-le-fonte { font-weight: 700; font-size: 13px; color: var(--ink); } .nt-le-ext { margin-left: auto; color: var(--accent); font-size: 12.5px; text-decoration: none; } .nt-le-ext:hover { text-decoration: underline; } .nt-volta { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--ink-2); font-size: 17px; line-height: 1; padding: 2px 10px; cursor: pointer; } .nt-le-corpo { overflow-y: auto; padding: 22px clamp(18px, 4vw, 56px) 40px; min-height: 0; } .nt-le-corpo h1 { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; margin: 0 0 6px; color: var(--ink); } .nt-le-meta { color: var(--muted); font-size: 12.5px; margin: 0 0 18px; } .nt-le-html { color: var(--ink); font-size: 15px; line-height: 1.65; max-width: 720px; } .nt-le-html p { margin: 0 0 14px; } .nt-le-html img { max-width: 100%; height: auto; border-radius: 10px; margin: 6px 0 14px; } .nt-le-html a { color: var(--accent); } .nt-le-html h1, .nt-le-html h2, .nt-le-html h3, .nt-le-html h4 { line-height: 1.3; margin: 20px 0 8px; } .nt-le-html blockquote { border-left: 3px solid var(--border); margin: 0 0 14px; padding: 2px 0 2px 14px; color: var(--ink-2); } .nt-le-html pre { overflow-x: auto; background: var(--surface-2); border-radius: 8px; padding: 10px; } .nt-le-html table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; } .nt-le-html td, .nt-le-html th { border: 1px solid var(--border); padding: 5px 9px; font-size: 13px; } /* TOQUE / tela estreita: Miller vira navegação por níveis — a matéria toma a tela, com voltar */ @media (pointer: coarse), (max-width: 860px) { #nt2 { grid-template-columns: 1fr; } #nt-le { display: none; } #nt2.le-on #nt-lista { display: none; } #nt2.le-on #nt-le { display: flex; } .nt-volta { display: inline-block; } } /* ═══════ BP OS v42 · MENUBAR + MENU DO USUARIO (curador 2026-08-23: "parecer mais o top bar de um computador, com hora e dia no canto, como o site" — referencia vorssaint.com, o desktop-macOS-no-navegador). A topbar vira barra de sistema: mais fina, vidro (blur), tudo numa linha; relogio tabular no canto direito. O pop-up de conta ganha a linguagem do popover: titulos de seccao uppercase, cards, tiles de estatistica e barras por dia. ═══════ */ #topbar { padding: 4px 14px; gap: 10px; min-height: 44px; background: color-mix(in oklab, var(--surface-1) 86%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); } #sf-block img { width: 26px; height: 26px; border-radius: 6px; } .sf-stack { line-height: 1.12; } .sf-stack .sf-nm { font-size: 12.5px; } .sf-stack .bp { font-size: 10.5px; } .tb-sep { margin: 0 6px; height: 16px; } #tb-search { padding: 4px 10px; border-radius: 7px; } #tb-clock { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .1px; padding: 3px 2px 3px 6px; user-select: none; } #acct-btn .acct-av.sm { width: 26px; height: 26px; font-size: 10.5px; } /* pop-up central — linguagem do popover */ #acct-ov { background: rgba(6, 8, 14, .5); backdrop-filter: blur(14px) saturate(150%); } .prefs-box { width: min(820px, 94vw); height: min(560px, 88vh); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .4); } .prefs-corpo h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .72px; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } .pf-card { background: color-mix(in oklab, var(--surface-2) 72%, transparent); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .pf-card-t { font-size: 12.5px; font-weight: 700; color: var(--ink); } .pf-rank-t { margin: 16px 0 4px; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); } .pf-card input[type=password] { background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font-family: var(--font); font-size: 13px; padding: 7px 10px; outline: none; } .pf-card input[type=password]:focus { border-color: var(--accent); } .pf-hint { font-size: 11px; color: var(--muted); } .pf-row { display: flex; align-items: center; gap: 10px; } .pf-btn { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 7px 14px; font-family: var(--font); font-size: 12.5px; font-weight: 600; cursor: pointer; } .pf-btn:hover { filter: brightness(1.08); } .pf-smsg { font-size: 12px; } .pf-nao2 { color: #d5544a; } /* tiles de estatistica (menu do usuario) */ .pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 4px; } .pf-tile { background: color-mix(in oklab, var(--surface-2) 72%, transparent); border: 1px solid var(--border); border-radius: 10px; padding: 9px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .pf-tile b { font-size: 16.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; } .pf-tile span { font-size: 10.5px; color: var(--muted); line-height: 1.25; } /* barras dos 14 dias */ .pf-dias-card { gap: 6px; } .pf-dias { display: flex; align-items: flex-end; gap: 5px; height: 72px; padding-top: 4px; } .pf-dia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; } .pf-dia i { display: block; width: 100%; max-width: 26px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 90%, #fff), var(--accent)); } .pf-dia i.zero { background: var(--surface-2); } .pf-dia span { font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .pf-dia:nth-child(odd) span { visibility: hidden; } #tb-clock { display: none; } } /* ═══════ BP OS v43 · MENU DO USUARIO v2 (feedback do curador 2026-08-23h) ═══════ */ /* avatar = ESFERA de verdade (estava oval: o flex esmagava a largura) + foto */ .acct-av { flex: 0 0 auto; aspect-ratio: 1 / 1; overflow: hidden; } .acct-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .acct-av.xl { width: 64px; height: 64px; font-size: 22px; } .pf-perfil { display: flex; gap: 14px; align-items: center; padding: 4px 0 10px; } .pf-perfil-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pf-perfil-nm { font-weight: 700; font-size: 15px; color: var(--ink); } .pf-perfil-sub { font-size: 12px; color: var(--muted); } .pf-btn2 { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; font-family: var(--font); font-size: 12px; cursor: pointer; } .pf-btn2:hover { color: var(--ink); border-color: var(--accent); } /* ranking clicavel — alinhamento consertado (nome ESQUERDA, metrica direita, barra embaixo) */ .prefs-uso.pu-click { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; width: 100%; padding: 9px 6px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); border-radius: 8px; align-items: center; } .prefs-uso.pu-click:hover { background: color-mix(in oklab, var(--surface-2) 70%, transparent); } .pu-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pu-tx .pu-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pu-tr { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prefs-uso.pu-click .pu-met { text-align: right; white-space: nowrap; align-self: center; } .prefs-uso.pu-click .pu-bar { grid-column: 1 / -1; } /* barras de dia = botoes (drill data-a-data) */ .pf-dia { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; border-radius: 6px; } .pf-dia:hover { background: color-mix(in oklab, var(--surface-2) 80%, transparent); } .pf-dia.on { background: color-mix(in oklab, var(--accent) 16%, transparent); } .pf-drill-t { font-size: 11px; font-weight: 700; color: var(--muted); margin: 8px 0 2px; letter-spacing: .5px; } .pf-drill-lin { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 2px; font-size: 12.5px; border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent); } .pf-drill-lin .pu-nm { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-drill-lin .pu-met { white-space: nowrap; } /* favoritos */ .fv-busca { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; color: var(--ink); font-family: var(--font); font-size: 13px; padding: 8px 12px; outline: none; margin-bottom: 6px; } .fv-busca:focus { border-color: var(--accent); } .fv-lin { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); } .fv-star { background: none; border: 0; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); padding: 3px 5px; border-radius: 6px; flex: 0 0 auto; } .fv-star:hover { color: var(--warn); } .fv-star.on { color: var(--warn); } .fv-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; padding: 0; } .fv-tx:hover .pu-nm { color: var(--accent); } #fv-pv { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(6, 8, 14, .6); backdrop-filter: blur(10px); animation: fdin var(--t-ui) var(--ease-casa); } #fv-pv.closing { animation: fdout var(--t-micro) ease forwards; } .fv-pv-box { width: min(900px, 94vw); height: min(620px, 88vh); background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: sup var(--t-ui) var(--ease-casa); } .fv-pv-cab { display: flex; align-items: center; gap: 10px; padding: 10px 44px 10px 14px; border-bottom: 1px solid var(--border); position: relative; } .fv-pv-cab .folder-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } .fv-pv-trilha { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fv-pv-corpo { flex: 1; position: relative; background: var(--bg); } .fv-pv-corpo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .fv-pv-corpo .loading { position: absolute; inset: 0; display: grid; place-items: center; } /* acessos v2 — drill por app */ .ac-app { border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); } .ac-cab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 4px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink-2); text-align: left; } .ac-cab:hover { color: var(--ink); } .ac-nm { flex: 1; min-width: 0; font-size: 13px; } .ac-chev { color: var(--muted); transition: transform var(--t-ui) var(--ease-casa); } .ac-app.on .ac-chev { transform: rotate(90deg); } .ac-det { padding: 2px 8px 10px 16px; } .ac-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12.5px; } .ac-item .pu-nm { font-weight: 500; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-item .pf-btn2, .ac-det .pf-btn { font-size: 11px; padding: 3px 9px; flex: 0 0 auto; } /* memorias do Carlo */ .mem-lin { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 7px 2px; border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); font-size: 12.5px; } .mem-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .mem-tx { color: var(--ink-2); min-width: 0; } .mem-dt { font-size: 10.5px; color: var(--muted); white-space: nowrap; } .mem-rm { background: none; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; font-size: 11px; padding: 3px 7px; color: var(--muted); } .mem-rm:hover { color: #d5544a; border-color: #d5544a; } /* REDUZIR MOVIMENTO DE VERDADE (curador 2026-08-23h: "fazer oq promete — a gausian do dock deveria sumir"). Alem das duracoes .01ms (acima): mata o blur (GPU) com fundo SOLIDO no lugar (vidro sem blur = transparencia quebrada), e os transforms de hover/bounce. */ :root.motion-reduz * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :root.motion-reduz #topbar { background: var(--surface-1); } :root.motion-reduz #dock, :root.motion-reduz .dk-bar-in { background: var(--surface-1) !important; } :root.motion-reduz #acct-ov, :root.motion-reduz #fv-pv { background: rgba(6, 8, 14, .82); } :root.motion-reduz .dk-item:hover, :root.motion-reduz .dk-item:hover .dk-ico, :root.motion-reduz .desk-icon:hover, :root.motion-reduz .di-tile, :root.motion-reduz .bouncing .dk-item, :root.motion-reduz .bouncing .di-tile { transform: none !important; animation: none !important; } /* ═══════ BP OS v44 · retoques do curador 2026-08-24 ═══════ */ /* o atributo hidden PERDE para display:flex — foi por isso que "Alterar senha" nasceu aberto */ .pf-card[hidden], .ac-det[hidden], .wk-gr-det[hidden] { display: none !important; } /* grupos da arvore WeKnow (acessos) */ .wk-gr { border-bottom: 1px solid color-mix(in oklab, var(--border) 45%, transparent); } .wk-gr-cab { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 2px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink-2); font-size: 12.5px; font-weight: 600; text-align: left; } .wk-gr-cab:hover { color: var(--ink); } .wk-gr-cab i { font-style: normal; font-size: 10.5px; color: var(--muted); font-weight: 400; } .wk-gr-cab .ac-chev { margin-left: auto; } .wk-gr.on .ac-chev { transform: rotate(90deg); } .wk-gr-det { padding: 0 0 8px 10px; } .wk-sub-t { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--muted); margin: 7px 0 2px; text-transform: uppercase; } /* ═══════ BP OS v45 · home sem scroll vertical (curador 2026-08-24: "sem querer fiz scroll vertical e quebrou o alinhamento do grid — era pra nem existir") ═══════ */ body.on-home #view { overflow: hidden; overscroll-behavior: none; } /* ═══════════════════════════════════════════════════════════════════════════════════════════ COMPONENTES DA CASA · ONDA 1 (design-language HSF-628082c2) Promovidos ao shell para QUALQUER app do OS consumir — a receita mora aqui, não copiada por app. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ── .adv-pop · o POPOVER de vidro da casa (M4/M5/M6/M10) ────────────────────────────────── Menu, dropdown, confirmação: a física do menu-mac aprovada pelo curador. Vidro único (--glass-bg/--glass-blur), elevação flutuante (--shadow-2), raio de card (--r-card). Foi promovido do aichat (`.adv-pop` local, agora herdado); qualquer app usa a MESMA classe. Nada de