/* BRASLOL 2 - EXPANDIR MARCA (painel Dinheiro da carreira; tela: js/finance/marca-ui.js). Botao "Expandir marca" + menu expansivel (role="dialog") por cima dos paineis vizinhos, no estilo da caixa de entrada (css/inbox.css).
   Classes novas: fn-* (e c-neg no painel Dinheiro, ver css/career.css). Sem style="" no HTML (CSP): so classes aqui. */

.fn-open{position:absolute;left:18px;right:18px;top:214px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0!important;border:0!important;border-radius:0;background:rgba(255,255,255,.14)!important;color:#fff;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .15s,transform .12s}
.fn-open:hover,.fn-open.on,.fn-open:focus-visible{background:rgba(255,255,255,.28)!important}
.fn-open:active{transform:scale(.97)}

/* menu: abre por cima do painel (e dos vizinhos), centralizado nele */
.fn-dlg{position:absolute;left:-36px;top:0;z-index:8;box-sizing:border-box;width:360px;will-change:transform,opacity;padding:12px 14px 14px;background:linear-gradient(135deg,rgba(33,39,64,.97),rgba(22,27,47,.97));border:0;border-radius:5px;box-shadow:none;text-align:left}   /* sem borda; fundo = a cor FINAL do modal de Configuracoes/Salvar (vidro .34/.40 por cima da camada escura #smodal rgba(8,10,28,.62) sobre o dashboard), quase opaco: aqui o blur nao funciona (o painel pai ja tem backdrop-filter) e um vidro translucido deixaria o texto dos paineis vizinhos aparecer. Para clarear/escurecer mexa nos dois rgb */
.fn-dlg[hidden]{display:none}
.fn-dlg{transform:translate(var(--fn-dx,0px),var(--fn-dy,0px))}   /* --fn-dx/--fn-dy: menu arrastado pelo topo (marca-ui.js, fnPos) */
.fn-top{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}   /* o topo e a alca de arrastar */
.fn-dlg.drag .fn-top{cursor:grabbing}
/* camada fixa (will-change, igual aos paineis de css/career.css) e SEM animacao de entrada nem rolagem propria: a troca de camada no fim da animacao e ao focar o campo fazia o texto "tremer" */
.fn-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.4)}
.fn-top h3{margin:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.fn-lead{margin:10px 0 8px;font-size:12px;line-height:16px;color:rgba(255,255,255,.88)}
.fn-areas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none}
.fn-r{display:flex;flex-direction:column;gap:5px;min-width:0;box-sizing:border-box;padding:8px;background:rgba(255,255,255,.08);border-radius:4px}
.fn-r.bld{background:rgba(255,255,255,.04)}
.fn-rh{display:flex;flex-direction:column;gap:1px;min-width:0}
.fn-rh label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.fn-at{font-size:10.5px;line-height:13px;color:rgba(255,255,255,.75)}
.fn-i{display:block;width:100%;height:28px;box-sizing:border-box;padding:0 8px;border:0;border-radius:0;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:14px;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;user-select:text;-webkit-user-select:text}
.fn-i::placeholder{color:rgba(255,255,255,.4)}
.fn-i:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:1px}
.fn-i:disabled{opacity:.45}
.fn-mx{font-size:10.5px;line-height:13px;color:rgba(255,255,255,.78)}
.fn-r.bld .fn-mx{color:#ffd37a}
.fn-sum{display:flex;flex-direction:column;gap:3px;margin:12px 0 0}
.fn-sum div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;height:auto}
.fn-sum dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.fn-sum dd{margin:0;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:#8fe3a8}
.fn-sum .fn-now{margin-top:4px}
.fn-sum .fn-now dt,.fn-sum .fn-now dd{font-size:10.5px;font-weight:400;letter-spacing:.06em;color:#fff}
.fn-msg{min-height:15px;margin:8px 0 0;font-size:11px;line-height:15px}
.fn-msg.err{color:#ffb4bb}
.fn-msg.ok{color:#8fe3a8}
.fn-btns{display:flex;gap:8px;margin-top:10px}
.fn-b{flex:1 1 0;min-width:0;height:30px;padding:0 8px!important;border:0!important;border-radius:0;background:#fff!important;color:#000;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:background .15s,transform .12s}
.fn-b:hover,.fn-b:focus-visible{background:#e6eaff!important}
.fn-b.ghost{background:rgba(255,255,255,.14)!important;color:#fff}
.fn-b.ghost:hover,.fn-b.ghost:focus-visible{background:rgba(255,255,255,.28)!important}
.fn-b:active{transform:scale(.96)}