/* ========================================================================== HOME-2025.CSS — CSS dedicado do ciclo 2025 (legado) -------------------------------------------------------------------------- Objetivo desta camada: concentrar, no futuro, as regras de responsividade e ajustes visuais ESPECÍFICOS do ciclo 2025, sempre escopados a `html[data-avd-year="2025"]`, para separar o 2025 do 2026 e da base comum. Estado atual (Etapa 2-A — correções visuais simples, só CSS): • Correções aplicadas: KPI Δ médio (rótulos P/D/Nota + alinhamento + valores sem colar), título da topbar (sem estourar) e offset/topbar (sticky no mobile, KPIs não ficam atrás da topbar). • ADIADO: comparador sem scroll interno — depende de mexer em #chart-row/ #chart-box (gráfico) ou mover o bloco via JS; ambos fora do escopo agora. • Ainda NÃO migradas as regras antigas de home.css / responsive.css. • Ainda NÃO feito: tabela→cards, gráfico/toolbar, drawer, JS. • Tudo escopado a [data-avd-year="2025"] e ao mobile (≤864px); desktop 2025 e todo o 2026 permanecem intactos. Ordem de carga no index.html (a cascata importa): reset.css → home.css → responsive.css → home-2025.css → home-2026.css → theme.css - Vem DEPOIS de responsive.css: pode sobrescrever regras 2025 quando as correções forem introduzidas (Etapas seguintes). - Vem ANTES de home-2026.css e theme.css: NÃO deve interferir no 2026 (regras futuras devem ser sempre escopadas a [data-avd-year="2025"]). Regra de ouro: nada aqui pode casar com o ciclo 2026. Toda regra futura começa por `html[data-avd-year="2025"]`. ========================================================================== */ /* ========================================================================== MOBILE 2025 (≤864px) — correções visuais simples (Etapa 2-A) Todas escopadas a html[data-avd-year="2025"]. Desktop (≥865px) intacto. ========================================================================== */ @media (max-width: 864px) { /* ---------------------------------------------------------------------- (1) TOPBAR — no mobile, vira STICKY (participa do fluxo). Assim a 1ª fileira de KPIs deixa de ficar escondida atrás da topbar fixa (o offset .wrap{padding-top: --topbar-h+12} do desktop é zerado pelo shorthand do responsive.css em ≤864, e o FASE 1-A só restaurou isso para o 2026). Espelha o comportamento já aprovado no 2026, sem tocar no desktop 2025. ---------------------------------------------------------------------- */ html[data-avd-year="2025"] .topbar { position: sticky; top: 0; } html[data-avd-year="2025"] .wrap { padding-top: 14px; } /* ---------------------------------------------------------------------- (2) TÍTULO — impedir que "Avaliação de Desempenho • Dashboard" estoure a topbar estreita. O base já tem overflow:hidden + text-overflow:ellipsis, mas falta white-space:nowrap para o ellipsis funcionar. Reduz a fonte no mobile e garante corte com reticências (sem mexer no texto via JS). ---------------------------------------------------------------------- */ html[data-avd-year="2025"] .brand { min-width: 0; } html[data-avd-year="2025"] .brand h1 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; } /* ---------------------------------------------------------------------- (4) COMPARADOR — ADIADO para uma etapa futura. Tentativa de remover o scroll interno via overflow/height no mobile faz o #cmp-box transbordar e SOBREPOR a legenda e o gráfico, porque o comparador vive dentro de #chart-row, que tem ALTURA FIXA + grid-auto-rows:1fr (responsive.css) — a mesma grade que dimensiona o gráfico. Uma correção limpa exige mexer em #chart-row/#chart-box (gráfico) ou mover o comparador para baixo dos registros via JS (como o 2026 faz) — ambos FORA do escopo desta rodada. Mantido como pendência; nada é alterado aqui para não piorar. ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- (1-KPI) CARD "Δ médio (L−A)" — alinhamento dos boxes P·D·Nota. Cada box vira coluna flex (rótulo no topo, valor na base) → os três valores ficam na MESMA base e param de colar. Inerte nos cards LÍDER/AUTO (rótulos de 1 linha). Não toca em cálculo/escala/delta. ---------------------------------------------------------------------- */ html[data-avd-year="2025"] .kpi-grid .k { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; } html[data-avd-year="2025"] .kpi-grid .k .t { line-height: 1.15; } /* Rótulos internos do card Δ viram P / D / Nota (o título já diz "Δ médio"). Só troca de APRESENTAÇÃO via ::before; o texto "Δ P/Δ D/Δ Nota" do HTML é preservado (some no mobile), então "Nota" cabe em 1 linha. */ html[data-avd-year="2025"] .cards .card.kpi-block:last-child .kpi-grid .k .t { font-size: 0; white-space: nowrap; } html[data-avd-year="2025"] .cards .card.kpi-block:last-child .kpi-grid .k .t::before { font-size: 11.5px; color: var(--muted); white-space: nowrap; } html[data-avd-year="2025"] .cards .card.kpi-block:last-child .kpi-grid .k:nth-child(1) .t::before { content: "P"; } html[data-avd-year="2025"] .cards .card.kpi-block:last-child .kpi-grid .k:nth-child(2) .t::before { content: "D"; } html[data-avd-year="2025"] .cards .card.kpi-block:last-child .kpi-grid .k:nth-child(3) .t::before { content: "Nota"; } } /* ≤430px — título menor + valores dos KPIs escalonados para não colar. Em telas estreitas, valores negativos de 4 caracteres (ex.: "-0.22") no card Δ médio (e os positivos de LÍDER/AUTO) encostam nas bordas dos 3 boxes. Aqui reduzimos a fonte do VALOR (não do rótulo) e o padding horizontal do box para garantir folga entre as colunas. Escopado a 2025; não toca cálculo/escala. */ @media (max-width: 430px) { html[data-avd-year="2025"] .brand h1 { font-size: 13px; } html[data-avd-year="2025"] .kpi-grid .k { padding-left: 5px; padding-right: 5px; } html[data-avd-year="2025"] .kpi-grid .k .v { font-size: clamp(13px, 4.2vw, 17px); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } } /* ≤360px — aperto extra para 320/360: valor menor e padding mínimo. */ @media (max-width: 360px) { html[data-avd-year="2025"] .kpi-grid .k { padding-left: 4px; padding-right: 4px; } html[data-avd-year="2025"] .kpi-grid .k .v { font-size: 13.5px; } } /* ========================================================================== MOBILE 2025 (≤864px) — REGISTROS em CARDS (Etapa 2-B) -------------------------------------------------------------------------- Converte a tabela #tbl em cards empilhados SÓ no mobile do 2025. Desktop (≥865px) mantém a tabela normal. Sem JS; escopado a [data-avd-year="2025"]. Estrutura da linha (main.js, 8 células, NÃO alterado): td1 Aval · td2 Tipo · td3 Setor · td4.js-person Nome · td5/6/7.num P/D/Nota · td8 Quadrante(badge) Observação importante: no 2025 o JS deixa P/D/Nota VAZIOS na LISTA (ficam só na expansão Líder×Auto). Por isso o card mostra Avaliação, Tipo, Setor, Nome e Quadrante e OCULTA as células P/D/Nota vazias — P/D/Nota continuam visíveis ao selecionar (expansão inalterada). Colocá-los na linha exigiria mexer no JS (fora do escopo desta rodada). ========================================================================== */ @media (max-width: 864px) { /* Sem scroll horizontal: o wrapper deixa de rolar e perde a dica de sombra */ html[data-avd-year="2025"] .table-wrap { overflow-x: visible; background: none; } /* Tabela e corpo viram blocos; cabeçalho de colunas não faz sentido em cards */ html[data-avd-year="2025"] #tbl, html[data-avd-year="2025"] #tbl tbody { display: block; width: 100%; min-width: 0; } html[data-avd-year="2025"] #tbl thead { display: none; } /* Cada registro = card */ html[data-avd-year="2025"] #tbl tbody tr[data-key] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--panel); cursor: pointer; transition: transform .12s ease, border-color .16s ease; } html[data-avd-year="2025"] #tbl tbody tr[data-key]:active { transform: scale(.995); } /* Células viram itens do card, sem bordas de tabela */ html[data-avd-year="2025"] #tbl tbody tr[data-key] > td { display: block; padding: 0; border: none !important; white-space: normal; } /* Nome em destaque, ocupa a 1ª linha inteira */ html[data-avd-year="2025"] #tbl tbody tr[data-key] > td.js-person { order: 1; flex: 1 1 100%; min-width: 0; font-size: 15px; font-weight: 700; color: var(--fg-strong); overflow-wrap: anywhere; } /* Aval / Tipo / Setor → chips rotulados na 2ª linha (quebram se faltar espaço) */ html[data-avd-year="2025"] #tbl tbody tr[data-key] > td:nth-child(1) { order: 2; } html[data-avd-year="2025"] #tbl tbody tr[data-key] > td:nth-child(2) { order: 3; } html[data-avd-year="2025"] #tbl tbody tr[data-key] > td:nth-child(3) { order: 4; } html[data-avd-year="2025"] #tbl tbody tr[data-key] > td:nth-child(1), html[data-avd-year="2025"] #tbl tbody tr[data-key] > td:nth-child(2), html[data-avd-year="2025"] #tbl tbody tr[data-key] > td:nth-child(3) { flex: 0 0 auto; max-width: 100%; font-size: 12px; font-weight: 600; color: var(--fg); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-avd-year="2025"] #tbl tbody tr[data-key] > td:nth-child(1)::before { content: "Aval: "; font-weight: 400; opacity: .6; } html[data-avd-year="2025"] #tbl tbody tr[data-key] > td:nth-child(2)::before { content: "Tipo: "; font-weight: 400; opacity: .6; } html[data-avd-year="2025"] #tbl tbody tr[data-key] > td:nth-child(3)::before { content: "Setor: "; font-weight: 400; opacity: .6; } /* P/D/Nota: vazios na lista do 2025 → ocultos no card (ficam na expansão) */ html[data-avd-year="2025"] #tbl tbody tr[data-key] > td.num { display: none; } /* Quadrante (badge) em linha própria, sem estourar */ html[data-avd-year="2025"] #tbl tbody tr[data-key] > td:nth-child(8) { order: 5; flex: 1 1 100%; } html[data-avd-year="2025"] #tbl tbody tr[data-key] > td:nth-child(8) .badge { max-width: 100%; } /* Linha de expansão: bloco full-width. SEM !important no display, para que o toggle inline do JS (style="display:none" fechado / "" aberto) continue funcionando: fechado o inline vence; aberto cai para este display:block. */ html[data-avd-year="2025"] #tbl tbody tr.expand-row { display: block; width: 100%; margin: -2px 0 12px; } html[data-avd-year="2025"] #tbl tbody tr.expand-row > td { display: block; width: 100%; padding: 0; border: none !important; } /* Expansão (Detalhes do colaborador): o .ex-align usa grid-template-columns var(--c1..--c8) = larguras das colunas do (via syncColVars). Como ocultamos o thead nos cards, essas variáveis zeram e o grid colapsa (texto sobreposto). Aqui damos ao .ex-align um grid próprio no mobile: o rótulo (Líder/Auto) ocupa uma linha inteira e, abaixo, P · D · Nota · Quadrante. Só no 2025 (o 2026 tem outra estrutura de expansão) e só no mobile. */ html[data-avd-year="2025"] .expand-wrap .ex-align { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(44px, auto); column-gap: 8px; row-gap: 6px; } html[data-avd-year="2025"] .expand-wrap .ex-align .spacer { grid-column: 1 / -1; } } /* ========================================================================== MOBILE 2025 (≤864px) — GRÁFICO: toolbar fora do canvas (Etapa 2-C) -------------------------------------------------------------------------- O JS (main.js, placeChartToolbar2025) MOVE a .chart-toolbar para o cabeçalho do card no mobile (e devolve ao #chart-box no desktop). Aqui só a apresentação: quando a toolbar está no .panel-header, fica estática, alinhada à direita e com botões legíveis nos dois temas (o estilo original era claro sobre o fundo escuro do gráfico; no cabeçalho usamos tokens de tema). Escopado a 2025. ========================================================================== */ @media (max-width: 864px) { html[data-avd-year="2025"] .panel-header:has(.chart-toolbar) { flex-wrap: wrap; align-items: center; gap: 4px 10px; } html[data-avd-year="2025"] .panel-header:has(.chart-toolbar) h2 { min-width: 0; } html[data-avd-year="2025"] .panel-header .chart-toolbar { position: static; display: inline-flex; gap: 8px; margin-left: auto; flex: 0 0 auto; } html[data-avd-year="2025"] .panel-header .chart-toolbar .btn-tool { background: var(--surface-2); border: 1px solid var(--border); color: var(--fg); } } /* ========================================================================== MOBILE 2025 — DRAWER/FILTROS: backdrop + trava de scroll (Etapa 2-D) -------------------------------------------------------------------------- Paridade com o 2026. O elemento .avd-drawer-backdrop e a classe .avd-scroll-lock são criados/alternados por main.js (setupMobileDrawer2025), só no mobile (≤864px). ESC e clique-fora já vêm do chrome compartilhado. Tudo escopado a [data-avd-year="2025"] — não toca no 2026. ========================================================================== */ html[data-avd-year="2025"] body.avd-scroll-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } html[data-avd-year="2025"] .avd-drawer-backdrop { position: fixed; inset: 0; z-index: 1100; display: none; background: rgba(6, 10, 20, .48); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } html[data-avd-year="2025"] .avd-drawer-backdrop:not([hidden]) { display: block; } @media (max-width: 864px) { /* Topbar + drawer acima do backdrop (backdrop = z 1100). */ html[data-avd-year="2025"] .topbar.filters-open { z-index: 1200; } } /* ========================================================================== MOBILE 2025 — COMPARADOR fluindo na página (Etapa 2-E) -------------------------------------------------------------------------- O JS (main.js, placeComparator2025) MOVE o #cmp-box para baixo do painel de Registros no mobile (e devolve ao #chart-row no desktop). Fora da grade de altura fixa do #chart-row, aqui neutralizamos o scroll interno aninhado (height/overflow/max-height das regras legadas do responsive.css) e deixamos o conteúdo fluir. Escopado a [data-avd-year="2025"]; desktop intacto. ========================================================================== */ @media (max-width: 864px) { html[data-avd-year="2025"] #cmp-box, html[data-avd-year="2025"] #cmp-box .cmp-card, html[data-avd-year="2025"] #cmp-box .cmp-details { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } html[data-avd-year="2025"] #cmp-box .cmp-details > summary { position: static !important; } html[data-avd-year="2025"] #cmp-box .cmp-list { max-height: none !important; overflow: visible !important; } /* Espaço acima quando o comparador vira um bloco após os Registros. */ html[data-avd-year="2025"] #cmp-box { margin-top: 14px; } } /* ========================================================================== MOBILE 2025 (≤864px) — GRÁFICO/LEGENDA: bloco compacto (Etapa 2-F) -------------------------------------------------------------------------- Depois que o comparador saiu do #chart-row (Etapa 2-E), sobraram só o gráfico e a legenda dentro de uma grade de ALTURA FIXA (#chart-row: height clamp(460,58vh,700) + grid-auto-rows:1fr, herdada de home.css/responsive.css, NÃO escopada a media query). Com 2 filhos, a altura fixa era repartida 1fr/1fr: o gráfico ficava espremido (~225–263px) e a legenda travada na mesma faixa, gerando scroll interno (conteúdo ~308px) e/ou espaço vazio. Aqui, SÓ no mobile do 2025 e SÓ apresentação: • soltamos a altura fixa do #chart-row (height/rows auto → empilha natural); • damos ao gráfico uma altura real (escala 0–5 inalterada — é opção do JS); • a legenda passa a ter altura automática (só o conteúdo), sem scroll; • compactamos a legenda (padding/gaps menores + zonas em 2 colunas). Nada de JS, dados, cálculo, escala, comparador, drawer ou CSV. Desktop (≥865px) mantém a grade fixa de 3 colunas. Escopado a [data-avd-year="2025"]. ========================================================================== */ @media (max-width: 864px) { /* (1) #chart-row deixa de ter altura fixa e linhas 1fr: empilha no fluxo. */ html[data-avd-year="2025"] #chart-row { height: auto !important; grid-auto-rows: auto !important; } /* (2) Gráfico com altura própria e boa (não mais ~metade da linha fixa). */ html[data-avd-year="2025"] #chart-box { height: clamp(320px, 52vh, 480px) !important; } /* (3) Legenda flui com a altura do conteúdo — sem scroll interno nem faixa vazia. Zera os ajustes de gutter do scroll (só faziam sentido no modo rolável) para não deslocar horizontalmente. */ html[data-avd-year="2025"] #chart-legend { height: auto !important; min-height: 0 !important; overflow: visible !important; padding: 12px 14px; margin-right: 0; gap: 6px; } /* (4) Compactação visual da legenda. */ html[data-avd-year="2025"] #chart-legend h3 { margin: 0 0 4px; font-size: 13px; } html[data-avd-year="2025"] #chart-legend .legend-header { margin: 0 0 6px; } /* Zonas em 2 colunas: metade da altura, sem perder legibilidade. */ html[data-avd-year="2025"] #chart-legend .zones { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 8px 10px; font-size: 12px; } html[data-avd-year="2025"] #chart-legend .zones li { gap: 8px; padding: 3px 4px; } /* Nota de rodapé da legenda mais discreta. */ html[data-avd-year="2025"] #chart-legend p { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.3; } } /* ========================================================================== GRÁFICO 2025 — polimento visual (Etapa 3-A) -------------------------------------------------------------------------- (a) Botões (tela cheia / PNG) SEMPRE fora do canvas: o JS (placeChartToolbar2025) agora move a .chart-toolbar para o cabeçalho do card em TODA largura (antes só no mobile; no desktop ela ficava absoluta sobre o canvas). Estas regras — antes só em @media ≤864 — passam a valer em qualquer largura, mas restritas ao card do gráfico via :has(.chart-toolbar) (não afetam o cabeçalho de "Registros"). (b) Fundo do gráfico sensível ao tema: usa as MESMAS variáveis --chart-box-bg-* de theme.css (claro/escuro) que o ciclo 2026 já usa. No tema claro o card fica claro (antes ficava escuro); no escuro segue escuro. O ID no seletor garante prioridade sobre o fundo herdado. Escala 0–5 e dados inalterados. ========================================================================== */ html[data-avd-year="2025"] .panel-header:has(.chart-toolbar) { flex-wrap: wrap; align-items: center; gap: 4px 10px; } html[data-avd-year="2025"] .panel-header:has(.chart-toolbar) h2 { min-width: 0; } html[data-avd-year="2025"] .panel-header .chart-toolbar { position: static; display: inline-flex; gap: 8px; margin-left: auto; flex: 0 0 auto; } html[data-avd-year="2025"] .panel-header .chart-toolbar .btn-tool { background: var(--surface-2); border: 1px solid var(--border); color: var(--fg); } html[data-avd-year="2025"] #chart-box { /* !important vence a regra herdada de theme.css (arquivo compartilhado, não alterado) `:root[data-theme="light"][data-avd-year="2025"] #chart-box{background:#111725}`, que forçava o gráfico 2025 a ficar escuro no tema claro. Como o canvas do 2025 agora é theme-aware (cores lidas das vars --chart-*), o card pode e deve acompanhar o tema. As vars --chart-box-bg-* já invertem por tema. */ background: linear-gradient(180deg, var(--chart-box-bg-a), var(--chart-box-bg-b)) !important; } /* ========================================================================== TOPBAR MOBILE 2025 — botão "Setores" FORA do drawer (Etapa 3-B) -------------------------------------------------------------------------- "Setores" é NAVEGAÇÃO (voltar à visão geral), não um filtro. O JS (placeBackButton2025) move o #btnBack para a .topbar-actions quando há drawer (≤1099px) e o devolve à barra de filtros no desktop (≥1100px). Aqui só a apresentação. A visibilidade continua regida por .show-people (regra global `.show-people #btnBack{display:inline-block!important}`): aparece só quando há setor/colaborador selecionado. Escopado a 2025. ========================================================================== */ @media (max-width: 1099px) { /* Sem contexto (visão de setores), o botão some da topbar. */ html[data-avd-year="2025"]:not(.show-people) .topbar-actions #btnBack { display: none !important; } /* Alinhado aos demais botões da topbar (alvo de toque pleno). */ html[data-avd-year="2025"] .topbar-actions #btnBack { min-height: 44px; flex: 0 0 auto; white-space: nowrap; } } @media (max-width: 864px) { /* Telas estreitas (320–430): o cluster de ações pode quebrar em 2 linhas, organizado à direita, sem sobreposição nem overflow horizontal. */ html[data-avd-year="2025"] .topbar-actions { flex-wrap: wrap; justify-content: flex-end; } } /* ========================================================================== EXPORTAÇÃO 2025 — XLSX no lugar do CSV (Etapa 3-C) -------------------------------------------------------------------------- Padroniza com o 2026: o botão visível passa a ser o XLSX (#btnExportXlsx), que já existe no index.html com ícone Excel + rótulo "XLSX". O botão CSV (#btnExport) é ocultado (a função exportCSV segue no main.js como fallback interno). Sobrepõe a regra base de theme/home.css que ocultava o XLSX no 2025. ========================================================================== */ html[data-avd-year="2025"] #btnExport { display: none !important; } html[data-avd-year="2025"] #btnExportXlsx { display: inline-flex !important; } /* ========================================================================== TABELA 2025 (desktop) — células P/D/Nota compactas "L x.xx / A x.xx" (Etapa 3-D) -------------------------------------------------------------------------- A linha principal deixou de ter P/D/Nota vazios (aparência de tabela incompleta): agora mostra os valores de Líder e Auto de forma compacta. Aqui só apresentação — números tabulares, sem quebra, fonte levemente menor para não alargar a tabela. No mobile essas colunas (.num) seguem ocultas (cards). ========================================================================== */ html[data-avd-year="2025"] #tbl td.num { font-size: 12.5px; overflow: visible; text-overflow: clip; line-height: 1.3; min-width: 66px; font-variant-numeric: tabular-nums; color: var(--fg); } /* "L x.xx" e "A x.xx" em duas linhas estruturadas: cada uma em bloco próprio e sem quebra interna, para nunca partir no meio do texto ("... / A" + "4.50"). */ html[data-avd-year="2025"] #tbl td.num .la { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; } html[data-avd-year="2025"] #tbl td.num .la-line { display: block; white-space: nowrap; }