/* Standalone port — relatorios-standalone.css */ :root{ --blue:#007BFF; --blue-600:#0061d6; --navy:#001F5B; --sky:#90EEFF; --ink:#0d1b34; --muted:#64748b; --line:#e4e9f0; --field:#f6f8fb; /* superfícies semânticas (tema escuro sobrescreve) */ --bg-app:#eef2f8; --surface:#ffffff; --surface-2:#ffffff; --surface-3:#f6f8fb; --font:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --radius-control:0.75rem; --radius-card:var(--fd-radius-card, 0.25rem); --radius-lg:1.5rem; --shadow-1:0 0.0625rem 0.125rem rgba(13,27,52,.06); --shadow-2:0 0.75rem 1.875rem -1rem rgba(13,27,52,.25); --shadow-3:0 2.75rem 6.25rem -2.125rem rgba(0,12,40,.62); } /* Camada de token de Relatorios (S0). Valores identicos aos literais que substituiram — a troca e equivalente por construcao. O tema redefine estes tokens; nenhuma regra precisa saber de tema. */ :root{ --rel-ink-muted:#9aa7bd; --rel-icon-muted:#7c8aa6; --rel-ink-3:#46566f; --rel-ink-2:#33425f; --rel-ink-faint:#5b6a86; --rel-ink-strong:#0d2850; --rel-ink-deep:#08205a; --rel-ink:#0d1b34; --rel-wash-info:#e8f3ff; --rel-wash-info-soft:#eff7ff; --rel-surface-sunken:#f6f9ff; --rel-accent-chart:#0a78f0; --rel-accent-strong:#0061d6; --rel-accent-deep:#143a8c; --rel-accent-tint:#b5d8ff; --rel-accent-tint-2:#a6ceff; --rel-line:#e8eaed; --rel-danger:#cf3b40; --rel-danger-bright:#e5484d; --rel-danger-ink:#c0322f; --rel-warn:#f7a418; --rel-warn-ink:#b9760a; --rel-purple:#7c5cff; --rel-thead-1:#163f9a; --rel-thead-2:#1a4db8; --rel-thead-3:#2f6fe0; --rel-thead-4:#5aa0ff; --rel-accent-ink:#007bff; --rel-accent:#007bff; --rel-surface:#ffffff; --rel-surface-raised:#ffffff; --rel-accent-glow:rgba(0,123,255,.13); --rel-ok:#1f9d57; --rel-accent-rgb:0,123,255; --rel-shadow-rgb:13,40,80; --rel-shadow-deep-rgb:8,32,90; --rel-shadow-pure-rgb:0,0,0; --rel-accent-chart-rgb:10,120,240; --rel-warn-rgb:247,164,24; --rel-ink-rgb:13,27,52; --rel-danger-bright-rgb:229,72,77; --rel-shadow-2-rgb:20,40,80; --rel-neutral-rgb:148,163,184; --rel-thead-3-rgb:47,111,224; --rel-purple-rgb:124,92,255; --rel-ok-rgb:31,157,87; --rel-ink-faint-rgb:91,106,134; --rel-accent-strong-rgb:0,97,214; --rel-thead-4-rgb:90,160,255; --rel-thead-2-rgb:26,77,184; --rel-cyan-rgb:144,238,255; --rel-tint-rgb:216,230,240; --rel-surface-rgb:255,255,255; } /* content */ #page-relatorios .relatorios-fd .content{ padding:1.625rem 1.75rem 3rem; max-width:102.5rem; width:100%; } #page-relatorios .relatorios-fd .section{ margin-bottom:1.625rem; } #page-relatorios .relatorios-fd .section-head{ display:flex; align-items:center; gap:0.75rem; margin-bottom:0.875rem; } #page-relatorios .relatorios-fd .section-head h2{ font-size:1rem; font-weight:800; letter-spacing:-0.0125rem; margin:0; } #page-relatorios .relatorios-fd .section-head .hint{ font-size:0.78125rem; color:var(--muted); } #page-relatorios .relatorios-fd .section-head .sp{ flex:1; } #page-relatorios .relatorios-fd .section-head .upd{ font-size:0.75rem; color:var(--muted); display:inline-flex; align-items:center; gap:0.375rem; } #page-relatorios .relatorios-fd .section-head .upd .live{ width:0.4375rem; height:0.4375rem; border-radius:50%; background:#36d399; box-shadow:0 0 0 0.1875rem rgba(54,211,153,.22); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .section-head .upd .live{ box-shadow:0 0 0 0.1875rem rgba(var(--rel-shadow-rgb),0.22); } #page-relatorios .relatorios-fd .filterbar{ display:flex; gap:0.75rem; align-items:center; flex-wrap:wrap; margin-bottom:0.875rem; } #page-relatorios .relatorios-fd .search{ position:relative; flex:1; min-width:15rem; } #page-relatorios .relatorios-fd .search svg{ position:absolute; left:0.9375rem; top:50%; transform:translateY(-50%); width:1.125rem; height:1.125rem; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .search input{ width:100%; height:2.875rem; border:0.0625rem solid var(--line); border-radius:0.75rem; background:var(--surface); padding:0 0.9375rem 0 2.75rem; font-family:inherit; font-size:0.875rem; color:var(--ink); outline:none; transition:.15s; } #page-relatorios .relatorios-fd .search input:focus{ border-color:var(--blue); box-shadow:0 0 0 0.25rem rgba(var(--rel-accent-rgb),.13); } #page-relatorios .relatorios-fd .search input::placeholder{ color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .fselect{ position:relative; } #page-relatorios .relatorios-fd .fselect select{ appearance:none; height:2.875rem; border:0.0625rem solid var(--line); border-radius:0.75rem; background:var(--surface); padding:0 2.375rem 0 0.875rem; font-family:inherit; font-size:0.84375rem; font-weight:600; color:var(--rel-ink-2); cursor:pointer; outline:none; transition:.15s; } #page-relatorios .relatorios-fd .fselect select:focus{ border-color:var(--blue); box-shadow:0 0 0 0.25rem rgba(var(--rel-accent-rgb),.13); } #page-relatorios .relatorios-fd .fselect .lbl{ color:var(--muted); font-weight:500; } #page-relatorios .relatorios-fd .fselect svg{ position:absolute; right:0.8125rem; top:50%; transform:translateY(-50%); width:1rem; height:1rem; color:var(--rel-icon-muted); pointer-events:none; } #page-relatorios .relatorios-fd .morefilters{ display:inline-flex; align-items:center; gap:0.5625rem; height:2.875rem; padding:0 1rem; border:0.0625rem solid var(--line); border-radius:0.75rem; background:var(--surface); font-family:inherit; font-size:0.84375rem; font-weight:700; color:var(--rel-ink-2); cursor:pointer; transition:.15s; } #page-relatorios .relatorios-fd .morefilters:hover{ background:var(--field); } #page-relatorios .relatorios-fd .morefilters svg{ width:1rem; height:1rem; } #page-relatorios .relatorios-fd .morefilters .cnt{ min-width:1.25rem; height:1.25rem; padding:0 0.3125rem; border-radius:0.625rem; background:var(--blue); color:#fff; font-size:0.71875rem; font-weight:700; display:flex; align-items:center; justify-content:center; } /* active chips */ #page-relatorios .relatorios-fd .chips{ display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.375rem; } #page-relatorios .relatorios-fd .chips .lead{ font-size:0.78125rem; color:var(--muted); font-weight:600; margin-right:0.125rem; } #page-relatorios .relatorios-fd .chip{ display:inline-flex; align-items:center; gap:0.4375rem; height:1.875rem; padding:0 0.625rem 0 0.75rem; border-radius:62.4375rem; background:rgba(var(--rel-accent-rgb),.07); border:0.0625rem solid rgba(var(--rel-accent-rgb),.18); font-size:0.78125rem; font-weight:600; color:#2b5fa6; } #page-relatorios .relatorios-fd .chip.soon{ background:var(--field); border-color:var(--line); color:var(--muted); } #page-relatorios .relatorios-fd .chip b{ font-weight:700; color:#1f4f93; } #page-relatorios .relatorios-fd .chip .x{ width:1rem; height:1rem; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#7ba2d8; transition:.13s; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .chip .x{ color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .chip .x:hover{ background:rgba(var(--rel-accent-rgb),.15); color:#1f4f93; } #page-relatorios .relatorios-fd .chip .x svg{ width:0.625rem; height:0.625rem; } #page-relatorios .relatorios-fd .chips .clear{ margin-left:auto; font-size:0.8125rem; font-weight:600; color:var(--muted); cursor:pointer; background:none; border:0; font-family:inherit; } #page-relatorios .relatorios-fd .chips .clear:hover{ color:var(--rel-danger-bright); } /* toolbar */ #page-relatorios .relatorios-fd .toolbar{ display:flex; align-items:center; gap:0.875rem; margin-bottom:1.125rem; } #page-relatorios .relatorios-fd .toolbar .t-title h2{ font-size:1.125rem; font-weight:800; letter-spacing:-0.0125rem; margin:0; } #page-relatorios .relatorios-fd .toolbar .t-title p{ font-size:0.78125rem; color:var(--muted); margin:0.125rem 0 0; } #page-relatorios .relatorios-fd .toolbar .sp{ flex:1; } #page-relatorios .relatorios-fd .seg{ display:inline-flex; background:var(--field); border:0.0625rem solid var(--line); border-radius:0.6875rem; padding:0.1875rem; } #page-relatorios .relatorios-fd .seg button{ height:2.125rem; padding:0 1rem; border:0; background:none; border-radius:var(--radius-card, 0.25rem); font-family:inherit; font-size:0.8125rem; font-weight:700; color:var(--muted); cursor:pointer; transition:.14s; box-shadow:none; } #page-relatorios .relatorios-fd .seg button.on{ background:var(--surface); color:var(--blue); box-shadow:none; } #page-relatorios .relatorios-fd .order{ display:inline-flex; align-items:center; gap:0.5rem; font-size:0.8125rem; color:var(--muted); } /* ---------- 2-col row: conexão + painel do dia ---------- */ #page-relatorios .relatorios-fd .row-2{ display:grid; grid-template-columns:minmax(0,1fr) 23.75rem; gap:1rem; align-items:start; } #page-relatorios .relatorios-fd .day-panel{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-1); padding:1.125rem 1.25rem; } #page-relatorios .relatorios-fd .day-panel .dp-head{ display:flex; align-items:center; gap:0.5rem; margin-bottom:0.1875rem; } #page-relatorios .relatorios-fd .day-panel .dp-head h3{ font-size:0.875rem; font-weight:800; letter-spacing:-0.0125rem; margin:0; white-space:nowrap; } #page-relatorios .relatorios-fd .day-panel .dp-head .sp{ flex:1; } #page-relatorios .relatorios-fd .day-panel .dp-head .pk{ font-size:0.71875rem; font-weight:700; color:var(--blue); white-space:nowrap; } #page-relatorios .relatorios-fd .day-panel .dp-sub{ font-size:0.75rem; color:var(--muted); margin:0 0 1.125rem; clear:both; } #page-relatorios .relatorios-fd .bars2{ display:flex; align-items:flex-end; gap:0.4375rem; height:8.25rem; padding-bottom:1.375rem; position:relative; } #page-relatorios .relatorios-fd .bars2 .bar{ flex:1; background:linear-gradient(180deg,#5fb0ff,var(--rel-accent-chart)); border-radius:0.375rem 0.375rem 0.1875rem 0.1875rem; position:relative; min-height:0.3125rem; transition:.2s; cursor:pointer; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .bars2 .bar{ background:linear-gradient(180deg,var(--rel-accent-ink),var(--rel-accent-chart)); } #page-relatorios .relatorios-fd .bars2 .bar:hover{ filter:brightness(1.08); } #page-relatorios .relatorios-fd .bars2 .bar.peak{ background:linear-gradient(180deg,#243a64,var(--rel-ink)); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .bars2 .bar.peak{ background:linear-gradient(180deg,var(--rel-accent-ink),var(--rel-ink)); } #page-relatorios .relatorios-fd .bars2 .bar .lab{ position:absolute; bottom:-1.3125rem; left:0; right:0; text-align:center; font-size:0.625rem; font-weight:600; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .bars2 .bar .val{ position:absolute; top:-1.125rem; left:0; right:0; text-align:center; font-size:0.6875rem; font-weight:800; color:var(--rel-ink-2); opacity:0; transition:.15s; } #page-relatorios .relatorios-fd .bars2 .bar:hover .val{ opacity:1; } #page-relatorios .relatorios-fd .day-panel .dp-foot{ display:flex; gap:0.625rem; margin-top:1.125rem; padding-top:1rem; border-top:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .day-panel .dp-stat{ flex:1; } #page-relatorios .relatorios-fd .day-panel .dp-stat .v{ font-size:1.1875rem; font-weight:800; color:var(--ink); letter-spacing:-0.025rem; } #page-relatorios .relatorios-fd .day-panel .dp-stat .l{ font-size:0.65625rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-top:0.125rem; } #page-relatorios .relatorios-fd .day-panel .dp-stat + .dp-stat{ border-left:0.0625rem solid var(--line); padding-left:0.875rem; } @media (max-width: 0px) /* ui-scale-freeze: was 1080px */{ .row-2{ grid-template-columns:1fr; } } /* ============================================================ FiveDesk — Relatórios (report builder + gráficos) Depende de fivedesk-theme.css + fivedesk-app.css ============================================================ */ /* ---------- sub-navegação por contexto (genérica · todas as páginas) ---------- Cada indicador organiza seus gráficos em sub-abas, evitando scroll infinito. */ #page-relatorios .relatorios-fd .subnav{ display:flex; gap:0.375rem; padding:0.875rem 1.375rem 0; overflow-x:auto; scrollbar-width:thin; } #page-relatorios .relatorios-fd .subnav::-webkit-scrollbar{ height:0.3125rem; } .subnav::-webkit-scrollbar-thumb{ background:var(--line); border-radius:0.1875rem; } #page-relatorios .relatorios-fd .subtab{ flex:none; display:inline-flex; align-items:center; gap:0.5rem; height:2.375rem; padding:0 0.9375rem; border:0.0625rem solid var(--line); border-radius:var(--radius-card, 0.25rem); background:var(--surface); font-family:inherit; font-size:0.78125rem; font-weight:700; color:var(--muted); cursor:pointer; transition:.15s cubic-bezier(.22,1,.36,1); white-space:nowrap; box-shadow:none; } #page-relatorios .relatorios-fd .subtab .ti{ width:1rem; height:1rem; flex:none; } .subtab .ti svg{ width:1rem; height:1rem; display:block; } #page-relatorios .relatorios-fd .subtab:hover{ color:var(--ink); border-color:#cfdbef; } html[data-theme="dark"] #page-relatorios .relatorios-fd .subtab:hover{ border-color:rgba(127,182,255,.34); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .subtab:hover{ border-color:rgba(10,61,128,.34); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .subtab:hover{ border-color:var(--rel-ink-3); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .subtab:hover{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .subtab.on{ background:var(--blue); color:#fff; border-color:transparent; box-shadow:none; } #page-relatorios .relatorios-fd .subtab.on .ti{ color:#fff; } #page-relatorios .relatorios-fd .subtab.on .tw{ background:rgba(var(--rel-surface-rgb),.22); color:#fff; } #page-relatorios .relatorios-fd .subtab .tw{ display:inline-flex; align-items:center; justify-content:center; min-width:1.125rem; height:1.125rem; padding:0 0.3125rem; border-radius:0.375rem; background:rgba(207,59,64,.12); color:var(--rel-danger); font-size:0.625rem; font-weight:800; } html[data-theme="dark"] #page-relatorios .relatorios-fd .subtab .tw{ background:rgba(207,59,64,.2); color:#f1797d; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .subtab .tw{ background:rgba(151,35,31,.2); color:#6e1614; } #page-relatorios .relatorios-fd .subtab:focus-visible{ outline:0.125rem solid var(--blue); outline-offset:0.125rem; } #page-relatorios .relatorios-fd .subtab.on, #page-relatorios .relatorios-fd .subtab.on:focus, #page-relatorios .relatorios-fd .subtab.on:focus-visible{ outline:none; box-shadow:none; } /* Sub-abas Departamentos e Financeiro: mesma largura do Nublado. */ #page-relatorios .relatorios-fd #depSubnav{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.375rem; align-items:stretch; overflow:visible; } #page-relatorios .relatorios-fd #finSubnav{ display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:0.375rem; align-items:stretch; overflow:visible; } #page-relatorios .relatorios-fd #depSubnav .subtab, #page-relatorios .relatorios-fd #finSubnav .subtab{ width:100%; min-width:0; justify-content:center; box-sizing:border-box; } #page-relatorios .relatorios-fd .subsector{ display:none; } #page-relatorios .relatorios-fd .subsector.on{ display:block; animation:subsec-fade .35s cubic-bezier(.22,1,.36,1) both; } @keyframes subsec-fade{ from{ opacity:0; transform:translateY(0.5rem); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .subsector.on{ animation:none; } } /* ---------- tokens de elevação multicamada (Sprint 2) ---------- Profundidade em camadas cria figura/fundo: sombra de contato curta + sombra ambiente difusa + halo interno de luz no topo. */ :root{ --elev-1: 0 0.0625rem 0.125rem rgba(13,40,80,.05), 0 0.125rem 0.375rem -0.125rem rgba(13,40,80,.08); --elev-2: 0 0.0625rem 0.125rem rgba(13,40,80,.06), 0 0.375rem 0.875rem -0.375rem rgba(13,40,80,.14), 0 0.875rem 1.875rem -1rem rgba(13,40,80,.16); --elev-3: 0 0.0625rem 0 rgba(255,255,255,.85) inset, 0 0.125rem 0.25rem rgba(13,40,80,.05), 0 0.875rem 1.875rem -0.75rem rgba(13,40,80,.20), 0 2.5rem 4.375rem -2.5rem rgba(13,40,80,.30); --recess: inset 0 0.0625rem 0.125rem rgba(13,40,80,.05); } /* ---------- ZONA DE CONFIGURAÇÃO (Gestalt: região comum) ---------- Tudo o que "configura" vive numa superfície recuada e tingida, visualmente distinta da zona de "resultado" (cartões elevados). */ #page-relatorios .relatorios-fd .config-panel{ position:relative; background:linear-gradient(180deg,#eef3fa,#e9eff8); border:0.0625rem solid #dde6f2; border-radius:var(--radius-card); padding:1rem 1rem 0.875rem; box-shadow:var(--recess); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .config-panel{ border:0.0625rem solid var(--rel-line); } #page-relatorios .relatorios-fd .config-tab{ display:inline-flex; align-items:center; gap:0.4375rem; margin:0.125rem 0 0.8125rem 0.25rem; font-size:0.65625rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--rel-icon-muted); } #page-relatorios .relatorios-fd .config-tab svg{ width:0.9375rem; height:0.9375rem; color:var(--rel-ink-muted); } /* ---------- builder / tipo de indicadores ---------- */ #page-relatorios .relatorios-fd .builder{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--elev-1); padding:0.9375rem 1.125rem 1.0625rem; margin-bottom:0.75rem; } #page-relatorios .relatorios-fd .builder .b-lab{ font-size:0.65625rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .ind-head{ display:flex; align-items:baseline; gap:0.75rem; margin-bottom:0.75rem; } #page-relatorios .relatorios-fd .ind-note{ font-size:0.75rem; color:var(--muted); } /* indicator row — ícones direto sobre o painel (sem card intermediário) */ #page-relatorios .relatorios-fd .indic-row{ display:flex; gap:0.5625rem; background:transparent; border:0; border-radius:0; padding:0.1875rem 0 0.4375rem; margin-bottom:0.625rem; overflow:visible; } #page-relatorios .relatorios-fd .indic-row::-webkit-scrollbar{ height:0.375rem; } #page-relatorios .relatorios-fd .indic-row::-webkit-scrollbar-thumb{ background:var(--line); border-radius:0.1875rem; } #page-relatorios .relatorios-fd .indic{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:0.625rem; padding:0 1rem; height:3.625rem; border:0.0625rem solid rgba(255,255,255,.28); border-radius:var(--radius-card); background:rgba(var(--rel-surface-rgb),.26); box-shadow:inset 0 0.0625rem rgba(255,255,255,.14); backdrop-filter:blur(0.625rem); -webkit-backdrop-filter:blur(0.625rem); font-family:inherit; cursor:pointer; transition:background .16s cubic-bezier(.22,1,.36,1), border-color .16s cubic-bezier(.22,1,.36,1), box-shadow .16s cubic-bezier(.22,1,.36,1), color .16s cubic-bezier(.22,1,.36,1); position:relative; scroll-snap-align:start; color:#fff; transform:none; } #page-relatorios .relatorios-fd .indic .in-ic{ display:flex; align-items:center; justify-content:center; color:inherit; transition:.16s; flex:none; } #page-relatorios .relatorios-fd .indic .in-ic svg{ width:1.4375rem; height:1.4375rem; } /* rótulo curto visível DENTRO do botão (ícone + nome) — é menu de acesso, sem microdados */ #page-relatorios .relatorios-fd .indic .in-tx{ display:flex; min-width:0; } #page-relatorios .relatorios-fd .indic .in-t{ font-size:0.875rem; font-weight:700; color:inherit; letter-spacing:-0.00625rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .indic .in-s{ display:none; } /* HOVER (inativos) — mantém o ghost atual; sem translate (quebra backdrop nos vizinhos) */ #page-relatorios .relatorios-fd .indic:not(.on):not([data-soon]):hover{ background:rgba(var(--rel-surface-rgb),.36); border-color:rgba(255,255,255,.55); box-shadow:inset 0 0.0625rem rgba(255,255,255,.18), 0 0.25rem 0.75rem rgba(15,42,74,.14); color:#fff; } /* FOCO via teclado */ #page-relatorios .relatorios-fd .indic:focus-visible{ outline:0.125rem solid var(--blue); outline-offset:0.125rem; } /* ATIVO — branco sólido, como a aba selecionada em Tarefas */ #page-relatorios .relatorios-fd .indic.on{ background:rgba(var(--rel-surface-rgb),.96); border-color:rgba(255,255,255,.95); box-shadow:0 0.125rem 0.5rem rgba(var(--rel-shadow-deep-rgb),.16); color:var(--rel-accent-deep); backdrop-filter:none; -webkit-backdrop-filter:none; } #page-relatorios .relatorios-fd .indic.on .in-ic{ color:var(--blue); } #page-relatorios .relatorios-fd .indic.on .in-ic svg{ width:1.5rem; height:1.5rem; } #page-relatorios .relatorios-fd .indic.on:not([data-soon]):hover{ background:rgba(var(--rel-surface-rgb),.96); border-color:rgba(255,255,255,.95); color:var(--rel-accent-deep); box-shadow:0 0.125rem 0.5rem rgba(var(--rel-shadow-deep-rgb),.16); } /* EM BREVE — discreto, sem clique vazio */ #page-relatorios .relatorios-fd .indic[data-soon]{ opacity:.42; cursor:default; } #page-relatorios .relatorios-fd .indic[data-soon]:hover{ box-shadow:var(--elev-1); transform:none; color:#8693a8; } #page-relatorios .relatorios-fd .indic[data-soon] .soon-tag{ display:none; } /* ---------- filtros em linha única (todos do mesmo tamanho) ---------- */ /* botões de filtro com degradê azul-claro (mantendo identidade) */ #page-relatorios .relatorios-fd .filterbar.fb-line .dr-btn, #page-relatorios .relatorios-fd .filterbar.fb-line .fdsel-trigger, #page-relatorios .relatorios-fd .filterbar.fb-line .morefilters{ background:var(--surface) !important; border-color:var(--line) !important; } #page-relatorios .relatorios-fd .filterbar.fb-line .dr-btn:hover, #page-relatorios .relatorios-fd .filterbar.fb-line .fdsel-trigger:hover, #page-relatorios .relatorios-fd .filterbar.fb-line .morefilters:hover{ background:var(--field) !important; border-color:#cfdbef !important; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .filterbar.fb-line .dr-btn:hover,html[data-theme="cinza"] #page-relatorios .relatorios-fd .filterbar.fb-line .fdsel-trigger:hover,html[data-theme="cinza"] #page-relatorios .relatorios-fd .filterbar.fb-line .morefilters:hover{ border-color:var(--rel-accent-tint) !important; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .filterbar.fb-line .dr-btn:hover,html[data-theme="cinza"] #page-relatorios .relatorios-fd .filterbar.fb-line .fdsel-trigger:hover,html[data-theme="cinza"] #page-relatorios .relatorios-fd .filterbar.fb-line .morefilters:hover{ border-color:var(--rel-ink-3) !important; } #page-relatorios .relatorios-fd .filterbar.fb-line .dr-btn .dr-ic, .filterbar.fb-line .dr-btn .dr-cv, #page-relatorios .relatorios-fd .filterbar.fb-line .fdsel-trigger .fdsel-chev, #page-relatorios .relatorios-fd .filterbar.fb-line .morefilters svg{ color:var(--blue); } html[data-theme="dark"] #page-relatorios .relatorios-fd .filterbar.fb-line .dr-btn, html[data-theme="dark"] #page-relatorios .relatorios-fd .filterbar.fb-line .fdsel-trigger, html[data-theme="dark"] #page-relatorios .relatorios-fd .filterbar.fb-line .morefilters{ background:var(--surface) !important; border-color:var(--line) !important; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .filterbar.fb-line .dr-btn,html[data-theme="cinza"] #page-relatorios .relatorios-fd .filterbar.fb-line .fdsel-trigger,html[data-theme="cinza"] #page-relatorios .relatorios-fd .filterbar.fb-line .morefilters{ background:var(--surface) !important; border-color:var(--line) !important; } #page-relatorios .relatorios-fd .config-panel .filterbar.fb-line{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--elev-1); padding:0.625rem 0.75rem; margin-bottom:0.75rem; } #page-relatorios .relatorios-fd .config-panel .chips{ margin:0 0.125rem; } #page-relatorios .relatorios-fd .filterbar.fb-line{ flex-wrap:nowrap; gap:0.5625rem; align-items:stretch; } #page-relatorios .relatorios-fd .filterbar.fb-line .daterange{ flex:1 1 0; min-width:0; } #page-relatorios .relatorios-fd .filterbar.fb-line .dr-btn{ width:100%; height:2.875rem; } #page-relatorios .relatorios-fd .filterbar.fb-line .dr-btn .dr-txt{ min-width:0; overflow:hidden; } #page-relatorios .relatorios-fd .filterbar.fb-line .dr-btn .dr-v{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .filterbar.fb-line .fselect{ flex:1 1 0; min-width:0; } #page-relatorios .relatorios-fd .filterbar.fb-line .fselect select{ width:100%; height:2.875rem; font-size:0.8125rem; padding:0 1.875rem 0 0.75rem; } #page-relatorios .relatorios-fd .filterbar.fb-line .fselect svg{ right:0.6875rem; } #page-relatorios .relatorios-fd .filterbar.fb-line .morewrap{ flex:1 1 0; min-width:0; position:relative; } #page-relatorios .relatorios-fd .filterbar.fb-line .morefilters{ width:100%; height:2.875rem; justify-content:center; gap:0.5rem; } #page-relatorios .relatorios-fd .filterbar.fb-line .morefilters svg{ width:1.0625rem; height:1.0625rem; flex:none; } /* card próprio dos filtros (separado da Central de Indicadores) */ #page-relatorios .relatorios-fd .config-panel.filters-panel{ margin-top:0.875rem; } #page-relatorios .relatorios-fd .config-panel.filters-panel .filterbar.fb-line{ margin-bottom:0; } #page-relatorios .relatorios-fd .config-panel.filters-panel .chips{ margin-top:0.75rem; } /* popover "Mais filtros" */ #page-relatorios .relatorios-fd .more-pop{ position:absolute; top:3.375rem; right:0; z-index:30; width:18.75rem; background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-2); padding:0.875rem; display:none; } #page-relatorios .relatorios-fd .more-pop.open{ display:block; } #page-relatorios .relatorios-fd .more-pop h4{ font-size:0.65625rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--rel-ink-muted); margin:0 0 0.6875rem; } #page-relatorios .relatorios-fd .more-grid{ display:grid; gap:0.5625rem; } #page-relatorios .relatorios-fd .fselect.block{ display:block; } #page-relatorios .relatorios-fd .fselect.block select{ width:100%; } /* date-range control */ #page-relatorios .relatorios-fd .daterange{ position:relative; } #page-relatorios .relatorios-fd .dr-btn{ display:inline-flex; align-items:center; gap:0.625rem; height:2.875rem; padding:0 0.875rem; border:0.0625rem solid var(--line); border-radius:0.75rem; background:var(--surface); font-family:inherit; cursor:pointer; transition:.15s; } #page-relatorios .relatorios-fd .dr-btn:hover{ background:var(--field); } #page-relatorios .relatorios-fd .dr-btn .dr-ic{ color:var(--blue); display:flex; } #page-relatorios .relatorios-fd .dr-btn .dr-ic svg{ width:1.125rem; height:1.125rem; } #page-relatorios .relatorios-fd .dr-btn .dr-txt{ text-align:left; line-height:1.15; display:flex; flex-direction:column; } #page-relatorios .relatorios-fd .dr-btn .dr-k{ display:block; font-size:0.59375rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .dr-btn .dr-v{ display:block; font-size:0.84375rem; font-weight:700; color:var(--rel-ink-2); } #page-relatorios .relatorios-fd .dr-btn .dr-cv{ color:var(--rel-ink-muted); display:flex; } #page-relatorios .relatorios-fd .dr-btn .dr-cv svg{ width:0.9375rem; height:0.9375rem; } #page-relatorios .relatorios-fd .dr-pop{ position:absolute; top:3.375rem; left:0; z-index:30; width:18.75rem; background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-2); padding:0.875rem; display:none; } #page-relatorios .relatorios-fd .dr-pop.open{ display:block; } #page-relatorios .relatorios-fd .dr-presets{ display:grid; grid-template-columns:1fr 1fr; gap:0.4375rem; margin-bottom:0.75rem; } #page-relatorios .relatorios-fd .dr-presets button{ height:2.25rem; border:0.0625rem solid var(--line); border-radius:0.5625rem; background:var(--field); font-family:inherit; font-size:0.78125rem; font-weight:700; color:var(--rel-ink-2); cursor:pointer; transition:.13s; } #page-relatorios .relatorios-fd .dr-presets button:hover{ border-color:var(--blue); color:var(--blue); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .dr-presets button:hover{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .dr-presets button.on{ background:rgba(var(--rel-accent-rgb),.10); border-color:var(--blue); color:var(--blue); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .dr-presets button.on{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .dr-custom{ padding-top:0.75rem; border-top:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .dr-custom-btn{ width:100%; height:2.75rem; display:flex; align-items:center; gap:0.625rem; padding:0 0.75rem; border:0.0625rem solid var(--line); border-radius:0.625rem; background:var(--field); font-family:inherit; font-size:0.84375rem; font-weight:700; color:var(--rel-ink-2); cursor:pointer; transition:.14s; } #page-relatorios .relatorios-fd .dr-custom-btn svg{ width:1.0625rem; height:1.0625rem; color:var(--blue); } #page-relatorios .relatorios-fd .dr-custom-btn .chev{ margin-left:auto; width:0.9375rem; height:0.9375rem; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .dr-custom-btn:hover{ border-color:var(--blue); background:rgba(var(--rel-accent-rgb),.06); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .dr-custom-btn:hover{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .dr-foot{ margin-top:0.75rem; padding-top:0.75rem; border-top:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .dr-search{ width:100%; height:2.75rem; display:inline-flex; align-items:center; justify-content:center; gap:0.5625rem; border:0; border-radius:var(--radius-card, 0.25rem); background:var(--blue); color:#fff; font-family:inherit; font-size:0.84375rem; font-weight:800; letter-spacing:.01em; cursor:pointer; transition:.15s; box-shadow:none; } #page-relatorios .relatorios-fd .dr-search svg{ width:1rem; height:1rem; } #page-relatorios .relatorios-fd .dr-search:hover{ background:var(--blue-600); transform:none; box-shadow:none; } #page-relatorios .relatorios-fd .dr-search:active{ transform:none; } /* ============================================================ CALENDÁRIO DE PERÍODO (com comparação) ============================================================ */ #page-relatorios .relatorios-fd .cal-pop{ position:absolute; top:3.375rem; left:0; z-index:40; background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--elev-3); padding:0; display:none; overflow:hidden; } #page-relatorios .relatorios-fd .cal-pop.open{ display:block; animation:cal-pop-in .2s cubic-bezier(.22,1,.36,1) both; } @keyframes cal-pop-in{ from{ opacity:0; transform:translateY(-0.5rem) scale(.985); } to{ opacity:1; transform:none; } } #page-relatorios .relatorios-fd .cal-top{ display:flex; align-items:center; gap:0.75rem; padding:0.8125rem 1.125rem; border-bottom:0.0625rem solid var(--line); background:linear-gradient(180deg,#fafcff,#f3f7fd); width:0; min-width:100%; box-sizing:border-box; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cal-top{ background:linear-gradient(180deg,rgba(var(--rel-accent-rgb),0.16),rgba(var(--rel-accent-rgb),0.16)); } #page-relatorios .relatorios-fd .cal-top-l{ display:flex; align-items:center; gap:0.5625rem; } #page-relatorios .relatorios-fd .cal-back{ width:1.875rem; height:1.875rem; border-radius:0.5rem; border:0.0625rem solid var(--line); background:var(--surface); color:var(--rel-ink-faint); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.14s; } #page-relatorios .relatorios-fd .cal-back:hover{ background:var(--field); color:var(--ink); } #page-relatorios .relatorios-fd .cal-back svg{ width:0.9375rem; height:0.9375rem; } #page-relatorios .relatorios-fd .cal-top-t{ font-size:0.84375rem; font-weight:800; color:var(--ink); letter-spacing:-0.0125rem; } #page-relatorios .relatorios-fd .cal-cmp-toggle{ margin-left:auto; display:inline-flex; align-items:center; gap:0.5rem; height:2.125rem; padding:0 0.8125rem 0 0.6875rem; border:0.09375rem solid var(--blue); border-radius:var(--radius-card, 0.25rem); background:rgba(var(--rel-accent-rgb),.07); color:var(--blue); font-family:inherit; font-size:0.78125rem; font-weight:800; cursor:pointer; transition:.15s; box-shadow:none; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cal-cmp-toggle{ border:0.09375rem solid var(--rel-line); } #page-relatorios .relatorios-fd .cal-cmp-toggle .dot{ width:0.5rem; height:0.5rem; border-radius:50%; background:var(--blue); opacity:.35; transition:.15s; } #page-relatorios .relatorios-fd .cal-cmp-toggle svg{ width:1rem; height:1rem; } #page-relatorios .relatorios-fd .cal-cmp-toggle:hover{ background:rgba(var(--rel-accent-rgb),.13); } #page-relatorios .relatorios-fd .cal-cmp-toggle.on{ background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:none; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cal-cmp-toggle.on{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .cal-cmp-toggle.on .dot{ background:var(--rel-surface); opacity:1; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cal-cmp-toggle.on .dot{ background:var(--surface); } #page-relatorios .relatorios-fd .cal-cmp-toggle:disabled{ opacity:.4; cursor:not-allowed; } #page-relatorios .relatorios-fd .cal-cmp-toggle.locked{ opacity:.5; border-color:var(--line); background:var(--field); color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .cal-cmp-toggle.locked .dot{ background:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .cal-cmp-toggle.shake{ animation:cmp-shake .4s cubic-bezier(.36,.07,.19,.97); } @keyframes cmp-shake{ 10%,90%{ transform:translateX(-0.0625rem);} 20%,80%{ transform:translateX(0.125rem);} 30%,50%,70%{ transform:translateX(-0.25rem);} 40%,60%{ transform:translateX(0.25rem);} } #page-relatorios .relatorios-fd .cal-panels{ display:flex; gap:0; padding:0; align-items:stretch; } #page-relatorios .relatorios-fd .cal-panel{ width:15.75rem; padding:1.125rem 1rem 0.875rem; border-radius:0; transition:.18s; } #page-relatorios .relatorios-fd .cal-panel.is-main{ background:linear-gradient(180deg,rgba(var(--rel-accent-rgb),.05),transparent 60%); box-shadow:inset 0 0.125rem 0 var(--blue); } #page-relatorios .relatorios-fd .cal-panel.is-cmp{ background:linear-gradient(180deg,rgba(var(--rel-warn-rgb),.06),transparent 60%); box-shadow:inset 0 0.125rem 0 var(--rel-warn); } #page-relatorios .relatorios-fd .cal-panel.is-cmp2{ background:linear-gradient(180deg,rgba(var(--rel-purple-rgb),.06),transparent 60%); box-shadow:inset 0 0.125rem 0 var(--rel-purple); } #page-relatorios .relatorios-fd .cal-panel + .cal-panel{ margin-left:0; border-left:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .cal-h{ display:flex; align-items:center; gap:0.375rem; margin-bottom:0.75rem; } #page-relatorios .relatorios-fd .cal-h-m{ font-size:0.875rem; font-weight:800; color:var(--ink); text-transform:capitalize; } #page-relatorios .relatorios-fd .cal-h-y{ font-size:0.8125rem; font-weight:600; color:var(--rel-ink-muted); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .cal-h-cmp .cal-h-m{ color:var(--rel-warn-ink); } #page-relatorios .relatorios-fd .cal-h-of .cal-h-m{ color:var(--rel-warn-ink); opacity:.7; } #page-relatorios .relatorios-fd .cal-nav{ width:1.75rem; height:1.75rem; border-radius:0.5rem; border:0.0625rem solid var(--line); background:var(--surface); color:var(--rel-ink-faint); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.13s; } #page-relatorios .relatorios-fd .cal-nav:first-child{ margin-right:auto; } .cal-nav:last-child{ margin-left:auto; } #page-relatorios .relatorios-fd .cal-nav:hover:not(:disabled){ background:var(--blue); border-color:var(--blue); color:#fff; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cal-nav:hover:not(:disabled){ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .cal-nav:disabled{ opacity:.3; cursor:not-allowed; } #page-relatorios .relatorios-fd .cal-nav svg{ width:0.875rem; height:0.875rem; } #page-relatorios .relatorios-fd .cal-wd{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:0.25rem; } #page-relatorios .relatorios-fd .cal-wd span{ text-align:center; font-size:0.65625rem; font-weight:700; color:#aeb9cc; text-transform:uppercase; letter-spacing:.02em; padding:0.25rem 0; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cal-wd span{ color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); } #page-relatorios .relatorios-fd .cal-cell{ position:relative; height:2.125rem; display:flex; align-items:center; justify-content:center; cursor:pointer; } #page-relatorios .relatorios-fd .cal-num{ position:relative; z-index:2; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; font-size:0.78125rem; font-weight:600; color:#3c4a63; border-radius:0.5625rem; font-variant-numeric:tabular-nums; transition:.12s cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .cal-cell:hover .cal-num{ background:rgba(var(--rel-accent-rgb),.13); color:var(--blue); transform:translateY(-0.0625rem); } #page-relatorios .relatorios-fd .cal-cell.muted{ pointer-events:none; } .cal-cell.muted .cal-num{ color:#d3d9e2; } html[data-theme="cinza"] #page-relatorios .cal-cell.muted .cal-num{ color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .cal-cell.dis{ pointer-events:none; } .cal-cell.dis .cal-num{ color:#d3d9e2; text-decoration:line-through; } html[data-theme="cinza"] #page-relatorios .cal-cell.dis .cal-num{ color:var(--rel-accent-ink); } /* faixa de range (banda contínua atrás dos números) */ #page-relatorios .relatorios-fd .cal-cell.rng::before{ content:""; position:absolute; top:0.0625rem; bottom:0.0625rem; left:0; right:0; z-index:1; } #page-relatorios .relatorios-fd .cal-cell.rng.cap-l::before{ left:0.125rem; border-radius:0.5625rem 0 0 0.5625rem; } #page-relatorios .relatorios-fd .cal-cell.rng.cap-r::before{ right:0.125rem; border-radius:0 0.5625rem 0.5625rem 0; } #page-relatorios .relatorios-fd .cal-cell.rng.cap-l.cap-r::before{ border-radius:0.5625rem; } #page-relatorios .relatorios-fd .cal-cell.rng-main::before{ background:rgba(var(--rel-accent-rgb),.14); } #page-relatorios .relatorios-fd .cal-cell.rng-main.is-start .cal-num, .cal-cell.rng-main.is-end .cal-num{ background:var(--blue); color:#fff; box-shadow:0 0.3125rem 0.75rem -0.25rem rgba(var(--rel-accent-rgb),.7); } #page-relatorios .relatorios-fd .cal-cell.rng-main.rng-prev::before{ background:rgba(var(--rel-accent-rgb),.10); } #page-relatorios .relatorios-fd .cal-cell.rng-cmp::before{ background:rgba(var(--rel-warn-rgb),.18); } #page-relatorios .relatorios-fd .cal-cell.rng-cmp.is-start .cal-num, .cal-cell.rng-cmp.is-end .cal-num{ background:var(--rel-warn); color:#fff; } #page-relatorios .relatorios-fd .cal-cell.rng-cmp.rng-prev::before{ background:rgba(var(--rel-warn-rgb),.12); } #page-relatorios .relatorios-fd .cal-cell.rng-bad::before{ background:rgba(var(--rel-danger-bright-rgb),.14)!important; } #page-relatorios .relatorios-fd .cal-cell.rng-bad.is-start .cal-num, .cal-cell.rng-bad.is-end .cal-num{ background:var(--rel-danger-bright)!important; } #page-relatorios .relatorios-fd .cal-foot{ display:flex; align-items:center; gap:0.75rem 0.875rem; flex-wrap:wrap; padding:0.8125rem 1.125rem; border-top:0.0625rem solid var(--line); background:linear-gradient(180deg,#fafcff,#f3f7fd); width:0; min-width:100%; box-sizing:border-box; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cal-foot{ background:linear-gradient(180deg,rgba(var(--rel-accent-rgb),0.16),rgba(var(--rel-accent-rgb),0.16)); } #page-relatorios .relatorios-fd .cal-summary{ flex:1; display:flex; align-items:center; gap:0.5625rem; flex-wrap:wrap; min-width:0; } #page-relatorios .relatorios-fd .cal-sum-empty{ font-size:0.78125rem; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .cal-chip{ display:inline-flex; align-items:center; gap:0.4375rem; font-size:0.78125rem; font-weight:600; color:var(--rel-ink-2); padding:0.3125rem 0.6875rem; border-radius:62.4375rem; background:var(--field); border:0.0625rem solid var(--line); white-space:nowrap; } #page-relatorios .relatorios-fd .cal-chip .sw{ width:0.625rem; height:0.625rem; border-radius:0.1875rem; } #page-relatorios .relatorios-fd .cal-chip.main .sw{ background:var(--blue); } .cal-chip.cmp .sw{ background:var(--rel-warn); } #page-relatorios .relatorios-fd .cal-chip b{ font-weight:800; color:var(--ink); } #page-relatorios .relatorios-fd .cal-vs{ font-size:0.6875rem; font-weight:800; color:var(--rel-ink-muted); text-transform:uppercase; } #page-relatorios .relatorios-fd .cal-foot-act{ display:flex; gap:0.5625rem; flex:none; } #page-relatorios .relatorios-fd .cal-clear{ height:2.5rem; padding:0 1rem; border:0.0625rem solid var(--line); border-radius:var(--radius-card, 0.25rem); background:var(--surface); font-family:inherit; font-size:0.8125rem; font-weight:700; color:var(--rel-ink-faint); cursor:pointer; transition:.14s; box-shadow:none; } #page-relatorios .relatorios-fd .cal-clear:hover{ border-color:var(--rel-danger-bright); color:var(--rel-danger-bright); } #page-relatorios .relatorios-fd .cal-apply{ height:2.5rem; padding:0 1.375rem; border:0; border-radius:var(--radius-card, 0.25rem); background:var(--blue); color:#fff; font-family:inherit; font-size:0.84375rem; font-weight:800; cursor:pointer; transition:.15s; box-shadow:none; } #page-relatorios .relatorios-fd .cal-apply:hover:not(:disabled){ transform:none; box-shadow:none; background:var(--blue-600, #0061d6); } #page-relatorios .relatorios-fd .cal-apply:active:not(:disabled){ transform:none; box-shadow:none; } #page-relatorios .relatorios-fd .cal-apply:disabled{ opacity:.45; cursor:not-allowed; } /* ---- papel de cada painel (principal / comparações) ---- */ #page-relatorios .relatorios-fd .cal-panels{ overflow-x:auto; } #page-relatorios .relatorios-fd .cal-role{ display:flex; align-items:center; gap:0.375rem; font-size:0.65625rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--rel-icon-muted); margin-bottom:0.75rem; white-space:nowrap; min-height:1.3125rem; } #page-relatorios .relatorios-fd .cal-role .rd{ width:0.5625rem; height:0.5625rem; border-radius:0.1875rem; flex:none; } #page-relatorios .relatorios-fd .cal-role.main{ color:var(--blue); } .cal-role.main .rd{ background:var(--blue); } #page-relatorios .relatorios-fd .cal-role.cmp{ color:var(--rel-warn-ink); } .cal-role.cmp .rd{ background:var(--rel-warn); } #page-relatorios .relatorios-fd .cal-role.cmp2{ color:#6b4ce0; } .cal-role.cmp2 .rd{ background:var(--rel-purple); } #page-relatorios .relatorios-fd .cal-addp{ margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:0.25rem; height:1.3125rem; padding:0 0.5rem 0 0.375rem; border:0.0625rem dashed #c8b07a; border-radius:62.4375rem; background:rgba(var(--rel-warn-rgb),.08); color:var(--rel-warn-ink); font-family:inherit; font-size:0.59375rem; font-weight:800; letter-spacing:.01em; text-transform:none; cursor:pointer; transition:.14s; white-space:nowrap; } #page-relatorios .relatorios-fd .cal-addp svg{ width:0.75rem; height:0.75rem; } #page-relatorios .relatorios-fd .cal-addp:hover{ background:rgba(var(--rel-warn-rgb),.16); } #page-relatorios .relatorios-fd .cal-addp.on{ border-style:solid; border-color:var(--rel-purple); background:rgba(var(--rel-purple-rgb),.10); color:#6b4ce0; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cal-addp.on{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .cal-h-cmp2 .cal-h-m{ color:#6b4ce0; } /* comparação 2 — violeta */ #page-relatorios .relatorios-fd .cal-cell.rng-cmp2::before{ background:rgba(var(--rel-purple-rgb),.18); } #page-relatorios .relatorios-fd .cal-cell.rng-cmp2.is-start .cal-num, .cal-cell.rng-cmp2.is-end .cal-num{ background:var(--rel-purple); color:#fff; } #page-relatorios .relatorios-fd .cal-cell.rng-cmp2.rng-prev::before{ background:rgba(var(--rel-purple-rgb),.12); } #page-relatorios .relatorios-fd .cal-chip.cmp2 .sw{ background:var(--rel-purple); } /* ============================================================ COMPARAÇÃO ao lado de cada indicador (hierarquia + lista suspensa) atual = dominante · comparativos = subordinados, com cor do período ============================================================ */ #page-relatorios .relatorios-fd .cmp-line{ display:flex; align-items:center; flex-wrap:wrap; gap:0.375rem 0.625rem; margin-top:0.5rem; } #page-relatorios .relatorios-fd .cmp-tag{ display:inline-flex; align-items:center; gap:0.375rem; font-size:0.71875rem; font-weight:700; color:var(--rel-ink-faint); padding:0.1875rem 0.5625rem 0.1875rem 0.4375rem; border-radius:62.4375rem; background:var(--field); border:0.0625rem solid var(--line); white-space:nowrap; } #page-relatorios .relatorios-fd .cmp-tag .cd{ width:0.5rem; height:0.5rem; border-radius:0.15625rem; flex:none; } #page-relatorios .relatorios-fd .cmp-tag .cv{ font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .cmp-tag .cdelta{ display:inline-flex; align-items:center; gap:0.125rem; font-weight:800; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .cmp-tag .cdelta svg{ width:0.6875rem; height:0.6875rem; } #page-relatorios .relatorios-fd .cmp-tag .cdelta.up{ color:#15875b; } .cmp-tag .cdelta.down{ color:var(--rel-danger); } .cmp-tag .cdelta.flat{ color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .cmp-more{ display:inline-flex; align-items:center; gap:0.3125rem; height:1.5625rem; padding:0 0.625rem; border-radius:62.4375rem; border:0.0625rem solid var(--line); background:var(--surface); color:var(--rel-ink-faint); font-family:inherit; font-size:0.6875rem; font-weight:800; cursor:pointer; transition:.14s; position:relative; } #page-relatorios .relatorios-fd .cmp-more:hover{ border-color:var(--blue); color:var(--blue); background:rgba(var(--rel-accent-rgb),.05); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cmp-more:hover{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .cmp-more svg{ width:0.75rem; height:0.75rem; transition:transform .18s; } #page-relatorios .relatorios-fd .cmp-more.open svg{ transform:rotate(180deg); } #page-relatorios .relatorios-fd .cmp-wrap{ position:relative; } #page-relatorios .relatorios-fd .cmp-drop{ position:absolute; top:calc(100% + 0.5rem); left:0; z-index:30; min-width:16.125rem; padding:0; background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--elev-3); display:none; overflow:hidden; } #page-relatorios .relatorios-fd .cmp-drop.open{ display:block; animation:cmp-pop .18s cubic-bezier(.22,1,.36,1) both; } @keyframes cmp-pop{ from{ opacity:0; transform:translateY(-0.375rem) scale(.985); } to{ opacity:1; transform:none; } } #page-relatorios .relatorios-fd .cmp-drop .cdh{ font-size:0.625rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--rel-ink-muted); padding:0.75rem 0.875rem 0.5625rem; background:linear-gradient(180deg,var(--field),transparent); border-bottom:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .cmp-drop .cdbody{ padding:0.375rem; } #page-relatorios .relatorios-fd .cmp-drop .cdrow{ display:grid; grid-template-columns:0.625rem 1fr auto auto; gap:0.625rem; align-items:center; padding:0.5625rem 0.625rem; border-radius:var(--radius-card); transition:.12s; } #page-relatorios .relatorios-fd .cmp-drop .cdrow:hover{ background:var(--field); } #page-relatorios .relatorios-fd .cmp-drop .cdrow.cur{ background:rgba(var(--rel-accent-rgb),.06); } #page-relatorios .relatorios-fd .cmp-drop .cdrow.cur .cdn{ color:var(--ink); font-weight:800; } #page-relatorios .relatorios-fd .cmp-drop .cdrow .cdd{ width:0.625rem; height:0.625rem; border-radius:0.1875rem; box-shadow:0 0 0 0.1875rem var(--surface); } #page-relatorios .relatorios-fd .cmp-drop .cdrow .cdn{ font-size:0.71875rem; font-weight:700; color:var(--rel-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .cmp-drop .cdrow .cdv{ font-size:0.84375rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .cmp-drop .cdrow .cdg{ font-size:0.6875rem; font-weight:800; font-variant-numeric:tabular-nums; min-width:3rem; text-align:right; padding:0.125rem 0; } #page-relatorios .relatorios-fd .cmp-drop .cdrow .cdg.up{ color:#15875b; } .cmp-drop .cdrow .cdg.down{ color:var(--rel-danger); } .cmp-drop .cdrow .cdg.flat{ color:var(--rel-ink-muted); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cal-role.main{ color:#7fb6ff; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cal-role.main{ color:#0a2c5c; } [data-theme="dark"] .cal-role.cmp{ color:#f1b53d; } [data-theme="cinza"] .cal-role.cmp{ color:#6b3b08; } [data-theme="dark"] .cal-role.cmp2{ color:#b9a6ff; } [data-theme="cinza"] .cal-role.cmp2{ color:#3d2a7a; } html[data-theme="dark"] #page-relatorios .relatorios-fd .cmp-tag .cdelta.up, [data-theme="dark"] .cmp-drop .cdrow .cdg.up{ color:#3fc285; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cmp-tag .cdelta.up,[data-theme="cinza"] .cmp-drop .cdrow .cdg.up{ color:#0e4a2c; } html[data-theme="dark"] #page-relatorios .relatorios-fd .cmp-tag .cdelta.down, [data-theme="dark"] .cmp-drop .cdrow .cdg.down{ color:#f1797d; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cmp-tag .cdelta.down,[data-theme="cinza"] .cmp-drop .cdrow .cdg.down{ color:#6e1614; } /* ============================================================ CHART CARD — gráfico de barras empilhadas (premium) ============================================================ */ #page-relatorios .relatorios-fd .chart-card{ position:relative; overflow:hidden; border-radius:var(--radius-card); border:0.0625rem solid rgba(var(--rel-tint-rgb),.9); background: radial-gradient(40rem 23.75rem at 88% -8%, rgba(var(--rel-accent-rgb),.14), transparent 62%), radial-gradient(32.5rem 22.5rem at 4% 108%, rgba(var(--rel-accent-strong-rgb),.10), transparent 60%), linear-gradient(165deg,#fbfdff 0%,#f2f7fd 58%,#eaf1fb 100%); box-shadow:var(--elev-3); } #page-relatorios .relatorios-fd .chart-head{ position:relative; z-index:2; display:flex; align-items:flex-start; gap:0.875rem; padding:1.375rem 1.625rem 0.875rem; } #page-relatorios .relatorios-fd .chart-head > div:first-child, #page-relatorios .relatorios-fd .tk-head > div:first-child, #page-relatorios .relatorios-fd .clientes-header-main{ min-width:0; text-align:left; } #page-relatorios .relatorios-fd .chart-head .ch-t, #page-relatorios .relatorios-fd .tk-head .tk-t, #page-relatorios .relatorios-fd .clientes-title{ margin:0; font-size:1.125rem; font-weight:800; letter-spacing:-0.021875rem; line-height:1.22; color:var(--ink); text-align:left; } #page-relatorios .relatorios-fd .chart-head .ch-s, #page-relatorios .relatorios-fd .tk-head .tk-s, #page-relatorios .relatorios-fd .clientes-sub{ margin:0.375rem 0 0; font-size:0.8125rem; font-weight:500; line-height:1.4; letter-spacing:0; color:var(--muted); text-align:left; } #page-relatorios .relatorios-fd .chart-head .sp{ flex:1; } #page-relatorios .relatorios-fd .chart-head .ch-tot{ display:flex; flex-direction:column; align-items:flex-end; gap:0.25rem; text-align:right; margin-right:0.25rem; } #page-relatorios .relatorios-fd .chart-head .ch-tot .ch-tot-main{ display:flex; flex-direction:column; align-items:flex-end; gap:0.125rem; min-width:0; } #page-relatorios .relatorios-fd .chart-head .ch-tot b{ font-size:2.125rem; font-weight:800; color:var(--ink); letter-spacing:-0.075rem; line-height:1; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .chart-head .ch-tot span{ font-size:0.65625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } #page-relatorios .relatorios-fd .chart-head .ch-delta{ display:inline-flex; align-items:center; justify-content:flex-end; gap:0.25rem; margin:0; font-size:0.65625rem; font-weight:700; padding:0; border-radius:0; background:transparent; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.02em; line-height:1.35; white-space:nowrap; } #page-relatorios .relatorios-fd .chart-head .ch-delta svg{ width:0.6875rem; height:0.6875rem; } #page-relatorios .relatorios-fd .chart-head .ch-delta span{ font-size:inherit; font-weight:inherit; letter-spacing:.02em; text-transform:none; opacity:1; } #page-relatorios .relatorios-fd .chart-head .ch-delta.up{ background:transparent; color:var(--rel-accent-strong); } #page-relatorios .relatorios-fd .chart-head .ch-delta.down{ background:transparent; color:#15804a; } #page-relatorios .relatorios-fd .chart-head .ch-act{ display:flex; gap:0.4375rem; } #page-relatorios .relatorios-fd .cc-ibtn{ width:2.375rem; height:2.375rem; border-radius:0.625rem; border:0.0625rem solid var(--line); background:rgba(var(--rel-surface-rgb),.7); color:var(--rel-ink-faint); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; } #page-relatorios .relatorios-fd .cc-ibtn:hover{ background:var(--rel-surface); color:var(--ink); box-shadow:var(--shadow-1); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cc-ibtn:hover{ background:var(--surface); } #page-relatorios .relatorios-fd .cc-ibtn svg{ width:1.0625rem; height:1.0625rem; } #page-relatorios .relatorios-fd .chart-body{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) 15.5rem; gap:1.125rem; padding:0.875rem 1.625rem 0.875rem; align-items:stretch; } /* plot */ #page-relatorios .relatorios-fd .plot{ display:grid; grid-template-columns:2.875rem minmax(0,1fr); grid-template-rows:1fr auto; } #page-relatorios .relatorios-fd .plot .yaxis{ position:relative; grid-row:1; grid-column:1; } #page-relatorios .relatorios-fd .plot .ytick{ position:absolute; right:0.625rem; transform:translateY(50%); font-size:0.71875rem; font-weight:600; color:var(--rel-ink-muted); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .plot .gridbars{ position:relative; grid-row:1; grid-column:2; height:30rem; } #page-relatorios .relatorios-fd .plot .gline{ position:absolute; left:0; right:0; height:0.0625rem; background:rgba(var(--rel-shadow-2-rgb),.045); } #page-relatorios .relatorios-fd .plot .gline.base{ background:rgba(var(--rel-shadow-2-rgb),.13); } /* camada de anotação — linhas de média e meta (Sprint 2) */ #page-relatorios .relatorios-fd .plot .annot{ position:absolute; inset:0; pointer-events:none; z-index:4; } #page-relatorios .relatorios-fd .plot .aline{ position:absolute; left:0; right:0; height:0; border-top:0.09375rem dashed; } #page-relatorios .relatorios-fd .plot .aline.avg{ border-color:rgba(10,61,122,.55); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .plot .aline.avg{ border-color:var(--rel-line); } #page-relatorios .relatorios-fd .plot .aline.meta{ border-color:rgba(var(--rel-danger-bright-rgb),.6); } #page-relatorios .relatorios-fd .plot .aline .atag{ position:absolute; right:0; display:inline-flex; align-items:baseline; gap:0.3125rem; font-size:0.65625rem; font-weight:700; font-variant-numeric:tabular-nums; padding:0.125rem 0.5rem; border-radius:0.375rem; white-space:nowrap; box-shadow:var(--elev-1); } #page-relatorios .relatorios-fd .plot .aline.avg .atag{ bottom:0.125rem; } #page-relatorios .relatorios-fd .plot .aline.meta .atag{ top:0.125rem; } #page-relatorios .relatorios-fd .plot .aline .atag b{ font-size:0.59375rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } #page-relatorios .relatorios-fd .plot .aline.avg .atag{ background:#0a3d7a; color:#dbe8fb; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .plot .aline.avg .atag{ background:var(--rel-accent-ink); color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .plot .aline.avg .atag b{ color:#fff; } #page-relatorios .relatorios-fd .plot .aline.meta .atag{ background:var(--rel-surface); color:var(--rel-ink-muted); border:0.0625rem solid rgba(var(--rel-danger-bright-rgb),.35); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .plot .aline.meta .atag{ background:var(--surface); } #page-relatorios .relatorios-fd .plot .aline.meta .atag b{ color:var(--rel-danger-ink); } #page-relatorios .relatorios-fd .plot .bars{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-around; padding:0 1.5%; } #page-relatorios .relatorios-fd .plot .xrow{ grid-row:2; grid-column:2; display:flex; justify-content:space-around; padding:0.625rem 1.5% 0.25rem; } #page-relatorios .relatorios-fd .plot .xlab{ flex:1; text-align:center; font-size:0.78125rem; font-weight:600; color:var(--rel-ink-faint); padding:0 0.25rem; display:flex; flex-direction:column; align-items:center; gap:0.1875rem; } #page-relatorios .relatorios-fd .plot .xlab .xt{ text-wrap:balance; line-height:1.2; } /* bar column + stack — visual "tiles" empilhados (premium) */ #page-relatorios .relatorios-fd .col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; } #page-relatorios .relatorios-fd .stack{ position:relative; width:3.5rem; max-width:72%; display:flex; flex-direction:column; gap:0.125rem; transition:transform .18s cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .plot .stack{ filter:none; } #page-relatorios .relatorios-fd .col:hover .stack{ transform:translateY(-0.1875rem); } #page-relatorios .relatorios-fd .seg{ position:relative; cursor:pointer; border-radius:0; overflow:hidden; box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.24); transition:filter .14s, transform .14s; } #page-relatorios .relatorios-fd .seg::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(var(--rel-surface-rgb),.20), rgba(var(--rel-surface-rgb),0) 48%); } #page-relatorios .relatorios-fd .plot .stack .seg:first-child{ border-radius:0.5625rem 0.5625rem 0 0; } #page-relatorios .relatorios-fd .plot .stack .seg:last-child{ border-radius:0; } #page-relatorios .relatorios-fd .plot .stack .seg:only-child{ border-radius:0.5625rem 0.5625rem 0 0; } #page-relatorios .relatorios-fd .seg:hover{ filter:brightness(1.07) saturate(1.05); } #page-relatorios .relatorios-fd .seg.dim{ opacity:.3; filter:saturate(.55); } #page-relatorios .relatorios-fd .stack .cap, .col > .cap{ font-size:0.875rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.01875rem; margin-bottom:0.5rem; line-height:1; transition:transform .16s; display:inline-flex; align-items:baseline; justify-content:center; gap:0.35em; } #page-relatorios .relatorios-fd .col > .cap .cap-qty{ color:var(--blue); } #page-relatorios .relatorios-fd .col > .cap .cap-pct{ color:var(--ink); } #page-relatorios .relatorios-fd .col:hover > .cap{ transform:translateY(-0.1875rem); } /* legend — painel alto, com rolagem interna e margens equilibradas */ #page-relatorios .relatorios-fd .legend{ position:relative; align-self:stretch; min-height:0; background:rgba(var(--rel-surface-rgb),.55); border:0.0625rem solid rgba(255,255,255,.8); border-radius:var(--radius-card); backdrop-filter:blur(0.25rem); } #page-relatorios .relatorios-fd .legend h4{ position:absolute; top:0.9375rem; left:1.125rem; margin:0; font-size:0.625rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .leg-list{ position:absolute; left:0.875rem; right:0.5rem; top:2.5rem; bottom:0.875rem; overflow-y:auto; display:flex; flex-direction:column; gap:0.0625rem; padding-right:0.375rem; } #page-relatorios .relatorios-fd .leg-list::-webkit-scrollbar{ width:0.25rem; } #page-relatorios .relatorios-fd .leg-list::-webkit-scrollbar-thumb{ background:var(--rel-scroll-thumb, rgba(10,120,240,.28)); border-radius:62.4375rem; } #page-relatorios .relatorios-fd .leg-list::-webkit-scrollbar-thumb:hover{ background:var(--rel-scroll-thumb-hover, rgba(10,120,240,.42)); } #page-relatorios .relatorios-fd .leg-list::-webkit-scrollbar-track{ background:transparent; } #page-relatorios .relatorios-fd .leg-i{ display:flex; align-items:center; gap:0.5625rem; padding:0.375rem 0.4375rem; border-radius:0.5rem; cursor:pointer; transition:.12s; } #page-relatorios .relatorios-fd .leg-i:hover{ background:rgba(var(--rel-shadow-rgb),.05); } #page-relatorios .relatorios-fd .leg-i .sw{ width:0.8125rem; height:0.8125rem; border-radius:0.25rem; flex:none; box-shadow:inset 0 0 0 0.0625rem rgba(var(--rel-shadow-pure-rgb),.06); } #page-relatorios .relatorios-fd .leg-i .nm{ font-size:0.78125rem; font-weight:600; color:var(--rel-ink-2); line-height:1.2; } #page-relatorios .relatorios-fd .leg-i .lv{ margin-left:auto; font-size:0.71875rem; font-weight:700; color:var(--rel-ink-muted); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .leg-i.off .nm{ color:#aeb9cc; text-decoration:line-through; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .leg-i.off .nm{ color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .leg-i.off .sw{ background:#d4dae3 !important; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .leg-i.off .sw{ background:rgba(var(--rel-accent-rgb),0.16) !important; } #page-relatorios .relatorios-fd .leg-i.off .lv{ color:#c2cad6; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .leg-i.off .lv{ color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .chart-foot{ display:none !important; } #page-relatorios .relatorios-fd .chart-foot .upd{ font-size:0.75rem; color:var(--muted); display:inline-flex; align-items:center; gap:0.4375rem; } #page-relatorios .relatorios-fd .chart-foot .upd .live{ width:0.4375rem; height:0.4375rem; border-radius:50%; background:var(--blue); box-shadow:0 0 0 0.1875rem rgba(var(--rel-accent-rgb),.22); } #page-relatorios .relatorios-fd .chart-foot .sp{ flex:1; } #page-relatorios .relatorios-fd .chart-foot .hint-click{ font-size:0.75rem; color:var(--rel-ink-muted); display:inline-flex; align-items:center; gap:0.375rem; } #page-relatorios .relatorios-fd .chart-foot .hint-click svg{ width:0.875rem; height:0.875rem; } /* ============================================================ TOOLTIP (hover na pilha / legenda) ============================================================ */ #page-relatorios .relatorios-fd .chart-tip{ position:fixed; z-index:120; min-width:7.5rem; max-width:17.5rem; background:var(--surface); border:0.0625rem solid var(--line); border-radius:0.6875rem; box-shadow:0 1.125rem 2.75rem -1rem rgba(8,20,48,.45); padding:0.625rem 0.8125rem; pointer-events:none; opacity:0; transform:translateY(0.25rem); transition:opacity .12s, transform .12s; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .chart-tip{ box-shadow:0 1.125rem 2.75rem -1rem rgba(var(--rel-shadow-rgb),0.45); } #page-relatorios .relatorios-fd .chart-tip.show{ opacity:1; transform:translateY(0); } #page-relatorios .relatorios-fd .chart-tip .tp-h{ font-size:0.8125rem; font-weight:800; color:var(--ink); letter-spacing:-0.0125rem; } #page-relatorios .relatorios-fd .chart-tip .tp-h.solo{ font-weight:700; } #page-relatorios .relatorios-fd .chart-tip .tp-r{ display:flex; align-items:center; gap:0.5625rem; margin-top:0.5rem; } #page-relatorios .relatorios-fd .chart-tip .tp-r .sw{ width:0.8125rem; height:0.8125rem; border-radius:0.25rem; flex:none; } #page-relatorios .relatorios-fd .chart-tip .tp-r .nm{ font-size:0.78125rem; font-weight:600; color:var(--rel-ink-2); } #page-relatorios .relatorios-fd .chart-tip .tp-r .vl{ margin-left:auto; font-size:0.8125rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; padding-left:1.125rem; } #page-relatorios .relatorios-fd .chart-tip .tp-pct{ font-size:0.6875rem; color:var(--muted); margin-top:0.3125rem; } /* ============================================================ DRAWER — drill-down (clique numa pilha) ============================================================ */ #page-relatorios .relatorios-fd .dd-overlay{ position:fixed; inset:0; z-index:var(--app-layer-scrim,2050); background:rgba(8,16,38,.38); opacity:0; pointer-events:none; transition:opacity .2s; backdrop-filter:none; -webkit-backdrop-filter:none; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .dd-overlay{ background:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .dd-overlay.open{ opacity:1; pointer-events:auto; } #page-relatorios .relatorios-fd .drawer{ position:fixed; top:0; right:0; bottom:0; z-index:var(--app-layer-drawer,2051); width:28.75rem; max-width:94vw; background:var(--surface); isolation:isolate; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; transform:translateX(100%); transition:transform .26s cubic-bezier(.4,.0,.2,1), width .34s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:row; overflow:hidden; } #page-relatorios .relatorios-fd .drawer.open{ transform:none; } /* Largura expandida canônica em relatorios-shell.css (--rel-dw-*). Fallback local simples (sem calc aninhado). */ #page-relatorios .relatorios-fd .drawer.expanded{ width:var(--rel-dw-expanded-w, 57.5rem); } /* painel de detalhe (esquerda) — mantém largura fixa */ #page-relatorios .relatorios-fd .dw-detail{ width:var(--rel-dw-detail-w, 28.75rem); flex:none; display:flex; flex-direction:column; height:100%; min-height:0; } /* painel de conversa (direita) — revelado ao expandir */ #page-relatorios .relatorios-fd .dw-convo{ flex:1 1 auto; min-width:0; width:0; display:flex; flex-direction:column; height:100%; min-height:0; background:#eef2f7; border-left:0.0625rem solid var(--line); opacity:0; transition:opacity .22s ease .06s; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .dw-convo{ background:rgba(var(--rel-accent-rgb),0.16); } #page-relatorios .relatorios-fd .drawer.expanded .dw-convo{ opacity:1; width:auto; flex:1 1 0; min-width:0; max-width:none; } #page-relatorios .relatorios-fd .cv-head{ flex:none; display:flex; align-items:center; gap:0.6875rem; padding:0.9375rem 1.125rem; background:var(--surface); border-bottom:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .cv-ava{ width:2.5rem; height:2.5rem; border-radius:0.6875rem; flex:none; display:flex; align-items:center; justify-content:center; font-size:0.875rem; font-weight:700; color:#fff; background:linear-gradient(150deg,#2b9bff,#0046d6); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cv-ava{ background:linear-gradient(150deg,var(--rel-accent-ink),var(--rel-accent-ink)); } #page-relatorios .relatorios-fd .cv-id{ min-width:0; flex:1; } #page-relatorios .relatorios-fd .cv-name{ font-size:0.90625rem; font-weight:800; color:var(--ink); letter-spacing:-0.0125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .cv-meta{ font-size:0.71875rem; color:var(--muted); margin-top:0.0625rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .cv-chan{ flex:none; color:#1eb45c; } .cv-chan svg{ width:1.375rem; height:1.375rem; } /* Thread: host only — bolhas em chats-timeline-bubbles-skin.css */ #page-relatorios .relatorios-fd .cv-thread{ flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; padding:1.125rem 1.125rem 0.5rem; display:flex; flex-direction:column; gap:0.875rem; } #page-relatorios .relatorios-fd .cv-day{ align-self:center; font-size:0.65625rem; font-weight:700; color:var(--rel-icon-muted); background:rgba(var(--rel-shadow-rgb),.06); padding:0.25rem 0.75rem; border-radius:62.4375rem; margin:0.125rem 0 0.5rem; text-transform:capitalize; } #page-relatorios .relatorios-fd .cv-note{ flex:none; display:flex; align-items:center; justify-content:center; gap:0.4375rem; padding:0.6875rem 1rem; font-size:0.71875rem; font-weight:600; color:var(--rel-ink-muted); background:var(--surface); border-top:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .cv-note svg{ width:0.875rem; height:0.875rem; } #page-relatorios .relatorios-fd .drawer .dw-head{ position:relative; padding:1.375rem 1.5rem 1.125rem; color:#fff; flex:none; overflow:hidden; background:linear-gradient(155deg,#0a2a6b,#0046b8); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .drawer .dw-head{ background:linear-gradient(155deg,var(--rel-accent-ink),var(--rel-accent-ink)); } #page-relatorios .relatorios-fd .drawer .dw-head::before{ content:""; position:absolute; inset:0; background:linear-gradient(155deg,#0a2a6b,#0046b8); z-index:0; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .drawer .dw-head::before{ background:linear-gradient(155deg,var(--rel-accent-ink),var(--rel-accent-ink)); } #page-relatorios .relatorios-fd .drawer .dw-head > *{ position:relative; z-index:1; } #page-relatorios .relatorios-fd .drawer .dw-crumb{ display:flex; align-items:center; gap:0.5rem; font-size:0.75rem; font-weight:600; color:#bcd2f5; margin-bottom:0.75rem; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .drawer .dw-crumb{ color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .drawer .dw-crumb .seg-sw{ width:0.6875rem; height:0.6875rem; border-radius:0.1875rem; } #page-relatorios .relatorios-fd .drawer .dw-crumb svg{ width:0.8125rem; height:0.8125rem; opacity:.7; } #page-relatorios .relatorios-fd .drawer .dw-title{ font-size:1.3125rem; font-weight:800; letter-spacing:-0.025rem; } #page-relatorios .relatorios-fd .drawer .dw-sub{ font-size:0.8125rem; color:#c4d6f5; margin-top:0.25rem; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .drawer .dw-sub{ color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .drawer .dw-x{ position:absolute; top:1.125rem; right:1.125rem; z-index:2; width:2.25rem; height:2.25rem; border-radius:0.625rem; border:0.0625rem solid rgba(255,255,255,.22); background:rgba(var(--rel-surface-rgb),.12); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .drawer .dw-x{ border:0.0625rem solid var(--rel-line); } #page-relatorios .relatorios-fd .drawer .dw-x:hover{ background:rgba(var(--rel-surface-rgb),.22); } #page-relatorios .relatorios-fd .drawer .dw-x svg{ width:1.125rem; height:1.125rem; } #page-relatorios .relatorios-fd .drawer .dw-kpis{ display:flex; gap:0.625rem; margin-top:1.125rem; } #page-relatorios .relatorios-fd .drawer .dw-kpi{ flex:1; background:rgba(var(--rel-surface-rgb),.12); border:0.0625rem solid rgba(255,255,255,.16); border-radius:var(--radius-card); padding:0.625rem 0.75rem; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .drawer .dw-kpi{ border:0.0625rem solid var(--rel-line); } #page-relatorios .relatorios-fd .drawer .dw-kpi .v{ font-size:1.25rem; font-weight:800; letter-spacing:-0.03125rem; line-height:1; } #page-relatorios .relatorios-fd .drawer .dw-kpi .l{ font-size:0.625rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#bcd2f5; margin-top:0.3125rem; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .drawer .dw-kpi .l{ color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .drawer .dw-body{ flex:1; overflow-y:auto; padding:1.25rem 1.5rem 1.625rem; } #page-relatorios .relatorios-fd .dw-sec-t{ font-size:0.6875rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--rel-ink-muted); margin:0 0 0.8125rem; } /* subcategoria bars */ #page-relatorios .relatorios-fd .subbars{ display:flex; flex-direction:column; gap:0.75rem; margin-bottom:1.625rem; } #page-relatorios .relatorios-fd .subbar .sb-top{ display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.375rem; } #page-relatorios .relatorios-fd .subbar .sb-nm{ font-size:0.8125rem; font-weight:600; color:var(--rel-ink-2); } #page-relatorios .relatorios-fd .subbar .sb-vl{ margin-left:auto; font-size:0.8125rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .subbar .sb-pc{ font-size:0.71875rem; font-weight:600; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .subbar .sb-track{ height:0.5625rem; border-radius:0.375rem; background:var(--field); overflow:hidden; } #page-relatorios .relatorios-fd .subbar .sb-fill{ height:100%; border-radius:0.375rem; transform-origin:left; transition:width .5s cubic-bezier(.4,0,.2,1); } /* tickets list */ #page-relatorios .relatorios-fd .dw-tk{ display:flex; align-items:center; gap:0.75rem; padding:0.75rem 0; border-bottom:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .dw-tk:last-child{ border-bottom:0; } #page-relatorios .relatorios-fd .dw-tk .tk-av{ width:2.375rem; height:2.375rem; border-radius:0.625rem; background:linear-gradient(150deg,#2b9bff,#0046d6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.8125rem; font-weight:700; flex:none; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .dw-tk .tk-av{ background:linear-gradient(150deg,var(--rel-accent-ink),var(--rel-accent-ink)); } #page-relatorios .relatorios-fd .dw-tk .tk-main{ min-width:0; } #page-relatorios .relatorios-fd .dw-tk .tk-id{ font-size:0.75rem; font-weight:800; color:var(--blue); } #page-relatorios .relatorios-fd .dw-tk .tk-nm{ font-size:0.84375rem; font-weight:700; color:var(--ink); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .dw-tk .tk-meta{ font-size:0.71875rem; color:var(--muted); margin-top:0.0625rem; } #page-relatorios .relatorios-fd .dw-tk .tk-r{ margin-left:auto; text-align:right; flex:none; } #page-relatorios .relatorios-fd .dw-tk .tk-st{ display:inline-flex; align-items:center; gap:0.3125rem; font-size:0.6875rem; font-weight:700; padding:0.1875rem 0.5rem; border-radius:62.4375rem; } #page-relatorios .relatorios-fd .dw-tk .tk-st.at{ background:rgba(var(--rel-accent-rgb),.12); color:var(--rel-accent-strong); } .dw-tk .tk-st.at .d{ background:var(--blue); } #page-relatorios .relatorios-fd .dw-tk .tk-st.fi{ background:var(--field); color:var(--rel-ink-faint); } .dw-tk .tk-st.fi .d{ background:var(--rel-icon-muted); } #page-relatorios .relatorios-fd .dw-tk .tk-st .d{ width:0.375rem; height:0.375rem; border-radius:50%; } #page-relatorios .relatorios-fd .dw-tk .tk-tm{ font-size:0.6875rem; color:var(--rel-ink-muted); margin-top:0.1875rem; } #page-relatorios .relatorios-fd .drawer .dw-foot{ flex:none; padding:0.875rem 1.5rem; border-top:0.0625rem solid var(--line); display:flex; gap:0.625rem; background:var(--surface); } /* drawer — detalhes de ticket (lista de campos + tempos) */ #page-relatorios .relatorios-fd .dw-dls{ display:grid; grid-template-columns:1fr 1fr; gap:0.0625rem; background:var(--line); border:0.0625rem solid var(--line); border-radius:var(--radius-card); overflow:hidden; margin-bottom:1.5rem; } #page-relatorios .relatorios-fd .dw-dl{ background:var(--surface); padding:0.6875rem 0.8125rem; } #page-relatorios .relatorios-fd .dw-dl .dl-k{ display:block; font-size:0.65625rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .dw-dl .dl-v{ display:block; font-size:0.84375rem; font-weight:700; color:var(--ink); margin-top:0.1875rem; } #page-relatorios .relatorios-fd .dw-times{ display:flex; gap:0.75rem; } #page-relatorios .relatorios-fd .dw-time{ flex:1; border:0.0625rem solid var(--line); border-radius:var(--radius-card); padding:0.8125rem 0.875rem; background:var(--field); } #page-relatorios .relatorios-fd .dw-time .tl{ font-size:0.6875rem; font-weight:700; color:var(--muted); } #page-relatorios .relatorios-fd .dw-time .tv{ font-size:1.3125rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.03125rem; margin:0.3125rem 0 0.5625rem; } /* ============================================================ VISÃO TICKETS — data grid ============================================================ */ #page-relatorios .relatorios-fd .tickets-card{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--elev-3); overflow:hidden; } #page-relatorios .relatorios-fd .tk-head{ display:flex; align-items:flex-start; gap:0.875rem; padding:1.375rem 1.625rem 0.875rem; border-bottom:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .tk-head .sp{ flex:1; } #page-relatorios .relatorios-fd .tk-pill{ font-size:0.78125rem; color:var(--muted); font-weight:600; white-space:nowrap; } #page-relatorios .relatorios-fd .tk-pill b{ color:var(--ink); font-weight:800; font-size:0.875rem; } /* KPI strip — hierarquia: 1 herói + apoios, algarismos tabulares */ #page-relatorios .relatorios-fd .tk-stats{ display:flex; gap:0; padding:0.875rem 1.375rem; border:0.0625rem solid color-mix(in srgb, var(--blue,#007bff) 16%, var(--line)); border-bottom:0.0625rem solid color-mix(in srgb, var(--blue,#007bff) 12%, var(--line)); background:linear-gradient( 148deg, color-mix(in srgb, #f4f9ff 90%, var(--rel-surface)) 0%, color-mix(in srgb, #c9ddf2 48%, #e6f0fa) 42%, color-mix(in srgb, #dce9f7 72%, var(--rel-surface)) 68%, color-mix(in srgb, #b8d0eb 38%, #edf4fc) 100% ); box-shadow: 0 0.0625rem 0.125rem rgba(var(--rel-shadow-rgb),.07), inset 0 0.0625rem 0 rgba(255,255,255,.78), inset 0 -0.0625rem 0 rgba(var(--rel-shadow-rgb),.05); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tk-stats{ border:0.0625rem solid var(--rel-line); border-bottom:0.0625rem solid var(--rel-line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tk-stats{ background:linear-gradient( 148deg,color-mix(in srgb,var(--surface-2) 90%,var(--surface)) 0%,color-mix(in srgb,#a8b7c8 48%,#c0c7ce) 42%,color-mix(in srgb,#b0bcca 72%,var(--surface)) 68%,color-mix(in srgb,#9fb0c4 38%,#c0c7ce) 100% ); } #page-relatorios .relatorios-fd .tk-stat{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:0 1.125rem; border-left:0.0625rem solid color-mix(in srgb, var(--blue,#007bff) 14%, var(--line)); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tk-stat{ border-left:0.0625rem solid var(--rel-line); } #page-relatorios .relatorios-fd .tk-stat:first-child{ border-left:0; } #page-relatorios .relatorios-fd .tk-stat .sv{ font-size:1.125rem; font-weight:700; color:var(--rel-ink-2); font-variant-numeric:tabular-nums; letter-spacing:-0.025rem; line-height:1; text-align:center; } #page-relatorios .relatorios-fd .tk-stat .sv b{ font-weight:800; } #page-relatorios .relatorios-fd .tk-stat .sv i{ font-style:normal; font-size:0.8125rem; font-weight:600; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .tk-stat .sl{ font-size:0.65625rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--rel-ink-muted); margin:0 0 0.375rem; line-height:1.2; text-align:center; } #page-relatorios .relatorios-fd .tk-stat.hero .sv{ font-size:1.625rem; color:var(--blue); letter-spacing:-0.0625rem; } #page-relatorios .relatorios-fd .tk-stat.hero .sl{ color:#5b8fd6; } #page-relatorios .relatorios-fd .tk-stat.alert .sv{ color:var(--rel-danger-ink); } #page-relatorios .relatorios-fd .tk-stat.alert .sl{ color:#c0867f; } #page-relatorios .relatorios-fd .tk-tablewrap{ overflow:auto; max-height:40rem; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--rel-scroll-thumb, rgba(10,120,240,.28)) transparent; position:relative; isolation:isolate; --tk-thead-band-h:3.25rem; } #page-relatorios .relatorios-fd .tk-tablewrap::-webkit-scrollbar{ width:0.25rem; height:0.25rem; } #page-relatorios .relatorios-fd .tk-tablewrap::-webkit-scrollbar-track{ background:transparent; } #page-relatorios .relatorios-fd .tk-tablewrap::-webkit-scrollbar-thumb{ background:var(--rel-scroll-thumb, rgba(10,120,240,.28)); border-radius:62.4375rem; } #page-relatorios .relatorios-fd .tk-tablewrap::-webkit-scrollbar-thumb:hover{ background:var(--rel-scroll-thumb-hover, rgba(10,120,240,.42)); } #page-relatorios .relatorios-fd .tk-tablewrap::before{ content:""; position:sticky; top:0; left:0; right:0; z-index:2; display:block; height:var(--tk-thead-band-h, 3rem); margin-bottom:calc(-1 * var(--tk-thead-band-h, 3rem)); pointer-events:none; background:var(--blue,#007bff); border-radius:var(--radius-card) var(--radius-card) 0 0; } #page-relatorios .relatorios-fd .tk-tablewrap::after{ content:none !important; display:none !important; } #page-relatorios .relatorios-fd .tk-colrow th{ border-bottom:0; } #page-relatorios .relatorios-fd .tk-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:0.8125rem; } /* cabeçalho de colunas (sticky) */ #page-relatorios .relatorios-fd .tk-table thead th{ background:transparent; color:#eaf1ff; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tk-table thead th{ color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .tk-colrow th{ position:sticky; top:0; z-index:3; font-weight:700; font-size:0.75rem; text-align:left; padding:0.8125rem 0.5rem; white-space:nowrap; cursor:pointer; user-select:none; border-right:0; box-sizing:border-box; } #page-relatorios .relatorios-fd .tk-table thead th:first-child, #page-relatorios .relatorios-fd .tk-table tbody td:first-child{ position:static; left:auto; box-shadow:none; } #page-relatorios .relatorios-fd .tk-colrow th:hover{ background:rgba(var(--rel-surface-rgb),.08); } #page-relatorios .relatorios-fd .tk-colrow th.sorted{ background:transparent; } #page-relatorios .relatorios-fd .tk-colrow th.sorted::after{ content:"▲"; font-size:0.5rem; margin-left:0.375rem; display:inline-block; opacity:1; color:#fff; text-shadow: 0 0 0.25rem rgba(255, 255, 255, 0.95), 0 0 0.625rem rgba(var(--rel-cyan-rgb), 0.9), 0 0 1rem rgba(255, 255, 255, 0.55); } #page-relatorios .relatorios-fd .tk-colrow th.sorted.desc::after{ content:"▼"; } #page-relatorios .relatorios-fd .tk-colrow th.c-perf-h{ width:7rem; } /* separador entre grupos de colunas — desativado na lista de tickets */ #page-relatorios .relatorios-fd .tk-table .tk-colrow th.grp-start, #page-relatorios .relatorios-fd .tk-table tbody td.grp-start{ box-shadow:none; } #page-relatorios .relatorios-fd .tk-colrow th.grp-start{ box-shadow:none; } #page-relatorios .relatorios-fd .tk-table tbody td{ padding:0.5625rem 0.5rem; border-bottom:0.0625rem solid var(--line); color:#3c4a63; white-space:nowrap; } #page-relatorios .relatorios-fd .tk-table tbody tr{ cursor:pointer; transition:background .12s; } #page-relatorios .relatorios-fd .tk-table tbody tr:nth-child(even){ background:var(--rel-surface-sunken); } #page-relatorios .relatorios-fd .tk-table tbody tr:hover{ background:rgba(var(--rel-accent-rgb),.07); } #page-relatorios .relatorios-fd .tk-table tbody tr:hover td:first-child{ box-shadow:inset 0.1875rem 0 0 var(--blue); } #page-relatorios .relatorios-fd .tk-table tbody tr:hover .c-proto{ color:var(--blue-600); } #page-relatorios .relatorios-fd .c-proto{ font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums; letter-spacing:0.0125rem; } #page-relatorios .relatorios-fd .c-date{ color:var(--muted); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .c-client .cli-nm{ font-weight:600; color:var(--ink); max-width:12.5rem; overflow:hidden; text-overflow:ellipsis; display:block; } #page-relatorios .relatorios-fd .tk-table tbody td.c-cat{ display:table-cell; white-space:normal; vertical-align:middle; height:auto; border-radius:0; background:transparent; font-weight:inherit; font-size:inherit; } #page-relatorios .relatorios-fd .c-cat .cat-c{ display:block; font-weight:600; color:var(--ink); } #page-relatorios .relatorios-fd .c-cat .cat-m{ display:block; font-size:0.71875rem; color:var(--muted); margin-top:0.0625rem; } /* células de performance — número + barra */ #page-relatorios .relatorios-fd .tickets-card{ --tk-list-row-h:var(--fd-list-thead-h, 3.125rem); --tk-list-pager-h:var(--fd-list-pager-h, 3.125rem); /* mesma altura do cabeçalho de colunas */ --tk-list-visible:14; --tk-list-scroll-h:calc(var(--tk-list-row-h) * (1 + var(--tk-list-visible))); --tk-list-visible-h:calc(var(--tk-list-scroll-h) + var(--tk-list-pager-h)); --tk-thead-grad:var(--fd-list-thead-grad, linear-gradient(145deg, #163f9a 0%, #1a4db8 30%, #2f6fe0 64%, #5aa0ff 100%)); --tk-thead-edge:var(--fd-list-thead-edge, inset 0 0.0625rem 0 rgba(255,255,255,.34), inset 0 -0.0625rem 0 rgba(8,32,90,.16)); } #page-relatorios .relatorios-fd .tickets-card .tk-foot{ display:none; } #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap, #page-relatorios .relatorios-fd #view-tickets.tickets-card:not(.chart-card) > .tk-tablewrap{ min-height:var(--tk-list-visible-h); max-height:var(--tk-list-visible-h); height:var(--tk-list-visible-h); overflow:hidden; position:relative; display:flex; flex-direction:column; } #page-relatorios .relatorios-fd .tickets-card .tk-table-scroll{ flex:none; height:var(--tk-list-scroll-h); min-height:var(--tk-list-scroll-h); max-height:var(--tk-list-scroll-h); overflow:hidden; position:relative; } #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table-scroll::after, #page-relatorios .relatorios-fd .tickets-card .tk-table-scroll.is-empty::after{ content:none; } #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty::after{ content:none; } #page-relatorios .relatorios-fd .tickets-card .tk-list-pager.list-pagination-bar, #page-relatorios .relatorios-fd .tickets-card #tkListaPagination.list-pagination-bar{ flex:none; display:flex; align-items:center; width:100%; height:var(--tk-list-pager-h, 3.125rem); min-height:var(--tk-list-pager-h, 3.125rem); max-height:var(--tk-list-pager-h, 3.125rem); margin:0; padding:0 0.75rem; box-sizing:border-box; border-top:0; border-radius:0 0 var(--radius-card, 0.25rem) var(--radius-card, 0.25rem); background:var(--tk-thead-grad); box-shadow:var(--tk-thead-edge); } #page-relatorios .relatorios-fd .tickets-card .tk-list-pager.list-pagination-bar.hidden, #page-relatorios .relatorios-fd .tickets-card #tkListaPagination.list-pagination-bar.hidden{ display:flex !important; } #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-inner, #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-inner{ display:flex; align-items:center; justify-content:flex-end; gap:0.5rem; width:100%; height:100%; flex-wrap:nowrap; } #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-info, #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-info{ flex:none; min-width:0; order:0; font-size:0.75rem; font-weight:800; letter-spacing:.02em; line-height:1.2; color:#fff; text-shadow:0 0.0625rem 0 rgba(var(--rel-shadow-deep-rgb),.18); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-actions, #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-actions{ flex:none; margin-left:0; order:1; display:inline-flex; align-items:center; gap:0.375rem; } #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-btn, #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-btn{ width:2rem; min-width:2rem; height:2rem; border-radius:var(--radius-card, 0.25rem); border:0.0625rem solid rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:#fff; box-shadow:none; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-btn,html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-btn{ background:rgba(255,255,255,.14); color:#fff; } #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-btn:hover:not(:disabled), #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-btn:hover:not(:disabled){ background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.55); color:#fff; box-shadow:none; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-btn:hover:not(:disabled),html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-btn:hover:not(:disabled){ background:rgba(255,255,255,.28); color:#fff; } #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-btn:focus, #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-btn:focus-visible, #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-btn:focus, #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-btn:focus-visible{ outline:none; border-color:rgba(255,255,255,.7); color:#fff; box-shadow:0 0 0 0.125rem rgba(255,255,255,.22); } #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-btn:disabled, #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-btn:disabled{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.72); box-shadow:none; opacity:.45; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-btn:disabled,html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-btn:disabled{ border-color:rgba(255,255,255,.22); } #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-page, #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-page{ height:2rem; min-height:2rem; padding:0 0.625rem; border-radius:var(--radius-card, 0.25rem); border:0.0625rem solid rgba(255,255,255,.55); background:#fff; color:#1a4db8; font-size:0.75rem; font-weight:800; letter-spacing:.02em; box-shadow:none; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-list-pager .list-pagination-page, html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card #tkListaPagination .list-pagination-page{ background:#fff; border-color:rgba(255,255,255,.55); box-shadow:none; color:#1a4db8; } #page-relatorios .relatorios-fd .tickets-card .tk-table tbody tr.tk-pad-row{ cursor:default; pointer-events:none; height:var(--tk-list-row-h, 3.125rem); } #page-relatorios .relatorios-fd .tickets-card .tk-table tbody tr.tk-pad-row td{ height:var(--tk-list-row-h, 3.125rem); padding:0 0.5rem; border-bottom:0.0625rem solid var(--line); vertical-align:middle; } #page-relatorios .relatorios-fd .tickets-card .tk-table tbody tr.tk-pad-row:hover{ background:transparent; } #page-relatorios .relatorios-fd .tickets-card .tk-table tbody tr.tk-pad-row:nth-child(even), #page-relatorios .relatorios-fd .tickets-card .tk-table tbody tr.tk-pad-row:nth-child(even):hover{ background:var(--rel-surface-sunken); } /* Clientes: mesmo rodapé azul e altura 3.125rem da Lista de tickets */ #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination.list-pagination-bar{ margin:0; padding:0 0.75rem; border-top:0; border-radius:0 0 var(--radius-card, 0.25rem) var(--radius-card, 0.25rem); width:100%; box-sizing:border-box; display:flex; align-items:center; height:var(--cli-rank-pager-h, 3.125rem); min-height:var(--cli-rank-pager-h, 3.125rem); max-height:var(--cli-rank-pager-h, 3.125rem); background:var(--tk-thead-grad, linear-gradient(145deg, #163f9a 0%, #1a4db8 30%, #2f6fe0 64%, #5aa0ff 100%)); box-shadow:var(--tk-thead-edge, inset 0 0.0625rem 0 rgba(255,255,255,.34), inset 0 -0.0625rem 0 rgba(8,32,90,.16)); } #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination.list-pagination-bar.hidden{ display:flex !important; } #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination .list-pagination-inner{ display:flex; align-items:center; justify-content:flex-end; gap:0.625rem; width:100%; height:100%; flex-wrap:nowrap; } #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination .list-pagination-info{ flex:none; min-width:0; order:0; font-size:0.78125rem; font-weight:800; letter-spacing:.02em; line-height:1.3; color:#fff; text-shadow:0 0.0625rem 0 rgba(var(--rel-shadow-deep-rgb),.18); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination .list-pagination-actions{ flex:none; margin-left:0; order:1; display:inline-flex; align-items:center; gap:0.375rem; } #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination .list-pagination-btn{ width:2rem; min-width:2rem; height:2rem; border-radius:var(--radius-card, 0.25rem); border:0.0625rem solid rgba(255,255,255,.48); background:rgba(var(--rel-surface-rgb),.92); color:var(--rel-thead-2); box-shadow:0 0.0625rem 0.125rem rgba(var(--rel-shadow-deep-rgb),.12), inset 0 0.0625rem 0 rgba(255,255,255,.85); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination .list-pagination-btn{ background:var(--surface); } #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination .list-pagination-btn:hover:not(:disabled){ background:var(--rel-surface); border-color:rgba(255,255,255,.9); color:var(--rel-accent-deep); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination .list-pagination-btn:hover:not(:disabled){ background:var(--surface); } #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination .list-pagination-btn:disabled{ background:rgba(var(--rel-surface-rgb),.28); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.72); opacity:1; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination .list-pagination-btn:disabled{ border-color:var(--rel-line); } #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination .list-pagination-page{ height:2rem; min-height:2rem; padding:0 0.75rem; border-radius:var(--radius-card, 0.25rem); border:0.0625rem solid rgba(255,255,255,.48); background:rgba(var(--rel-surface-rgb),.92); color:var(--rel-accent-deep); font-size:0.78125rem; font-weight:800; letter-spacing:.02em; box-shadow:0 0.0625rem 0.125rem rgba(var(--rel-shadow-deep-rgb),.12), inset 0 0.0625rem 0 rgba(255,255,255,.85); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .chart-card.clientes #clientesRankPagination .list-pagination-page{ background:var(--surface); border-color:var(--rel-line); box-shadow:none; color:var(--rel-ink); } /* Sem tickets: linhas de preenchimento sem zebra — só branco */ #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr, #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr:nth-child(even), #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr:nth-child(odd), #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr.tk-pad-row, #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr.tk-pad-row:nth-child(even), #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr.tk-pad-row:hover, #page-relatorios .relatorios-fd .tickets-card .tk-table tbody.tk-body--empty tr, #page-relatorios .relatorios-fd .tickets-card .tk-table tbody.tk-body--empty tr:nth-child(even), #page-relatorios .relatorios-fd .tickets-card .tk-table tbody.tk-body--empty tr.tk-pad-row:nth-child(even){ background:var(--rel-surface) !important; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr,html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr:nth-child(even),html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr:nth-child(odd),html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr.tk-pad-row,html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr.tk-pad-row:nth-child(even),html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr.tk-pad-row:hover,html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-table tbody.tk-body--empty tr,html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-table tbody.tk-body--empty tr:nth-child(even),html[data-theme="cinza"] #page-relatorios .relatorios-fd .tickets-card .tk-table tbody.tk-body--empty tr.tk-pad-row:nth-child(even){ background:var(--surface) !important; } #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap.is-empty .tk-table tbody tr td, #page-relatorios .relatorios-fd .tickets-card .tk-table tbody.tk-body--empty tr td{ background:transparent !important; } #page-relatorios .relatorios-fd .tickets-card .tk-table tbody tr.tk-pad-row:hover td:first-child{ box-shadow:none !important; } #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap:has(.tk-empty-cell) .tk-table{ height:100%; } #page-relatorios .relatorios-fd .tickets-card .tk-table tbody:has(.tk-empty-cell), #page-relatorios .relatorios-fd .tickets-card .tk-table tr.tk-empty-row{ height:calc(var(--tk-list-visible-h) - var(--tk-list-row-h, 3.125rem)); } #page-relatorios .relatorios-fd .tickets-card .tk-table .tk-empty-cell{ height:calc(var(--tk-list-visible-h) - var(--tk-list-row-h, 3.125rem)); vertical-align:middle; text-align:center; color:var(--muted, #7a879e); font-size:0.8125rem; font-weight:600; border-bottom:none !important; cursor:default; white-space:normal; } #page-relatorios .relatorios-fd .tickets-card .tk-table tbody tr.tk-empty-row{ cursor:default; } #page-relatorios .relatorios-fd .tickets-card .tk-table tbody tr.tk-empty-row:hover{ background:transparent !important; } #page-relatorios .relatorios-fd .tickets-card .tk-table tbody tr.tk-empty-row:hover td:first-child{ box-shadow:none !important; } #page-relatorios .relatorios-fd .tickets-card .tk-tablewrap::before, #page-relatorios .relatorios-fd #view-tickets.tickets-card:not(.chart-card) > .tk-tablewrap::before{ content:none !important; display:none !important; height:0 !important; margin:0 !important; } #page-relatorios .relatorios-fd .tickets-card .tk-table thead{ position:sticky; top:0; z-index:4; } #page-relatorios .relatorios-fd .tickets-card .tk-table thead tr.tk-colrow{ height:var(--tk-list-row-h,3.125rem); background:linear-gradient(145deg, var(--rel-thead-1) 0%, var(--rel-thead-2) 30%, var(--rel-thead-3) 64%, var(--rel-thead-4) 100%); box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.34), inset 0 -0.0625rem 0 rgba(var(--rel-shadow-deep-rgb),.16); } #page-relatorios .relatorios-fd .tickets-card .tk-colrow th{ height:var(--tk-list-row-h,3.125rem); padding:0 0.625rem; line-height:1.2; vertical-align:middle; background:transparent; color:#fff; font-weight:800; font-size:0.75rem; letter-spacing:.02em; text-shadow:0 0.0625rem 0 rgba(var(--rel-shadow-deep-rgb),.18); transition:box-shadow .14s ease, background .14s ease; } /* Blindagem: header da lista de tickets — degradê da Central + tipografia reforçada */ #page-relatorios .relatorios-fd #tkTable thead tr.tk-colrow{ background:linear-gradient(145deg, var(--rel-thead-1) 0%, var(--rel-thead-2) 30%, var(--rel-thead-3) 64%, var(--rel-thead-4) 100%) !important; box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.34), inset 0 -0.0625rem 0 rgba(var(--rel-shadow-deep-rgb),.16) !important; } #page-relatorios .relatorios-fd #tkTable thead tr.tk-colrow th{ background:transparent !important; color:#fff !important; font-weight:800 !important; letter-spacing:.02em; text-shadow:0 0.0625rem 0 rgba(var(--rel-shadow-deep-rgb),.18); } #page-relatorios .relatorios-fd .tickets-card .tk-colrow th:first-child{ border-top-left-radius:var(--radius-card); } #page-relatorios .relatorios-fd .tickets-card .tk-colrow th:last-child{ border-top-right-radius:var(--radius-card); } #page-relatorios .relatorios-fd .tickets-card .tk-colrow th:hover, #page-relatorios .relatorios-fd #tkTable thead tr.tk-colrow th:hover{ background:rgba(var(--rel-surface-rgb),.12) !important; box-shadow:inset 0 0.0625rem 0 rgba(255,255,255,.28); } #page-relatorios .relatorios-fd .tickets-card .tk-colrow th.sorted, #page-relatorios .relatorios-fd #tkTable thead tr.tk-colrow th.sorted{ background:transparent !important; box-shadow:none; } #page-relatorios .relatorios-fd .tickets-card .tk-colrow th.sorted::after, #page-relatorios .relatorios-fd #tkTable thead tr.tk-colrow th.sorted::after{ opacity:1; color:#fff; text-shadow: 0 0 0.25rem rgba(255, 255, 255, 0.95), 0 0 0.625rem rgba(var(--rel-cyan-rgb), 0.9), 0 0 1rem rgba(255, 255, 255, 0.55); } #page-relatorios .relatorios-fd .tickets-card .tk-table tbody tr{ height:var(--tk-list-row-h); } #page-relatorios .relatorios-fd .tickets-card .tk-table tbody td, #page-relatorios .relatorios-fd .tickets-card .tk-table tbody td.c-cat{ height:var(--tk-list-row-h); padding:0 0.5rem; line-height:1.2; vertical-align:middle; box-sizing:border-box; } #page-relatorios .relatorios-fd .c-perf{ vertical-align:middle; } #page-relatorios .relatorios-fd .perf{ display:flex; flex-direction:column; gap:0.3125rem; min-width:5.875rem; } #page-relatorios .relatorios-fd .perf-row{ display:flex; align-items:center; gap:0.375rem; } #page-relatorios .relatorios-fd .perf-v{ font-size:0.78125rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:0.0125rem; } #page-relatorios .relatorios-fd .perf-v.ok{ color:var(--rel-accent-strong); } .perf-v.warn{ color:var(--rel-warn-ink); } .perf-v.bad{ color:var(--rel-danger-ink); } #page-relatorios .relatorios-fd .perf-track{ position:relative; height:0.375rem; border-radius:0.25rem; background:rgba(var(--rel-shadow-rgb),.08); overflow:hidden; } #page-relatorios .relatorios-fd .perf-fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:0.25rem; } #page-relatorios .relatorios-fd .perf-fill.ok{ background:linear-gradient(90deg,#2b9bff,var(--rel-accent-strong)); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .perf-fill.ok{ background:linear-gradient(90deg,var(--rel-accent-ink),var(--rel-accent-strong)); } #page-relatorios .relatorios-fd .perf-fill.warn{ background:linear-gradient(90deg,#ffc24d,var(--rel-warn)); } #page-relatorios .relatorios-fd .perf-fill.bad{ background:linear-gradient(90deg,#f06a6e,var(--rel-danger-bright)); } #page-relatorios .relatorios-fd .perf-fill.muted{ background:#c5cdd8; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .perf-fill.muted{ background:rgba(var(--rel-accent-rgb),0.16); } #page-relatorios .relatorios-fd .perf-muted .perf-v{ color:#8a96a8; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .perf-muted .perf-v{ color:var(--rel-ink-muted); } /* badges SLA / status */ #page-relatorios .relatorios-fd .sla-b, .st-b{ display:inline-flex; align-items:center; gap:0.375rem; font-size:0.6875rem; font-weight:700; padding:0.1875rem 0.5625rem; border-radius:62.4375rem; white-space:nowrap; } #page-relatorios .relatorios-fd .sla-b .d, .st-b .d{ width:0.375rem; height:0.375rem; border-radius:50%; } #page-relatorios .relatorios-fd .sla-b.ok{ background:rgba(var(--rel-accent-rgb),.10); color:var(--rel-accent-strong); } .sla-b.ok .d{ background:var(--blue); } #page-relatorios .relatorios-fd .sla-b.warn{ background:rgba(var(--rel-warn-rgb),.16); color:var(--rel-warn-ink); } .sla-b.warn .d{ background:var(--rel-warn); } #page-relatorios .relatorios-fd .sla-b.bad{ background:rgba(var(--rel-danger-bright-rgb),.12); color:var(--rel-danger-ink); } .sla-b.bad .d{ background:var(--rel-danger-bright); } #page-relatorios .relatorios-fd .sla-b.na{ background:rgba(var(--rel-neutral-rgb),.18); color:#6b778c; } .sla-b.na .d{ background:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .st-b.fi{ background:rgba(var(--rel-accent-rgb),.12); color:var(--rel-accent-strong); } .st-b.fi .d{ background:var(--blue,#0a78f0); } #page-relatorios .relatorios-fd .st-b.at{ background:rgba(var(--rel-ok-rgb),.14); color:#15803d; } .st-b.at .d{ background:#1f9d57; } #page-relatorios .relatorios-fd .st-b.ag{ background:rgba(224,69,69,.12); color:#c62828; } .st-b.ag .d{ background:#e04545; } #page-relatorios .relatorios-fd .st-b.pa{ background:rgba(var(--rel-warn-rgb),.16); color:var(--rel-warn-ink); } .st-b.pa .d{ background:#e8b90a; } #page-relatorios .relatorios-fd .tk-foot{ display:flex; align-items:center; gap:0.875rem; flex-wrap:wrap; padding:0.75rem 0.25rem 0.25rem; border-top:0; background:transparent; } #page-relatorios .relatorios-fd .tk-foot .pp{ font-size:0.8125rem; color:var(--muted); } #page-relatorios .relatorios-fd .tk-foot .pp b{ color:var(--ink); font-weight:700; } #page-relatorios .relatorios-fd .tk-foot .sp{ flex:1; min-width:0.5rem; } #page-relatorios .relatorios-fd .tk-foot .per{ display:none; } #page-relatorios .relatorios-fd .tk-foot .per select{ height:2.125rem; border:0.0625rem solid var(--line); border-radius:0.5625rem; background:var(--surface, #fff); padding:0 1.75rem 0 0.625rem; font-size:0.8125rem; color:var(--ink); } #page-relatorios .relatorios-fd .tk-foot .list-pagination-bar{ width:100%; border:0; padding:0; margin:0; background:transparent; } #page-relatorios .relatorios-fd .tk-foot .list-pagination-bar:not(.hidden){ display:flex; } #page-relatorios .relatorios-fd .tk-foot .upd{ font-size:0.75rem; color:var(--muted); display:inline-flex; align-items:center; gap:0.4375rem; } #page-relatorios .relatorios-fd .tk-foot .upd .live{ width:0.4375rem; height:0.4375rem; border-radius:50%; background:var(--blue); box-shadow:0 0 0 0.1875rem rgba(var(--rel-accent-rgb),.22); } #page-relatorios .relatorios-fd .tk-foot .hint-click{ font-size:0.75rem; color:var(--rel-ink-muted); display:inline-flex; align-items:center; gap:0.375rem; } #page-relatorios .relatorios-fd .tk-foot .hint-click svg{ width:0.875rem; height:0.875rem; } /* ---------- MOVIMENTO (Sprint 3) ---------- */ /* cross-fade ao trocar de indicador — sem fill: estado de repouso é sempre visível */ @keyframes viewEnter{ from{ opacity:0; transform:translateY(0.625rem) scale(.994); } to{ opacity:1; transform:none; } } #page-relatorios .relatorios-fd .view-enter{ animation:viewEnter .42s cubic-bezier(.22,1,.36,1); } @media (prefers-reduced-motion: reduce){ #page-relatorios .relatorios-fd .view-enter{ animation:none; } #page-relatorios .relatorios-fd .col .stack, .col .cap, #tkBody tr{ transition:none !important; } } @media (max-width: 0px) /* ui-scale-freeze: was 1180px */{ #page-relatorios .relatorios-fd .chart-body{ grid-template-columns:1fr; } #page-relatorios .relatorios-fd .legend{ order:2; } } @media (max-width:760px){ #page-relatorios .relatorios-fd .plot .gridbars{ height:23.75rem; } } /* ============================================================ FiveDesk — Relatórios · Indicador FINANCEIRO (.fin) Depende dos tokens de fivedesk-theme.css + dark.css ============================================================ */ #page-relatorios .relatorios-fd .fin{ --f-blue:#007BFF; --f-blue-bg:rgba(0,123,255,.10); --f-ok:#15875b; --f-ok-dot:#1f9d57; --f-ok-bg:#e8f7ef; --f-warn:#b4790a; --f-warn-dot:#e0a106; --f-warn-bg:#fff3df; --f-bad:#cf3b40; --f-bad-dot:#e5484d; --f-bad-bg:#fdecec; --f-cost:#5b6a86; --f-cost-soft:#aab4c6; --f-elev-1:0 0.0625rem 0.125rem rgba(13,27,52,.06); --f-elev-2:0 0.625rem 1.625rem -0.875rem rgba(13,27,52,.20); --d1:#0a78f0; --d2:#14b3c4; --d3:#6b46c1; --d4:#e0701e; } html[data-theme="dark"] #page-relatorios .relatorios-fd .fin{ --f-blue:#7fb6ff; --f-blue-bg:rgba(59,155,255,.14); --f-ok:#3fc285; --f-ok-dot:#34d399; --f-ok-bg:rgba(31,157,87,.16); --f-warn:#f1b53d; --f-warn-dot:#e0a106; --f-warn-bg:rgba(224,161,6,.14); --f-bad:#f1797d; --f-bad-dot:#e5484d; --f-bad-bg:rgba(207,59,64,.16); --f-cost:#9aa7bd; --f-cost-soft:#5b6a86; --f-elev-2:0 0.75rem 1.875rem -1rem rgba(0,0,0,.6); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .fin{ --f-blue:#0a2c5c; --f-blue-bg:rgba(11,99,214,.14); --f-ok:#0e4a2c; --f-ok-dot:#0e4a2c; --f-ok-bg:rgba(31,157,87,.16); --f-warn:#6b3b08; --f-warn-dot:#e0a106; --f-warn-bg:rgba(224,161,6,.14); --f-bad:#6e1614; --f-bad-dot:#e5484d; --f-bad-bg:rgba(151,35,31,.16); --f-cost:#9aa7bd; --f-cost-soft:#5b6a86; --f-elev-2:0 0.75rem 1.875rem -1rem rgba(0,0,0,.6); } #page-relatorios .relatorios-fd .fin .chart-head .ch-tot b{ font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .fin .chart-head .ch-tot-fin{ flex:none; } #page-relatorios .relatorios-fd .fin .chart-head .ch-tot-fin b{ font-size:1.6875rem; letter-spacing:-0.0625rem; white-space:nowrap; } #page-relatorios .relatorios-fd .fin .chart-head .ch-tot-fin span{ white-space:nowrap; } #page-relatorios .relatorios-fd .fin-body{ padding:1.125rem 1.375rem 1.375rem; } #page-relatorios .relatorios-fd .fk-cmp{ margin-top:auto; } #page-relatorios .relatorios-fd .fk-cmp .cmp-line{ margin-top:0.6875rem; padding-top:0.6875rem; border-top:0.0625rem solid var(--line); } /* ===== FLUXO OPERACIONAL → FINANCEIRO ===== */ #page-relatorios .relatorios-fd .fin-flow{ display:grid; grid-template-columns:repeat(5, 1fr) ; gap:0; margin-bottom:1.25rem; background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--f-elev-1); overflow:hidden; } #page-relatorios .relatorios-fd .ff-node{ position:relative; padding:1.125rem 1.25rem; display:flex; flex-direction:column; gap:0.5625rem; } #page-relatorios .relatorios-fd .ff-node + .ff-node{ border-left:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .ff-node .ff-ic{ width:2.125rem; height:2.125rem; border-radius:0.625rem; display:flex; align-items:center; justify-content:center; background:var(--f-blue-bg); color:var(--f-blue); } #page-relatorios .relatorios-fd .ff-node .ff-ic svg{ width:1.125rem; height:1.125rem; } #page-relatorios .relatorios-fd .ff-node.is-cost .ff-ic{ background:rgba(var(--rel-ink-faint-rgb),.12); color:var(--f-cost); } #page-relatorios .relatorios-fd .ff-node.is-rev .ff-ic{ background:var(--f-blue-bg); color:var(--f-blue); } #page-relatorios .relatorios-fd .ff-node.is-margin .ff-ic{ background:var(--f-ok-bg); color:var(--f-ok); } #page-relatorios .relatorios-fd .ff-node .ff-l{ font-size:0.6875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } #page-relatorios .relatorios-fd .ff-node .ff-v{ font-size:1.4375rem; font-weight:800; letter-spacing:-0.04375rem; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .ff-node.is-rev .ff-v{ color:var(--f-blue); } .ff-node.is-margin .ff-v{ color:var(--f-ok); } #page-relatorios .relatorios-fd .ff-node .ff-x{ font-size:0.71875rem; color:var(--muted); font-weight:600; } #page-relatorios .relatorios-fd .ff-node .ff-arrow{ position:absolute; right:-0.5625rem; top:50%; transform:translateY(-50%); z-index:2; width:1.125rem; height:1.125rem; background:var(--surface); border:0.0625rem solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#b8c4d8; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .ff-node .ff-arrow{ color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .ff-node .ff-arrow svg{ width:0.6875rem; height:0.6875rem; } #page-relatorios .relatorios-fd .ff-node:last-child .ff-arrow{ display:none; } /* ===== KPIs ===== */ #page-relatorios .relatorios-fd .fin-kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:0.875rem; margin-bottom:1.25rem; } #page-relatorios .relatorios-fd .fk{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--f-elev-1); padding:0.9375rem 1rem 0.8125rem; display:flex; flex-direction:column; transition:.16s; } #page-relatorios .relatorios-fd .fk:hover{ box-shadow:var(--f-elev-2); transform:translateY(-0.125rem); } #page-relatorios .relatorios-fd .fk .fk-top{ display:flex; align-items:center; gap:0.4375rem; margin-bottom:0.5625rem; } #page-relatorios .relatorios-fd .fk .fk-dot{ width:0.5rem; height:0.5rem; border-radius:50%; background:var(--f-blue); flex:none; } #page-relatorios .relatorios-fd .fk.ac-cost .fk-dot{ background:var(--f-cost); } .fk.ac-ok .fk-dot{ background:var(--f-ok-dot); } .fk.ac-warn .fk-dot{ background:var(--f-warn-dot); } #page-relatorios .relatorios-fd .fk .fk-l{ font-size:0.6875rem; font-weight:700; letter-spacing:.03em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .fk .fk-v{ font-size:1.5625rem; font-weight:800; letter-spacing:-0.0625rem; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .fk .fk-v .pre{ font-size:0.875rem; font-weight:700; color:var(--muted); letter-spacing:0; } #page-relatorios .relatorios-fd .fk .fk-v .u{ font-size:0.875rem; font-weight:700; color:var(--muted); letter-spacing:0; } #page-relatorios .relatorios-fd .fk .fk-spark{ height:1.875rem; margin:0.5625rem 0 0.125rem; } #page-relatorios .relatorios-fd .fk .fk-spark svg{ width:100%; height:100%; display:block; overflow:visible; } #page-relatorios .relatorios-fd .fk .fk-foot{ margin-top:auto; padding-top:0.625rem; border-top:0.0625rem solid var(--line); display:flex; align-items:center; gap:0.375rem; font-size:0.71875rem; font-weight:700; } #page-relatorios .relatorios-fd .fk .fk-foot .delta{ display:inline-flex; align-items:center; gap:0.1875rem; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .fk .fk-foot .delta.up{ color:var(--f-ok); } .fk .fk-foot .delta.down{ color:var(--f-bad); } .fk .fk-foot .delta.flat{ color:var(--muted); } #page-relatorios .relatorios-fd .fk .fk-foot .delta svg{ width:0.8125rem; height:0.8125rem; } #page-relatorios .relatorios-fd .fk .fk-foot .lbl{ color:var(--muted); font-weight:600; } /* ===== painéis ===== */ #page-relatorios .relatorios-fd .fin-row{ display:grid; gap:1.125rem; margin-bottom:1.25rem; } #page-relatorios .relatorios-fd .fin-row.r-combo{ grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); align-items:stretch; } #page-relatorios .relatorios-fd .fin-row.r-split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } #page-relatorios .relatorios-fd .fpanel{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--f-elev-1); display:flex; flex-direction:column; overflow:hidden; } #page-relatorios .relatorios-fd .fpanel .fp-head{ display:flex; align-items:flex-start; gap:0.6875rem; padding:1rem 1.125rem 0; } #page-relatorios .relatorios-fd .fpanel .fp-ic{ width:2rem; height:2rem; border-radius:0.5625rem; background:var(--f-blue-bg); color:var(--f-blue); display:flex; align-items:center; justify-content:center; flex:none; } #page-relatorios .relatorios-fd .fpanel .fp-ic svg{ width:1.0625rem; height:1.0625rem; } #page-relatorios .relatorios-fd .fpanel .fp-head h3{ font-size:1rem; font-weight:800; letter-spacing:-0.01875rem; line-height:1.22; margin:0; color:var(--ink); text-align:left; } #page-relatorios .relatorios-fd .fpanel .fp-head .fp-sub{ font-size:0.75rem; font-weight:500; line-height:1.4; color:var(--muted); margin-top:0.375rem; text-align:left; } #page-relatorios .relatorios-fd .fpanel .fp-head .sp{ flex:1; } #page-relatorios .relatorios-fd .fpanel .fp-body{ padding:0.875rem 1.125rem 1.125rem; flex:1; display:flex; flex-direction:column; min-height:0; } #page-relatorios .relatorios-fd .fin-row.r-combo .fpanel .fp-body:has(.fin-treemap){ padding-bottom:1.125rem; } /* combo chart */ #page-relatorios .relatorios-fd .combo-legend{ display:flex; align-items:center; gap:1.125rem; margin-bottom:0.375rem; } #page-relatorios .relatorios-fd .combo-legend .cl{ display:inline-flex; align-items:center; gap:0.4375rem; font-size:0.75rem; font-weight:700; color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .combo-legend .cl .sw{ width:0.75rem; height:0.75rem; border-radius:0.1875rem; } #page-relatorios .relatorios-fd .combo-legend .cl .sw.rev{ background:var(--f-blue); } .combo-legend .cl .sw.cost{ background:var(--f-cost-soft); } #page-relatorios .relatorios-fd .combo-legend .cl .sw.mg{ width:1rem; height:0.1875rem; border-radius:0.125rem; background:var(--f-cost); } #page-relatorios .relatorios-fd .combo-wrap{ position:relative; } #page-relatorios .relatorios-fd .combo-wrap svg{ width:100%; display:block; overflow:visible; } #page-relatorios .relatorios-fd .combo-wrap .gl{ stroke:var(--line); stroke-width:1; } #page-relatorios .relatorios-fd .combo-wrap .axlab{ font-size:0.6875rem; font-weight:600; fill:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .combo-wrap .bar-rev{ fill:var(--f-blue); } #page-relatorios .relatorios-fd .combo-wrap .bar-cost{ fill:var(--f-cost-soft); } #page-relatorios .relatorios-fd .combo-wrap .mg-line{ fill:none; stroke:var(--f-cost); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; } #page-relatorios .relatorios-fd .combo-wrap .mg-dot{ fill:var(--f-cost); } #page-relatorios .relatorios-fd .combo-wrap .xlab{ font-size:0.6875rem; font-weight:600; fill:var(--rel-icon-muted); } #page-relatorios .relatorios-fd .combo-wrap .hit{ fill:transparent; cursor:pointer; } #page-relatorios .relatorios-fd .combo-wrap .hit:hover ~ .hb{ opacity:1; } #page-relatorios .relatorios-fd .combo-tip{ position:absolute; pointer-events:none; background:var(--ink); color:#fff; border-radius:0.625rem; padding:0.625rem 0.8125rem; font-size:0.75rem; box-shadow:var(--f-elev-2); opacity:0; transition:opacity .12s; z-index:6; white-space:nowrap; transform:translate(-50%,0); } #page-relatorios .relatorios-fd .combo-tip .t{ font-weight:800; margin-bottom:0.3125rem; } #page-relatorios .relatorios-fd .combo-tip .row{ display:flex; align-items:center; justify-content:space-between; gap:0.875rem; margin-top:0.1875rem; } #page-relatorios .relatorios-fd .combo-tip .row .d{ width:0.5625rem; height:0.5625rem; border-radius:0.125rem; display:inline-block; margin-right:0.375rem; } #page-relatorios .relatorios-fd .combo-tip .row b{ font-variant-numeric:tabular-nums; } /* treemap composição (blocos de orçamento) — preenche altura do painel */ #page-relatorios .relatorios-fd .fin-treemap{ display:flex; gap:0.5rem; width:100%; flex:1 1 auto; min-height:17.5rem; height:100%; align-items:stretch; align-self:stretch; } #page-relatorios .relatorios-fd .fin-treemap .tm-col{ flex:1 1 0; min-width:0; min-height:0; height:100%; display:flex; flex-direction:column; gap:0.5rem; } #page-relatorios .relatorios-fd .fin-treemap .tm-block.big{ align-self:stretch; min-height:0; height:auto; } #page-relatorios .relatorios-fd .tm-block{ position:relative; min-width:0; min-height:0; border-radius:var(--radius-card); overflow:hidden; opacity:0; transform:scale(.96); transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .fin-treemap .tm-col .tm-block{ flex:1 1 0; min-height:2.75rem; } #page-relatorios .relatorios-fd .tm-block.in{ opacity:1; transform:none; } #page-relatorios .relatorios-fd .tm-fill{ position:absolute; inset:0; border-radius:var(--radius-card); background:var(--c); } #page-relatorios .relatorios-fd .tm-fill::after{ content:""; position:absolute; inset:0; border-radius:var(--radius-card); background:linear-gradient(150deg,rgba(var(--rel-surface-rgb),.16),rgba(var(--rel-shadow-pure-rgb),.08)); } #page-relatorios .relatorios-fd .tm-tx{ position:relative; z-index:2; height:100%; padding:0.8125rem 0.9375rem; display:flex; flex-direction:column; justify-content:flex-end; gap:0.1875rem; color:#fff; pointer-events:none; } #page-relatorios .relatorios-fd .tm-block .tm-n{ font-size:0.75rem; font-weight:700; line-height:1.2; opacity:.96; text-shadow:0 0.0625rem 0.125rem rgba(var(--rel-shadow-pure-rgb),.22); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .tm-block .tm-row{ display:flex; align-items:baseline; gap:0.5rem; } #page-relatorios .relatorios-fd .tm-block .tm-v{ font-size:1.125rem; font-weight:800; letter-spacing:-0.03125rem; font-variant-numeric:tabular-nums; text-shadow:0 0.0625rem 0.125rem rgba(var(--rel-shadow-pure-rgb),.22); white-space:nowrap; } #page-relatorios .relatorios-fd .tm-block .tm-p{ font-size:0.65625rem; font-weight:700; opacity:.85; font-variant-numeric:tabular-nums; margin-left:auto; white-space:nowrap; } #page-relatorios .relatorios-fd .tm-block.big .tm-tx{ justify-content:flex-end; } #page-relatorios .relatorios-fd .tm-block.big .tm-n{ font-size:0.84375rem; white-space:normal; } #page-relatorios .relatorios-fd .tm-block.big .tm-row{ flex-direction:column; align-items:flex-start; gap:0.125rem; margin-top:0.25rem; } #page-relatorios .relatorios-fd .tm-block.big .tm-v{ font-size:1.625rem; } #page-relatorios .relatorios-fd .tm-block.big .tm-p{ font-size:0.71875rem; margin-left:0; } /* blocos da coluna: texto compacto centrado verticalmente */ #page-relatorios .relatorios-fd .fin-treemap .tm-col .tm-tx{ justify-content:center; padding:0.625rem 0.75rem; } #page-relatorios .relatorios-fd .fin-treemap .tm-col .tm-v{ font-size:0.9375rem; } #page-relatorios .relatorios-fd .fin-treemap .tm-col .tm-block .tm-n{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.25; } #page-relatorios .relatorios-fd .tm-block:hover .tm-fill{ filter:brightness(1.06); } /* dept h-bars — rótulo legível; trilha com altura fixa */ #page-relatorios .relatorios-fd .fin-dept{ display:flex; flex-direction:column; gap:0.875rem; padding-top:0.25rem; } #page-relatorios .relatorios-fd .fd-row{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(4.5rem,1fr) minmax(6rem,max-content); gap:0.625rem 0.75rem; align-items:center; } #page-relatorios .relatorios-fd .fin-dept .fd-row{ grid-template-columns:minmax(0,1.65fr) minmax(4.25rem,0.9fr) minmax(6.25rem,max-content); } #page-relatorios .relatorios-fd .fd-name{ font-size:0.78125rem; font-weight:700; color:var(--rel-ink-2); white-space:normal; overflow:visible; text-overflow:unset; line-height:1.32; hyphens:auto; min-width:0; } #page-relatorios .relatorios-fd .fd-track{ height:1.375rem; border-radius:0.4375rem; background:var(--field); overflow:hidden; position:relative; min-width:0; } #page-relatorios .relatorios-fd .fd-track i{ position:absolute; left:0; top:0; bottom:0; border-radius:0.4375rem; transition:width 1.1s cubic-bezier(.22,1,.36,1); background:linear-gradient(90deg,#5fb0ff,var(--rel-accent-chart)); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .fd-track i{ background:linear-gradient(90deg,var(--rel-accent-ink),var(--rel-accent-chart)); } #page-relatorios .relatorios-fd .fd-val{ font-size:0.8125rem; font-weight:800; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } #page-relatorios .relatorios-fd .fd-val .pc{ font-size:0.65625rem; font-weight:700; color:var(--rel-ink-muted); } /* top clientes */ #page-relatorios .relatorios-fd .fin-clients{ display:flex; flex-direction:column; } #page-relatorios .relatorios-fd .fc-row{ display:grid; grid-template-columns:1.625rem 2.125rem minmax(0,1fr) auto; gap:0.6875rem; align-items:center; padding:0.625rem 0; border-top:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .fc-row:first-child{ border-top:0; } #page-relatorios .relatorios-fd .fc-rk{ font-size:0.8125rem; font-weight:800; color:#c2cde0; text-align:center; font-variant-numeric:tabular-nums; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .fc-rk{ color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .fc-row:nth-child(1) .fc-rk{ color:var(--f-blue); } #page-relatorios .relatorios-fd .fc-av{ width:2.125rem; height:2.125rem; border-radius:0.625rem; color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:800; flex:none; letter-spacing:-0.01875rem; } #page-relatorios .relatorios-fd .fc-id{ min-width:0; } #page-relatorios .relatorios-fd .fc-name{ font-size:0.84375rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .fc-meta{ font-size:0.71875rem; color:var(--muted); margin-top:0.0625rem; } #page-relatorios .relatorios-fd .fc-val{ text-align:right; flex:none; } #page-relatorios .relatorios-fd .fc-val b{ font-size:0.9375rem; font-weight:800; color:var(--ink); display:block; line-height:1.1; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .fc-val .delta{ font-size:0.6875rem; font-weight:700; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .fc-val .delta.up{ color:var(--f-ok); } .fc-val .delta.down{ color:var(--f-bad); } /* ===== custo por contato (expansível → assuntos) ===== */ #page-relatorios .relatorios-fd .ct-sum{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.8125rem; margin-bottom:1rem; } #page-relatorios .relatorios-fd .ct-sum-card{ position:relative; padding:0.8125rem 0.9375rem 0.8125rem 1.125rem; border:0.0625rem solid var(--line); border-radius:var(--radius-card); background:var(--surface); box-shadow:var(--f-elev-1); overflow:hidden; } #page-relatorios .relatorios-fd .ct-sum-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0.25rem; } #page-relatorios .relatorios-fd .ct-sum-card.blue::before{ background:var(--f-blue); } .ct-sum-card.cost::before{ background:var(--f-cost); } .ct-sum-card.bad::before{ background:var(--f-bad); } #page-relatorios .relatorios-fd .ct-sum-card .cs-k{ font-size:0.65625rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .ct-sum-card .cs-v{ font-size:1.1875rem; font-weight:800; letter-spacing:-0.03125rem; color:var(--ink); margin-top:0.25rem; line-height:1.1; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .ct-sum-card .cs-x{ font-size:0.71875rem; font-weight:600; color:var(--muted); margin-top:0.1875rem; font-variant-numeric:tabular-nums; } @media (max-width:760px){ .ct-sum{ grid-template-columns:1fr; } } #page-relatorios .relatorios-fd .fin-contatos{ display:flex; flex-direction:column; } #page-relatorios .relatorios-fd .ct-item{ border-top:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .ct-item:first-child{ border-top:0; } #page-relatorios .relatorios-fd .ct-row{ display:grid; grid-template-columns:1.5rem 2.25rem minmax(7.5rem,1.5fr) minmax(5rem,1.4fr) auto 1.125rem; gap:0.8125rem; align-items:center; width:100%; padding:0.75rem 0.25rem; border:0; background:none; font-family:inherit; cursor:pointer; text-align:left; transition:.12s; border-radius:0.625rem; } #page-relatorios .relatorios-fd .ct-row:hover{ background:var(--field); } #page-relatorios .relatorios-fd .ct-rk{ font-size:0.8125rem; font-weight:800; color:#c2cde0; text-align:center; font-variant-numeric:tabular-nums; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .ct-rk{ color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .ct-item:nth-child(1) .ct-rk{ color:var(--f-blue); } #page-relatorios .relatorios-fd .ct-av{ width:2.25rem; height:2.25rem; border-radius:0.625rem; color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:800; flex:none; letter-spacing:-0.01875rem; } #page-relatorios .relatorios-fd .ct-id{ min-width:0; display:flex; flex-direction:column; gap:0.0625rem; } #page-relatorios .relatorios-fd .ct-name{ font-size:0.84375rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .ct-meta{ font-size:0.71875rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .ct-bar{ height:0.4375rem; border-radius:0.25rem; background:var(--field); overflow:hidden; position:relative; min-width:3.125rem; } #page-relatorios .relatorios-fd .ct-bar i{ position:absolute; left:0; top:0; bottom:0; border-radius:0.25rem; background:linear-gradient(90deg,#5fb0ff,var(--rel-accent-chart)); transition:width 1s cubic-bezier(.22,1,.36,1); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .ct-bar i{ background:linear-gradient(90deg,var(--rel-accent-ink),var(--rel-accent-chart)); } #page-relatorios .relatorios-fd .ct-val{ text-align:right; white-space:nowrap; } #page-relatorios .relatorios-fd .ct-val b{ font-size:0.90625rem; font-weight:800; color:var(--ink); display:block; line-height:1.15; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .ct-val .delta{ font-size:0.6875rem; font-weight:700; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .ct-val .delta.up{ color:var(--f-ok); } .ct-val .delta.down{ color:var(--f-bad); } #page-relatorios .relatorios-fd .ct-chev{ width:1.125rem; height:1.125rem; color:#aeb9cc; transition:transform .22s cubic-bezier(.22,1,.36,1); justify-self:center; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .ct-chev{ color:var(--rel-accent-ink); } #page-relatorios .relatorios-fd .ct-item.open .ct-chev{ transform:rotate(180deg); color:var(--f-blue); } #page-relatorios .relatorios-fd .ct-item.open > .ct-row{ background:var(--field); } /* detalhe expansível */ #page-relatorios .relatorios-fd .ct-detail{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .ct-item.open .ct-detail{ grid-template-rows:1fr; } #page-relatorios .relatorios-fd .ct-detail-in{ overflow:hidden; } #page-relatorios .relatorios-fd .ct-detail .ct-detail-in{ padding:0 0.25rem; } #page-relatorios .relatorios-fd .ct-item.open .ct-detail-in{ padding:0.25rem 0.25rem 0.875rem; } #page-relatorios .relatorios-fd .ct-sub-h{ font-size:0.6875rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--rel-ink-muted); margin:0.125rem 0 0.625rem 3.0625rem; } #page-relatorios .relatorios-fd .ct-sub-row{ display:grid; grid-template-columns:minmax(7.5rem,1.4fr) minmax(4.375rem,1fr) 3.5rem 4.5rem; gap:0.75rem; align-items:center; padding:0.4375rem 0 0.4375rem 3.0625rem; } #page-relatorios .relatorios-fd .ct-sub-n{ font-size:0.78125rem; font-weight:600; color:var(--rel-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .ct-sub-bar{ height:0.375rem; border-radius:0.1875rem; background:var(--field); overflow:hidden; position:relative; } #page-relatorios .relatorios-fd .ct-sub-bar i{ position:absolute; left:0; top:0; bottom:0; border-radius:0.1875rem; background:linear-gradient(90deg,#a9c8f0,#5b8fd6); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .ct-sub-bar i{ background:linear-gradient(90deg,rgba(var(--rel-accent-rgb),0.16),var(--rel-accent-ink)); } #page-relatorios .relatorios-fd .ct-sub-q{ font-size:0.71875rem; font-weight:700; color:var(--rel-icon-muted); text-align:right; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .ct-sub-v{ font-size:0.78125rem; font-weight:800; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; } @media (max-width:680px){ #page-relatorios .relatorios-fd .ct-row{ grid-template-columns:1.375rem 2rem 1fr auto 1.125rem; } #page-relatorios .relatorios-fd .ct-row .ct-bar{ display:none; } #page-relatorios .relatorios-fd .ct-sub-row{ grid-template-columns:1fr 3rem 4rem; } #page-relatorios .relatorios-fd .ct-sub-row .ct-sub-bar{ display:none; } #page-relatorios .relatorios-fd .ct-sub-h, .ct-sub-row{ padding-left:0; margin-left:0; } } /* entrada coreografada */ @keyframes fin-up{ from{ opacity:0; transform:translateY(0.625rem);} to{ opacity:1; transform:none; } } #page-relatorios .relatorios-fd .fin .fanim{ animation:fin-up .5s both cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .fin .fanim.settled{ animation:none!important; opacity:1!important; transform:none!important; } @media (prefers-reduced-motion: reduce){ .fin *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } } @media (max-width: 0px) /* ui-scale-freeze: was 1320px */{ #page-relatorios .relatorios-fd .fin-kpis{ grid-template-columns:repeat(3,1fr); } #page-relatorios .relatorios-fd .fin-row.r-combo, .fin-row.r-split{ grid-template-columns:1fr; } } /* slot comparativo dentro do KPI financeiro (substitui o rodapé quando há comparação) */ #page-relatorios .relatorios-fd .fk .fk-cmp{ margin-top:auto; } #page-relatorios .relatorios-fd .fk .fk-cmp:empty{ margin-top:0; } #page-relatorios .relatorios-fd .fk .fk-cmp .cmp-line{ margin-top:0.6875rem; padding-top:0.6875rem; border-top:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .fk .fk-cmp .cmp-tag{ font-size:0.6875rem; padding:0.1875rem 0.5rem 0.1875rem 0.375rem; } #page-relatorios .relatorios-fd .fk .fk-cmp .cmp-more{ height:1.4375rem; font-size:0.65625rem; } @media (max-width: 900px) /* ui-scale-mobile: was 980px */{ #page-relatorios .relatorios-fd .fin-flow{ grid-template-columns:1fr 1fr; } #page-relatorios .relatorios-fd .ff-node:nth-child(odd){ border-left:0; } #page-relatorios .relatorios-fd .ff-node .ff-arrow{ display:none; } } @media (max-width:680px){ .fin-kpis{ grid-template-columns:repeat(2,1fr); } } /* ============================================================ FiveDesk — Relatórios · Indicador SLA & TEMPOS Identidade própria: tempo & conformidade Visuais-assinatura: gauge · bullet charts · heatmap dia×hora · histograma Namespace .sla — depende de fivedesk-theme.css + dark.css ============================================================ */ #page-relatorios .relatorios-fd .sla{ --s-blue:#007BFF; --s-blue-bg:rgba(0,123,255,.10); --s-ok:#15875b; --s-ok-dot:#1f9d57; --s-ok-bg:#e8f7ef; --s-ok-soft:#d6f0e0; --s-warn:#b4790a; --s-warn-dot:#e0a106; --s-warn-bg:#fff3df; --s-warn-soft:#fbe9c8; --s-bad:#cf3b40; --s-bad-dot:#e5484d; --s-bad-bg:#fdecec; --s-bad-soft:#f8dcdd; --s-cost:#5b6a86; --s-elev-1:0 0.0625rem 0.125rem rgba(13,27,52,.06); --s-elev-2:0 0.625rem 1.625rem -0.875rem rgba(13,27,52,.20); --st1:#0a78f0; --st2:#14b3c4; --st3:#6b46c1; } html[data-theme="dark"] #page-relatorios .relatorios-fd .sla{ --s-blue:#7fb6ff; --s-blue-bg:rgba(59,155,255,.14); --s-ok:#3fc285; --s-ok-dot:#34d399; --s-ok-bg:rgba(31,157,87,.16); --s-ok-soft:rgba(31,157,87,.24); --s-warn:#f1b53d; --s-warn-dot:#e0a106; --s-warn-bg:rgba(224,161,6,.14); --s-warn-soft:rgba(224,161,6,.24); --s-bad:#f1797d; --s-bad-dot:#e5484d; --s-bad-bg:rgba(207,59,64,.16); --s-bad-soft:rgba(207,59,64,.24); --s-cost:#9aa7bd; --s-elev-2:0 0.75rem 1.875rem -1rem rgba(0,0,0,.6); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .sla{ --s-blue:#0a2c5c; --s-blue-bg:rgba(11,99,214,.14); --s-ok:#0e4a2c; --s-ok-dot:#0e4a2c; --s-ok-bg:rgba(31,157,87,.16); --s-ok-soft:rgba(31,157,87,.24); --s-warn:#6b3b08; --s-warn-dot:#e0a106; --s-warn-bg:rgba(224,161,6,.14); --s-warn-soft:rgba(224,161,6,.24); --s-bad:#6e1614; --s-bad-dot:#e5484d; --s-bad-bg:rgba(151,35,31,.16); --s-bad-soft:rgba(151,35,31,.24); --s-cost:#9aa7bd; --s-elev-2:0 0.75rem 1.875rem -1rem rgba(0,0,0,.6); } #page-relatorios .relatorios-fd .sla .chart-head .ch-tot b{ font-variant-numeric:tabular-nums; white-space:nowrap; } #page-relatorios .relatorios-fd .sla-body{ padding:1.125rem 1.375rem 1.375rem; } /* ============================================================ HERO — gauge + barra de conformidade (100%) ============================================================ */ #page-relatorios .relatorios-fd .sla-hero{ display:grid; grid-template-columns:18.5rem 1fr; gap:0; margin-bottom:1.25rem; background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--s-elev-2); overflow:hidden; } #page-relatorios .relatorios-fd .sla-gauge-cell{ position:relative; padding:1.375rem 1.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .sla-gauge-cell::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0.3125rem; background:var(--accent,var(--s-ok-dot)); } #page-relatorios .relatorios-fd .sla-hero.ok .sla-gauge-cell{ --accent:var(--s-ok-dot); background:linear-gradient(160deg,var(--s-ok-bg),transparent 70%); } #page-relatorios .relatorios-fd .sla-hero.warn .sla-gauge-cell{ --accent:var(--s-warn-dot); background:linear-gradient(160deg,var(--s-warn-bg),transparent 70%); } #page-relatorios .relatorios-fd .sla-hero.crit .sla-gauge-cell{ --accent:var(--s-bad-dot); background:linear-gradient(160deg,var(--s-bad-bg),transparent 70%); } #page-relatorios .relatorios-fd .sla-gauge{ position:relative; width:14.375rem; height:8.625rem; } #page-relatorios .relatorios-fd .sla-gauge svg{ width:100%; height:100%; display:block; overflow:visible; } #page-relatorios .relatorios-fd .sla-gauge .g-track{ fill:none; stroke:var(--field); stroke-width:18; stroke-linecap:round; } #page-relatorios .relatorios-fd .sla-gauge .g-fill{ fill:none; stroke-width:18; stroke-linecap:round; transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .sla-hero.ok .sla-gauge .g-fill{ stroke:var(--s-ok-dot); } #page-relatorios .relatorios-fd .sla-hero.warn .sla-gauge .g-fill{ stroke:var(--s-warn-dot); } #page-relatorios .relatorios-fd .sla-hero.crit .sla-gauge .g-fill{ stroke:var(--s-bad-dot); } #page-relatorios .relatorios-fd .sla-gauge .g-meta{ stroke:var(--ink); stroke-width:2.4; stroke-linecap:round; opacity:.55; } #page-relatorios .relatorios-fd .sla-gauge-ctr{ position:absolute; left:0; right:0; bottom:0.375rem; text-align:center; } #page-relatorios .relatorios-fd .sla-gauge-ctr .gv{ font-size:2.625rem; font-weight:800; letter-spacing:-0.1rem; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .sla-gauge-ctr .gv .pct{ font-size:1.25rem; font-weight:800; color:var(--muted); } #page-relatorios .relatorios-fd .sla-gauge-ctr .gl{ font-size:0.6875rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:0.25rem; } #page-relatorios .relatorios-fd .sla-gauge-meta{ display:inline-flex; align-items:center; gap:0.5rem; margin-top:0.8125rem; font-size:0.75rem; font-weight:700; } #page-relatorios .relatorios-fd .sla-gauge-meta .badge{ display:inline-flex; align-items:center; gap:0.375rem; padding:0.25rem 0.6875rem 0.25rem 0.5625rem; border-radius:62.4375rem; font-weight:800; font-size:0.71875rem; } #page-relatorios .relatorios-fd .sla-hero.ok .sla-gauge-meta .badge{ background:var(--s-ok-bg); color:var(--s-ok); } #page-relatorios .relatorios-fd .sla-hero.warn .sla-gauge-meta .badge{ background:var(--s-warn-bg); color:var(--s-warn); } #page-relatorios .relatorios-fd .sla-hero.crit .sla-gauge-meta .badge{ background:var(--s-bad-bg); color:var(--s-bad); } #page-relatorios .relatorios-fd .sla-gauge-meta .badge .d{ width:0.5rem; height:0.5rem; border-radius:50%; background:currentColor; } #page-relatorios .relatorios-fd .sla-gauge-meta .mtxt{ color:var(--muted); } /* conformidade — barra 100% empilhada */ #page-relatorios .relatorios-fd .sla-compliance{ padding:1.5rem 1.75rem; display:flex; flex-direction:column; justify-content:center; gap:0.875rem; } #page-relatorios .relatorios-fd .sla-compliance-h{ display:flex; align-items:baseline; gap:0.625rem; } #page-relatorios .relatorios-fd .sla-compliance-h .ttl{ font-size:0.8125rem; font-weight:800; color:var(--ink); } #page-relatorios .relatorios-fd .sla-compliance-h .sub{ font-size:0.71875rem; color:var(--muted); } #page-relatorios .relatorios-fd .sla-compliance-h .tot{ margin-left:auto; font-size:0.75rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .cbar{ display:flex; height:2.125rem; border-radius:0.625rem; overflow:hidden; box-shadow:inset 0 0 0 0.0625rem rgba(var(--rel-shadow-rgb),.05); } #page-relatorios .relatorios-fd .cbar .seg{ display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.78125rem; font-weight:800; font-variant-numeric:tabular-nums; flex-grow:0; flex-basis:0; flex-shrink:1; min-width:0; white-space:nowrap; overflow:hidden; } #page-relatorios .relatorios-fd .cbar .seg.ok{ background:linear-gradient(180deg,#2bb673,#15875b); } #page-relatorios .relatorios-fd .cbar .seg.warn{ background:linear-gradient(180deg,#f0b73d,#cf8f06); } #page-relatorios .relatorios-fd .cbar .seg.bad{ background:linear-gradient(180deg,#f0686d,var(--rel-danger)); } #page-relatorios .relatorios-fd .cbar .seg .mini{ font-size:0.625rem; opacity:.85; } #page-relatorios .relatorios-fd .cleg{ display:flex; gap:1.25rem; flex-wrap:wrap; } #page-relatorios .relatorios-fd .cleg .cl{ display:flex; align-items:center; gap:0.5rem; } #page-relatorios .relatorios-fd .cleg .cl .d{ width:0.6875rem; height:0.6875rem; border-radius:0.1875rem; flex:none; } #page-relatorios .relatorios-fd .cleg .cl.ok .d{ background:var(--s-ok-dot); } .cleg .cl.warn .d{ background:var(--s-warn-dot); } .cleg .cl.bad .d{ background:var(--s-bad-dot); } #page-relatorios .relatorios-fd .cleg .cl .ct{ font-size:0.75rem; color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .cleg .cl .ct b{ color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums; } /* ============================================================ KPIs (DNA coerente entre páginas) ============================================================ */ #page-relatorios .relatorios-fd .sla-kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:0.875rem; margin-bottom:1.25rem; } #page-relatorios .relatorios-fd .sk{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--s-elev-1); padding:0.9375rem 1rem 0.8125rem; display:flex; flex-direction:column; transition:.16s; } #page-relatorios .relatorios-fd .sk:hover{ box-shadow:var(--s-elev-2); transform:translateY(-0.125rem); } #page-relatorios .relatorios-fd .sk .sk-top{ display:flex; align-items:center; gap:0.4375rem; margin-bottom:0.5625rem; } #page-relatorios .relatorios-fd .sk .sk-dot{ width:0.5rem; height:0.5rem; border-radius:50%; background:var(--s-blue); flex:none; } #page-relatorios .relatorios-fd .sk.ac-ok .sk-dot{ background:var(--s-ok-dot); } .sk.ac-warn .sk-dot{ background:var(--s-warn-dot); } .sk.ac-bad .sk-dot{ background:var(--s-bad-dot); } .sk.ac-cost .sk-dot{ background:var(--s-cost); } #page-relatorios .relatorios-fd .sk .sk-l{ font-size:0.6875rem; font-weight:700; letter-spacing:.02em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .sk .sk-v{ font-size:1.5625rem; font-weight:800; letter-spacing:-0.0625rem; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .sk .sk-v .u{ font-size:0.875rem; font-weight:700; color:var(--muted); letter-spacing:0; } #page-relatorios .relatorios-fd .sk.is-bad .sk-v{ color:var(--s-bad); } .sk.is-warn .sk-v{ color:var(--s-warn); } .sk.is-ok .sk-v{ color:var(--s-ok); } #page-relatorios .relatorios-fd .sk .sk-spark{ height:1.875rem; margin:0.5625rem 0 0.125rem; } #page-relatorios .relatorios-fd .sk .sk-spark svg{ width:100%; height:100%; display:block; overflow:visible; } #page-relatorios .relatorios-fd .sk .sk-foot{ margin-top:auto; padding-top:0.625rem; border-top:0.0625rem solid var(--line); display:flex; align-items:center; gap:0.375rem; font-size:0.71875rem; font-weight:700; } #page-relatorios .relatorios-fd .sk .sk-foot .delta{ display:inline-flex; align-items:center; gap:0.1875rem; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .sk .sk-foot .delta.up{ color:var(--s-ok); } .sk .sk-foot .delta.down{ color:var(--s-bad); } .sk .sk-foot .delta.flat{ color:var(--muted); } #page-relatorios .relatorios-fd .sk .sk-foot .delta svg{ width:0.8125rem; height:0.8125rem; } #page-relatorios .relatorios-fd .sk .sk-foot .lbl{ color:var(--muted); font-weight:600; } #page-relatorios .relatorios-fd .sk .sk-cmp{ margin-top:auto; } .sk .sk-cmp:empty{ margin-top:0; } #page-relatorios .relatorios-fd .sk .sk-cmp .cmp-line{ margin-top:0.6875rem; padding-top:0.6875rem; border-top:0.0625rem solid var(--line); } /* ============================================================ PAINÉIS ============================================================ */ #page-relatorios .relatorios-fd .sla-row{ display:grid; gap:1.125rem; margin-bottom:1.25rem; } #page-relatorios .relatorios-fd .sla-row.r-bullet{ grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); } #page-relatorios .relatorios-fd .sla-row.r-split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } #page-relatorios .relatorios-fd .spanel{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--s-elev-1); display:flex; flex-direction:column; overflow:hidden; } #page-relatorios .relatorios-fd .spanel .sp-head{ display:flex; align-items:flex-start; gap:0.6875rem; padding:1rem 1.125rem; } #page-relatorios .relatorios-fd .spanel .sp-ic{ width:2rem; height:2rem; border-radius:0.5625rem; background:var(--s-blue-bg); color:var(--s-blue); display:flex; align-items:center; justify-content:center; flex:none; } #page-relatorios .relatorios-fd .spanel .sp-ic svg{ width:1.0625rem; height:1.0625rem; } #page-relatorios .relatorios-fd .spanel .sp-head h3{ font-size:1rem; font-weight:800; letter-spacing:-0.01875rem; line-height:1.22; margin:0; color:var(--ink); text-align:left; } #page-relatorios .relatorios-fd .spanel .sp-head .sp-sub{ font-size:0.75rem; font-weight:500; line-height:1.4; color:var(--muted); margin-top:0.375rem; text-align:left; } #page-relatorios .relatorios-fd .spanel .sp-head .sp{ flex:1; } #page-relatorios .relatorios-fd .spanel .sp-head .sp-tag{ font-size:0.6875rem; font-weight:700; color:var(--muted); display:inline-flex; align-items:center; gap:0.375rem; } #page-relatorios .relatorios-fd .spanel .sp-body{ padding:0 1.125rem 1.125rem; flex:1; } /* ---- BULLET CHARTS (TME · TMR · TMA vs meta) ---- */ #page-relatorios .relatorios-fd .bullets{ display:flex; flex-direction:column; gap:1.25rem; padding-top:0.25rem; } #page-relatorios .relatorios-fd .blt{ display:grid; grid-template-columns:8rem 1fr; gap:0.875rem; align-items:center; } #page-relatorios .relatorios-fd .blt-l{ min-width:0; } #page-relatorios .relatorios-fd .blt-l .ab{ display:inline-flex; align-items:center; font-size:0.65625rem; font-weight:800; letter-spacing:.04em; color:#fff; padding:0.125rem 0.4375rem; border-radius:0.3125rem; margin-bottom:0.3125rem; } #page-relatorios .relatorios-fd .blt.s1 .ab{ background:var(--st1); } .blt.s2 .ab{ background:var(--st2); } .blt.s3 .ab{ background:var(--st3); } #page-relatorios .relatorios-fd .blt-l .nm{ font-size:0.75rem; font-weight:700; color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .blt-r{ display:flex; align-items:center; gap:0.875rem; } #page-relatorios .relatorios-fd .blt-graph{ position:relative; flex:1; height:1.875rem; } #page-relatorios .relatorios-fd .blt-bands{ position:absolute; inset:0; border-radius:0.4375rem; overflow:hidden; display:flex; } #page-relatorios .relatorios-fd .blt-bands .bd{ height:100%; } #page-relatorios .relatorios-fd .blt-bands .bd.good{ background:var(--s-ok-soft); } .blt-bands .bd.okk{ background:var(--s-warn-soft); } .blt-bands .bd.poor{ background:var(--s-bad-soft); } #page-relatorios .relatorios-fd .blt-measure{ position:absolute; top:0.5625rem; bottom:0.5625rem; left:0; border-radius:0.3125rem; transition:width 1s cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .blt.ok .blt-measure{ background:linear-gradient(90deg,#34c08a,#15875b); } #page-relatorios .relatorios-fd .blt.miss .blt-measure{ background:linear-gradient(90deg,#f0868a,var(--rel-danger)); } #page-relatorios .relatorios-fd .blt-meta{ position:absolute; top:-0.125rem; bottom:-0.125rem; width:0.1875rem; background:var(--ink); border-radius:0.125rem; z-index:3; } #page-relatorios .relatorios-fd .blt-meta::after{ content:"meta"; position:absolute; top:-0.9375rem; left:50%; transform:translateX(-50%); font-size:0.53125rem; font-weight:800; color:var(--rel-ink-muted); letter-spacing:.03em; } #page-relatorios .relatorios-fd .blt-val{ flex:none; text-align:right; min-width:5.25rem; } #page-relatorios .relatorios-fd .blt-val b{ font-size:1.1875rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.03125rem; } #page-relatorios .relatorios-fd .blt-val b small{ font-size:0.75rem; font-weight:700; color:var(--muted); } #page-relatorios .relatorios-fd .blt-val .st{ display:block; font-size:0.65625rem; font-weight:800; margin-top:0.0625rem; } #page-relatorios .relatorios-fd .blt-val .st.ok{ color:var(--s-ok); } .blt-val .st.miss{ color:var(--s-bad); } /* ---- HISTOGRAMA distribuição de tempos de resposta ---- */ #page-relatorios .relatorios-fd .histo{ padding-top:0.375rem; } #page-relatorios .relatorios-fd .histo-chart{ display:flex; align-items:flex-end; gap:0.625rem; height:11rem; padding:0 0.125rem; } #page-relatorios .relatorios-fd .hb{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:0.5rem; height:100%; } #page-relatorios .relatorios-fd .hb .bar{ width:100%; max-width:2.875rem; border-radius:0.4375rem 0.4375rem 0.1875rem 0.1875rem; transition:height 1s cubic-bezier(.22,1,.36,1); position:relative; } #page-relatorios .relatorios-fd .hb .bar.g{ background:linear-gradient(180deg,#3fc185,#1d8a55); } .hb .bar.w{ background:linear-gradient(180deg,#f0b73d,#cf8f06); } .hb .bar.b{ background:linear-gradient(180deg,#f0686d,var(--rel-danger)); } #page-relatorios .relatorios-fd .hb .bar .cap{ position:absolute; top:-1.1875rem; left:0; right:0; text-align:center; font-size:0.71875rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .hb .lab{ font-size:0.6875rem; font-weight:700; color:var(--rel-icon-muted); text-align:center; white-space:nowrap; } #page-relatorios .relatorios-fd .histo-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:0.875rem; padding-top:0.8125rem; border-top:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .histo-foot .mediana{ font-size:0.75rem; color:var(--muted); font-weight:600; } #page-relatorios .relatorios-fd .histo-foot .mediana b{ color:var(--ink); font-weight:800; } #page-relatorios .relatorios-fd .histo-foot .within{ font-size:0.75rem; font-weight:800; color:var(--s-ok); display:inline-flex; align-items:center; gap:0.375rem; } /* ---- HEATMAP dia × hora (assinatura do SLA) ---- */ #page-relatorios .relatorios-fd .heat-sum{ display:grid; grid-template-columns:repeat(4,1fr); gap:0.8125rem; margin-bottom:1.125rem; } #page-relatorios .relatorios-fd .hs-card{ position:relative; padding:0.8125rem 0.9375rem 0.8125rem 1.125rem; border:0.0625rem solid var(--line); border-radius:var(--radius-card); background:var(--surface); box-shadow:var(--s-elev-1); overflow:hidden; } #page-relatorios .relatorios-fd .hs-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0.25rem; } #page-relatorios .relatorios-fd .hs-card.bad::before{ background:var(--s-bad-dot); } .hs-card.ok::before{ background:var(--s-ok-dot); } .hs-card.blue::before{ background:var(--s-blue); } .hs-card.cost::before{ background:var(--s-cost); } #page-relatorios .relatorios-fd .hs-card .hs-k{ font-size:0.65625rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .hs-card .hs-v{ font-size:1.125rem; font-weight:800; letter-spacing:-0.025rem; color:var(--ink); margin-top:0.25rem; line-height:1.1; } #page-relatorios .relatorios-fd .hs-card.bad .hs-v{ color:var(--s-bad); } .hs-card.ok .hs-v{ color:var(--s-ok); } #page-relatorios .relatorios-fd .hs-card .hs-x{ font-size:0.71875rem; font-weight:600; color:var(--muted); margin-top:0.1875rem; font-variant-numeric:tabular-nums; } @media (max-width: 0px) /* ui-scale-freeze: was 1180px */{ .heat-sum{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .heat-sum{ grid-template-columns:1fr; } } #page-relatorios .relatorios-fd .heatmap-tools{ display:flex; align-items:center; gap:0.875rem; margin-bottom:0.8125rem; } #page-relatorios .relatorios-fd .heat-leg{ margin-left:auto; display:flex; align-items:center; gap:0.5625rem; font-size:0.6875rem; font-weight:700; color:var(--muted); } #page-relatorios .relatorios-fd .heat-leg .scale{ display:flex; gap:0.1875rem; } #page-relatorios .relatorios-fd .heat-leg .scale i{ width:1rem; height:0.6875rem; border-radius:0.125rem; } #page-relatorios .relatorios-fd .heatmap{ display:grid; grid-template-columns:2.625rem 1fr; gap:0.5rem; align-items:start; } #page-relatorios .relatorios-fd .heat-yax{ display:grid; gap:0.25rem; padding-top:1.5rem; } #page-relatorios .relatorios-fd .heat-yax span{ height:1.625rem; display:flex; align-items:center; font-size:0.6875rem; font-weight:700; color:var(--rel-icon-muted); } #page-relatorios .relatorios-fd .heat-main{ min-width:0; overflow-x:auto; } #page-relatorios .relatorios-fd .heat-xax{ display:grid; gap:0.25rem; margin-bottom:0.375rem; } #page-relatorios .relatorios-fd .heat-xax span{ text-align:center; font-size:0.625rem; font-weight:700; color:var(--rel-ink-muted); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .heat-rows{ display:grid; gap:0.25rem; } #page-relatorios .relatorios-fd .heat-row{ display:grid; gap:0.25rem; } #page-relatorios .relatorios-fd .heat-cell{ height:1.625rem; border-radius:0.3125rem; position:relative; cursor:pointer; transition:transform .12s, box-shadow .12s; box-shadow:inset 0 0 0 0.0625rem rgba(var(--rel-shadow-rgb),.03); } #page-relatorios .relatorios-fd .heat-cell:hover{ transform:scale(1.12); z-index:4; box-shadow:0 0.375rem 0.875rem -0.3125rem rgba(var(--rel-ink-rgb),.4), 0 0 0 0.125rem var(--surface); } #page-relatorios .relatorios-fd .heat-tip{ position:fixed; pointer-events:none; background:var(--ink); color:#fff; border-radius:0.5625rem; padding:0.5rem 0.6875rem; font-size:0.71875rem; box-shadow:var(--s-elev-2); opacity:0; transition:opacity .1s; z-index:60; white-space:nowrap; transform:translate(-50%,-115%); } #page-relatorios .relatorios-fd .heat-tip b{ font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .heat-tip .ht-sla{ font-weight:800; margin-top:0.125rem; } /* ---- SLA por prioridade (bullet compacto) ---- */ #page-relatorios .relatorios-fd .sla-prio{ display:flex; flex-direction:column; gap:1rem; padding-top:0.25rem; } #page-relatorios .relatorios-fd .pr-row{ display:grid; grid-template-columns:6rem minmax(0,1fr) 5.75rem; gap:0.875rem; align-items:center; } #page-relatorios .relatorios-fd .pr-name{ display:flex; align-items:center; gap:0.5rem; font-size:0.78125rem; font-weight:700; color:var(--rel-ink-2); } #page-relatorios .relatorios-fd .pr-name .pd{ width:0.5625rem; height:0.5625rem; border-radius:0.1875rem; flex:none; } #page-relatorios .relatorios-fd .pr-track{ position:relative; height:1.375rem; border-radius:0.4375rem; background:var(--field); overflow:visible; } #page-relatorios .relatorios-fd .pr-track .fillwrap{ position:absolute; inset:0; border-radius:0.4375rem; overflow:hidden; } #page-relatorios .relatorios-fd .pr-track i{ position:absolute; left:0; top:0; bottom:0; border-radius:0.4375rem; transition:width 1.1s cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .pr-track .meta-mk{ position:absolute; top:-0.1875rem; bottom:-0.1875rem; width:0.125rem; background:var(--ink); opacity:.5; border-radius:0.125rem; z-index:2; } #page-relatorios .relatorios-fd .pr-track .meta-mk::after{ content:"meta"; position:absolute; top:-0.9375rem; left:50%; transform:translateX(-50%); font-size:0.53125rem; font-weight:800; color:var(--rel-ink-muted); letter-spacing:.04em; } #page-relatorios .relatorios-fd .pr-val{ text-align:right; } #page-relatorios .relatorios-fd .pr-val b{ font-size:0.9375rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .pr-val.miss b{ color:var(--s-bad); } .pr-val.ok b{ color:var(--s-ok); } #page-relatorios .relatorios-fd .pr-val .pc{ display:block; font-size:0.625rem; font-weight:700; color:var(--rel-ink-muted); margin-top:0.0625rem; } /* ---- tabela SLA por área ---- */ #page-relatorios .relatorios-fd .sla-dept{ display:flex; flex-direction:column; } #page-relatorios .relatorios-fd .sd-row{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) 5.25rem; gap:0.75rem; align-items:center; padding:0.6875rem 0; border-top:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .sd-row.head{ border-top:0; padding:0.25rem 0 0.5625rem; } #page-relatorios .relatorios-fd .sd-row.head .sd-c{ font-size:0.625rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .sd-name{ font-size:0.8125rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .sd-c{ font-size:0.8125rem; font-weight:700; color:var(--rel-ink-3); font-variant-numeric:tabular-nums; text-align:right; } #page-relatorios .relatorios-fd .sd-c.num{ color:var(--ink); font-weight:800; } #page-relatorios .relatorios-fd .sd-sla{ text-align:right; } #page-relatorios .relatorios-fd .sd-pill{ display:inline-flex; align-items:center; gap:0.375rem; padding:0.25rem 0.625rem; border-radius:62.4375rem; font-size:0.75rem; font-weight:800; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .sd-pill.ok{ background:var(--s-ok-bg); color:var(--s-ok); } .sd-pill.warn{ background:var(--s-warn-bg); color:var(--s-warn); } .sd-pill.bad{ background:var(--s-bad-bg); color:var(--s-bad); } #page-relatorios .relatorios-fd .sd-pill .d{ width:0.4375rem; height:0.4375rem; border-radius:50%; background:currentColor; } #page-relatorios .relatorios-fd .sd-head-r{ text-align:right; } /* entrada coreografada */ @keyframes sla-up{ from{ opacity:0; transform:translateY(0.625rem);} to{ opacity:1; transform:none; } } #page-relatorios .relatorios-fd .sla .sanim{ animation:sla-up .5s both cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .sla .sanim.settled{ animation:none!important; opacity:1!important; transform:none!important; } @media (prefers-reduced-motion: reduce){ .sla *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } } @media (max-width: 0px) /* ui-scale-freeze: was 1320px */{ #page-relatorios .relatorios-fd .sla-kpis{ grid-template-columns:repeat(3,1fr); } #page-relatorios .relatorios-fd .sla-row.r-bullet, .sla-row.r-split{ grid-template-columns:1fr; } #page-relatorios .relatorios-fd .sla-hero{ grid-template-columns:1fr; } #page-relatorios .relatorios-fd .sla-gauge-cell{ border-right:0; border-bottom:0.0625rem solid var(--line); } } @media (max-width:760px){ #page-relatorios .relatorios-fd .sla-kpis{ grid-template-columns:repeat(2,1fr); } } /* ============================================================ FiveDesk — Relatórios · Indicador ANALISTAS Identidade: equipe & pessoas (roster, avatares, mapa de risco) Namespace .anl — depende de fivedesk-theme.css + dark.css ============================================================ */ #page-relatorios .relatorios-fd .anl{ --a-blue:#007BFF; --a-blue-bg:rgba(0,123,255,.10); --a-ok:#15875b; --a-ok-dot:#1f9d57; --a-ok-bg:#e8f7ef; --a-ok-soft:#d6f0e0; --a-warn:#b4790a; --a-warn-dot:#e0a106; --a-warn-bg:#fff3df; --a-warn-soft:#fbe9c8; --a-bad:#cf3b40; --a-bad-dot:#e5484d; --a-bad-bg:#fdecec; --a-bad-soft:#f8dcdd; --a-cost:#5b6a86; --a-elev-1:0 0.0625rem 0.125rem rgba(13,27,52,.06); --a-elev-2:0 0.625rem 1.625rem -0.875rem rgba(13,27,52,.20); --a-elev-3:0 1.375rem 3.25rem -1.625rem rgba(13,27,52,.32); } html[data-theme="dark"] #page-relatorios .relatorios-fd .anl{ --a-blue:#7fb6ff; --a-blue-bg:rgba(59,155,255,.14); --a-ok:#3fc285; --a-ok-dot:#34d399; --a-ok-bg:rgba(31,157,87,.16); --a-ok-soft:rgba(31,157,87,.24); --a-warn:#f1b53d; --a-warn-dot:#e0a106; --a-warn-bg:rgba(224,161,6,.14); --a-warn-soft:rgba(224,161,6,.24); --a-bad:#f1797d; --a-bad-dot:#e5484d; --a-bad-bg:rgba(207,59,64,.16); --a-bad-soft:rgba(207,59,64,.24); --a-cost:#9aa7bd; --a-elev-2:0 0.75rem 1.875rem -1rem rgba(0,0,0,.6); --a-elev-3:0 1.5rem 3.5rem -1.5rem rgba(0,0,0,.72); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .anl{ --a-blue:#0a2c5c; --a-blue-bg:rgba(11,99,214,.14); --a-ok:#0e4a2c; --a-ok-dot:#0e4a2c; --a-ok-bg:rgba(31,157,87,.16); --a-ok-soft:rgba(31,157,87,.24); --a-warn:#6b3b08; --a-warn-dot:#e0a106; --a-warn-bg:rgba(224,161,6,.14); --a-warn-soft:rgba(224,161,6,.24); --a-bad:#6e1614; --a-bad-dot:#e5484d; --a-bad-bg:rgba(151,35,31,.16); --a-bad-soft:rgba(151,35,31,.24); --a-cost:#9aa7bd; --a-elev-2:0 0.75rem 1.875rem -1rem rgba(0,0,0,.6); --a-elev-3:0 1.5rem 3.5rem -1.5rem rgba(0,0,0,.72); } #page-relatorios .relatorios-fd .anl .chart-head .ch-tot b{ font-variant-numeric:tabular-nums; white-space:nowrap; } #page-relatorios .relatorios-fd .anl-body{ padding:1.125rem 1.375rem 1.375rem; } /* avatar base */ #page-relatorios .relatorios-fd .av{ border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex:none; letter-spacing:-0.01875rem; position:relative; } #page-relatorios .relatorios-fd .av .pip{ position:absolute; right:-0.0625rem; bottom:-0.0625rem; border-radius:50%; border:0.15625rem solid var(--surface); background:#c6d0e0; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .av .pip{ background:rgba(var(--rel-accent-rgb),0.16); } #page-relatorios .relatorios-fd .av.on .pip{ background:var(--a-ok-dot); } .av.busy .pip{ background:var(--a-warn-dot); } .av.off .pip{ background:#c6d0e0; } html[data-theme="cinza"] #page-relatorios .av.off .pip{ background:rgba(var(--rel-accent-rgb),0.16); } /* ============================================================ HERO — pulso da equipe (cluster de avatares + stats) ============================================================ */ #page-relatorios .relatorios-fd .anl-hero{ display:grid; grid-template-columns:21.25rem 1fr; gap:0; margin-bottom:1.25rem; background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--a-elev-2); overflow:hidden; } #page-relatorios .relatorios-fd .anl-pulse{ position:relative; padding:1.375rem 1.5rem; border-right:0.0625rem solid var(--line); display:flex; flex-direction:column; gap:1rem; background:linear-gradient(160deg,var(--a-blue-bg),transparent 72%); } #page-relatorios .relatorios-fd .anl-pulse-h{ font-size:0.6875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } #page-relatorios .relatorios-fd .anl-ring{ display:flex; align-items:center; gap:1rem; } #page-relatorios .relatorios-fd .anl-ring .ringwrap{ position:relative; width:6rem; height:6rem; flex:none; } #page-relatorios .relatorios-fd .anl-ring svg{ transform:rotate(-90deg); } #page-relatorios .relatorios-fd .anl-ring .rg-track{ fill:none; stroke:var(--field); stroke-width:11; } #page-relatorios .relatorios-fd .anl-ring .rg-fill{ fill:none; stroke:var(--a-ok-dot); stroke-width:11; stroke-linecap:round; transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .anl-ring .rg-ctr{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } #page-relatorios .relatorios-fd .anl-ring .rg-ctr b{ font-size:1.5rem; font-weight:800; letter-spacing:-0.0625rem; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .anl-ring .rg-ctr span{ font-size:0.59375rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:0.1875rem; } #page-relatorios .relatorios-fd .anl-ring .rg-tx .big{ font-size:0.875rem; font-weight:800; color:var(--ink); } #page-relatorios .relatorios-fd .anl-ring .rg-tx .sub{ font-size:0.71875rem; color:var(--muted); margin-top:0.125rem; line-height:1.4; } #page-relatorios .relatorios-fd .anl-cluster{ display:flex; align-items:center; } #page-relatorios .relatorios-fd .anl-cluster .av{ width:2.375rem; height:2.375rem; font-size:0.8125rem; margin-left:-0.5625rem; box-shadow:0 0 0 0.15625rem var(--surface); } #page-relatorios .relatorios-fd .anl-cluster .av:first-child{ margin-left:0; } #page-relatorios .relatorios-fd .anl-cluster .av .pip{ width:0.6875rem; height:0.6875rem; } #page-relatorios .relatorios-fd .anl-cluster .more{ width:2.375rem; height:2.375rem; border-radius:50%; margin-left:-0.5625rem; background:var(--field); color:var(--rel-ink-faint); display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:800; box-shadow:0 0 0 0.15625rem var(--surface); z-index:2; } #page-relatorios .relatorios-fd .anl-pulse-foot{ display:flex; gap:0.5rem; margin-top:auto; } #page-relatorios .relatorios-fd .anl-pulse-foot .pf{ flex:1; display:flex; flex-direction:column; gap:0.125rem; padding:0.5625rem 0.6875rem; border-radius:var(--radius-card); background:var(--surface); border:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .anl-pulse-foot .pf b{ font-size:1.0625rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; } #page-relatorios .relatorios-fd .anl-pulse-foot .pf.on b{ color:var(--a-ok); } .anl-pulse-foot .pf.busy b{ color:var(--a-warn); } .anl-pulse-foot .pf.off b{ color:var(--a-cost); } #page-relatorios .relatorios-fd .anl-pulse-foot .pf span{ font-size:0.625rem; font-weight:700; letter-spacing:.03em; color:var(--muted); } /* saldo operacional — recebidos vs resolvidos */ #page-relatorios .relatorios-fd .anl-saldo{ padding:1.375rem 1.625rem; display:flex; flex-direction:column; justify-content:center; gap:1rem; } #page-relatorios .relatorios-fd .anl-saldo-h{ display:flex; align-items:baseline; gap:0.625rem; } #page-relatorios .relatorios-fd .anl-saldo-h .ttl{ font-size:0.8125rem; font-weight:800; color:var(--ink); } #page-relatorios .relatorios-fd .anl-saldo-h .sub{ font-size:0.71875rem; color:var(--muted); } #page-relatorios .relatorios-fd .anl-saldo-h .verdict{ margin-left:auto; font-size:0.71875rem; font-weight:800; padding:0.25rem 0.6875rem; border-radius:62.4375rem; display:inline-flex; align-items:center; gap:0.375rem; } #page-relatorios .relatorios-fd .anl-saldo-h .verdict.pos{ background:var(--a-ok-bg); color:var(--a-ok); } #page-relatorios .relatorios-fd .anl-saldo-h .verdict.neg{ background:var(--a-bad-bg); color:var(--a-bad); } #page-relatorios .relatorios-fd .anl-saldo-h .verdict .d{ width:0.4375rem; height:0.4375rem; border-radius:50%; background:currentColor; } #page-relatorios .relatorios-fd .saldo-rows{ display:flex; flex-direction:column; gap:0.8125rem; } #page-relatorios .relatorios-fd .saldo-row{ display:grid; grid-template-columns:6rem 1fr 4rem; gap:0.8125rem; align-items:center; } #page-relatorios .relatorios-fd .saldo-row .sl-l{ font-size:0.78125rem; font-weight:700; color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .saldo-row .sl-track{ height:1.125rem; border-radius:0.375rem; background:var(--field); overflow:hidden; position:relative; } #page-relatorios .relatorios-fd .saldo-row .sl-track i{ position:absolute; left:0; top:0; bottom:0; border-radius:0.375rem; transition:width 1s cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .saldo-row.rec .sl-track i{ background:linear-gradient(90deg,#7fb6ff,var(--rel-accent-chart)); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .saldo-row.rec .sl-track i{ background:linear-gradient(90deg,var(--rel-accent-ink),var(--rel-accent-chart)); } #page-relatorios .relatorios-fd .saldo-row.res .sl-track i{ background:linear-gradient(90deg,#46cf94,#15875b); } #page-relatorios .relatorios-fd .saldo-row .sl-v{ font-size:0.9375rem; font-weight:800; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .anl-saldo-note{ font-size:0.71875rem; color:var(--muted); display:flex; align-items:center; gap:0.4375rem; } #page-relatorios .relatorios-fd .anl-saldo-note b{ color:var(--ink); font-weight:800; } /* ============================================================ KPIs (DNA comum) ============================================================ */ #page-relatorios .relatorios-fd .anl-kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:0.875rem; margin-bottom:1.25rem; } #page-relatorios .relatorios-fd .ak{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--a-elev-1); padding:0.9375rem 1rem 0.8125rem; display:flex; flex-direction:column; transition:.16s; } #page-relatorios .relatorios-fd .ak:hover{ box-shadow:var(--a-elev-2); transform:translateY(-0.125rem); } #page-relatorios .relatorios-fd .ak .ak-top{ display:flex; align-items:center; gap:0.4375rem; margin-bottom:0.5625rem; } #page-relatorios .relatorios-fd .ak .ak-dot{ width:0.5rem; height:0.5rem; border-radius:50%; background:var(--a-blue); flex:none; } #page-relatorios .relatorios-fd .ak.ac-ok .ak-dot{ background:var(--a-ok-dot); } .ak.ac-warn .ak-dot{ background:var(--a-warn-dot); } .ak.ac-bad .ak-dot{ background:var(--a-bad-dot); } .ak.ac-cost .ak-dot{ background:var(--a-cost); } #page-relatorios .relatorios-fd .ak .ak-l{ font-size:0.6875rem; font-weight:700; letter-spacing:.02em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .ak .ak-v{ font-size:1.5625rem; font-weight:800; letter-spacing:-0.0625rem; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .ak .ak-v .u{ font-size:0.875rem; font-weight:700; color:var(--muted); letter-spacing:0; } #page-relatorios .relatorios-fd .ak .ak-spark{ height:1.875rem; margin:0.5625rem 0 0.125rem; } #page-relatorios .relatorios-fd .ak .ak-spark svg{ width:100%; height:100%; display:block; overflow:visible; } #page-relatorios .relatorios-fd .ak .ak-foot{ margin-top:auto; padding-top:0.625rem; border-top:0.0625rem solid var(--line); display:flex; align-items:center; gap:0.375rem; font-size:0.71875rem; font-weight:700; } #page-relatorios .relatorios-fd .ak .ak-foot .delta{ display:inline-flex; align-items:center; gap:0.1875rem; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .ak .ak-foot .delta.up{ color:var(--a-ok); } .ak .ak-foot .delta.down{ color:var(--a-bad); } .ak .ak-foot .delta.flat{ color:var(--muted); } #page-relatorios .relatorios-fd .ak .ak-foot .delta svg{ width:0.8125rem; height:0.8125rem; } #page-relatorios .relatorios-fd .ak .ak-foot .lbl{ color:var(--muted); font-weight:600; } /* ============================================================ PAINÉIS ============================================================ */ #page-relatorios .relatorios-fd .anl-row{ display:grid; gap:1.125rem; margin-bottom:1.25rem; } #page-relatorios .relatorios-fd .anl-row.r-split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } #page-relatorios .relatorios-fd .apanel{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--a-elev-1); display:flex; flex-direction:column; overflow:hidden; } #page-relatorios .relatorios-fd .apanel .ap-head{ display:flex; align-items:center; gap:0.6875rem; padding:1rem 1.125rem 0; } #page-relatorios .relatorios-fd .apanel .ap-ic{ width:2rem; height:2rem; border-radius:0.5625rem; background:var(--a-blue-bg); color:var(--a-blue); display:flex; align-items:center; justify-content:center; flex:none; } #page-relatorios .relatorios-fd .apanel .ap-ic svg{ width:1.0625rem; height:1.0625rem; } #page-relatorios .relatorios-fd .apanel .ap-head h3{ font-size:0.90625rem; font-weight:800; letter-spacing:-0.0125rem; margin:0; color:var(--ink); } #page-relatorios .relatorios-fd .apanel .ap-head .ap-sub{ font-size:0.71875rem; color:var(--muted); margin-top:0.0625rem; } #page-relatorios .relatorios-fd .apanel .ap-head .sp{ flex:1; } #page-relatorios .relatorios-fd .apanel .ap-head .ap-tag{ font-size:0.6875rem; font-weight:700; color:var(--muted); } #page-relatorios .relatorios-fd .apanel .ap-body{ padding:0.875rem 1.125rem 1.125rem; flex:1; } /* ---- ROSTER carga de trabalho ---- */ #page-relatorios .relatorios-fd .roster{ display:flex; flex-direction:column; } #page-relatorios .relatorios-fd .rs-row{ display:grid; grid-template-columns:2.5rem minmax(0,1.5fr) minmax(0,2fr) 5.375rem; gap:0.8125rem; align-items:center; padding:0.6875rem 0; border-top:0.0625rem solid var(--line); cursor:pointer; transition:.12s; } #page-relatorios .relatorios-fd .rs-row:first-child{ border-top:0; } #page-relatorios .relatorios-fd .rs-row:hover{ background:var(--field); margin:0 -0.625rem; padding-left:0.625rem; padding-right:0.625rem; border-radius:0.625rem; } #page-relatorios .relatorios-fd .rs-row:hover + .rs-row{ border-top-color:transparent; } #page-relatorios .relatorios-fd .rs-av{ width:2.5rem; height:2.5rem; font-size:0.8125rem; } #page-relatorios .relatorios-fd .rs-av .pip{ width:0.75rem; height:0.75rem; } #page-relatorios .relatorios-fd .rs-id{ min-width:0; } #page-relatorios .relatorios-fd .rs-name{ font-size:0.84375rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .rs-role{ font-size:0.71875rem; color:var(--muted); margin-top:0.0625rem; } #page-relatorios .relatorios-fd .rs-load{ display:flex; flex-direction:column; gap:0.3125rem; } #page-relatorios .relatorios-fd .rs-bar{ height:0.5625rem; border-radius:0.3125rem; background:var(--field); overflow:hidden; position:relative; display:flex; } #page-relatorios .relatorios-fd .rs-bar i{ height:100%; transition:width 1s cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .rs-bar .seg-cli{ background:#8fb8e8; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .rs-bar .seg-cli{ background:var(--rel-accent-ink); } .rs-bar .seg-atd{ background:var(--rel-accent-chart); } .rs-bar .seg-pause{ background:#c6d0e0; } html[data-theme="cinza"] #page-relatorios .rs-bar .seg-pause{ background:rgba(var(--rel-accent-rgb),0.16); } #page-relatorios .relatorios-fd .rs-row.over .rs-bar .seg-atd{ background:#e0701e; } #page-relatorios .relatorios-fd .rs-row.crit .rs-bar .seg-atd{ background:var(--rel-danger); } #page-relatorios .relatorios-fd .rs-meta{ display:flex; gap:0.5625rem; font-size:0.65625rem; font-weight:700; color:var(--rel-icon-muted); } #page-relatorios .relatorios-fd .rs-meta b{ color:var(--rel-ink-3); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .rs-meta .warn{ color:var(--a-warn); } .rs-meta .bad{ color:var(--a-bad); } #page-relatorios .relatorios-fd .rs-cap{ text-align:right; } #page-relatorios .relatorios-fd .rs-cap b{ font-size:1rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .rs-cap.over b{ color:var(--a-warn); } .rs-cap.crit b{ color:var(--a-bad); } #page-relatorios .relatorios-fd .rs-cap span{ display:block; font-size:0.625rem; font-weight:700; color:var(--rel-ink-muted); } /* legenda roster */ #page-relatorios .relatorios-fd .roster-leg{ display:flex; gap:1rem; margin-bottom:0.75rem; flex-wrap:wrap; } #page-relatorios .relatorios-fd .roster-leg .rl{ display:inline-flex; align-items:center; gap:0.375rem; font-size:0.6875rem; font-weight:700; color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .roster-leg .rl .d{ width:0.625rem; height:0.625rem; border-radius:0.1875rem; } #page-relatorios .relatorios-fd .roster-leg .rl .d.cli{ background:#8fb8e8; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .roster-leg .rl .d.cli{ background:var(--rel-accent-ink); } .roster-leg .rl .d.atd{ background:var(--rel-accent-chart); } .roster-leg .rl .d.pause{ background:#c6d0e0; } html[data-theme="cinza"] #page-relatorios .roster-leg .rl .d.pause{ background:rgba(var(--rel-accent-rgb),0.16); } /* ---- MAPA DE RISCO (scatter quadrante) ---- */ #page-relatorios .relatorios-fd .riskmap{ position:relative; } #page-relatorios .relatorios-fd .riskmap-wrap{ position:relative; width:100%; } #page-relatorios .relatorios-fd .riskmap svg{ width:100%; display:block; overflow:visible; } #page-relatorios .relatorios-fd .riskmap .quad{ opacity:.5; } #page-relatorios .relatorios-fd .riskmap .quad.q-bad{ fill:var(--a-bad-soft); } .riskmap .quad.q-warn{ fill:var(--a-warn-soft); } .riskmap .quad.q-ok{ fill:var(--a-ok-soft); } #page-relatorios .relatorios-fd .riskmap .qlabel{ font-size:0.625rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; fill:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .riskmap .axline{ stroke:var(--line); stroke-width:1.4; } #page-relatorios .relatorios-fd .riskmap .axtick{ font-size:0.625rem; font-weight:600; fill:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .riskmap .axtitle{ font-size:0.6875rem; font-weight:800; fill:var(--rel-ink-faint); } #page-relatorios .relatorios-fd .riskmap .bub{ cursor:pointer; transition:transform .12s; } #page-relatorios .relatorios-fd .riskmap .bub circle{ stroke:var(--surface); stroke-width:2; transition:.14s; } #page-relatorios .relatorios-fd .riskmap .bub:hover circle{ filter:brightness(1.08); } #page-relatorios .relatorios-fd .riskmap .bub text{ font-size:0.625rem; font-weight:800; fill:#fff; text-anchor:middle; pointer-events:none; } #page-relatorios .relatorios-fd .riskmap-tip{ position:fixed; pointer-events:none; background:var(--ink); color:#fff; border-radius:0.5625rem; padding:0.5625rem 0.75rem; font-size:0.71875rem; box-shadow:var(--a-elev-2); opacity:0; transition:opacity .1s; z-index:60; white-space:nowrap; transform:translate(-50%,-118%); } #page-relatorios .relatorios-fd .riskmap-tip .t{ font-weight:800; margin-bottom:0.1875rem; } #page-relatorios .relatorios-fd .riskmap-tip .r{ display:flex; justify-content:space-between; gap:0.875rem; } #page-relatorios .relatorios-fd .riskmap-tip .r b{ font-variant-numeric:tabular-nums; } /* ---- Ações sugeridas (ponte análise → ação, abaixo do scatter) ---- */ #page-relatorios .relatorios-fd .risk-actions{ margin-top:0.875rem; padding-top:0.9375rem; border-top:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .risk-actions .ra-h{ font-size:0.6875rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--rel-ink-muted); margin-bottom:0.6875rem; } #page-relatorios .relatorios-fd .ra-list{ display:flex; flex-direction:column; gap:0.5rem; } #page-relatorios .relatorios-fd .ra-item{ display:flex; align-items:center; gap:0.75rem; padding:0.5625rem 0.6875rem; border-radius:var(--radius-card); border:0.0625rem solid var(--line); background:var(--surface); cursor:pointer; transition:.14s; } #page-relatorios .relatorios-fd .ra-item:hover{ border-color:#cfdbef; box-shadow:var(--a-elev-1); } html[data-theme="dark"] #page-relatorios .relatorios-fd .ra-item:hover{ border-color:rgba(127,182,255,.34); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .ra-item:hover{ border-color:rgba(10,61,128,.34); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .ra-item:hover{ border-color:var(--rel-ink-3); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .ra-item:hover{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .ra-sev{ width:0.25rem; align-self:stretch; border-radius:0.1875rem; flex:none; background:#c6d0e0; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .ra-sev{ background:rgba(var(--rel-accent-rgb),0.16); } #page-relatorios .relatorios-fd .ra-sev.crit{ background:var(--a-bad-dot); } .ra-sev.warn{ background:var(--a-warn-dot); } .ra-sev.ok{ background:var(--a-ok-dot); } #page-relatorios .relatorios-fd .ra-item .ra-av{ width:2rem; height:2rem; font-size:0.71875rem; } #page-relatorios .relatorios-fd .ra-item .ra-av .pip{ width:0.5625rem; height:0.5625rem; } #page-relatorios .relatorios-fd .ra-id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:0.0625rem; } #page-relatorios .relatorios-fd .ra-name{ font-size:0.8125rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .ra-reason{ font-size:0.71875rem; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .ra-btn{ flex:none; display:inline-flex; align-items:center; gap:0.375rem; height:2rem; padding:0 0.8125rem; border-radius:0.5625rem; border:0.0625rem solid var(--line); background:var(--surface); color:var(--rel-ink-3); font-family:inherit; font-size:0.75rem; font-weight:700; cursor:pointer; transition:.14s; white-space:nowrap; } #page-relatorios .relatorios-fd .ra-btn svg{ width:0.875rem; height:0.875rem; } #page-relatorios .relatorios-fd .ra-btn:hover{ border-color:var(--a-blue); color:var(--a-blue); background:var(--a-blue-bg); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .ra-btn:hover{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .ra-btn.alt:hover{ border-color:var(--a-warn-dot); color:var(--a-warn); background:var(--a-warn-bg); } @media (max-width:520px){ .ra-reason{ white-space:normal; } } /* ============================================================ TABELA COMPARATIVA ============================================================ */ #page-relatorios .relatorios-fd .anl-table-wrap{ margin-bottom:0.5rem; } #page-relatorios .relatorios-fd .atbl{ width:100%; border-collapse:collapse; } #page-relatorios .relatorios-fd .atbl thead th{ font-size:0.65625rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--rel-ink-muted); text-align:right; padding:0 0 0.6875rem; cursor:pointer; user-select:none; white-space:nowrap; transition:.12s; } #page-relatorios .relatorios-fd .atbl thead th:first-child{ text-align:left; } #page-relatorios .relatorios-fd .atbl thead th:hover{ color:var(--a-blue); } #page-relatorios .relatorios-fd .atbl thead th .ar{ display:inline-block; width:0.625rem; opacity:0; transition:.12s; } #page-relatorios .relatorios-fd .atbl thead th.sorted .ar{ opacity:1; } #page-relatorios .relatorios-fd .atbl thead th.sorted{ color:var(--a-blue); } #page-relatorios .relatorios-fd .atbl tbody td{ padding:0.75rem 0; border-top:0.0625rem solid var(--line); font-size:0.8125rem; text-align:right; font-variant-numeric:tabular-nums; color:var(--rel-ink-3); font-weight:700; } #page-relatorios .relatorios-fd .atbl tbody td:first-child{ text-align:left; } #page-relatorios .relatorios-fd .atbl tbody tr{ cursor:pointer; transition:.12s; } #page-relatorios .relatorios-fd .atbl tbody tr:hover td{ background:var(--field); } #page-relatorios .relatorios-fd .atbl tbody tr:hover td:first-child{ border-top-left-radius:0.5625rem; border-bottom-left-radius:0.5625rem; } #page-relatorios .relatorios-fd .atbl tbody tr:hover td:last-child{ border-top-right-radius:0.5625rem; border-bottom-right-radius:0.5625rem; } #page-relatorios .relatorios-fd .at-an{ display:flex; align-items:center; gap:0.6875rem; } #page-relatorios .relatorios-fd .at-an .av{ width:2.125rem; height:2.125rem; font-size:0.75rem; } #page-relatorios .relatorios-fd .at-an .av .pip{ width:0.625rem; height:0.625rem; } #page-relatorios .relatorios-fd .at-an .nm{ font-size:0.8125rem; font-weight:700; color:var(--ink); } #page-relatorios .relatorios-fd .at-an .rl{ font-size:0.6875rem; color:var(--muted); margin-top:0.0625rem; } #page-relatorios .relatorios-fd .at-st{ display:inline-flex; align-items:center; gap:0.375rem; padding:0.25rem 0.625rem; border-radius:62.4375rem; font-size:0.6875rem; font-weight:800; } #page-relatorios .relatorios-fd .at-st.on{ background:var(--a-ok-bg); color:var(--a-ok); } .at-st.busy{ background:var(--a-warn-bg); color:var(--a-warn); } .at-st.off{ background:var(--field); color:var(--rel-icon-muted); } #page-relatorios .relatorios-fd .at-st .d{ width:0.375rem; height:0.375rem; border-radius:50%; background:currentColor; } #page-relatorios .relatorios-fd .at-num.hot{ color:var(--a-warn); } .at-num.crit{ color:var(--a-bad); font-weight:800; } #page-relatorios .relatorios-fd .at-pill{ display:inline-flex; align-items:center; gap:0.3125rem; padding:0.1875rem 0.5625rem; border-radius:62.4375rem; font-size:0.75rem; font-weight:800; } #page-relatorios .relatorios-fd .at-pill.ok{ background:var(--a-ok-bg); color:var(--a-ok); } .at-pill.warn{ background:var(--a-warn-bg); color:var(--a-warn); } .at-pill.bad{ background:var(--a-bad-bg); color:var(--a-bad); } #page-relatorios .relatorios-fd .at-sat{ display:inline-flex; align-items:center; gap:0.25rem; justify-content:flex-end; } #page-relatorios .relatorios-fd .at-sat svg{ width:0.8125rem; height:0.8125rem; color:var(--a-warn-dot); } #page-relatorios .relatorios-fd .at-act{ width:1.875rem; height:1.875rem; border-radius:0.5rem; border:0.0625rem solid var(--line); background:var(--surface); color:var(--rel-icon-muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.14s; } #page-relatorios .relatorios-fd .at-act:hover{ border-color:var(--a-blue); color:var(--a-blue); background:var(--a-blue-bg); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .at-act:hover{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .at-act svg{ width:0.9375rem; height:0.9375rem; } /* ============================================================ DRAWER detalhe do analista ============================================================ */ #page-relatorios .relatorios-fd .anl-scrim{ position:fixed; inset:0; background:rgba(var(--rel-ink-rgb),.38); opacity:0; pointer-events:none; transition:opacity .25s; z-index:var(--app-layer-scrim,2050); backdrop-filter:none; -webkit-backdrop-filter:none; } #page-relatorios .relatorios-fd .anl-scrim.open{ opacity:1; pointer-events:auto; } #page-relatorios .relatorios-fd .anl-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(35rem,94vw); background:var(--bg-app); box-shadow:none; transform:translateX(100%); transition:transform .32s cubic-bezier(.22,1,.36,1); z-index:var(--app-layer-drawer,2051); display:flex; flex-direction:column; isolation:isolate; backdrop-filter:none; -webkit-backdrop-filter:none; } #page-relatorios .relatorios-fd .anl-drawer.open{ transform:none; } #page-relatorios .relatorios-fd .adw-head{ display:flex; align-items:center; gap:0.875rem; padding:1.25rem 1.375rem; border-bottom:0.0625rem solid var(--line); background:var(--surface); } #page-relatorios .relatorios-fd .adw-head .av{ width:3.375rem; height:3.375rem; font-size:1.125rem; } #page-relatorios .relatorios-fd .adw-head .av .pip{ width:0.9375rem; height:0.9375rem; } #page-relatorios .relatorios-fd .adw-id{ flex:1; min-width:0; } #page-relatorios .relatorios-fd .adw-id .nm{ font-size:1.125rem; font-weight:800; color:var(--ink); letter-spacing:-0.01875rem; } #page-relatorios .relatorios-fd .adw-id .rl{ font-size:0.78125rem; color:var(--muted); margin-top:0.125rem; display:flex; align-items:center; gap:0.5rem; } #page-relatorios .relatorios-fd .adw-close{ width:2.25rem; height:2.25rem; border-radius:0.625rem; border:0.0625rem solid var(--line); background:var(--surface); color:var(--rel-ink-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.14s; flex:none; } #page-relatorios .relatorios-fd .adw-close:hover{ border-color:var(--a-bad); color:var(--a-bad); } #page-relatorios .relatorios-fd .adw-close svg{ width:1.125rem; height:1.125rem; } #page-relatorios .relatorios-fd .adw-body{ flex:1; overflow-y:auto; padding:1.25rem 1.375rem 1.75rem; } #page-relatorios .relatorios-fd .adw-sec-l{ font-size:0.6875rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--rel-ink-muted); margin:0 0 0.75rem; } #page-relatorios .relatorios-fd .adw-sec-l:not(:first-child){ margin-top:1.5rem; } #page-relatorios .relatorios-fd .adw-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.625rem; } #page-relatorios .relatorios-fd .adw-stat{ padding:0.8125rem 0.9375rem; border-radius:var(--radius-card); border:0.0625rem solid var(--line); background:var(--surface); } #page-relatorios .relatorios-fd .adw-stat .v{ font-size:1.4375rem; font-weight:800; letter-spacing:-0.05rem; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .adw-stat .v.ok{ color:var(--a-ok); } .adw-stat .v.warn{ color:var(--a-warn); } .adw-stat .v.bad{ color:var(--a-bad); } #page-relatorios .relatorios-fd .adw-stat .l{ font-size:0.6875rem; font-weight:700; color:var(--muted); margin-top:0.375rem; } /* mini barras canal / motivo */ #page-relatorios .relatorios-fd .adw-dist{ display:flex; flex-direction:column; gap:0.625rem; } #page-relatorios .relatorios-fd .adw-dist .dr{ display:grid; grid-template-columns:6.5rem 1fr 2.625rem; gap:0.6875rem; align-items:center; } #page-relatorios .relatorios-fd .adw-dist .dr .dn{ font-size:0.75rem; font-weight:700; color:var(--rel-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .adw-dist .dr .dt{ height:0.875rem; border-radius:0.3125rem; background:var(--field); overflow:hidden; position:relative; } #page-relatorios .relatorios-fd .adw-dist .dr .dt i{ position:absolute; left:0; top:0; bottom:0; border-radius:0.3125rem; background:linear-gradient(90deg,#5fb0ff,var(--rel-accent-chart)); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .adw-dist .dr .dt i{ background:linear-gradient(90deg,var(--rel-accent-ink),var(--rel-accent-chart)); } #page-relatorios .relatorios-fd .adw-dist .dr .dv{ font-size:0.75rem; font-weight:800; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; } /* lista de tickets que exigem ação */ #page-relatorios .relatorios-fd .adw-tix{ display:flex; flex-direction:column; gap:0.5rem; } #page-relatorios .relatorios-fd .adw-tk{ display:flex; align-items:center; gap:0.75rem; padding:0.6875rem 0.8125rem; border-radius:var(--radius-card); border:0.0625rem solid var(--line); background:var(--surface); } #page-relatorios .relatorios-fd .adw-tk .tk-pr{ width:0.25rem; align-self:stretch; border-radius:0.1875rem; flex:none; } #page-relatorios .relatorios-fd .adw-tk .tk-pr.crit{ background:var(--a-bad-dot); } .adw-tk .tk-pr.alto{ background:var(--a-warn-dot); } .adw-tk .tk-pr.medio{ background:var(--a-blue); } #page-relatorios .relatorios-fd .adw-tk .tk-id{ flex:1; min-width:0; } #page-relatorios .relatorios-fd .adw-tk .tk-proto{ font-size:0.78125rem; font-weight:800; color:var(--ink); } #page-relatorios .relatorios-fd .adw-tk .tk-sub{ font-size:0.71875rem; color:var(--muted); margin-top:0.0625rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .adw-tk .tk-sla{ font-size:0.6875rem; font-weight:800; padding:0.1875rem 0.5625rem; border-radius:62.4375rem; white-space:nowrap; flex:none; } #page-relatorios .relatorios-fd .adw-tk .tk-sla.bad{ background:var(--a-bad-bg); color:var(--a-bad); } .adw-tk .tk-sla.warn{ background:var(--a-warn-bg); color:var(--a-warn); } #page-relatorios .relatorios-fd .adw-foot{ padding:1rem 1.375rem; border-top:0.0625rem solid var(--line); background:var(--surface); display:flex; gap:0.625rem; } #page-relatorios .relatorios-fd .adw-foot button{ flex:1; height:2.625rem; border-radius:0.6875rem; font-family:inherit; font-size:0.8125rem; font-weight:800; cursor:pointer; transition:.15s; border:0.0625rem solid var(--line); background:var(--surface); color:var(--rel-ink-2); display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; } #page-relatorios .relatorios-fd .adw-foot button svg{ width:1rem; height:1rem; } #page-relatorios .relatorios-fd .adw-foot button.primary{ background:var(--a-blue); color:#fff; border-color:var(--a-blue); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .adw-foot button.primary{ border-color:var(--rel-line); } #page-relatorios .relatorios-fd .adw-foot button:hover{ transform:translateY(-0.0625rem); box-shadow:var(--a-elev-2); } /* entrada coreografada */ @keyframes anl-up{ from{ opacity:0; transform:translateY(0.625rem);} to{ opacity:1; transform:none; } } #page-relatorios .relatorios-fd .anl .aanim{ animation:anl-up .5s both cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .anl .aanim.settled{ animation:none!important; opacity:1!important; transform:none!important; } @media (prefers-reduced-motion: reduce){ .anl *, .anl-drawer{ animation-duration:.001ms!important; transition-duration:.001ms!important; } } @media (max-width: 0px) /* ui-scale-freeze: was 1320px */{ #page-relatorios .relatorios-fd .anl-kpis{ grid-template-columns:repeat(3,1fr); } #page-relatorios .relatorios-fd .anl-row.r-split{ grid-template-columns:1fr; } #page-relatorios .relatorios-fd .anl-hero{ grid-template-columns:1fr; } #page-relatorios .relatorios-fd .anl-pulse{ border-right:0; border-bottom:0.0625rem solid var(--line); } } @media (max-width:860px){ .atbl thead th.opt, .atbl tbody td.opt{ display:none; } } @media (max-width:760px){ .anl-kpis{ grid-template-columns:repeat(2,1fr); } } /* ============================================================ FiveDesk — Custom Select (lista suspensa estilizada) Substitui a lista nativa do original é mantido (escondido) para estado/acessibilidade; aqui só a UI. ============================================================ */ #page-relatorios .relatorios-fd .fdsel{ position:relative; } #page-relatorios .relatorios-fd .fdsel-native{ position:absolute; width:0.0625rem; height:0.0625rem; padding:0; margin:-0.0625rem; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* gatilho — herda o visual dos filtros (.fselect) */ #page-relatorios .relatorios-fd .fdsel-trigger{ display:flex; align-items:center; gap:0.625rem; width:100%; height:2.875rem; padding:0 0.75rem 0 0.875rem; border:0.0625rem solid var(--line); border-radius:0.75rem; background:var(--surface); font-family:inherit; font-size:0.84375rem; font-weight:600; color:var(--rel-ink-2); cursor:pointer; outline:none; transition:.16s cubic-bezier(.22,1,.36,1); text-align:left; } html[data-theme="dark"] #page-relatorios .relatorios-fd .fdsel-trigger{ color:var(--ink); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .fdsel-trigger{ color:var(--ink); } #page-relatorios .relatorios-fd .fdsel-trigger .fdsel-val{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .fdsel-trigger.is-placeholder .fdsel-val{ color:var(--muted); font-weight:600; } #page-relatorios .relatorios-fd .fdsel-trigger .fdsel-chev{ width:1rem; height:1rem; color:var(--rel-icon-muted); flex:none; transition:transform .2s cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .fdsel-trigger:hover{ border-color:#cfdbef; } html[data-theme="dark"] #page-relatorios .relatorios-fd .fdsel-trigger:hover{ border-color:rgba(127,182,255,.4); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .fdsel-trigger:hover{ border-color:rgba(10,61,128,.4); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .fdsel-trigger:hover{ border-color:var(--rel-ink-3); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .fdsel-trigger:hover{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .fdsel-trigger:focus-visible{ border-color:var(--blue); box-shadow:0 0 0 0.25rem rgba(var(--rel-accent-rgb),.13); } #page-relatorios .relatorios-fd .fdsel.open .fdsel-trigger{ border-color:var(--blue); box-shadow:0 0 0 0.25rem rgba(var(--rel-accent-rgb),.13); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .fdsel.open .fdsel-trigger{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .fdsel.open .fdsel-chev{ transform:rotate(180deg); color:var(--blue); } /* valor selecionado (não-placeholder) ganha um ponto-âncora azul discreto */ #page-relatorios .relatorios-fd .fdsel-trigger .fdsel-dot{ width:0.4375rem; height:0.4375rem; border-radius:50%; background:var(--blue); flex:none; opacity:0; transition:.16s; } #page-relatorios .relatorios-fd .fdsel-trigger:not(.is-placeholder) .fdsel-dot{ opacity:1; } /* painel suspenso */ #page-relatorios .relatorios-fd .fdsel-pop{ position:absolute; z-index:120; left:0; top:calc(100% + 0.4375rem); min-width:100%; background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-3, 0 1.375rem 3.25rem -1.375rem rgba(13,27,52,.34)); padding:0; display:none; overflow:hidden; } #page-relatorios .relatorios-fd .fdsel-pop.up{ top:auto; bottom:calc(100% + 0.4375rem); } #page-relatorios .relatorios-fd .fdsel.open .fdsel-pop{ display:block; animation:fdsel-pop .18s cubic-bezier(.22,1,.36,1) both; } #page-relatorios .relatorios-fd .fdsel-pop.up.anim-up{ transform-origin:bottom center; } @keyframes fdsel-pop{ from{ opacity:0; transform:translateY(-0.375rem) scale(.985); } to{ opacity:1; transform:none; } } #page-relatorios .relatorios-fd .fdsel-pop.up{ transform-origin:bottom; } /* busca (listas longas) */ #page-relatorios .relatorios-fd .fdsel-search{ display:flex; align-items:center; gap:0.5rem; padding:0.625rem 0.75rem; border-bottom:0.0625rem solid var(--line); background:linear-gradient(180deg,var(--field),transparent); } #page-relatorios .relatorios-fd .fdsel-search svg{ width:0.9375rem; height:0.9375rem; color:var(--rel-ink-muted); flex:none; } #page-relatorios .relatorios-fd .fdsel-search input{ flex:1; min-width:0; border:0; background:none; outline:none; font-family:inherit; font-size:0.8125rem; font-weight:600; color:var(--ink); } #page-relatorios .relatorios-fd .fdsel-search input::placeholder{ color:var(--rel-ink-muted); font-weight:500; } /* lista */ #page-relatorios .relatorios-fd .fdsel-list{ max-height:16.5rem; overflow-y:auto; padding:0.375rem; scrollbar-width:thin; scrollbar-color:var(--rel-scroll-thumb, rgba(10,120,240,.28)) transparent; } #page-relatorios .relatorios-fd .fdsel-list::-webkit-scrollbar{ width:0.25rem; } #page-relatorios .relatorios-fd .fdsel-list::-webkit-scrollbar-track{ background:transparent; } #page-relatorios .relatorios-fd .fdsel-list::-webkit-scrollbar-thumb{ background:var(--rel-scroll-thumb, rgba(10,120,240,.28)); border-radius:62.4375rem; } #page-relatorios .relatorios-fd .fdsel-list::-webkit-scrollbar-thumb:hover{ background:var(--rel-scroll-thumb-hover, rgba(10,120,240,.42)); } #page-relatorios .relatorios-fd .fdsel-opt{ display:flex; align-items:center; gap:0.625rem; padding:0.5625rem 0.6875rem; border-radius:0.625rem; cursor:pointer; font-size:0.84375rem; font-weight:600; color:var(--rel-ink-3); transition:background .12s, color .12s; line-height:1.3; } html[data-theme="dark"] #page-relatorios .relatorios-fd .fdsel-opt{ color:#c4d0e4; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .fdsel-opt{ color:#14181d; } #page-relatorios .relatorios-fd .fdsel-opt .fdsel-check{ width:1rem; height:1rem; flex:none; color:var(--blue); opacity:0; transition:opacity .12s; } #page-relatorios .relatorios-fd .fdsel-opt .fdsel-otx{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .fdsel-opt.placeholder{ color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .fdsel-opt:hover, .fdsel-opt.active{ background:var(--field); color:var(--ink); } #page-relatorios .relatorios-fd .fdsel-opt.selected{ background:color-mix(in srgb, var(--blue) 9%, var(--surface)); color:var(--blue); font-weight:800; } #page-relatorios .relatorios-fd .fdsel-opt.selected .fdsel-check{ opacity:1; } #page-relatorios .relatorios-fd .fdsel-opt.active{ box-shadow:inset 0 0 0 0.09375rem rgba(var(--rel-accent-rgb),.28); } #page-relatorios .relatorios-fd .fdsel-empty{ padding:1rem 0.75rem; text-align:center; font-size:0.78125rem; font-weight:600; color:var(--rel-ink-muted); } @media (prefers-reduced-motion: reduce){ .fdsel-pop, .fdsel-chev{ animation:none!important; transition:none!important; } } /* adaptações contextuais de tamanho (herdam dos filtros existentes) */ #page-relatorios .relatorios-fd .order .fdsel-trigger{ height:2.5rem; font-size:0.8125rem; } #page-relatorios .relatorios-fd .filterbar.fb-line .fdsel-trigger{ height:2.875rem; font-size:0.8125rem; padding:0 0.6875rem 0 0.75rem; } #page-relatorios .relatorios-fd .fselect.block .fdsel, .fdsel{ width:100%; } #page-relatorios .relatorios-fd .per .fdsel-trigger{ height:2.375rem; } /* ============================================================ FiveDesk — Relatórios · Departamentos (expandido) Leitura executiva · Pareto · treemap · heatmap · tendência · risco Namespace .dep — depende de fivedesk-theme.css + dark.css ============================================================ */ #page-relatorios .relatorios-fd .dep{ --p-blue:#007BFF; --p-blue-bg:rgba(0,123,255,.10); --p-ok:#15875b; --p-ok-dot:#1f9d57; --p-ok-bg:#e8f7ef; --p-warn:#b4790a; --p-warn-dot:#e0a106; --p-warn-bg:#fff3df; --p-bad:#cf3b40; --p-bad-dot:#e5484d; --p-bad-bg:#fdecec; --p-cost:#5b6a86; --p-elev-1:0 0.0625rem 0.125rem rgba(13,27,52,.06); --p-elev-2:0 0.625rem 1.625rem -0.875rem rgba(13,27,52,.20); } html[data-theme="dark"] #page-relatorios .relatorios-fd .dep{ --p-blue:#7fb6ff; --p-blue-bg:rgba(59,155,255,.14); --p-ok:#3fc285; --p-ok-dot:#34d399; --p-ok-bg:rgba(31,157,87,.16); --p-warn:#f1b53d; --p-warn-dot:#e0a106; --p-warn-bg:rgba(224,161,6,.14); --p-bad:#f1797d; --p-bad-dot:#e5484d; --p-bad-bg:rgba(207,59,64,.16); --p-cost:#9aa7bd; --p-elev-2:0 0.75rem 1.875rem -1rem rgba(0,0,0,.6); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .dep{ --p-blue:#0a2c5c; --p-blue-bg:rgba(11,99,214,.14); --p-ok:#0e4a2c; --p-ok-dot:#0e4a2c; --p-ok-bg:rgba(31,157,87,.16); --p-warn:#6b3b08; --p-warn-dot:#e0a106; --p-warn-bg:rgba(224,161,6,.14); --p-bad:#6e1614; --p-bad-dot:#e5484d; --p-bad-bg:rgba(151,35,31,.16); --p-cost:#9aa7bd; --p-elev-2:0 0.75rem 1.875rem -1rem rgba(0,0,0,.6); } /* área extra (abaixo do gráfico empilhado principal) */ #page-relatorios .relatorios-fd #depExtra{ padding:0 1.375rem 1.375rem; } #page-relatorios .relatorios-fd .dep-row{ display:grid; gap:1.125rem; margin-bottom:1.125rem; } #page-relatorios .relatorios-fd .dep-row.r-full{ grid-template-columns:1fr; } #page-relatorios .relatorios-fd .dpanel{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--p-elev-1); display:flex; flex-direction:column; overflow:hidden; } #page-relatorios .relatorios-fd .dpanel .dp-head{ display:flex; align-items:flex-start; gap:0.6875rem; padding:1rem 1.125rem 0; } #page-relatorios .relatorios-fd .dpanel .dp-ic{ width:2rem; height:2rem; border-radius:0.5625rem; background:var(--p-blue-bg); color:var(--p-blue); display:flex; align-items:center; justify-content:center; flex:none; } #page-relatorios .relatorios-fd .dpanel .dp-ic svg{ width:1.0625rem; height:1.0625rem; } #page-relatorios .relatorios-fd .dpanel .dp-head h3{ font-size:1rem; font-weight:800; letter-spacing:-0.01875rem; line-height:1.22; margin:0; color:var(--ink); text-align:left; } #page-relatorios .relatorios-fd .dpanel .dp-head .dp-sub{ font-size:0.75rem; font-weight:500; line-height:1.4; color:var(--muted); margin-top:0.375rem; text-align:left; } #page-relatorios .relatorios-fd .dpanel .dp-head .sp{ flex:1; } #page-relatorios .relatorios-fd .dpanel .dp-body{ padding:0.875rem 1.125rem 1.125rem; flex:1; } /* divisória de seção */ #page-relatorios .relatorios-fd .dep-sec-l{ display:flex; align-items:center; gap:0.5625rem; font-size:0.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rel-ink-muted); margin:0.25rem 0.125rem 0.8125rem; } #page-relatorios .relatorios-fd .dep-sec-l::after{ content:""; flex:1; height:0.0625rem; background:var(--line); } /* ===== LEITURA EXECUTIVA (ranking de concentração) ===== */ #page-relatorios .relatorios-fd .dep-exec{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.8125rem; } #page-relatorios .relatorios-fd .dx-card{ display:flex; align-items:flex-start; gap:0.75rem; padding:0.875rem 0.9375rem; border:0.0625rem solid var(--line); border-radius:var(--radius-card); background:var(--surface); box-shadow:var(--p-elev-1); transition:.16s; } #page-relatorios .relatorios-fd .dx-card:hover{ box-shadow:var(--p-elev-2); transform:translateY(-0.125rem); } #page-relatorios .relatorios-fd .dx-ic{ width:2.125rem; height:2.125rem; border-radius:0.625rem; flex:none; display:flex; align-items:center; justify-content:center; } #page-relatorios .relatorios-fd .dx-ic svg{ width:1.125rem; height:1.125rem; } #page-relatorios .relatorios-fd .dx-card.tone-blue .dx-ic{ background:var(--p-blue-bg); color:var(--p-blue); } #page-relatorios .relatorios-fd .dx-card.tone-ok .dx-ic{ background:var(--p-ok-bg); color:var(--p-ok); } #page-relatorios .relatorios-fd .dx-card.tone-warn .dx-ic{ background:var(--p-warn-bg); color:var(--p-warn); } #page-relatorios .relatorios-fd .dx-card.tone-bad .dx-ic{ background:var(--p-bad-bg); color:var(--p-bad); } #page-relatorios .relatorios-fd .dx-card.tone-cost .dx-ic{ background:rgba(var(--rel-ink-faint-rgb),.12); color:var(--p-cost); } #page-relatorios .relatorios-fd .dx-tx{ min-width:0; flex:1; } #page-relatorios .relatorios-fd .dx-k{ font-size:0.65625rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .dx-v{ font-size:0.9375rem; font-weight:800; color:var(--ink); letter-spacing:-0.0125rem; margin-top:0.1875rem; line-height:1.2; } #page-relatorios .relatorios-fd .dx-card.tone-bad .dx-v{ color:var(--p-bad); } .dx-card.tone-ok .dx-v{ color:var(--p-ok); } #page-relatorios .relatorios-fd .dx-x{ font-size:0.71875rem; font-weight:600; color:var(--muted); margin-top:0.1875rem; font-variant-numeric:tabular-nums; } /* ===== PARETO ===== */ #page-relatorios .relatorios-fd .pareto-wrap{ position:relative; } #page-relatorios .relatorios-fd .pareto-wrap svg{ width:100%; display:block; overflow:visible; } #page-relatorios .relatorios-fd .pareto-wrap .gl{ stroke:var(--line); stroke-width:1; } #page-relatorios .relatorios-fd .pareto-wrap .g80{ stroke:var(--p-warn-dot); stroke-width:1.4; stroke-dasharray:5 4; opacity:.7; } #page-relatorios .relatorios-fd .pareto-wrap .g80t{ fill:var(--p-warn); font-weight:800; } #page-relatorios .relatorios-fd .pareto-wrap .axlab{ font-size:0.6875rem; font-weight:600; fill:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .pareto-wrap .pbar{ fill:var(--p-blue); opacity:.42; transition:opacity .14s; } #page-relatorios .relatorios-fd .pareto-wrap .pbar.hot{ fill:var(--p-blue); opacity:1; } #page-relatorios .relatorios-fd .pareto-wrap .pbv{ font-size:0.6875rem; font-weight:800; fill:var(--rel-ink-3); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .pareto-wrap .pline{ fill:none; stroke:var(--p-warn-dot); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; } #page-relatorios .relatorios-fd .pareto-wrap .pdot{ fill:var(--p-warn-dot); stroke:var(--surface); stroke-width:1.5; } #page-relatorios .relatorios-fd .pareto-wrap .pcum{ font-size:0.625rem; font-weight:800; fill:var(--p-warn); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .pareto-wrap .pxl{ font-size:0.65625rem; font-weight:600; fill:var(--rel-icon-muted); } #page-relatorios .relatorios-fd .pareto-wrap .hit{ fill:transparent; cursor:pointer; } #page-relatorios .relatorios-fd .dep-tip{ position:absolute; pointer-events:none; background:var(--ink); color:#fff; border-radius:0.625rem; padding:0.5625rem 0.75rem; font-size:0.75rem; box-shadow:var(--p-elev-2); opacity:0; transition:opacity .12s; z-index:6; white-space:nowrap; transform:translate(-50%,0); } #page-relatorios .relatorios-fd .dep-tip .t{ font-weight:800; margin-bottom:0.3125rem; } #page-relatorios .relatorios-fd .dep-tip .r{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:0.1875rem; } #page-relatorios .relatorios-fd .dep-tip .r b{ font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .pareto-legend{ display:flex; align-items:center; gap:1.125rem; margin-bottom:0.375rem; } #page-relatorios .relatorios-fd .pareto-legend .pl{ display:inline-flex; align-items:center; gap:0.4375rem; font-size:0.75rem; font-weight:700; color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .pareto-legend .pl .sw{ width:0.75rem; height:0.75rem; border-radius:0.1875rem; } #page-relatorios .relatorios-fd .pareto-legend .pl .sw.bar{ background:var(--p-blue); } .pareto-legend .pl .sw.cum{ width:1rem; height:0.1875rem; border-radius:0.125rem; background:var(--p-warn-dot); } #page-relatorios .relatorios-fd .dep-note{ margin-top:0.8125rem; padding:0.6875rem 0.875rem; border-radius:var(--radius-card); background:var(--p-warn-bg); border:0.0625rem solid color-mix(in srgb,var(--p-warn-dot) 22%,var(--line)); font-size:0.78125rem; font-weight:600; color:#6b5208; display:flex; align-items:center; gap:0.5625rem; } html[data-theme="dark"] #page-relatorios .relatorios-fd .dep-note{ color:#f1d08a; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .dep-note{ color:#6b3b08; } #page-relatorios .relatorios-fd .dep-note b{ font-weight:800; } #page-relatorios .relatorios-fd .dep-note::before{ content:""; width:0.4375rem; height:0.4375rem; border-radius:50%; background:var(--p-warn-dot); flex:none; } /* entrada coreografada */ @keyframes dep-up{ from{ opacity:0; transform:translateY(0.625rem);} to{ opacity:1; transform:none; } } #page-relatorios .relatorios-fd .dep .danim{ animation:dep-up .5s both cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .dep .danim.settled{ animation:none!important; opacity:1!important; transform:none!important; } @media (prefers-reduced-motion: reduce){ .dep *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } } @media (max-width: 0px) /* ui-scale-freeze: was 1180px */{ .dep-exec{ grid-template-columns:repeat(2,1fr); } } @media (max-width:680px){ .dep-exec{ grid-template-columns:1fr; } } /* ===== TREEMAP hierárquico (Depto › Grupo) ===== */ #page-relatorios .relatorios-fd .dep-treemap{ display:flex; gap:0.5rem; width:100%; height:16.25rem; } #page-relatorios .relatorios-fd .tr-col{ min-width:0; display:flex; flex-direction:column; gap:0.375rem; } #page-relatorios .relatorios-fd .tr-head{ display:flex; align-items:center; gap:0.4375rem; padding:0 0.125rem; } #page-relatorios .relatorios-fd .tr-head .tr-dot{ width:0.5625rem; height:0.5625rem; border-radius:0.1875rem; flex:none; } #page-relatorios .relatorios-fd .tr-head .tr-dn{ font-size:0.75rem; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .tr-head .tr-dv{ font-size:0.71875rem; font-weight:700; color:var(--muted); margin-left:auto; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .tr-stack{ flex:1; display:flex; flex-direction:column; gap:0.3125rem; min-height:0; } #page-relatorios .relatorios-fd .tr-g{ position:relative; min-height:1.625rem; border-radius:0.5625rem; padding:0.4375rem 0.625rem; color:#fff; cursor:pointer; overflow:hidden; display:flex; flex-direction:column; justify-content:center; transition:filter .14s, transform .14s; } #page-relatorios .relatorios-fd .tr-g::after{ content:""; position:absolute; inset:0; border-radius:0.5625rem; background:linear-gradient(150deg,rgba(var(--rel-surface-rgb),.14),rgba(var(--rel-shadow-pure-rgb),.1)); pointer-events:none; } #page-relatorios .relatorios-fd .tr-g:hover{ filter:brightness(1.08); transform:scale(1.01); } #page-relatorios .relatorios-fd .tr-gn{ font-size:0.6875rem; font-weight:700; line-height:1.15; text-shadow:0 0.0625rem 0.125rem rgba(var(--rel-shadow-pure-rgb),.25); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; z-index:2; } #page-relatorios .relatorios-fd .tr-gv{ font-size:0.8125rem; font-weight:800; font-variant-numeric:tabular-nums; text-shadow:0 0.0625rem 0.125rem rgba(var(--rel-shadow-pure-rgb),.25); position:relative; z-index:2; } #page-relatorios .relatorios-fd .dep-tip .tsub{ margin-top:0.375rem; padding-top:0.375rem; border-top:0.0625rem solid rgba(255,255,255,.15); font-size:0.65625rem; font-weight:600; opacity:.85; max-width:15rem; white-space:normal; line-height:1.5; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .dep-tip .tsub{ border-top:0.0625rem solid var(--rel-line); } /* ===== HEATMAP ===== */ #page-relatorios .relatorios-fd .hm-toggle{ display:inline-flex; gap:0.1875rem; background:var(--field); border:0.0625rem solid var(--line); border-radius:var(--radius-card, 0.25rem); padding:0.1875rem; } #page-relatorios .relatorios-fd .hm-toggle button{ height:1.75rem; padding:0 0.8125rem; border:0; border-radius:var(--radius-card, 0.25rem); background:none; font-family:inherit; font-size:0.75rem; font-weight:700; color:var(--muted); cursor:pointer; transition:.14s; box-shadow:none; } #page-relatorios .relatorios-fd .hm-toggle button.on{ background:var(--surface); color:var(--p-blue); box-shadow:none; } #page-relatorios .relatorios-fd .dep-heat{ display:flex; flex-direction:column; gap:0.3125rem; overflow-x:auto; padding-bottom:0.25rem; } #page-relatorios .relatorios-fd .hm-row{ display:grid; grid-template-columns:9.25rem repeat(7,minmax(4rem,1fr)); gap:0.3125rem; align-items:stretch; } #page-relatorios .relatorios-fd .hm-head .hm-ch{ font-size:0.625rem; font-weight:700; color:var(--rel-ink-muted); line-height:1.2; display:flex; align-items:flex-end; padding:0 0.25rem 0.25rem; min-height:2.125rem; } #page-relatorios .relatorios-fd .hm-corner{ } #page-relatorios .relatorios-fd .hm-rh{ display:flex; align-items:center; gap:0.4375rem; font-size:0.75rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-relatorios .relatorios-fd .hm-rh .hm-dot{ width:0.5rem; height:0.5rem; border-radius:0.1875rem; flex:none; } #page-relatorios .relatorios-fd .hm-cell{ min-height:2.625rem; border-radius:0.5625rem; display:flex; align-items:center; justify-content:center; font-size:0.78125rem; font-weight:800; color:var(--rel-ink-2); font-variant-numeric:tabular-nums; cursor:pointer; transition:transform .12s, box-shadow .12s; border:0.0625rem solid rgba(var(--rel-shadow-rgb),.04); } #page-relatorios .relatorios-fd .hm-cell.dark{ color:#fff; text-shadow:0 0.0625rem 0.125rem rgba(var(--rel-shadow-pure-rgb),.2); } #page-relatorios .relatorios-fd .hm-cell:hover{ transform:scale(1.06); box-shadow:var(--p-elev-2); z-index:2; } #page-relatorios .relatorios-fd .hm-cell.empty{ background:var(--field); color:#c2cde0; font-weight:600; cursor:default; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .hm-cell.empty{ color:var(--rel-accent-ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .hm-cell{ color:#dce6f5; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .hm-cell{ color:#14181d; } /* ===== TENDÊNCIA TEMPORAL ===== */ #page-relatorios .relatorios-fd .trend-legend{ display:flex; flex-wrap:wrap; gap:0.875rem; margin-bottom:0.5rem; } #page-relatorios .relatorios-fd .trend-legend .tlg{ display:inline-flex; align-items:center; gap:0.4375rem; font-size:0.75rem; font-weight:700; color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .trend-legend .tlg .sw{ width:0.875rem; height:0.1875rem; border-radius:0.125rem; } #page-relatorios .relatorios-fd .dep-trend{ position:relative; } #page-relatorios .relatorios-fd .dep-trend svg{ width:100%; display:block; overflow:visible; } #page-relatorios .relatorios-fd .dep-trend .gl{ stroke:var(--line); stroke-width:1; } #page-relatorios .relatorios-fd .dep-trend .axlab{ font-size:0.6875rem; font-weight:600; fill:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .dep-trend .txl{ font-size:0.6875rem; font-weight:600; fill:var(--rel-icon-muted); } #page-relatorios .relatorios-fd .dep-trend .tl{ fill:none; stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; } #page-relatorios .relatorios-fd .dep-trend .tguide{ stroke:var(--p-blue); stroke-width:1.2; stroke-dasharray:4 4; opacity:.5; } #page-relatorios .relatorios-fd .dep-trend .hit{ fill:transparent; cursor:crosshair; } #page-relatorios .relatorios-fd .dep-tip .r .d{ width:0.5625rem; height:0.5625rem; border-radius:0.1875rem; display:inline-block; margin-right:0.375rem; vertical-align:middle; } #page-relatorios .relatorios-fd .dep-tip .r span{ display:inline-flex; align-items:center; } /* ===== MATRIZ DE RISCO ===== */ #page-relatorios .relatorios-fd .dep-risk{ position:relative; } #page-relatorios .relatorios-fd .dep-risk svg{ width:100%; display:block; overflow:visible; } #page-relatorios .relatorios-fd .dep-risk .quad{ opacity:.5; } #page-relatorios .relatorios-fd .dep-risk .quad.q-bad{ fill:var(--p-bad-bg); } .dep-risk .quad.q-warn{ fill:var(--p-warn-bg); } .dep-risk .quad.q-ok{ fill:var(--p-ok-bg); } #page-relatorios .relatorios-fd .dep-risk .qlabel{ font-size:0.625rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; fill:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .dep-risk .axline{ stroke:var(--line); stroke-width:1.4; } #page-relatorios .relatorios-fd .dep-risk .axtick{ font-size:0.625rem; font-weight:600; fill:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .dep-risk .axtitle{ font-size:0.6875rem; font-weight:800; fill:var(--rel-ink-faint); } #page-relatorios .relatorios-fd .dep-risk .bub{ cursor:pointer; } #page-relatorios .relatorios-fd .dep-risk .bub circle{ stroke:var(--surface); stroke-width:2; transition:.14s; } #page-relatorios .relatorios-fd .dep-risk .bub:hover circle{ filter:brightness(1.08); } #page-relatorios .relatorios-fd .dep-risk .bub text{ font-size:0.6875rem; font-weight:800; fill:#fff; text-anchor:middle; pointer-events:none; } #page-relatorios .relatorios-fd .dep-tip.fixed{ position:fixed; transform:translate(-50%,-118%); } /* ===== TABELA DETALHADA (hierárquica · markup legado em div) ===== Não aplicar display:grid em tr.dt-row da #depDetailTable — quebra colunas. */ #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap){ display:flex; flex-direction:column; } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row{ display:grid; grid-template-columns:minmax(13.75rem,2.2fr) repeat(5,minmax(4.5rem,1fr)); gap:0.75rem; align-items:center; padding:0.625rem 0.5rem; border-top:0.0625rem solid var(--line); } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row.dt-head{ border-top:0; padding:0.25rem 0.5rem 0.625rem; } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row.dt-head .dt-name, #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row.dt-head .dt-c{ font-size:0.65625rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-name{ display:flex; align-items:center; gap:0.5625rem; min-width:0; font-size:0.8125rem; color:var(--ink); } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-name b{ font-weight:800; } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-c{ font-size:0.8125rem; font-weight:700; color:var(--rel-ink-3); text-align:right; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-c.num{ color:var(--ink); font-weight:800; } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-exp{ width:1.375rem; height:1.375rem; border-radius:0.375rem; border:0.0625rem solid var(--line); background:var(--surface); color:var(--rel-icon-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:.14s; } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-exp svg{ width:0.8125rem; height:0.8125rem; transition:transform .2s; } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row.open > .dt-name .dt-exp{ color:var(--p-blue); border-color:rgba(var(--rel-accent-rgb),.35); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row.open > .dt-name .dt-exp{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row.open > .dt-name .dt-exp svg{ transform:rotate(90deg); } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-dot{ width:0.5625rem; height:0.5625rem; border-radius:0.1875rem; flex:none; } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row.lvl0{ background:var(--surface); } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row.lvl1 .dt-name{ padding-left:0.875rem; font-size:0.78125rem; color:var(--rel-ink-2); } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row.lvl1{ background:var(--field); } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row.lvl2 .dt-name{ padding-left:3.25rem; font-size:0.75rem; color:var(--muted); } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row.lvl2{ background:var(--surface); } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-sub-tick{ width:0.625rem; height:0.625rem; border-left:0.09375rem solid var(--line); border-bottom:0.09375rem solid var(--line); border-bottom-left-radius:0.1875rem; flex:none; margin-right:0.125rem; } #page-relatorios .relatorios-fd .dt-pill{ display:inline-flex; padding:0.125rem 0.5625rem; border-radius:62.4375rem; font-size:0.71875rem; font-weight:800; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .dt-pill.ok{ background:var(--p-ok-bg); color:var(--p-ok); } .dt-pill.warn{ background:var(--p-warn-bg); color:var(--p-warn); } .dt-pill.bad{ background:var(--p-bad-bg); color:var(--p-bad); } #page-relatorios .relatorios-fd .dt-d{ font-size:0.75rem; font-weight:800; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .dt-d.up{ color:var(--p-bad); } .dt-d.down{ color:var(--p-ok); } .dt-d.flat{ color:var(--rel-ink-muted); } @media (max-width:860px){ #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row{ grid-template-columns:minmax(8.75rem,1.6fr) repeat(3,1fr); } #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row .dt-c:nth-child(5), #page-relatorios .relatorios-fd .dep-table:not(.dep-detail-tablewrap) .dt-row .dt-c:nth-child(6){ display:none; } } /* ============================================================ FiveDesk — Relatórios · Indicador PROJEÇÃO Subpágina analítica com navegação interna por setores Namespace .prj — depende de fivedesk-theme.css + dark.css ============================================================ */ #page-relatorios .relatorios-fd .prj{ --j-blue:#007BFF; --j-blue-bg:rgba(0,123,255,.10); --j-ok:#15875b; --j-ok-dot:#1f9d57; --j-ok-bg:#e8f7ef; --j-warn:#b4790a; --j-warn-dot:#e0a106; --j-warn-bg:#fff3df; --j-bad:#cf3b40; --j-bad-dot:#e5484d; --j-bad-bg:#fdecec; --j-cost:#5b6a86; --j-elev-1:0 0.0625rem 0.125rem rgba(13,27,52,.06); --j-elev-2:0 0.625rem 1.625rem -0.875rem rgba(13,27,52,.20); } html[data-theme="dark"] #page-relatorios .relatorios-fd .prj{ --j-blue:#7fb6ff; --j-blue-bg:rgba(59,155,255,.14); --j-ok:#3fc285; --j-ok-dot:#34d399; --j-ok-bg:rgba(31,157,87,.16); --j-warn:#f1b53d; --j-warn-dot:#e0a106; --j-warn-bg:rgba(224,161,6,.14); --j-bad:#f1797d; --j-bad-dot:#e5484d; --j-bad-bg:rgba(207,59,64,.16); --j-cost:#9aa7bd; --j-elev-2:0 0.75rem 1.875rem -1rem rgba(0,0,0,.6); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .prj{ --j-blue:#0a2c5c; --j-blue-bg:rgba(11,99,214,.14); --j-ok:#0e4a2c; --j-ok-dot:#0e4a2c; --j-ok-bg:rgba(31,157,87,.16); --j-warn:#6b3b08; --j-warn-dot:#e0a106; --j-warn-bg:rgba(224,161,6,.14); --j-bad:#6e1614; --j-bad-dot:#e5484d; --j-bad-bg:rgba(151,35,31,.16); --j-cost:#9aa7bd; --j-elev-2:0 0.75rem 1.875rem -1rem rgba(0,0,0,.6); } #page-relatorios .relatorios-fd .prj .chart-head .ch-tot b{ font-variant-numeric:tabular-nums; white-space:nowrap; } /* navegação interna por setores (trilha de pills) */ #page-relatorios .relatorios-fd .prj-nav{ display:flex; gap:0.375rem; padding:0.875rem 1.375rem 0; overflow-x:auto; scrollbar-width:thin; } #page-relatorios .relatorios-fd .prj-nav::-webkit-scrollbar{ height:0.3125rem; } .prj-nav::-webkit-scrollbar-thumb{ background:var(--line); border-radius:0.1875rem; } #page-relatorios .relatorios-fd .prj-tab{ flex:none; display:inline-flex; align-items:center; gap:0.5rem; height:2.375rem; padding:0 0.9375rem; border:0.0625rem solid var(--line); border-radius:var(--radius-card, 0.25rem); background:var(--surface); font-family:inherit; font-size:0.78125rem; font-weight:700; color:var(--muted); cursor:pointer; transition:.15s cubic-bezier(.22,1,.36,1); white-space:nowrap; box-shadow:none; } #page-relatorios .relatorios-fd .prj-tab .ti{ width:1rem; height:1rem; flex:none; } .prj-tab .ti svg{ width:1rem; height:1rem; display:block; } #page-relatorios .relatorios-fd .prj-tab:hover{ color:var(--ink); border-color:#cfdbef; } html[data-theme="dark"] #page-relatorios .relatorios-fd .prj-tab:hover{ border-color:rgba(127,182,255,.34); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .prj-tab:hover{ border-color:rgba(10,61,128,.34); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .prj-tab:hover{ border-color:var(--rel-ink-3); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .prj-tab:hover{ border-color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .prj-tab.on{ background:var(--blue); color:#fff; border-color:transparent; box-shadow:none; } #page-relatorios .relatorios-fd .prj-tab.on .ti{ color:#fff; } #page-relatorios .relatorios-fd .prj-tab.on .tw{ background:rgba(var(--rel-surface-rgb),.22); color:#fff; } #page-relatorios .relatorios-fd .prj-tab .tw{ display:inline-flex; align-items:center; justify-content:center; min-width:1.125rem; height:1.125rem; padding:0 0.3125rem; border-radius:0.375rem; background:var(--j-bad-bg); color:var(--j-bad); font-size:0.625rem; font-weight:800; } #page-relatorios .relatorios-fd .prj-tab:focus-visible{ outline:0.125rem solid var(--j-blue); outline-offset:0.125rem; } #page-relatorios .relatorios-fd .prj-body{ padding:1.125rem 1.375rem 1.375rem; } #page-relatorios .relatorios-fd .prj-sector{ display:none; } #page-relatorios .relatorios-fd .prj-sector.on{ display:block; animation:prj-fade .35s cubic-bezier(.22,1,.36,1) both; } @keyframes prj-fade{ from{ opacity:0; transform:translateY(0.5rem); } to{ opacity:1; transform:none; } } /* cabeçalho de setor */ #page-relatorios .relatorios-fd .sec-head{ display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:1rem; } #page-relatorios .relatorios-fd .sec-head .sh-ic{ width:2.25rem; height:2.25rem; border-radius:0.625rem; background:var(--j-blue-bg); color:var(--j-blue); display:flex; align-items:center; justify-content:center; flex:none; } #page-relatorios .relatorios-fd .sec-head .sh-ic svg{ width:1.1875rem; height:1.1875rem; } #page-relatorios .relatorios-fd .sec-head h3{ font-size:1rem; font-weight:800; letter-spacing:-0.01875rem; margin:0; color:var(--ink); } #page-relatorios .relatorios-fd .sec-head .sh-sub{ font-size:0.78125rem; color:var(--muted); margin-top:0.125rem; } /* cards de stat */ #page-relatorios .relatorios-fd .prj-cards{ display:grid; gap:0.8125rem; margin-bottom:1.125rem; } #page-relatorios .relatorios-fd .prj-cards.c4{ grid-template-columns:repeat(4,1fr); } .prj-cards.c3{ grid-template-columns:repeat(3,1fr); } .prj-cards.c5{ grid-template-columns:repeat(5,1fr); } .prj-cards.c6{ grid-template-columns:repeat(6,1fr); } #page-relatorios .relatorios-fd .jc{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--j-elev-1); padding:0.875rem 1rem; display:flex; flex-direction:column; gap:0.375rem; } #page-relatorios .relatorios-fd .jc .jc-k{ font-size:0.65625rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--rel-ink-muted); display:flex; align-items:center; gap:0.375rem; } #page-relatorios .relatorios-fd .jc .jc-k .dot{ width:0.4375rem; height:0.4375rem; border-radius:50%; } #page-relatorios .relatorios-fd .jc .jc-v{ font-size:1.5625rem; font-weight:800; letter-spacing:-0.0625rem; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .jc .jc-v small{ font-size:0.875rem; font-weight:700; color:var(--muted); letter-spacing:0; } #page-relatorios .relatorios-fd .jc .jc-x{ font-size:0.71875rem; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .jc.tone-ok .jc-v{ color:var(--j-ok); } .jc.tone-warn .jc-v{ color:var(--j-warn); } .jc.tone-bad .jc-v{ color:var(--j-bad); } .jc.tone-blue .jc-v{ color:var(--j-blue); } #page-relatorios .relatorios-fd .jc.tone-ok .dot{ background:var(--j-ok-dot); } .jc.tone-warn .dot{ background:var(--j-warn-dot); } .jc.tone-bad .dot{ background:var(--j-bad-dot); } .jc.tone-blue .dot{ background:var(--j-blue); } .jc.tone-cost .dot{ background:var(--j-cost); } /* veredito de risco (Visão Geral) */ #page-relatorios .relatorios-fd .prj-verdict{ display:flex; align-items:center; gap:1rem; padding:1rem 1.125rem; border-radius:var(--radius-card); margin-bottom:1rem; border:0.0625rem solid var(--line); position:relative; overflow:hidden; background:var(--surface); } #page-relatorios .relatorios-fd .prj-verdict::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0.3125rem; background:var(--accent,var(--j-ok-dot)); } #page-relatorios .relatorios-fd .prj-verdict.ok{ --accent:var(--j-ok-dot); background:linear-gradient(100deg,var(--j-ok-bg),var(--surface) 60%); } #page-relatorios .relatorios-fd .prj-verdict.warn{ --accent:var(--j-warn-dot); background:linear-gradient(100deg,var(--j-warn-bg),var(--surface) 60%); } #page-relatorios .relatorios-fd .prj-verdict.crit{ --accent:var(--j-bad-dot); background:linear-gradient(100deg,var(--j-bad-bg),var(--surface) 60%); } #page-relatorios .relatorios-fd .prj-verdict .pv-orb{ width:3.375rem; height:3.375rem; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; } #page-relatorios .relatorios-fd .prj-verdict .pv-orb svg{ width:1.6875rem; height:1.6875rem; } #page-relatorios .relatorios-fd .prj-verdict.ok .pv-orb{ background:linear-gradient(150deg,#2bb673,#15875b); } .prj-verdict.warn .pv-orb{ background:linear-gradient(150deg,#f0b73d,#cf8f06); } .prj-verdict.crit .pv-orb{ background:linear-gradient(150deg,#f0686d,var(--rel-danger)); } #page-relatorios .relatorios-fd .prj-verdict .pv-tx{ flex:1; min-width:0; } #page-relatorios .relatorios-fd .prj-verdict .pv-t{ font-size:1.125rem; font-weight:800; letter-spacing:-0.01875rem; color:var(--ink); } #page-relatorios .relatorios-fd .prj-verdict.ok .pv-t{ color:var(--j-ok); } .prj-verdict.warn .pv-t{ color:var(--j-warn); } .prj-verdict.crit .pv-t{ color:var(--j-bad); } #page-relatorios .relatorios-fd .prj-verdict .pv-d{ font-size:0.8125rem; color:var(--rel-ink-3); margin-top:0.1875rem; line-height:1.5; } #page-relatorios .relatorios-fd .prj-verdict .pv-d b{ color:var(--ink); font-weight:800; } /* painel de gráfico */ #page-relatorios .relatorios-fd .jpanel{ background:var(--surface); border:0.0625rem solid var(--line); border-radius:var(--radius-card); box-shadow:var(--j-elev-1); overflow:hidden; margin-bottom:1rem; } #page-relatorios .relatorios-fd .jpanel .jp-head{ display:flex; align-items:center; gap:0.625rem; padding:0.9375rem 1.125rem 0; } #page-relatorios .relatorios-fd .jpanel .jp-head h4{ font-size:0.84375rem; font-weight:800; margin:0; color:var(--ink); } #page-relatorios .relatorios-fd .jpanel .jp-head .jp-sub{ font-size:0.71875rem; color:var(--muted); margin-top:0.0625rem; } #page-relatorios .relatorios-fd .jpanel .jp-head .sp{ flex:1; } #page-relatorios .relatorios-fd .jpanel .jp-body{ padding:0.75rem 1.125rem 1rem; } /* chart svg comum */ #page-relatorios .relatorios-fd .jchart{ position:relative; } #page-relatorios .relatorios-fd .jchart svg{ width:100%; display:block; overflow:visible; } #page-relatorios .relatorios-fd .jchart .gl{ stroke:var(--line); stroke-width:1; } #page-relatorios .relatorios-fd .jchart .axlab{ font-size:0.6875rem; font-weight:600; fill:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .jchart .xlab{ font-size:0.6875rem; font-weight:600; fill:var(--rel-icon-muted); } #page-relatorios .relatorios-fd .jchart .now-line{ stroke:var(--j-cost); stroke-width:1; stroke-dasharray:2 5; opacity:.32; } #page-relatorios .relatorios-fd .jchart .now-tag{ font-size:0.59375rem; font-weight:700; fill:var(--j-cost); opacity:.6; } /* fan chart */ #page-relatorios .relatorios-fd .jchart .fan-out{ fill:var(--j-blue); opacity:.10; } .jchart .fan-in{ fill:var(--j-blue); opacity:.18; } #page-relatorios .relatorios-fd .jchart .hist-line{ fill:none; stroke:var(--j-blue); stroke-width:2.8; stroke-linejoin:round; stroke-linecap:round; } #page-relatorios .relatorios-fd .jchart .proj-line{ fill:none; stroke:var(--j-blue); stroke-width:2.4; stroke-dasharray:6 5; stroke-linejoin:round; stroke-linecap:round; } #page-relatorios .relatorios-fd .jchart .cap-line{ fill:none; stroke:var(--j-bad-dot); stroke-width:2; stroke-dasharray:7 4; } #page-relatorios .relatorios-fd .jchart .cap-safe{ fill:none; stroke:var(--j-warn-dot); stroke-width:1.6; stroke-dasharray:4 4; } #page-relatorios .relatorios-fd .jchart .pbar{ fill:var(--j-blue); opacity:.55; transition:opacity .14s; } #page-relatorios .relatorios-fd .jchart .pbar.over{ fill:var(--j-bad-dot); opacity:.9; } #page-relatorios .relatorios-fd .jchart .pbar.warn{ fill:var(--j-warn-dot); opacity:.8; } #page-relatorios .relatorios-fd .jchart .dot{ fill:var(--j-blue); } #page-relatorios .relatorios-fd .jchart .hit{ fill:transparent; cursor:pointer; } #page-relatorios .relatorios-fd .prj-tip{ position:absolute; pointer-events:none; background:var(--ink); color:#fff; border-radius:0.625rem; padding:0.5625rem 0.75rem; font-size:0.75rem; box-shadow:var(--j-elev-2); opacity:0; transition:opacity .12s; z-index:6; white-space:nowrap; transform:translate(-50%,0); } #page-relatorios .relatorios-fd .prj-tip .t{ font-weight:800; margin-bottom:0.3125rem; } .prj-tip .r{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:0.1875rem; } .prj-tip .r b{ font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .prj-tip .r .d{ width:0.5625rem;height:0.5625rem;border-radius:0.125rem;display:inline-block;margin-right:0.375rem;vertical-align:middle; } /* bloco de insight (leitura automática) */ #page-relatorios .relatorios-fd .prj-insight{ display:flex; align-items:flex-start; gap:0.6875rem; padding:0.8125rem 1rem; border-radius:var(--radius-card); background:var(--j-blue-bg); border:0.0625rem solid color-mix(in srgb,var(--j-blue) 22%,var(--line)); margin-bottom:0.25rem; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .prj-insight{ border:0.0625rem solid var(--rel-line); } #page-relatorios .relatorios-fd .prj-insight.warn{ background:var(--j-warn-bg); border-color:color-mix(in srgb,var(--j-warn-dot) 24%,var(--line)); } #page-relatorios .relatorios-fd .prj-insight.crit{ background:var(--j-bad-bg); border-color:color-mix(in srgb,var(--j-bad-dot) 24%,var(--line)); } #page-relatorios .relatorios-fd .prj-insight .pi-ic{ width:1.875rem;height:1.875rem;border-radius:0.5625rem;flex:none;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--j-blue); } #page-relatorios .relatorios-fd .prj-insight.warn .pi-ic{ color:var(--j-warn); } .prj-insight.crit .pi-ic{ color:var(--j-bad); } #page-relatorios .relatorios-fd .prj-insight .pi-ic svg{ width:1rem;height:1rem; } #page-relatorios .relatorios-fd .prj-insight .pi-tx{ font-size:0.8125rem; font-weight:600; color:var(--rel-ink-2); line-height:1.55; } .prj-insight .pi-tx b{ font-weight:800; color:var(--ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .prj-insight .pi-tx{ color:#c4d0e4; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .prj-insight .pi-tx{ color:#14181d; } #page-relatorios .relatorios-fd .prj-2col{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } #page-relatorios .relatorios-fd .fan-legend{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:0.375rem; } #page-relatorios .relatorios-fd .fan-legend .fl{ display:inline-flex; align-items:center; gap:0.4375rem; font-size:0.75rem; font-weight:700; color:var(--rel-ink-3); } #page-relatorios .relatorios-fd .fan-legend .fl .sw{ width:0.875rem; height:0.1875rem; border-radius:0.125rem; } .fan-legend .fl .sw.h{ background:var(--j-blue); } .fan-legend .fl .sw.p{ background:var(--j-blue); opacity:.5; } .fan-legend .fl .sw.b{ width:0.875rem; height:0.625rem; border-radius:0.1875rem; background:var(--j-blue); opacity:.18; } /* mapa de calor dia × hora */ #page-relatorios .relatorios-fd .prj-heat{ display:flex; flex-direction:column; gap:0.625rem; } #page-relatorios .relatorios-fd .heat-grid{ display:grid; grid-template-columns:2.875rem repeat(6,1fr); gap:0.3125rem; } #page-relatorios .relatorios-fd .heat-grid .hcorner{ } #page-relatorios .relatorios-fd .heat-grid .hcol-l{ font-size:0.65625rem; font-weight:700; color:var(--rel-ink-muted); text-align:center; align-self:center; } #page-relatorios .relatorios-fd .heat-grid .hrow-l{ font-size:0.71875rem; font-weight:700; color:var(--rel-ink-3); display:flex; align-items:center; } #page-relatorios .relatorios-fd .heat-grid .hcell{ position:relative; height:2.125rem; border-radius:0.4375rem; background:color-mix(in srgb, var(--j-blue) calc(var(--a)*100%), transparent); display:flex; align-items:center; justify-content:center; transition:transform .12s; cursor:default; } #page-relatorios .relatorios-fd .heat-grid .hcell:hover{ transform:scale(1.06); box-shadow:var(--j-elev-2); z-index:2; } #page-relatorios .relatorios-fd .heat-grid .hcell span{ font-size:0.65625rem; font-weight:800; font-variant-numeric:tabular-nums; } #page-relatorios .relatorios-fd .heat-grid .hcell.lite span{ color:var(--rel-ink-2); } #page-relatorios .relatorios-fd .heat-grid .hcell.dark span{ color:#fff; } html[data-theme="dark"] #page-relatorios .relatorios-fd .heat-grid .hcell.lite span{ color:#cfe0f5; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .heat-grid .hcell.lite span{ color:#14181d; } html[data-theme="dark"] #page-relatorios .relatorios-fd .heat-grid .hcell.dark span{ color:#0b1a2e; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .heat-grid .hcell.dark span{ color:#7e8794; } #page-relatorios .relatorios-fd .heat-scale{ display:flex; align-items:center; gap:0.5625rem; justify-content:flex-end; } #page-relatorios .relatorios-fd .heat-scale span{ font-size:0.65625rem; font-weight:700; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .heat-scale .hs-bar{ width:7.5rem; height:0.5rem; border-radius:0.25rem; background:linear-gradient(90deg, color-mix(in srgb,var(--j-blue) 10%,transparent), var(--j-blue)); } /* coorte de clientes */ #page-relatorios .relatorios-fd .prj-cohort{ display:flex; flex-direction:column; gap:0.75rem; } #page-relatorios .relatorios-fd .coh-row{ display:grid; grid-template-columns:8.125rem 1fr 5.75rem; gap:0.875rem; align-items:center; } #page-relatorios .relatorios-fd .coh-n{ font-size:0.78125rem; font-weight:700; color:var(--ink); display:flex; flex-direction:column; gap:0.0625rem; } #page-relatorios .relatorios-fd .coh-n .coh-c{ font-size:0.65625rem; font-weight:600; color:var(--rel-ink-muted); } #page-relatorios .relatorios-fd .coh-track{ height:1.5rem; border-radius:0.4375rem; background:var(--field); overflow:hidden; position:relative; } #page-relatorios .relatorios-fd .coh-track i{ position:absolute; left:0; top:0; bottom:0; border-radius:0.4375rem; transition:width 1s cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .coh-track i.tone-ok{ background:linear-gradient(90deg,#46cf94,#15875b); } #page-relatorios .relatorios-fd .coh-track i.tone-warn{ background:linear-gradient(90deg,#f0b256,#e0701e); } #page-relatorios .relatorios-fd .coh-track i.tone-bad{ background:linear-gradient(90deg,#f0686d,var(--rel-danger)); } #page-relatorios .relatorios-fd .coh-v{ font-size:0.9375rem; font-weight:800; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; display:flex; flex-direction:column; } #page-relatorios .relatorios-fd .coh-v span{ font-size:0.59375rem; font-weight:700; color:var(--rel-ink-muted); } @keyframes prj-up{ from{ opacity:0; transform:translateY(0.625rem);} to{ opacity:1; transform:none; } } #page-relatorios .relatorios-fd .prj .janim{ animation:prj-up .5s both cubic-bezier(.22,1,.36,1); } #page-relatorios .relatorios-fd .prj .janim.settled{ animation:none!important; opacity:1!important; transform:none!important; } @media (prefers-reduced-motion: reduce){ .prj *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } } @media (max-width: 0px) /* ui-scale-freeze: was 1180px */{ #page-relatorios .relatorios-fd .prj-cards.c4,.prj-cards.c5,.prj-cards.c6{ grid-template-columns:repeat(3,1fr); } #page-relatorios .relatorios-fd .prj-2col{ grid-template-columns:1fr; } } @media (max-width:680px){ .prj-cards.c3,.prj-cards.c4,.prj-cards.c5,.prj-cards.c6{ grid-template-columns:repeat(2,1fr); } } /* ============================================================ FiveDesk — Tema Escuro (additivo, só sob [data-theme="dark"]) Não altera o tema claro. Carregar após app/chats css. ============================================================ */ /* suprime transições durante a troca de tema (evita fade/stick de cor) */ #page-relatorios .relatorios-fd .fd-no-trans, .fd-no-trans *, .fd-no-trans *::before, .fd-no-trans *::after{ transition:none !important; } html[data-theme="dark"] #page-relatorios .relatorios-fd{ /* Literais (não var(--ink)) — evita herdar tokens claros do :root. */ --blue:#3b9bff; --blue-600:#2f7fe0; --ink:#f4f7fb; --muted:#aeb8c8; --line:#262d3a; --field:#0a0d13; --bg-app:#05070b; --surface:#141a24; --surface-2:#171c26; --surface-3:#202734; --shadow-1:0 0.0625rem 0.125rem rgba(0,0,0,.5); --shadow-2:0 1.125rem 2.5rem -1.125rem rgba(0,0,0,.78); --shadow-3:0 3.125rem 6.875rem -2.125rem rgba(0,0,0,.88); color-scheme:dark; } /* Nublado — cinza médio, polaridade clara. Escala espelha css/theme.css. --field é RECUADO em relação à superfície (convenção de tema claro), ao contrário do tema Noite, onde o campo é mais escuro que o card. */ html[data-theme="cinza"] #page-relatorios .relatorios-fd{ --blue:#0b63d6; --blue-600:#0a4fad; --blue-text:#0a3d80; --ink:#14181d; --muted:#333b45; --line:#4a5462; --field:#7e8794; --bg-app:#8a939f; --surface:#9fa7b1; --surface-2:#acb3bc; --surface-3:#b8bfc7; --shadow-1:0 0.0625rem 0.125rem rgba(20,24,29,.20); --shadow-2:0 0.875rem 2rem -1.125rem rgba(20,24,29,.34); --shadow-3:0 2.75rem 6.25rem -2.125rem rgba(20,24,29,.40); color-scheme:light; /* Paletas de serie dos graficos — lidas por relatorios-chart-palette.js. Tom medio saturado lava sobre cinza medio (#0a78f0 da 1,75:1 contra --surface); estes tons ficam em luminancia <= 0.094, o teto para 3:1. */ --rel-chart-status:#0a3d80,#8a5210,#97231f,#15683f; --rel-chart-rank:#071f42,#0a2c5c,#0a3d80,#0d4590,#0f4f9e; --rel-chart-avatar:#0a3d80,#4c1d95,#0f5c66,#8a3d0b,#14532d,#3f4652,#86198f,#334155; --rel-chart-dept:#0a3d80,#0f5c66,#97231f,#4c1d95,#8a3d0b,#14532d,#3b3f8f,#22267a; --rel-chart-report:#071f42,#0a3d80,#0f4f9e,#0f5c66,#14603f,#3b3f8f,#4c1d95; --rel-chart-report-tail:#3f4652,#4a5260,#363c47,#444b58,#2f353f; --rel-chart-stream:#0a3d80,#0f5c66,#8a3d0b,#4c1d95,#14532d,#97231f,#3b3f8f; --rel-chart-prio:#97231f,#8a3d0b,#0a3d80,#3f4652,#4a5260; --rel-chart-neutral:#4a5260; --rel-chart-fin-gradient: linear-gradient(150deg,#0f4f9e,#0a2c5c), linear-gradient(150deg,#8a5210,#6b3b08), linear-gradient(150deg,#15683f,#0e4a2c), linear-gradient(150deg,#4c1d95,#33116b), linear-gradient(150deg,#0f5c66,#0a4048); } /* Nublado — mesma camada, valores do tema. Escopo na pagina inteira (nao so .relatorios-fd) porque .rp-focus-bar vive fora dela. */ html[data-theme="cinza"] #page-relatorios{ --rel-ink-muted:#454e59; --rel-icon-muted:#454e59; --rel-ink-3:#333b45; --rel-ink-2:#1f262e; --rel-ink-faint:#3f4854; --rel-ink-strong:#0a2c5c; --rel-ink-deep:#0a2c5c; --rel-ink:#14181d; --rel-wash-info:rgba(10,61,128,.14); --rel-wash-info-soft:rgba(10,61,128,.09); --rel-surface-sunken:#8a939f; --rel-accent-chart:#0a3d80; --rel-accent-strong:#0a4fad; --rel-accent-deep:#0a2c5c; --rel-accent-tint:#8b929b; --rel-accent-tint-2:#99a0a9; --rel-line:#4a5462; --rel-danger:#97231f; --rel-danger-bright:#a8302b; --rel-danger-ink:#7d1a17; --rel-warn:#8a5210; --rel-warn-ink:#6b3b08; --rel-purple:#4c1d95; --rel-thead-1:#0a2c5c; --rel-thead-2:#0a3d80; --rel-thead-3:#0a4fad; --rel-thead-4:#125fc4; --rel-accent-ink:#0a3d80; --rel-accent:#0b63d6; --rel-surface:#9fa7b1; --rel-surface-raised:#acb3bc; --rel-accent-glow:rgba(11,99,214,.22); --rel-ok:#15683f; --rel-accent-rgb:11,99,214; --rel-shadow-rgb:20,24,29; --rel-shadow-deep-rgb:20,24,29; --rel-shadow-pure-rgb:20,24,29; --rel-accent-chart-rgb:10,61,128; --rel-warn-rgb:138,82,11; --rel-ink-rgb:20,24,29; --rel-danger-bright-rgb:168,48,43; --rel-shadow-2-rgb:20,24,29; --rel-neutral-rgb:74,84,98; --rel-thead-3-rgb:10,79,173; --rel-purple-rgb:76,29,149; --rel-ok-rgb:21,104,63; --rel-ink-faint-rgb:63,72,84; --rel-accent-strong-rgb:10,79,173; --rel-thead-4-rgb:18,95,196; --rel-thead-2-rgb:10,61,128; --rel-cyan-rgb:126,147,181; --rel-tint-rgb:154,160,168; --rel-surface-rgb:159,167,177; /* Tokens que ja existiam com fallback nas regras padrao — o tema so precisa dar valor. Sao os 11% que convertem sem tocar em regra. */ /* Faixa de tabela e ESTRUTURA. Azul aqui competia com o unico lugar onde o acento deve viver: a acao primaria. Vira ardosia. */ --tk-thead-grad:linear-gradient(145deg,#333b45 0%,#3f4854 34%,#4a5462 68%,#57616f 100%); --tk-thead-edge:inset 0 0.0625rem 0 rgba(255,255,255,.16), inset 0 -0.0625rem 0 rgba(20,24,29,.28); --rel-scroll-thumb:rgba(10,61,128,.38); --rel-scroll-thumb-hover:rgba(10,61,128,.55); --tx:#14181d; --fg:#14181d; --cli-blue:#0a3d80; --cli-slate-900:#14181d; --d2:#0f5c66; --p-elev-1:0 0.0625rem 0.125rem rgba(20,24,29,.18); } /* ---------- shell ---------- */ html[data-theme="dark"] #page-relatorios .relatorios-fd body.app{ background:var(--bg-app); } html[data-theme="cinza"] #page-relatorios .relatorios-fd body.app{ background:var(--bg-app); } /* ---------- topbar ---------- */ /* ---------- KPI ---------- */ html[data-theme="dark"] #page-relatorios .relatorios-fd .kpi{ background:var(--surface); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .kpi .k-sub .s-v{ color:#c2cee6; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .kpi .k-sub .s-v{ color:#14181d; } html[data-theme="dark"] #page-relatorios .relatorios-fd .kpi .k-mini .m b{ color:#c2cee6; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .kpi .k-mini .m b{ color:#14181d; } html[data-theme="dark"] #page-relatorios .relatorios-fd .section-head .hint, html[data-theme="dark"] #page-relatorios .relatorios-fd .section-head .upd{ color:var(--muted); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .section-head .hint,html[data-theme="cinza"] #page-relatorios .relatorios-fd .section-head .upd{ color:var(--muted); } /* ---------- connection panel ---------- */ html[data-theme="dark"] #page-relatorios .relatorios-fd .conn{ background:var(--surface); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .conn .c-head{ border-bottom-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .conn .wait-badge{ background:rgba(241,181,61,.12); border-color:rgba(241,181,61,.28); } html[data-theme="dark"] #page-relatorios .relatorios-fd .conn .wait-badge .w-l, html[data-theme="dark"] #page-relatorios .relatorios-fd .conn .wait-badge .w-v{ color:#f1b53d; } html[data-theme="dark"] #page-relatorios .relatorios-fd .conn .q-av{ background:var(--field); border-color:var(--line); color:#9aa9c6; } html[data-theme="dark"] #page-relatorios .relatorios-fd .conn .q-name{ color:#c2cee6; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .conn .q-name{ color:#14181d; } html[data-theme="dark"] #page-relatorios .relatorios-fd .conn .q-item{ border-bottom-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .conn .q-item{ border-bottom-color:var(--line); } /* ---------- operators ---------- */ html[data-theme="dark"] #page-relatorios .relatorios-fd .op{ background:var(--surface); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .op.online{ border-color:rgba(52,211,153,.4); } html[data-theme="dark"] #page-relatorios .relatorios-fd .op .o-av{ background:var(--field); border-color:var(--line); color:#c2cee6; } html[data-theme="dark"] #page-relatorios .relatorios-fd .op .o-av .pip{ border-color:var(--surface); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .op .o-av .pip{ border-color:var(--surface); } html[data-theme="dark"] #page-relatorios .relatorios-fd .op .o-state.off{ background:var(--field); } html[data-theme="dark"] #page-relatorios .relatorios-fd .op .o-stat{ background:var(--field); } html[data-theme="dark"] #page-relatorios .relatorios-fd .op .o-stat .v{ color:var(--ink); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .op .o-stat .v{ color:var(--ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .op .o-stat.zero .v{ color:#5a6b8a; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .op .o-stat.zero .v{ color:#454e59; } /* ---------- day panel ---------- */ html[data-theme="dark"] #page-relatorios .relatorios-fd .day-panel{ background:var(--surface); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .day-panel .dp-stat .v{ color:var(--ink); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .day-panel .dp-stat .v{ color:var(--ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .day-panel .bars2 .bar.peak{ background:linear-gradient(180deg,#4a5e8a,#2a3a5e); } html[data-theme="dark"] #page-relatorios .relatorios-fd .day-panel .dp-foot{ border-top-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .day-panel .dp-foot{ border-top-color:var(--line); } /* ---------- filters / toolbar (monitoramento) ---------- */ html[data-theme="dark"] #page-relatorios .relatorios-fd .search input, html[data-theme="dark"] #page-relatorios .relatorios-fd .fselect select, html[data-theme="dark"] #page-relatorios .relatorios-fd .morefilters{ background:var(--surface); border-color:var(--line); color:#c2cee6; } html[data-theme="dark"] #page-relatorios .relatorios-fd .fselect select{ color:#c2cee6; } html[data-theme="dark"] #page-relatorios .relatorios-fd .chip{ background:rgba(59,155,255,.12); border-color:rgba(59,155,255,.3); color:#9cc6ff; } html[data-theme="dark"] #page-relatorios .relatorios-fd .chip b{ color:#cfe3ff; } html[data-theme="dark"] #page-relatorios .relatorios-fd .chip.soon{ background:var(--field); border-color:var(--line); color:var(--muted); } html[data-theme="dark"] #page-relatorios .relatorios-fd .seg{ background:var(--field); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .seg button.on{ background:var(--surface-3); color:var(--blue); } /* ---------- kanban ---------- */ html[data-theme="dark"] #page-relatorios .relatorios-fd .kcol{ background:var(--bg-app,#05070b); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .kcol.k-atend{ background:linear-gradient(180deg,rgba(43,217,143,.10),var(--bg-app,#05070b) 5rem); } html[data-theme="dark"] #page-relatorios .relatorios-fd .kcol.k-paus{ background:linear-gradient(180deg,rgba(240,169,58,.10),var(--bg-app,#05070b) 5rem); } html[data-theme="dark"] #page-relatorios .relatorios-fd .kcol .kcount{ background:var(--surface); border-color:var(--line); color:#c2cee6; } html[data-theme="dark"] #page-relatorios .relatorios-fd .tkt{ background:var(--surface); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .tkt:hover{ border-color:rgba(59,155,255,.45); } html[data-theme="dark"] #page-relatorios .relatorios-fd .tkt .t-id{ color:var(--ink); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tkt .t-id{ color:var(--ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .tkt .t-name{ color:var(--ink); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tkt .t-name{ color:var(--ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .tkt .t-meta{ background:var(--field); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .tkt .t-meta .mi b{ color:#c2cee6; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tkt .t-meta .mi b{ color:#14181d; } html[data-theme="dark"] #page-relatorios .relatorios-fd .tkt .t-foot{ border-top-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tkt .t-foot{ border-top-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .kempty .ei{ background:var(--surface); border-color:var(--line); color:#4a5870; } /* ---------- list ---------- */ html[data-theme="dark"] #page-relatorios .relatorios-fd .list{ background:var(--surface); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .list thead th{ background:var(--field); border-bottom-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .list tbody td{ border-bottom-color:var(--line); color:#c2cee6; } html[data-theme="dark"] #page-relatorios .relatorios-fd .list tbody tr:hover{ background:var(--surface-3); } html[data-theme="dark"] #page-relatorios .relatorios-fd .list .l-name, html[data-theme="dark"] #page-relatorios .relatorios-fd .list .l-id{ color:var(--ink); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .list .l-name,html[data-theme="cinza"] #page-relatorios .relatorios-fd .list .l-id{ color:var(--ink); } /* ---------- modal (monitoramento) ---------- */ html[data-theme="dark"] #page-relatorios .relatorios-fd .modal{ background:var(--surface); } html[data-theme="dark"] #page-relatorios .relatorios-fd .modal .m-head{ border-bottom-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .modal .m-meta{ background:var(--field); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .modal .m-tools{ border-bottom-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .m-tools{ border-bottom-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .modal .m-close, html[data-theme="dark"] #page-relatorios .relatorios-fd .modal .m-nav button{ background:var(--surface-2); border-color:var(--line); color:#aab8d4; } html[data-theme="dark"] #page-relatorios .relatorios-fd .modal .m-body{ background:linear-gradient(180deg,var(--surface-2,#171c26),var(--bg-app,#05070b)); } html[data-theme="dark"] #page-relatorios .relatorios-fd .modal .day span{ background:var(--surface-2); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .modal .msg.in .bubble{ background:var(--surface-2); border-color:var(--line); color:#d4deef; } html[data-theme="dark"] #page-relatorios .relatorios-fd .modal .msg.out .bubble{ background:rgba(59,155,255,.18); border-color:rgba(59,155,255,.32); color:#cfe6ff; } html[data-theme="dark"] #page-relatorios .relatorios-fd .modal .m-foot{ background:var(--surface); border-top-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .modal .export-menu{ background:var(--surface-2); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .modal .export-menu button{ color:#c2cee6; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .export-menu button{ color:#14181d; } html[data-theme="dark"] #page-relatorios .relatorios-fd .modal mark{ background:#5a4a1a; color:#ffe39a; } /* ---------- modal encerrar (chats) ---------- */ html[data-theme="dark"] #page-relatorios .relatorios-fd .cmod-head{ border-bottom-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cmod-head{ border-bottom-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cmod-foot{ background:var(--field); border-top-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .csat, html[data-theme="dark"] #page-relatorios .relatorios-fd .cm-sla{ background:rgba(241,181,61,.1); border-color:rgba(241,181,61,.26); } /* ============================================================ CHATS ============================================================ */ html[data-theme="dark"] #page-relatorios .relatorios-fd .cl{ background:var(--surface); border-right-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cv.on{ background:rgba(59,155,255,.12); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cv-name{ color:var(--ink); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cv-name{ color:var(--ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cv-av .pip{ border-color:var(--surface); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cv-av .pip{ border-color:var(--surface); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cm{ background:var(--bg-app); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cm-bar{ background:var(--surface); border-bottom-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cm-conn .cb-logo{ background:var(--surface-2); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cm-conn .cb-logo{ background:var(--surface-2); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cbtn{ background:var(--surface-2); border-color:var(--line); color:#aab8d4; } html[data-theme="dark"] #page-relatorios .relatorios-fd .cbtn:hover{ background:var(--surface-3); color:var(--ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cbtn.resolve{ background:rgba(52,211,153,.15); border-color:rgba(52,211,153,.35); color:#34d399; } html[data-theme="dark"] #page-relatorios .relatorios-fd .cbtn.active{ background:rgba(59,155,255,.16); border-color:rgba(59,155,255,.4); color:var(--blue); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cm-day span{ background:var(--surface-2); border-color:var(--line); color:#9aa9c6; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cm-day span{ background:var(--surface-2); border-color:var(--line); color:#333b45; } html[data-theme="dark"] #page-relatorios .relatorios-fd .bub.in{ background:var(--surface-2); border-color:var(--line); color:#d4deef; } html[data-theme="dark"] #page-relatorios .relatorios-fd .bub.out{ background:rgba(59,155,255,.18); border-color:rgba(59,155,255,.32); color:#cfe6ff; } html[data-theme="dark"] #page-relatorios .relatorios-fd .bub.img .ph{ background:linear-gradient(135deg,#1e2a44,#16203a); color:#5a6b8a; } html[data-theme="dark"] #page-relatorios .relatorios-fd .typing{ background:var(--surface-2); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .typing{ background:var(--surface-2); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cm-input{ background:var(--surface); border-top-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cm-input{ background:var(--surface); border-top-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .qchip{ background:var(--field); border-color:var(--line); color:#c2cee6; } html[data-theme="dark"] #page-relatorios .relatorios-fd .quick-pop{ background:var(--surface-2); border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .quick-pop .qp-item{ color:#c2cee6; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .quick-pop .qp-item{ color:#14181d; } html[data-theme="dark"] #page-relatorios .relatorios-fd .quick-pop .qp-item:hover{ background:var(--surface-3); color:var(--ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cx{ background:var(--surface); border-left-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cx{ background:var(--surface); border-left-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cx-card{ border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cx-card{ border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cx-acc{ background:var(--surface); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cx-acc{ background:var(--surface); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cx-acc .t{ color:#9aa9c6; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cx-acc .t{ color:#333b45; } html[data-theme="dark"] #page-relatorios .relatorios-fd .cx-row .v, html[data-theme="dark"] #page-relatorios .relatorios-fd .contact-hero .ch-name{ color:var(--ink); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cx-row .v,html[data-theme="cinza"] #page-relatorios .relatorios-fd .contact-hero .ch-name{ color:var(--ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .contact-hero .ch-line .ci{ background:var(--field); border-color:var(--line); color:#9aa9c6; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .contact-hero .ch-line .ci{ background:var(--field); border-color:var(--line); color:#333b45; } html[data-theme="dark"] #page-relatorios .relatorios-fd .contact-hero .ch-line .cv{ color:#c2cee6; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .contact-hero .ch-line .cv{ color:#14181d; } html[data-theme="dark"] #page-relatorios .relatorios-fd .contact-hero .ch-photo .wa{ border-color:var(--surface); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .contact-hero .ch-photo .wa{ border-color:var(--surface); } html[data-theme="dark"] #page-relatorios .relatorios-fd .tk-mini{ border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tk-mini{ border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .tk-mini:hover{ border-color:rgba(59,155,255,.4); background:var(--surface-3); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tk-mini:hover{ border-color:rgba(10,61,128,.4); background:var(--surface-3); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tk-mini:hover{ border-color:var(--rel-ink-3); } html[data-theme="dark"] #page-relatorios .relatorios-fd .tk-mini .id{ color:var(--ink); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tk-mini .id{ color:var(--ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .notes textarea{ background:#1c2236; border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .notes textarea:focus{ background:#20273d; } html[data-theme="dark"] #page-relatorios .relatorios-fd .media .m{ border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .media .m{ border-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .etag.add{ background:var(--surface); border-color:var(--line); color:#9aa9c6; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .etag.add{ background:var(--surface); border-color:var(--line); color:#333b45; } html[data-theme="dark"] #page-relatorios .relatorios-fd .cx-foot{ background:var(--surface); border-top-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cx-foot{ background:var(--surface); border-top-color:var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .btn.ghost{ background:var(--surface-2); border-color:var(--line); color:var(--ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .btn.ghost:hover{ background:var(--surface-3); } html[data-theme="dark"] #page-relatorios .relatorios-fd .btn.warn{ background:rgba(241,181,61,.12); border-color:rgba(241,181,61,.3); color:#f1b53d; } html[data-theme="dark"] #page-relatorios .relatorios-fd .btn.dark{ background:linear-gradient(135deg,#2f7fe0,#1e63c8); } /* select/textarea/input genéricos */ html[data-theme="dark"] #page-relatorios .relatorios-fd .input, html[data-theme="dark"] #page-relatorios .relatorios-fd .textarea, html[data-theme="dark"] #page-relatorios .relatorios-fd .select{ background:var(--field); border-color:var(--line); color:var(--ink); } html[data-theme="dark"] #page-relatorios .relatorios-fd .select{ background-image:url("data:image/svg+xml;utf8,"); } /* Standalone port — page header */ .relatorios-page-header h1{ font-size:1.3125rem; font-weight:800; letter-spacing:-0.025rem; margin:0; } .relatorios-page-header .relatorios-crumb{ font-size:0.8125rem; color:var(--muted); margin:0.125rem 0 0; } .main-content:has(#page-relatorios.active) .app-topbar .topbar-page-title, .main-content:has(#page-relatorios.active) .app-topbar .topbar-page-subtitle, .main-content:has(#page-relatorios.active) .app-topbar .topbar-chats-head{ display:none !important; } #page-relatorios.page{ display:flex; flex-direction:column; min-height:0; overflow:auto; } #page-relatorios .relatorios-fd.content{ flex:1; padding:var(--fd-filterbar-page-pad-top, 0.625rem) 1.75rem 3rem; max-width:102.5rem; width:100%; min-width:0; box-sizing:border-box; } #page-relatorios .relatorios-page-header{ padding:0 1.75rem 0; margin-bottom:0; } /* Relatorios P0 visual guard — evita fallback nativo quando o CSS lazy atrasa. */ #page-relatorios, #page-relatorios .relatorios-fd{ min-width:0; max-width:100%; overflow-x:hidden; } #page-relatorios .relatorios-fd .fdsel > select.fdsel-native, #page-relatorios .relatorios-fd .fselect > select.fdsel-native, #page-relatorios .relatorios-fd .order > select.fdsel-native, #page-relatorios .relatorios-fd .per > select.fdsel-native{ position:absolute!important; width:0.0625rem!important; height:0.0625rem!important; padding:0!important; margin:-0.0625rem!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important; opacity:0!important; pointer-events:none!important; } #page-relatorios .relatorios-fd .drawer{ position:fixed!important; top:0!important; right:0!important; bottom:0!important; max-width:94vw!important; z-index:var(--app-layer-drawer,2051)!important; } #page-relatorios .relatorios-fd .anl-drawer{ position:fixed!important; top:0!important; right:0!important; bottom:0!important; width:min(35rem,94vw)!important; max-width:94vw!important; z-index:var(--app-layer-drawer,2051)!important; } #page-relatorios .relatorios-fd .drawer:not(.open), #page-relatorios .relatorios-fd .anl-drawer:not(.open){ transform:translateX(110%)!important; pointer-events:none!important; } #page-relatorios .relatorios-fd .subnav .subtab .ti, #page-relatorios .relatorios-fd .prj-nav .prj-tab .ti, #page-relatorios .relatorios-fd .subnav .subtab > svg, #page-relatorios .relatorios-fd .prj-nav .prj-tab > svg{ display:none!important;width:0!important;height:0!important;overflow:hidden!important; } #page-relatorios .relatorios-fd .adw-foot button svg, #page-relatorios .relatorios-fd .dw-foot button svg{ width:1rem!important; height:1rem!important; max-width:1rem!important; max-height:1rem!important; flex:none!important; } #page-relatorios .relatorios-fd .adw-foot button svg, #page-relatorios .relatorios-fd .dw-foot button svg{ display:block!important; } #page-relatorios .relatorios-fd .subtab, #page-relatorios .relatorios-fd .prj-tab{ flex:none; min-width:0; } @media (max-width: 0px) /* ui-scale-freeze: was 1400px */{ #page-relatorios .relatorios-fd .indic-row{ flex-wrap:wrap; overflow:visible; } #page-relatorios .relatorios-fd .indic{ flex:1 1 calc(33.333% - 0.375rem); min-width:9.375rem; } #page-relatorios .relatorios-fd .filterbar.fb-line{ flex-wrap:wrap; } #page-relatorios .relatorios-fd .filterbar.fb-line > .daterange, #page-relatorios .relatorios-fd .filterbar.fb-line > .fselect, #page-relatorios .relatorios-fd .filterbar.fb-line > .morewrap{ flex:1 1 calc(25% - 0.4375rem); min-width:10.625rem; } } #page-relatorios .relatorios-fd [hidden]{ display:none!important; } /* TH-9: cinza overrides — hardcoded navy values */ html[data-theme="cinza"] #page-relatorios .relatorios-fd .chip{ background:rgba(11,99,214,.14); border-color:rgba(10,61,128,.42); color:#0a2c5c; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .chip{ border-color:var(--rel-line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .chip b{ color:#0a2c5c; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .chip.soon{ background:var(--field); border-color:var(--line); color:var(--muted); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .kpi{ background:var(--surface); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .conn{ background:var(--surface); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .conn .c-head{ border-bottom-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .conn .wait-badge{ background:rgba(138,82,11,.14); border-color:rgba(138,82,11,.38); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .conn .wait-badge .w-l, html[data-theme="cinza"] #page-relatorios .relatorios-fd .conn .wait-badge .w-v{ color:#6b3b08; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .conn .q-av{ background:var(--field); border-color:var(--line); color:#333b45; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .op{ background:var(--surface); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .op.online{ border-color:rgba(21,104,63,.45); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .op .o-av{ background:var(--field); border-color:var(--line); color:#14181d; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .op .o-state.off{ background:var(--field); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .op .o-stat{ background:var(--field); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .day-panel{ background:var(--surface); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .day-panel .bars2 .bar.peak{ background:linear-gradient(180deg,rgba(11,99,214,.42),rgba(11,99,214,.20)); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .search input, html[data-theme="cinza"] #page-relatorios .relatorios-fd .fselect select, html[data-theme="cinza"] #page-relatorios .relatorios-fd .morefilters{ background:var(--surface); border-color:var(--line); color:#14181d; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .seg{ background:var(--field); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .seg button.on{ background:var(--surface-3); color:var(--blue-text); } /* kanban — cinza (gray tones, não navy) */ html[data-theme="cinza"] #page-relatorios .relatorios-fd .kcol{ background:#7e8794; border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .kcol.k-atend{ background:linear-gradient(180deg,rgba(21,104,63,.14),#7e8794 5rem); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .kcol.k-paus{ background:linear-gradient(180deg,rgba(138,82,11,.14),#7e8794 5rem); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .kcol .kcount{ background:var(--surface); border-color:var(--line); color:#14181d; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tkt{ background:var(--surface); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tkt:hover{ border-color:rgba(11,99,214,.55); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tkt:hover{ border-color:var(--rel-ink-3); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tkt:hover{ border-color:var(--rel-ink-3); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .tkt .t-meta{ background:var(--field); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .kempty .ei{ background:var(--surface); border-color:var(--line); color:#454e59; } /* list */ html[data-theme="cinza"] #page-relatorios .relatorios-fd .list{ background:var(--surface); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .list thead th{ background:var(--field); border-bottom-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .list tbody td{ border-bottom-color:var(--line); color:#14181d; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .list tbody tr:hover{ background:var(--surface-3); } /* modal */ html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal{ background:var(--surface); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .m-head{ border-bottom-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .m-meta{ background:var(--field); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .m-close, html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .m-nav button{ background:var(--surface-2); border-color:var(--line); color:#333b45; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .m-body{ background:linear-gradient(180deg,#9fa7b1,#8a939f); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .day span{ background:var(--surface-2); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .msg.in .bubble{ background:var(--surface-2); border-color:var(--line); color:#14181d; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .msg.out .bubble{ background:rgba(11,99,214,.16); border-color:rgba(10,61,128,.34); color:#0a2c5c; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .msg.out .bubble{ border-color:var(--rel-line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .msg.out .bubble{ border-color:var(--rel-line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .m-foot{ background:var(--surface); border-top-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal .export-menu{ background:var(--surface-2); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .modal mark{ background:#ffe1aa; color:#6b3b08; } /* chats */ html[data-theme="cinza"] #page-relatorios .relatorios-fd .cl{ background:var(--surface); border-right-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cv.on{ background:rgba(11,99,214,.12); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cm{ background:var(--bg-app); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cm-bar{ background:var(--surface); border-bottom-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cbtn{ background:var(--surface-2); border-color:var(--line); color:#333b45; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cbtn:hover{ background:var(--surface-3); color:var(--ink); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cbtn.resolve{ background:rgba(21,104,63,.16); border-color:rgba(21,104,63,.40); color:#0e4a2c; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cbtn.active{ background:rgba(11,99,214,.16); border-color:rgba(11,99,214,.44); color:var(--blue-text); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cbtn.active{ border-color:var(--rel-ink-3); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cbtn.active{ border-color:var(--rel-ink-3); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .bub.in{ background:var(--surface-2); border-color:var(--line); color:#14181d; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .bub.out{ background:rgba(11,99,214,.16); border-color:rgba(10,61,128,.34); color:#0a2c5c; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .bub.out{ border-color:var(--rel-line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .bub.out{ border-color:var(--rel-line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .bub.img .ph{ background:linear-gradient(135deg,#acb3bc,#8a939f); color:#333b45; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .notes textarea{ background:#7e8794; border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .notes textarea:focus{ background:#9fa7b1; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .qchip{ background:var(--field); border-color:var(--line); color:#14181d; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .quick-pop{ background:var(--surface-2); border-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .quick-pop .qp-item:hover{ background:var(--surface-3); color:var(--ink); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .cmod-foot{ background:var(--field); border-top-color:var(--line); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .csat, html[data-theme="cinza"] #page-relatorios .relatorios-fd .cm-sla{ background:rgba(138,82,11,.12); border-color:rgba(138,82,11,.32); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .btn.ghost{ background:var(--surface-2); border-color:var(--line); color:var(--ink); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .btn.ghost:hover{ background:var(--surface-3); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .btn.warn{ background:rgba(138,82,11,.14); border-color:rgba(138,82,11,.38); color:#6b3b08; } html[data-theme="cinza"] #page-relatorios .relatorios-fd .btn.dark{ background:linear-gradient(135deg,#0b63d6,#0a4fad); } html[data-theme="cinza"] #page-relatorios .relatorios-fd .input, html[data-theme="cinza"] #page-relatorios .relatorios-fd .textarea, html[data-theme="cinza"] #page-relatorios .relatorios-fd .select{ background:var(--field); border-color:var(--line); color:var(--ink); } /* S9 — standalone: config + chart-card (paridade shell) */ html[data-theme="dark"] #page-relatorios .relatorios-fd .config-panel, html[data-theme="cinza"] #page-relatorios .relatorios-fd .config-panel { background: linear-gradient(180deg, var(--field), color-mix(in srgb, var(--blue) 10%, var(--field))); border-color: var(--line); } html[data-theme="dark"] #page-relatorios .relatorios-fd .config-tab, html[data-theme="cinza"] #page-relatorios .relatorios-fd .config-tab { color: var(--muted); } html[data-theme="dark"] #page-relatorios .relatorios-fd .indic, html[data-theme="cinza"] #page-relatorios .relatorios-fd .indic { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.28); color: #fff; } html[data-theme="dark"] #page-relatorios .relatorios-fd .indic:not(.on):not([data-soon]):hover, html[data-theme="cinza"] #page-relatorios .relatorios-fd .indic:not(.on):not([data-soon]):hover { background: rgba(255,255,255,.36); border-color: rgba(255,255,255,.55); color: #fff; box-shadow: inset 0 0.0625rem rgba(255,255,255,.18), 0 0.25rem 0.75rem rgba(0,0,0,.28); } html[data-theme="dark"] #page-relatorios .relatorios-fd .indic.on, html[data-theme="cinza"] #page-relatorios .relatorios-fd .indic.on, html[data-theme="dark"] #page-relatorios .relatorios-fd .indic.on:not([data-soon]):hover, html[data-theme="cinza"] #page-relatorios .relatorios-fd .indic.on:not([data-soon]):hover { background: rgba(255,255,255,.96); border-color: rgba(255,255,255,.95); color: #143a8c; } html[data-theme="dark"] #page-relatorios .relatorios-fd .chart-card, html[data-theme="cinza"] #page-relatorios .relatorios-fd .chart-card { border-color: var(--line); background: radial-gradient(40rem 23.75rem at 88% -8%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 62%), radial-gradient(32.5rem 22.5rem at 4% 108%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 60%), linear-gradient(165deg, var(--surface) 0%, var(--field) 58%, color-mix(in srgb, var(--field) 85%, var(--bg-app)) 100%); box-shadow: var(--elev-3); } html[data-theme="dark"] #page-relatorios .relatorios-fd .cc-ibtn, html[data-theme="cinza"] #page-relatorios .relatorios-fd .cc-ibtn { background: color-mix(in srgb, var(--surface) 88%, transparent); border-color: var(--line); color: var(--muted); } html[data-theme="dark"] #page-relatorios .relatorios-fd .legend, html[data-theme="cinza"] #page-relatorios .relatorios-fd .legend { background: color-mix(in srgb, var(--surface) 72%, transparent); border-color: var(--line); } /* Nublado — barra de desempenho em alerta: o amarelo claro lava sobre cinza. */ html[data-theme="cinza"] #page-relatorios .relatorios-fd .perf-fill.warn{ background:linear-gradient(90deg,#c08a3a,var(--rel-warn)); }