/* Fontes servidas pelo proprio dominio; ver static/fonts/fontes.css. Buscar do Google quebrava na rede da empresa: os dominios sao interceptados, o navegador recusava o certificado e rebaixava a pagina para "nao segura" -- e a fonte nem chegava a carregar. */ @import url('fonts/fontes.css'); :root { /* Paleta clara "Fidem Bank" — creme/navy/dourado. Valores exatos da identidade: Navy #1F2A44, Warm Beige #E8DCC8, Soft Gold #C6A75E. --surface/--surface-2 são variações claras derivadas do beige (usadas pelos cards e painéis aninhados). Cores de status (approved/rejected/ pending) não fazem parte da paleta de marca — mantidas como estão, porque carregam significado (aprovado/reprovado/pendente) que nenhuma das 3 cores novas consegue substituir sem perder clareza. */ --paper: #E8DCC8; --surface: #FBF8F2; --surface-2: #F3ECDD; --ink: #1F2A44; --ink-soft: #47536B; --ink-faint: #66748F; --line: #D9CBAA; --brass: #AD8B47; --brass-bright: #C6A75E; --accent-blue: #3A4E70; --approved: #1F6F50; --rejected: #B4442E; --pending: #8A6A1E; /* Escala de raio compartilhada — cards/botões/campos mais arredondados e "soft UI", inspirada no 5of10.com, mantendo a paleta e a tipografia serifada (Fraunces) já existentes nos títulos. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --card-shadow: 0 1px 2px rgba(21,34,56,0.03), 0 2px 10px rgba(21,34,56,0.045); } * { box-sizing: border-box; } body { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; background-color: var(--paper); color: var(--ink); } /* ---- fundo com a imagem real (hero-bg.jpg), fixo atrás de tudo ---- Mesma imagem usada como referência visual da paleta navy/bege, agora atrás dos cards em vidro no app inteiro. base.html injeta a div .blob-bg uma vez, logo no início do . */ .blob-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background-color: var(--paper); } .blob-bg::before { content: ""; position: absolute; inset: 0; background: url('/static/images/hero-bg.jpg') center / cover no-repeat; opacity: 0.35; } h1, h2, .display { font-family: 'Fraunces', serif; color: var(--ink); margin: 0; } a { color: inherit; } .folio { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.08em; color: var(--ink-faint); font-size: 12px; margin: 0 0 0.5rem; } .stamp { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3rem 0.7rem; border: 1.5px solid currentColor; border-radius: 3px; transform: rotate(-1.2deg); } .stamp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } .stamp-pendente, .stamp-pendencia { color: var(--pending); } .stamp-em_analise, .stamp-preenchido { color: var(--ink-soft); } .stamp-aprovado, .stamp-ativo { color: var(--approved); } .stamp-reprovado, .stamp-bloqueado { color: var(--rejected); } .stamp-expirado { color: var(--rejected); } .stamp-inativo { color: var(--ink-faint); } /* Layout */ .min-h-screen { min-height: 100vh; } .center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; } .page { width: 100%; max-width: 1320px; margin: 0 auto; padding: 2rem 1.5rem; } .page-narrow { width: 100%; max-width: 560px; margin: 0 auto; padding: 2.5rem 1.5rem; } .page-wide { max-width: none; } /* ---- Shell com sidebar fixa ---- */ .fidem-shell { display: flex; min-height: 100vh; } .fidem-sidebar { width: 232px; flex-shrink: 0; background: var(--ink); display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start; height: 100vh; z-index: 40; } .fidem-sidebar-brand { display: flex; align-items: center; gap: 0.65rem; padding: 1.35rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .fidem-sidebar-brand-mark { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fidem-sidebar-brand-mark img { width: 100%; height: 100%; object-fit: contain; } .fidem-sidebar-brand-text { font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; font-weight: 600; letter-spacing: 0.03em; font-size: 17px; color: #fff; line-height: 1.2; } .fidem-sidebar-brand-text small { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; color: #8FA0BE; text-transform: uppercase; margin-top: 0.2rem; } .fidem-sidebar-nav { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } .fidem-sidebar-section { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6F84A8; margin: 1.1rem 0.75rem 0.5rem; } .fidem-sidebar-section:first-child { margin-top: 0; } .fidem-sidebar-link { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.75rem; border-radius: var(--radius-sm); border-left: 2px solid transparent; color: #C9D2E0; text-decoration: none; font-size: 13.5px; margin-bottom: 0.15rem; transition: background .15s, color .15s, border-color .15s; } .fidem-sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; } .fidem-sidebar-link:hover { background: rgba(255,255,255,0.07); color: #fff; } /* Cor deixa de indicar categoria (era um ícone colorido por seção) e passa a indicar só estado: item ativo ganha borda + fundo dourados. */ .fidem-sidebar-link.active { background: rgba(198,167,94,0.14); color: #fff; border-left-color: var(--brass-bright); } .fidem-sidebar-link.active .fidem-sidebar-icon { color: var(--brass-bright); } /* Ícone monocromático — mesma cor pra todas as seções, só muda entre estado normal/hover/ativo. */ .fidem-sidebar-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; color: var(--ink-faint); } .fidem-sidebar-icon svg { width: 16px; height: 16px; } .fidem-sidebar-link:hover .fidem-sidebar-icon { color: #fff; } /* Grupo de menu com submenu (ex: "Cedente" abrindo Cedentes ativos / Novo cedente) —

nativo:

é o cabeçalho clicável, sem JS pra abrir/fechar. O estado aberto/fechado é lembrado via localStorage (fidemInitSidebarGroups em fidem-ui.js). */ .fidem-sidebar-group summary { list-style: none; cursor: pointer; } .fidem-sidebar-group summary::-webkit-details-marker, .fidem-sidebar-group summary::marker { display: none; content: ""; } .fidem-sidebar-group .fidem-sidebar-chevron { width: 15px; height: 15px; margin-left: auto; opacity: 0.55; transition: transform .18s ease; } .fidem-sidebar-group[open] > summary .fidem-sidebar-chevron { transform: rotate(90deg); } .fidem-sidebar-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3em; padding: 0.1rem 0.45rem; margin-left: 0.4rem; border-radius: 999px; background: var(--brass-bright); color: #1A1305; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; } .fidem-sidebar-group summary .fidem-sidebar-badge { margin-left: auto; } .fidem-sidebar-group summary .fidem-sidebar-chevron { margin-left: 0.5rem; } .fidem-sidebar-submenu { padding-left: 1.85rem; padding-top: 0.15rem; } .fidem-sidebar-sublink { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); color: #A8B7D1; text-decoration: none; font-size: 13.5px; margin-bottom: 0.1rem; transition: background .15s, color .15s; } .fidem-sidebar-sublink:hover { background: rgba(255,255,255,0.06); color: #fff; } .fidem-sidebar-sublink.active { color: var(--brass-bright); font-weight: 500; } .fidem-sidebar-user { border-top: 1px solid rgba(255,255,255,0.08); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.65rem; } .fidem-sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13.5px; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,0.18); } .fidem-sidebar-user-info { min-width: 0; flex: 1; } .fidem-sidebar-user-name { font-size: 13.5px; font-weight: 500; color: #fff; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fidem-sidebar-user-role { font-size: 10.5px; color: #8FA0BE; margin: 0.1rem 0 0; text-transform: capitalize; } .fidem-sidebar-logout { background: none; border: none; color: #8FA0BE; cursor: pointer; padding: 0.3rem; flex-shrink: 0; display: flex; } .fidem-sidebar-logout svg { width: 18px; height: 18px; } .fidem-sidebar-logout:hover { color: var(--brass-bright); } .fidem-shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ---- Cabeçalho fixo: trilha de breadcrumb + título (Fraunces) + pílula do período ativo à direita. Sem fade, sem troca de position via JS — fica grudado no topo da viewport o tempo todo. ---- */ .fidem-topbar { position: fixed; top: 0; left: 232px; right: 0; background: rgba(251, 248, 242, 0.85); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border-bottom: 1px solid var(--line); padding: 0.85rem 1.75rem; display: flex; align-items: center; gap: 0.9rem; z-index: 20; } .fidem-topbar-titles { min-width: 0; } .fidem-topbar-breadcrumb { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0 0 0.15rem; text-transform: none; } .fidem-topbar-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fidem-topbar-period { margin-left: auto; flex-shrink: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; color: var(--ink-soft); background: rgba(196,162,77,0.12); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; white-space: nowrap; } .fidem-topbar-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; color: var(--ink); flex-shrink: 0; } .fidem-topbar-toggle svg { width: 22px; height: 22px; } .fidem-sidebar-backdrop { display: none; } /* Compensa o header agora fixo: o conteúdo abaixo dele precisa de espaço no topo pra não ficar escondido atrás da topbar. A topbar real mede ~64px (breadcrumb + título Fraunces) — a folga de 88px cobre isso com margem pra variação de fonte/zoom entre navegadores. scroll-margin-top no primeiro elemento do conteúdo é a mesma proteção pra quando algo rola até ele. */ .fidem-shell-main .page { padding-top: calc(2rem + 88px); } .fidem-shell-main .page > *:first-child { scroll-margin-top: 100px; } @media (max-width: 900px) { .fidem-sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); transition: transform .22s ease; } .fidem-sidebar.open { transform: translateX(0); } .fidem-topbar { left: 0; } .fidem-topbar-toggle { display: inline-flex; } .fidem-sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(11,11,11,0.4); z-index: 39; } } .header { background: rgba(251, 248, 242, 0.6); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border-bottom: 1px solid var(--line); padding: 1.25rem 1.75rem; display: flex; align-items: center; justify-content: space-between; } .header .name { font-weight: 500; margin: 0; } .header .logout { font-size: 12px; color: var(--ink-soft); text-decoration: none; background: rgba(196,162,77,0.06); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem; cursor: pointer; } .header .logout:hover { border-color: var(--brass); color: var(--ink); } /* Cards / tables */ .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); overflow: hidden; } .card-pad { padding: 1.5rem; } .row { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; position: relative; transition: background .15s, box-shadow .2s; } .row:last-child { border-bottom: none; } /* Fundo dourado sutil + anel fino ao passar o mouse/focar, em "inset" pra não ser cortado pelo overflow:hidden do .card ao redor. */ .row:hover, .row:focus-visible { background: rgba(196,162,77,0.07); box-shadow: inset 0 0 0 1.5px var(--brass-bright); z-index: 1; } .row .title { font-weight: 500; margin: 0; } .empty { padding: 1.5rem; color: var(--ink-soft); font-size: 13.5px; } /* Tabela horizontal (tipo planilha) — padrão único de listagem em todo o site, pra todos os papéis de usuário, com scroll lateral em telas estreitas em vez de empilhar os campos verticalmente em cards. */ .table-scroll { width: 100%; overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .data-table thead th { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: rgba(196,162,77,0.07); } .data-table td.wrap, .data-table th.wrap { white-space: normal; } .data-table .actions { display: flex; gap: 0.5rem; align-items: center; white-space: nowrap; } .data-table a.row-link { color: inherit; text-decoration: none; display: block; } .data-table tbody tr.clickable { cursor: pointer; } .data-table tbody tr.clickable:hover { background: rgba(196,162,77,0.07); } /* Forms */ .field { margin-bottom: 1rem; } .field label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 0.3rem; } .field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .field input:focus, .field textarea:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--brass); } .required { color: var(--rejected); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .grid-2 .field label { min-height: 2.6em; line-height: 1.3; } .grid-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 2rem; align-items: start; } @media (max-width: 720px) { .grid-2, .grid-cols { grid-template-columns: 1fr; } } .span-2 { grid-column: 1 / -1; } .btn { position: relative; overflow: hidden; display: inline-block; padding: 0.65rem 1.3rem; border-radius: var(--radius-md); font-weight: 500; font-size: 13.5px; border: 1px solid transparent; cursor: pointer; text-decoration: none; text-align: center; transition: opacity .15s, border-color .15s, box-shadow .2s; } /* Mesmo fundo/anel dourado dos .row, em inset (botões também vivem dentro de .card com overflow:hidden, então um anel externo seria cortado). */ .btn:hover, .btn:focus-visible { background: rgba(196,162,77,0.07); box-shadow: inset 0 0 0 1.5px var(--brass-bright); } .btn-primary { background: var(--brass); color: #1A1305; } .btn-primary:hover { background: var(--brass-bright); } .btn-outline { background: transparent; border-color: var(--line); color: var(--ink); } .btn-outline:hover { border-color: var(--brass); } .btn-approve { background: var(--approved); color: #06281A; } .btn-reject { background: var(--rejected); color: #2B0A05; } .btn-pending { background: transparent; border-color: var(--pending); color: var(--pending); } .btn-block { display: block; width: 100%; } .btn-stack { display: flex; flex-direction: column; gap: 0.5rem; } .error { color: var(--rejected); font-size: 13.5px; } .help { color: var(--ink-soft); font-size: 13.5px; } .tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; font-size: 13.5px; } .tab { padding-bottom: 0.75rem; margin-bottom: -1px; border-bottom: 2px solid transparent; text-decoration: none; color: var(--ink-soft); } .tab.active { border-color: var(--brass); color: var(--ink); font-weight: 500; } .filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .filter-pill { font-size: 12px; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; } .filter-pill.active { background: var(--brass); color: #1A1305; border-color: var(--brass); } .link-box { border: 1px solid rgba(196,162,77,0.35); background: rgba(196,162,77,0.06); border-radius: var(--radius-sm); padding: 0.85rem; margin-top: 0.75rem; } .link-box code { font-size: 13.5px; word-break: break-all; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .detail-item p:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0; } .detail-item p:last-child { margin: 0.15rem 0 0; white-space: pre-wrap; } .flash { padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem; font-size: 13.5px; } .flash-success { background: rgba(31,111,80,0.1); color: var(--approved); border: 1px solid rgba(31,111,80,0.3); } .flash-error { background: rgba(180,68,46,0.1); color: var(--rejected); border: 1px solid rgba(180,68,46,0.3); } /* ---- Componente "Mix por tipo de recebível" — espelha paleta/fonte do relatório Fidem Bank ---- */ .fidem-card { position: relative; width: 100%; margin-bottom: 1.75rem; padding: 20px 22px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); font-family: 'IBM Plex Sans', system-ui, sans-serif; color: var(--ink); } .fidem-card-title { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 0.6em; } .fidem-card-badge { font-size: 10.5px; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; text-transform: none; } .fidem-ritmo-badge { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; } .fidem-ritmo-up { color: #1E7A4B; background: rgba(30,122,75,0.1); } .fidem-ritmo-down { color: #B23A3A; background: rgba(178,58,58,0.1); } .fidem-chart-empty { display: none; height: 280px; margin: 0; align-items: center; justify-content: center; text-align: center; color: var(--ink-faint); font-size: 13.5px; padding: 0 1.5rem; } .fidem-donut-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .fidem-donut { width: 150px; height: 150px; border-radius: 50%; flex-shrink: 0; position: relative; } .fidem-donut::after { content: ""; position: absolute; inset: 25%; background: var(--surface); border-radius: 50%; } .fidem-donut-center { position: absolute; inset: 25%; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 1; } .fidem-donut-center-value { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 13.5px; font-weight: 400; color: var(--ink); line-height: 1.15; } .fidem-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 160px; } .fidem-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); } .fidem-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .fidem-legend-label { flex: 1; } .fidem-legend-pct { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* ---- KPI grid estilo Fidem Bank (linhas finas, barra de destaque no topo) ---- */ .fidem-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 1px; margin-bottom: 1.75rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); overflow: hidden; } .fidem-kpi { background: var(--surface); padding: 18px 20px 20px; position: relative; font-family: 'IBM Plex Sans', system-ui, sans-serif; } .fidem-kpi::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--ac, var(--brass)); } .fidem-kpi-label { font-size: 10.5px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; } .fidem-kpi-value { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 24px; font-weight: 400; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .fidem-kpi-cents { font-size: 0.62em; color: var(--ink-faint); } .fidem-kpi-compare { margin: 8px 0 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 6px 10px; } .fidem-kpi-up { color: #1E7A4B; } .fidem-kpi-down { color: #B23A3A; } .fidem-kpi-goal { color: var(--ink-faint); } /* ---- Abas estilo Fidem Bank ---- */ .fidem-tab-bar { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 1.75rem; overflow-x: visible; flex-wrap: wrap; font-family: 'IBM Plex Sans', system-ui, sans-serif; } .fidem-tab-btn { background: none; border: none; cursor: pointer; text-decoration: none; display: inline-block; padding: 12px 4px; margin-right: 22px; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1.5px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .18s, border-color .18s; } .fidem-tab-btn:hover { color: var(--ink); } .fidem-tab-btn.active { color: var(--brass-bright); border-bottom-color: var(--brass); } .fidem-tab-panel { display: none; } .fidem-tab-panel.active { display: block; animation: fidemFadeIn .22s ease; } @keyframes fidemFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ---- Filtro de período (volume operado por mês/ano etc.) ---- */ .fidem-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 0.5rem; } .fidem-filter-chip { position: relative; z-index: 1; display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; } .fidem-filter-chip:hover { border-color: var(--brass); color: #1A1305; } .fidem-filter-chip.active { background: var(--brass); border-color: var(--brass); color: #1A1305; } /* ---- "Pílula" deslizante nos seletores de período (chips e botões de semestre/mês) — um indicador dourado compartilhado que acompanha o mouse entre as opções e volta pra opção selecionada ao sair (JS em base.html). ---- */ .fidem-nav-hover { position: relative; } .fidem-nav-indicator { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: var(--brass); z-index: 0; opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1), opacity .2s ease; } .fidem-filter-custom { display: flex; align-items: center; gap: 6px; margin-left: auto; } .fidem-filter-custom input[type="date"], .fidem-filter-custom input[type="text"] { font-family: inherit; font-size: 12px; padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); } .fidem-filter-custom input[type="text"] { min-width: 180px; } .fidem-filter-custom span { font-size: 12px; color: var(--ink-faint); } .fidem-filter-apply { font-family: inherit; font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--brass); background: var(--brass); color: #1A1305; cursor: pointer; transition: opacity .15s; } .fidem-filter-apply:hover { opacity: 0.85; } .fidem-filter-label { font-size: 12px; color: var(--ink-faint); margin: 0.6rem 0 1.25rem; } .fidem-filter-label strong { color: var(--ink); } @media (max-width: 640px) { .fidem-filter-custom { margin-left: 0; width: 100%; } } /* ---- Metas por agente ---- */ .fidem-goal-month-form { display: flex; align-items: center; gap: 8px; margin-bottom: 1.25rem; } .fidem-goal-month-form input[type="month"] { font-family: inherit; font-size: 12px; padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); } .fidem-goal-month-form button { font-family: inherit; font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--brass); background: var(--brass); color: #1A1305; cursor: pointer; } .fidem-goal-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .fidem-goal-row:last-child { border-bottom: none; } /* Bloco por agente com duas métricas (Volume e Deságio) empilhadas — cada uma com seu próprio gauge, realizado e formulário de meta. */ .fidem-goal-agent-block { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); } .fidem-goal-agent-block:last-child { border-bottom: none; } .fidem-goal-metric-label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.5rem; } .fidem-goal-subrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .fidem-goal-subrow + .fidem-goal-metric-label { margin-top: 0.9rem; } .fidem-goal-form { display: flex; align-items: center; gap: 6px; } .fidem-goal-form input[type="text"] { width: 130px; font-family: inherit; font-size: 13.5px; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); } .fidem-goal-form button { font-family: inherit; font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--brass); background: transparent; color: var(--brass-bright); cursor: pointer; transition: background-color .15s, color .15s; } .fidem-goal-form button:hover { background: var(--brass); color: #1A1305; } .fidem-goal-pct { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .fidem-goal-pct-ok { background: rgba(31,111,80,0.12); color: var(--approved); } .fidem-goal-pct-warn { background: rgba(138,106,30,0.12); color: var(--pending); } .fidem-goal-pct-bad { background: rgba(180,68,46,0.12); color: var(--rejected); } .fidem-goal-pct-none { background: rgba(122,143,168,0.12); color: var(--ink-faint); } /* ---- Bullet chart (Real x Meta) — substitui os velocímetros em arco ---- */ .fidem-bullet-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 1.75rem; } .fidem-bullet { font-family: 'IBM Plex Sans', system-ui, sans-serif; } .fidem-bullet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 4px; } .fidem-bullet-label { font-size: 12px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; } .fidem-bullet-values { display: flex; align-items: center; gap: 8px; } .fidem-bullet-value { font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .fidem-bullet-track { position: relative; height: 14px; border-radius: 999px; background: var(--surface-2); overflow: visible; } .fidem-bullet-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: var(--brass-bright); transition: width .3s ease; } .fidem-bullet-target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); } .fidem-bullet-agent-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(31,42,68,0.08); } .fidem-bullet-agent-row:last-child { border-bottom: none; } .fidem-bullet-agent-name { width: 140px; flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fidem-bullet-agent-row .fidem-bullet { flex: 1; } /* ---- Mix por tipo de recebível: lista de barras horizontais ---- */ .fidem-mix-list { display: flex; flex-direction: column; gap: 12px; } .fidem-mix-row { font-family: 'IBM Plex Sans', system-ui, sans-serif; } .fidem-mix-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 4px; } .fidem-mix-label { font-size: 13.5px; font-weight: 600; color: var(--ink); } .fidem-mix-value { font-size: 13.5px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .fidem-mix-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .fidem-mix-fill { height: 100%; border-radius: 999px; background: var(--ink); transition: width .3s ease; } .fidem-mix-fill.fidem-mix-fill-outros { background: var(--ink-faint); } /* ---- Toggle 1º/2º semestre (acumulado, no acordeão de agente) ---- */ .fidem-semester-toggle { display: flex; gap: 6px; margin-bottom: 0.75rem; } .fidem-semester-btn { position: relative; z-index: 1; font-family: inherit; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .fidem-semester-btn:hover { border-color: var(--brass); color: #1A1305; } .fidem-semester-btn.active { background: var(--brass); border-color: var(--brass); color: #1A1305; } /* ---- Sub-abas dentro da aba Meta (Volume/Deságio/Taxa/Prazo) — navegação por métrica pra não empilhar os 4 blocos (KPIs+gauge+gráfico) de uma vez. ---- */ .fidem-subtab-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; } .fidem-subtab-btn { position: relative; z-index: 1; font-family: inherit; font-size: 13.5px; font-weight: 500; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .fidem-subtab-btn:hover { border-color: var(--brass); color: var(--ink); } .fidem-subtab-btn.active { background: var(--brass); border-color: var(--brass); color: #1A1305; } /* ---- Velocímetros de meta (Volume/Deságio/Taxa/Prazo) na Visão geral, com seletor de período: semestre+ano ou mês atual/anterior/definido. ---- */ .fidem-vg-period-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 1.25rem; } .fidem-vg-year-select { font-family: inherit; font-size: 12px; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); } .fidem-vg-custom { display: flex; align-items: center; gap: 6px; margin-left: auto; } .fidem-vg-custom input[type="month"] { font-family: inherit; font-size: 12px; padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); } .fidem-vg-gauge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } /* O card "Metas" que envolve esse grid tem overflow:hidden (usado em outros cards pra recortar a lista de .row) — sem esse conteúdo aqui, dá pra liberar o overflow só nele, senão o halo externo do glow (que vaza pra fora do card do gauge) fica cortado antes de aparecer. */ .fidem-card:has(.fidem-vg-gauge-grid) { overflow: visible; } .fidem-vg-gauge-grid .fidem-gauge-card { margin-bottom: 0; padding: 14px 16px 12px; } .fidem-vg-gauge-grid .fidem-gauge-wrap { height: 136px; } .fidem-vg-gauge-grid .fidem-gauge-value { bottom: 19px; } /* .fidem-gauge-wrap-sm normalmente vive dentro de uma linha flex (ao lado de texto, na aba Metas/acordeão de agente antigo), por isso seu margin:0 tira o "margin:0 auto" que centralizava a versão grande — aqui, sem texto do lado, o gauge fica sozinho no card, então precisa centralizar de novo. */ .fidem-vg-gauge-grid .fidem-gauge-wrap-sm { margin: 0 auto; } @media (max-width: 900px) { .fidem-vg-gauge-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .fidem-vg-gauge-grid { grid-template-columns: 1fr; } .fidem-vg-custom { margin-left: 0; width: 100%; } } /* Velocímetros dentro do acordeão de agente — espaço mais estreito que a Visão geral, então fica sempre 2x2 em vez de 4 numa fileira só. grid-auto-rows: 1fr garante que as 2 fileiras (e os 4 cards) fiquem com a mesma altura, mesmo quando um valor (ex.: R$ formatado) é bem mais largo que outro (%, dias) — sem isso as fileiras ficavam com altura diferente. */ .fidem-vg-gauge-grid-compact { grid-template-columns: repeat(2, 1fr); } /* Reserva sempre 2 linhas pro título — "Prazo médio (PMP) Real x Meta" quebra linha nesse espaço mais estreito e "Volume Real x Meta" não, então sem isso o gauge de cada card começava numa altura diferente. */ .fidem-vg-gauge-grid-compact .fidem-gauge-title { min-height: 2.4em; } @media (max-width: 480px) { .fidem-vg-gauge-grid-compact { grid-template-columns: 1fr; } } .fidem-subtab-panel { display: none; } .fidem-subtab-panel.active { display: block; animation: fidemFadeIn .18s ease; } /* Título do card + toggle mensal/semestral na mesma linha. */ .fidem-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .fidem-card-title-row .fidem-card-title { margin: 0; } /* ---- Gauge de meia-lua (Real x Meta) ---- */ .fidem-gauge-card { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--card-shadow); border-radius: var(--radius-lg); padding: 18px 20px 16px; margin-bottom: 1.75rem; font-family: 'IBM Plex Sans', system-ui, sans-serif; } .fidem-gauge-title { font-size: 12px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 4px; text-align: center; /* Altura mínima pra 2 linhas — sem isso, um título que quebra linha (ex: "Prazo médio (PMP)") empurra só aquele gauge pra baixo, desalinhando com os outros 3 da mesma fileira. */ min-height: 2.4em; } .fidem-gauge-badge { font-weight: 500; color: var(--ink-soft); text-transform: none; letter-spacing: 0; } .fidem-gauge-wrap { position: relative; width: 100%; max-width: 320px; height: 168px; margin: 0 auto; padding: 0 6px; } .fidem-gauge-wrap-sm { width: 220px; max-width: 220px; height: 118px; padding: 0 4px; margin: 0; } .fidem-gauge-wrap canvas { display: block; width: 100% !important; height: 100% !important; } .fidem-gauge-value { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font-family: 'IBM Plex Serif', Georgia, serif; font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--surface); padding: 0 4px; z-index: 1; } .fidem-gauge-wrap-sm .fidem-gauge-value { font-size: 13.5px; bottom: 16px; } /* No grid de 4 colunas (Visão Geral), o card é estreito e valores grandes em R$ (ex: "R$ 150.101.514,44") não cabem no tamanho normal — a fonte menor evita que o texto vaze por baixo do card vizinho (que "tampa" o excesso com o próprio fundo), e o wrap permite quebrar em 2 linhas se ainda não couber. */ .fidem-vg-gauge-grid .fidem-gauge-value { font-size: 16px; width: 100%; white-space: nowrap; text-align: center; } .fidem-gauge-min, .fidem-gauge-max { position: absolute; bottom: 4px; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .fidem-gauge-wrap-sm .fidem-gauge-min, .fidem-gauge-wrap-sm .fidem-gauge-max { font-size: 10.5px; bottom: 2px; } .fidem-gauge-min { left: 0; } .fidem-gauge-max { right: 0; } .fidem-goal-track-caption { margin: 0.75rem 0 0; font-size: 13.5px; color: var(--ink-soft); text-align: center; } /* ---- Relatório individual por agente (painel gerencial) ---- */ .fidem-accordion-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 640px) { .fidem-accordion-charts { grid-template-columns: 1fr; } } /* ---- Aba Risco: exposição em aberto (lista + detalhe do agente) ---- Layout mestre-detalhe: lista de agentes à esquerda (.fidem-risco-list, dentro do .card de vidro já existente) e o painel do agente selecionado à direita (.fidem-risco-detail, um .fidem-card por agente, só um visível por vez — trocado via JS, sem fetch). Reaproveita as cores (--ink, --brass, --brass-bright) e os componentes já existentes no site (.fidem-semester-toggle/btn pras sub-abas, .fidem-legend pra legenda de vencimentos) em vez de criar uma paleta nova. */ .fidem-risco-list-head { display: grid; grid-template-columns: 1fr 90px 150px; gap: 14px; padding: 0.7rem 1.5rem; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; } .fidem-risco-list-head span:not(:first-child) { text-align: right; } .fidem-risco-agent-row { display: grid; grid-template-columns: 1fr 90px 150px; gap: 14px; align-items: center; padding: 0.85rem 1.5rem; } .fidem-risco-agent-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .fidem-risco-agent-main .title { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fidem-risco-bar-track { height: 5px; border-radius: 3px; background: rgba(31,42,68,0.09); overflow: hidden; } .fidem-risco-bar-fill { height: 5px; border-radius: 3px; background: var(--ink-soft); } .fidem-risco-col-num { text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-soft); } .fidem-risco-col-val { text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; } .fidem-risco-chip { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; color: var(--ink); background: rgba(196,162,77,0.14); border-radius: 999px; padding: 4px 10px; } .fidem-risco-chip-solid { background: var(--ink); color: var(--surface); } .fidem-risco-cedente-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; } .fidem-risco-cedente-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; color: var(--ink); margin-bottom: 7px; } .fidem-risco-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .fidem-risco-table th { text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: 0 0 0.5rem; border-bottom: 1px solid var(--line); } .fidem-risco-table td { padding: 0.55rem 0; border-bottom: 1px solid var(--line); color: var(--ink); } .fidem-risco-table th:last-child, .fidem-risco-table td:last-child { text-align: right; font-family: 'IBM Plex Mono', monospace; } .fidem-risco-table tbody tr:last-child td { border-bottom: none; } .fidem-risco-stackbar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: rgba(31,42,68,0.09); } /* Agentes reais têm dezenas de cedentes/operações em aberto (a mockup usada de referência só tinha uns punhados) — sem limitar a altura, essas duas sub-abas esticavam a página inteira por milhares de pixels. */ .fidem-risco-list { max-height: 70vh; overflow-y: auto; } .fidem-risco-back { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; margin-bottom: 14px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: color .15s; } .fidem-risco-back:hover { color: var(--brass-bright); } .fidem-risco-subpanel[data-subpanel="operacoes"] { max-height: 58vh; overflow-y: auto; padding-right: 4px; } /* Painel de detalhe agora ocupa a largura toda (ver fidemRiscoSelectAgent) — cards de cedente em coluna única ficariam esticados e vazios; em grade aproveitam o espaço, como os cards do resto do dashboard. */ .fidem-risco-cedentes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; max-height: 58vh; overflow-y: auto; padding-right: 4px; } /* Clicar num cedente troca a grade acima por este painel (mesmo drill-down do agente, um nível abaixo) — tabela de operações com scroll próprio pra não competir com o resto do painel do agente. */ .fidem-risco-cedente-ops-scroll { max-height: 42vh; overflow-y: auto; } @media (max-width: 900px) { .fidem-risco-list-head, .fidem-risco-agent-row { grid-template-columns: 1fr 70px; } .fidem-risco-list-head span:nth-child(2), .fidem-risco-agent-row .fidem-risco-col-num { display: none; } } /* ---- Carteira de cedentes (portal do agente) — tabela com cabeçalho fixo, colunas ordenáveis e paginação, substituindo as antigas linhas .row em flex (limitadas a uma página inalcançável). ---- */ .fidem-carteira-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .fidem-carteira-table thead th { position: sticky; top: 0; background: rgba(251, 248, 242, 0.94); backdrop-filter: blur(6px); text-align: left; padding: 0.7rem 1.5rem; border-bottom: 1px solid var(--line); font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } .fidem-carteira-table th.fidem-col-num, .fidem-carteira-table td.fidem-col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .fidem-carteira-table th a { color: inherit; text-decoration: none; } .fidem-carteira-table th a:hover { color: var(--ink); } .fidem-carteira-table th a.active { color: var(--brass-bright, var(--ink)); } .fidem-carteira-table tbody tr { cursor: pointer; transition: background .15s, box-shadow .2s; } .fidem-carteira-table tbody tr:hover { background: rgba(196,162,77,0.07); box-shadow: inset 0 0 0 1.5px var(--brass-bright); } .fidem-carteira-table td { padding: 0.9rem 1.5rem; border-bottom: 1px solid var(--line); color: var(--ink); } .fidem-carteira-table tbody tr:last-child td { border-bottom: none; } .fidem-carteira-table td .folio { margin: 0.25rem 0 0; } .fidem-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 1rem 0; } .fidem-pagination-pages { display: flex; align-items: center; gap: 4px; } .fidem-pagination-pages a, .fidem-pagination-pages span.fidem-pagination-current, .fidem-pagination-pages span.fidem-pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--radius-sm); font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-decoration: none; color: var(--ink-soft); } .fidem-pagination-pages a:hover { background: rgba(196,162,77,0.12); color: var(--ink); } .fidem-pagination-pages span.fidem-pagination-current { background: var(--brass); color: #1A1305; font-weight: 600; } .fidem-pagination-pages span.fidem-pagination-ellipsis { color: var(--ink-faint); } .fidem-pagination-pages a.fidem-pagination-disabled, .fidem-pagination-pages span.fidem-pagination-disabled { opacity: 0.35; pointer-events: none; } /* ---- Dropdown de checkboxes (ex: filtro por agente em Cedentes) ---- */ .fidem-filter-dropdown { position: relative; } .fidem-filter-dropdown > summary { list-style: none; cursor: pointer; } .fidem-filter-dropdown > summary::-webkit-details-marker { display: none; } .fidem-filter-dropdown-panel { position: absolute; z-index: 20; top: calc(100% + 0.4rem); right: 0; min-width: 220px; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--card-shadow); padding: 0.5rem; } .fidem-filter-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.85rem; cursor: pointer; } .fidem-filter-check:hover { background: var(--surface-2); } #brasil-map svg { display: block; margin: 0 auto; user-select: none; -webkit-user-select: none; -moz-user-select: none; } #brasil-map svg text { pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .fidem-map-legend { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.75rem; font-size: 0.75rem; color: var(--ink-faint); } .fidem-map-legend-bar { width: 120px; height: 10px; border-radius: 6px; background: linear-gradient(to right, var(--surface-2), var(--ink)); } .fidem-map-tooltip { display: none; position: absolute; z-index: 10; pointer-events: none; background: var(--ink); color: var(--surface); padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); box-shadow: var(--card-shadow); font-size: 0.78rem; line-height: 1.5; white-space: nowrap; } .fidem-map-tooltip strong { display: block; font-size: 0.85rem; color: var(--brass-bright); margin-bottom: 0.15rem; } .fidem-map-tooltip span { display: block; opacity: 0.9; } .fidem-map-flex { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; } .fidem-map-col { flex: 1 1 380px; max-width: 480px; margin: 0 auto; } .fidem-map-panel { flex: 1 1 260px; min-width: 240px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.9rem 1rem; align-self: stretch; opacity: 0; transition: opacity 0.2s ease; } .fidem-map-panel-title { font-weight: 600; margin: 0 0 0.15rem; font-size: 0.95rem; } .fidem-map-panel-subtitle { margin: 0 0 0.6rem; font-size: 0.75rem; color: var(--ink-faint); } .fidem-map-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--line); } .fidem-map-panel-row:first-of-type { border-top: none; } .fidem-map-panel-back { margin-top: 0.75rem; font-size: 0.78rem; padding: 0.4rem 0.8rem; } #brasil-map svg path.fidem-map-state-selected { stroke: var(--brass-bright); stroke-width: 900; } .fidem-map-col > div:first-child.fidem-map-panning { cursor: grab; } .fidem-map-col > div:first-child.fidem-map-grabbing, .fidem-map-col > div:first-child.fidem-map-grabbing * { cursor: grabbing !important; } /* ---- Operações por agente (admin): lista só com os nomes dos agentes e as operações do agente clicado abertas logo abaixo, na própria linha. A troca é por link (recarrega a página com ?agente=), não por JS: assim o filtro de empresa/dia e o agente aberto ficam na URL e sobrevivem a um F5 ou a um link colado pra outra pessoa. ---- */ .data-table th.num, .data-table td.num { text-align: right; font-family: 'IBM Plex Mono', monospace; white-space: nowrap; } .fidem-ops-agents > tbody > tr.fidem-ops-row-open > td { background: rgba(196,162,77,0.10); } .fidem-ops-agents > tbody > tr.fidem-ops-row-open > td:first-child { box-shadow: inset 2px 0 0 var(--brass); } .fidem-ops-caret { display: inline-block; width: 1em; color: var(--ink-faint); transition: transform 0.12s ease; } .fidem-ops-caret.open { transform: rotate(90deg); color: var(--brass); } .fidem-ops-tag { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-soft); background: rgba(31,42,68,0.08); border-radius: 999px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; } .fidem-ops-tag-sec { color: #1A1305; background: rgba(196,162,77,0.24); } .fidem-ops-detail-row > td { padding: 0 !important; background: rgba(31,42,68,0.035); } .fidem-ops-detail { padding: 1rem 1.25rem 1.25rem; } .fidem-ops-detail-title { margin: 0 0 0.75rem; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .fidem-ops-detail .data-table { font-size: 12.5px; } .fidem-ops-check { width: 34px; text-align: center; } .fidem-ops-check input[type="checkbox"] { accent-color: var(--brass); cursor: pointer; } .fidem-ops-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); } .fidem-ops-actions .btn[disabled] { opacity: 0.4; cursor: not-allowed; }