:root { --canvas: #f2f4f6; --surface: #ffffff; --ink: #18212d; --muted: #566474; --line: #d8dfe6; --brand: #12395c; --brand-2: #1c4d78; --brand-soft: #e6edf4; --navy: #12395c; --navy-dark: #0b2740; --green: #2e7d55; --green-soft: #eaf5ee; --red: #b23b3b; --red-soft: #fbeceb; --gold: #d4832f; --blue: #12395c; --danger: #b65a4b; --row-band: #eef3f8; --shadow: 0 6px 20px rgba(29, 40, 54, .075); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.35; /* Mantém o ClearType/nitidez nativos do Windows. Forçar antialiasing em toda a página deixa textos finos com aparência borrada em telas de alta resolução. */ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-rendering: auto; font-kerning: normal; -webkit-print-color-adjust: exact; print-color-adjust: exact; } button, input, select { font: inherit; } button { cursor: pointer; } svg { shape-rendering: geometricPrecision; text-rendering: geometricPrecision; } /* Impressão / exportação (PDF, extensões de print): sombras suaves ficam borradas quando rasterizadas — trocadas por borda sólida fina, mais nítida no resultado final. Também força a página a caber numa única largura, sem cortar conteúdo. */ @media print { * { box-shadow: none !important; text-shadow: none !important; } body { background: #fff; } .sidebar { position: static; box-shadow: none; } .kpi-card, .panel, .filter-panel { border: 1px solid var(--line); } .update-button, .export-button, .clear-button, .update-status, .filter-panel, .topbar-actions { display: none !important; } } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; width: 180px; padding: 20px 16px 22px; display: flex; flex-direction: column; align-items: center; background: var(--navy-dark); color: white; } /* Botões de ação (Atualizar dados, Exportar CSV, Modo apresentação) e o status, agora dentro da barra lateral em vez do cabeçalho — empilhados, ocupando a largura toda, com espaço reservado no meio da barra (antes vazio depois que os botões de navegação 1-5 saíram). */ .sidebar .topbar-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; margin: 26px 0; } .sidebar .local-badge, .sidebar .update-button, .sidebar .export-button, .sidebar .present-button { width: 100%; justify-content: center; white-space: normal; text-align: center; font-size: 12px; padding: 9px 8px; } .sidebar .update-status { max-width: none; text-align: center; color: #b8ccc8; } .sidebar .export-button { background: transparent; color: white; border-color: rgba(255,255,255,.3); } .sidebar .export-button:hover { border-color: rgba(255,255,255,.55); } .sidebar .update-button { background: var(--brand-2); border-color: rgba(255,255,255,.3); } .sidebar .update-button:hover { background: #24608f; } .brand-mark { width: 100%; height: auto; padding: 6px; border-radius: 10px; background: #fff; } .sidebar-years { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 6px; width: 100%; } .year-pill { width: 100%; padding: 8px 0; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: transparent; color: #b8ccc8; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-align: center; } .year-pill:hover { border-color: rgba(255,255,255,.4); color: white; } .year-pill.active { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: white; } .app-shell { max-width: 1520px; margin: 0 auto; padding: 40px 46px 60px 220px; } .topbar { display: block; margin-bottom: 29px; } .eyebrow { margin: 0 0 7px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.032em; } h1 { font-size: clamp(38px, 4.1vw, 58px); } h2 { font-size: 24px; } .subtitle { margin: 9px 0 0; color: var(--muted); font-size: 15px; } .topbar-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .local-badge { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid #cedfd9; border-radius: 999px; background: var(--brand-soft); color: #285b50; font-size: 13px; font-weight: 600; white-space: nowrap; } .local-badge span { width: 7px; height: 7px; border-radius: 50%; background: #2b9b78; box-shadow: 0 0 0 4px #cce6dd; } .export-button { padding: 10px 15px; border: 1px solid #cbd2d9; border-radius: 999px; background: white; color: #33404e; font-size: 13px; font-weight: 700; } .export-button:hover { border-color: var(--brand); color: var(--brand); } .update-button { padding: 10px 15px; border: 1px solid var(--navy); border-radius: 999px; background: var(--navy); color: white; font-size: 13px; font-weight: 700; } .update-button:hover { background: var(--navy-dark); } .update-button:disabled { opacity: .6; cursor: default; } .present-button { padding: 10px 15px; border: 1px solid var(--brand-2); border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 700; } .present-button:hover { background: var(--brand-2); color: white; } .update-status { margin: 0; font-size: 12px; color: var(--muted); max-width: 220px; } .update-status.error { color: var(--red); } .update-status.success { color: var(--green); } .update-status.warning { color: var(--gold); max-width: 320px; } .filter-panel { margin-bottom: 16px; padding: 14px; display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)) auto; gap: 10px; align-items: end; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.88); box-shadow: var(--shadow); } .filter-panel label { min-width: 0; } .filter-panel label > span { display: block; margin: 0 0 6px 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .filter-panel input, .filter-panel select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #d2dae2; border-radius: 10px; outline: none; background: #fafbfc; color: var(--ink); font-size: 13px; } .filter-panel input:focus, .filter-panel select:focus { border-color: #6da596; box-shadow: 0 0 0 3px rgba(45,127,105,.09); } .clear-button { height: 40px; padding: 0 13px; border: 0; background: transparent; color: var(--brand); font-size: 13px; font-weight: 700; } .kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 13px; margin-bottom: 15px; } .kpi-card, .panel { border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); } .kpi-card { min-height: 142px; padding: 20px; overflow: hidden; } .kpi-card.compact { min-height: 86px; padding: 14px 20px; } .kpi-card.compact strong { margin-top: 10px; font-size: clamp(18px, 1.6vw, 22px); } .kpi-card.compact small { margin-top: 5px; } .kpi-card.outline-navy { border: 2px solid var(--navy); } .kpi-card.outline-green { border: 2px solid var(--green); } .kpi-card.outline-red { border: 2px solid var(--red); } .kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .kpi-top p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .kpi-top > span:not(.dot) { color: #9da6b0; font-size: 11px; font-weight: 800; } .kpi-card strong { display: block; margin-top: 20px; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.045em; white-space: nowrap; color: var(--navy); } .kpi-card small { display: block; margin-top: 9px; color: var(--muted); font-size: 12px; } .kpi-card .positive { color: var(--green); font-weight: 700; } .dot, .chart-legend i, .donut-summary i { width: 8px; height: 8px; display: inline-block; border-radius: 3px; } .paid { background: var(--green); } .open { background: var(--red); } .investment { background: var(--navy); } .banner-heading { margin: -22px -24px 20px; padding: 12px 24px; background: var(--navy); color: white; font-size: 14px; font-weight: 700; letter-spacing: .02em; border-radius: 17px 17px 0 0; } .table-panel .banner-heading { margin: 0; border-radius: 17px 17px 0 0; } .dashboard-grid { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(285px, .95fr); gap: 15px; margin-bottom: 15px; } .dashboard-grid.single-col { grid-template-columns: 1fr; } .distribution-grid { grid-template-columns: 1.25fr .75fr; } /* Tela "Visão geral": o quadro "Execução" (tabela de 5 colunas) precisa de mais espaço horizontal do que o donut que ocupava esse lugar antes — dá uma fração maior da largura pra ele do que o padrão de .dashboard-grid (que era pensado pra um card estreito ao lado do gráfico). */ #visao-charts { grid-template-columns: minmax(340px, 1.2fr) minmax(0, 1.55fr); } .distribution-grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); } .distribution-grid.even-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .panel { padding: 22px 24px; } .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .chart-legend { display: flex; flex-wrap: wrap; gap: 13px; color: var(--muted); font-size: 11px; margin-left: auto; } .chart-legend span { display: flex; align-items: center; gap: 6px; } .bar-chart { height: 260px; display: grid; grid-template-columns: repeat(12, minmax(25px, 1fr)); gap: 9px; align-items: end; padding: 28px 3px 0; } .month-column { height: 100%; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; border-radius: 8px 8px 0 0; } .month-column.zone-realized { background: var(--green-soft); border-top: 2px solid var(--green); } .month-column.zone-pending { background: var(--red-soft); border-top: 2px solid var(--red); } .bars { width: 100%; height: 205px; display: flex; gap: 3px; align-items: flex-end; justify-content: center; border-bottom: 1px solid #e8ebef; } .bars i { width: min(12px, 29%); min-height: 1px; border-radius: 4px 4px 1px 1px; transition: height .35s ease; } .month-column > span { color: #596879; font-size: 11px; font-weight: 600; } .month-column.empty .bars i { opacity: .2; } .legend-line i { width: 16px; height: 3px; border-radius: 2px; background: var(--gold); } .legend-line.cum-legend-paid i { background: var(--gold); } .legend-line.cum-legend-open i { background: var(--green); } /* Gráfico "Investimento acumulado": barra (investimento) + linhas de pago/a pagar acumulados (uso exclusivo deste gráfico — não mexe no "Fluxo Financeiro", que usa dados/estrutura própria em renderYearFlowChart). */ .cum-chart { position: relative; height: 240px; padding: 10px 4px 28px; overflow: hidden; } .cum-bars { position: absolute; top: 10px; left: 4px; right: 4px; bottom: 28px; display: flex; align-items: flex-end; gap: 3px; } .cum-column { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; } .cum-bar { width: 62%; min-height: 1px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--navy), #4d84b3); transition: height .35s ease; } .cum-labels { position: absolute; left: 4px; right: 4px; bottom: 0; height: 22px; display: flex; gap: 3px; } .cum-labels span { flex: 1; text-align: center; color: #14171a; font-size: 11px; font-weight: 800; white-space: nowrap; } .cum-line-overlay { position: absolute; top: 10px; left: 4px; right: 4px; bottom: 28px; width: calc(100% - 8px); height: calc(100% - 38px); pointer-events: none; display: block; } .cum-line-overlay polyline { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 2px rgba(18, 33, 45, .35)); } .cum-line-overlay circle.cum-dot { stroke: #fff; stroke-width: .5; vector-effect: non-scaling-stroke; pointer-events: auto; } .cum-line-overlay g.cum-line-paid polyline { stroke: var(--gold); } .cum-line-overlay circle.cum-dot.cum-line-paid { fill: var(--gold); } .cum-line-overlay g.cum-line-open polyline { stroke: var(--green); } .cum-line-overlay circle.cum-dot.cum-line-open { fill: var(--green); } /* Gráfico de progressão do pagamento (barra empilhada com % acumulado) */ .progress-chart { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 260px; padding: 28px 4px 0; overflow-x: auto; } .progress-column.zone-realized { background: var(--green-soft); border-top: 2px solid var(--green); } .progress-column.zone-pending { background: var(--red-soft); border-top: 2px solid var(--red); } .progress-column > span { color: #596879; font-size: 11px; font-weight: 600; white-space: nowrap; } /* Fluxo Financeiro: moldura "Pago"/"A vencer" estendida até as linhas de valores, colunas compactas (largura fixa, não esticam para preencher o espaço) e rótulo de % que sai da barra quando o segmento é pequeno demais para o número caber dentro. */ #yearFlowChart.progress-chart { height: auto; padding: 0; overflow-x: auto; align-items: flex-start; justify-content: flex-start; } /* Ocupa 100% do painel (em vez de só o tamanho do conteúdo) pra ficar alinhada, ponta a ponta, com os cartões Pago/A vencer acima. */ .zone-toprow { display: flex; align-items: stretch; gap: 16px; min-width: min-content; width: 100%; } .zone-frame { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 16px; padding: 6px 12px 12px; } .zone-frame.paid { border: 3px solid var(--green); background: var(--green-soft); } .zone-frame.pending { border: 3px solid var(--red); background: var(--red-soft); } .zone-frame-title { height: 26px; text-align: center; font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); } .zone-frame-columns { height: 260px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; } .zone-frame-values { display: flex; flex-direction: column; } .zone-value-row { position: relative; height: 26px; display: flex; align-items: center; justify-content: center; gap: 6px; } .zone-value-cell { flex: 0 0 52px; text-align: center; font-size: 12px; font-weight: 700; } .zone-row-label { position: absolute; left: -38px; width: 34px; text-align: left; font-size: 11px; font-weight: 800; } /* Escala numérica (eixo Y) embutida DENTRO da moldura "Pago", na mesma coluna reservada para os rótulos "2025"/"2026" — não é mais uma barra lateral externa presa ao gráfico. Segue exatamente o mesmo ritmo vertical das barras (mesma altura, mesmo espaçador de rodapé) pra os traços baterem com as colunas certas. */ .zone-axis { flex: 0 0 38px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4px; } .zone-axis-scale { position: relative; height: 220px; border-right: 1px solid #aeb8c2; } .zone-axis-tick { position: absolute; right: 6px; transform: translateY(-50%); text-align: right; font-size: 9px; font-weight: 700; line-height: 1; white-space: nowrap; color: #435263; } .zone-axis-tick::after { content: ""; position: absolute; top: 50%; left: calc(100% + 3px); width: 5px; border-top: 1px solid #aeb8c2; } /* Coluna individual: largura fixa e compacta (não flex:1 esticando) */ .progress-column { flex: 0 0 52px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; } /* No Fluxo Financeiro, as colunas CRESCEM pra preencher a moldura (em vez de ficar com largura fixa), assim a área do gráfico acompanha a largura real do painel e fica alinhada (ponta a ponta) com os cartões Pago/A vencer acima, que já esticam 100% via grid. */ #yearFlowChart .progress-column { flex: 1 1 52px; max-width: 84px; } #yearFlowChart .zone-value-cell { flex: 1 1 52px; max-width: 84px; } /* Rótulo de % que não coube dentro do segmento: fica ancorado exatamente na altura do topo da barra (bottom = altura da barra), bem colado, e não no topo do container. */ .progress-overflow { position: absolute; left: 0; right: 0; display: flex; flex-direction: column-reverse; align-items: center; gap: 1px; padding-bottom: 2px; } .pct-outside { font-size: 13px; font-weight: 800; line-height: 1; } .progress-bar-area { position: relative; height: 220px; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .progress-stack { width: 72%; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 4px 4px 1px 1px; overflow: hidden; background: #edf0f2; } .progress-stack .segment-open { background: var(--red); min-height: 0; } .progress-stack .segment-paid { background: var(--green); min-height: 0; display: flex; align-items: flex-start; justify-content: center; } .progress-stack .segment-paid span { margin-top: 3px; color: white; font-size: 10px; font-weight: 800; } .progress-column-label { color: #596879; font-size: 12px; font-weight: 600; white-space: nowrap; } /* Fluxo Financeiro: comparativo de safras (uma cor por ano) empilhadas na mesma barra */ .year-flow-a { background: var(--navy); } .year-flow-b { background: var(--gold); } .year-flow-a-text { color: var(--navy); } .year-flow-b-text { color: var(--gold); } .progress-stack .year-flow-a, .progress-stack .year-flow-b { min-height: 0; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; } .progress-stack .year-flow-a span, .progress-stack .year-flow-b span { margin-top: 3px; color: white; font-size: 13px; font-weight: 800; white-space: nowrap; } /* Cartões "Pago" / "A vencer" por ano, acima do gráfico Fluxo Financeiro — cantos normais arredondados, com um entalhe elíptico raso que ocupa a lateral de ponta a ponta (altura = altura do cartão) mas é estreito (largura pequena), estilo "ticket", sem morder fundo demais. Usa a cor do painel (--surface) para "cortar". */ /* justify-items:center faz cada cartão encolher pro tamanho do próprio conteúdo (em vez de esticar pra célula toda) e ficar centralizado sobre a área do gráfico correspondente — sem mudar a proporção 7fr/8fr definida via JS. */ .year-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 16px; margin: 2px 0 18px; } /* Cabeçalho no estilo do slide de PowerPoint usado mensalmente, com a data do mês de referência dinâmica. A instância da tela principal (dentro do .topbar) substitui o título ali o tempo todo, dentro ou fora do modo apresentação; as demais instâncias (uma por tela do modo apresentação) só aparecem no modo apresentação, junto com o resto de cada seção. */ .ppt-title-banner { display: none; margin: 0 0 18px; } body.presentation-mode .ppt-title-banner, .topbar .ppt-title-banner { display: block; } /* Garante que o título ocupe a largura inteira, mesmo dentro de grids de 2 ou 3 colunas (ex.: progressão, distribuição, detalhamento). */ .dashboard-grid > .ppt-title-banner { grid-column: 1 / -1; } .topbar-heading { display: none; } .ppt-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ppt-title-left { font-size: 26px; font-weight: 800; color: #14171a; font-family: Georgia, "Times New Roman", serif; } .ppt-title-center { font-size: 24px; font-weight: 800; color: var(--navy); font-family: Georgia, "Times New Roman", serif; } .ppt-title-right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.3; } .ppt-title-date { font-size: 15px; font-weight: 700; font-style: italic; color: #14171a; } .ppt-title-right small { font-size: 10.5px; font-weight: 600; color: var(--muted); } .ppt-title-rule { height: 3px; background: var(--red); margin: 6px 0 12px; border-radius: 2px; } .ppt-title-main { margin: 0; text-align: center; font-size: 28px; font-weight: 800; color: var(--navy); } .ppt-title-complement { margin: 4px 0 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); } .year-total-pill { --scoop-w: 34px; position: relative; padding: 18px 34px; border-radius: 14px; color: white; text-align: center; } .year-total-pill::before, .year-total-pill::after { content: ""; position: absolute; top: 0; width: var(--scoop-w); height: 100%; border-radius: 50%; background: var(--surface); } .year-total-pill::before { left: 0; transform: translateX(-55%); } .year-total-pill::after { right: 0; transform: translateX(55%); } .year-total-pill.pago { background: var(--green); } .year-total-pill.vencer { background: var(--red); } .year-total-pill .row { font-size: 16px; font-weight: 700; line-height: 1.7; } .year-total-pill .row.total { padding-top: 5px; margin-top: 5px; border-top: 1px solid rgba(255,255,255,.35); font-weight: 800; } .donut-wrap { min-height: 246px; display: grid; grid-template-columns: 1fr; place-items: center; gap: 15px; padding-top: 22px; } .donut { width: 148px; height: 148px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) 0deg, var(--green) 220deg, #e9edf0 220deg); } .donut::before { content: ""; position: absolute; width: 105px; height: 105px; border-radius: 50%; background: white; } .donut > div { position: relative; z-index: 1; text-align: center; } .donut strong { display: block; font-size: 28px; letter-spacing: -.05em; } .donut span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; } .donut-summary { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .donut-summary > div { padding: 10px; border-radius: 10px; background: #f7f8f9; } .donut-summary span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; } .donut-summary strong { display: block; margin-top: 5px; font-size: 13px; } .ranking { display: grid; gap: 13px; margin-top: 24px; } .rank-row { display: grid; grid-template-columns: minmax(105px, 1.2fr) 2.6fr minmax(85px, .8fr); align-items: center; gap: 13px; } .rank-row label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; } .track { height: 7px; border-radius: 99px; overflow: hidden; background: #edf0f2; } .track i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--navy), #3c7bb0); } .rank-row strong { text-align: right; font-size: 12px; } .plant-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 23px; } .plant-item { min-height: 90px; padding: 14px; border: 1px solid #e8ebee; border-radius: 13px; background: #fafbfb; } .plant-item span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } .plant-item strong { display: block; margin-top: 10px; font-size: 17px; } .plant-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; } .table-panel { padding: 0; overflow: hidden; } .table-heading { padding: 17px 24px; } .results-count { margin: 0; color: var(--muted); font-size: 12px; } .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 1080px; } th { padding: 11px 14px; background: var(--navy); color: #e7eef5; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } td { padding: 13px 14px; border-bottom: 1px solid #e1e6eb; font-size: 12px; vertical-align: middle; } tbody tr:nth-child(even) { background: var(--row-band); } tbody tr:hover { background: #dfe9f3; } .numeric { text-align: right; white-space: nowrap; } .supplier-cell { max-width: 275px; } .supplier-cell strong, .supplier-cell span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .supplier-cell strong { font-size: 12px; } .supplier-cell span { margin-top: 3px; color: var(--muted); font-size: 11px; } .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } .status-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; } .status-badge.pago { background: var(--green-soft); color: var(--green); } .status-badge.pago::before { background: var(--green); } .status-badge.aberto { background: var(--red-soft); color: var(--red); } .status-badge.aberto::before { background: var(--red); } .pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 20px; } .pagination button { padding: 7px 11px; border: 1px solid #dce1e5; border-radius: 8px; background: white; color: #4d5966; font-size: 11px; font-weight: 600; } .pagination button:disabled { opacity: .35; cursor: default; } .pagination span { color: var(--muted); font-size: 11px; } .empty-row { padding: 34px; text-align: center; color: var(--muted); } footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; padding: 18px 5px 0; color: var(--muted); font-size: 11px; } footer code { color: var(--brand); font-weight: 700; } footer strong { color: var(--ink); } .loading { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; background: #f2f4f6; } .loading p { color: var(--muted); font-size: 13px; } .spinner { width: 32px; height: 32px; border: 3px solid #dce5e2; border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; } .error-state { position: fixed; inset: auto 24px 24px auto; z-index: 40; padding: 15px 18px; border: 1px solid #e6c9c3; border-radius: 12px; background: #fff5f3; color: #8f4438; box-shadow: var(--shadow); } .error-state strong, .error-state span { display: block; } .error-state span { margin-top: 4px; font-size: 12px; } @keyframes spin { to { transform: rotate(360deg); } } /* Painel "Ativos por planta" — novo, aditivo: não reaproveita nem altera nenhuma classe usada pelos gráficos já existentes (Investimento acumulado, Fluxo Financeiro, Progressão, etc.). Duas colunas (ano corrente / safra anterior paga no ano corrente), cada uma com duas tabelas (Outros ativos / Máquinas e equipamentos) mais uma linha de total geral por coluna. */ .asset-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .asset-summary-grid.single { grid-template-columns: 1fr; } .asset-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .asset-col-heading { font-size: 13px; font-weight: 800; color: var(--navy); text-align: center; padding: 8px 10px; border-radius: 10px; background: var(--brand-soft); } .asset-table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .asset-table-title { padding: 8px 12px; font-size: 12px; font-weight: 700; color: #fff; background: var(--navy); } .asset-table-scroll { overflow-x: auto; } /* table-layout: fixed + uma largura fixa para a 1ª coluna garante que os meses caiam sempre na mesma posição horizontal — na mesma tabela (linha de total), entre as tabelas de uma mesma tela (Outros ativos x Máquinas) e entre telas diferentes (Totais gerais x Detalhamento), mesmo com nomes de planta de tamanhos diferentes ou fontes menores no modo apresentação. */ .asset-table { width: 100%; border-collapse: collapse; font-size: 11.5px; white-space: nowrap; table-layout: fixed; } .asset-table th, .asset-table td { padding: 6px 10px; text-align: right; } .asset-table th:first-child, .asset-table td:first-child { width: 180px; text-align: left; white-space: normal; } .asset-table thead th { background: var(--ink); color: #fff; font-weight: 700; font-size: 11px; } .asset-table tbody tr:nth-child(even) { background: var(--row-band); } .asset-table tbody tr.asset-total-row { background: var(--brand-soft); font-weight: 800; color: var(--brand); border-top: 2px solid var(--navy); } .asset-grand-total-wrap { margin-top: -2px; } .asset-grand-total-wrap .asset-table tr.asset-grand-row td { background: var(--navy); color: #fff; font-weight: 800; } .asset-grand-total-wrap .asset-table td:first-child { font-weight: 800; } .asset-empty-note { padding: 16px; text-align: center; color: var(--muted); font-size: 12px; } /* Tabela "Execução" (Período x Líquido/Bruto/Pago/A vencer) — fica lado a lado com o gráfico (coluna estreita), então é bem mais compacta que uma tabela comum: sem "R$" repetido em cada célula, cabeçalhos curtos e pouco espaço entre colunas. Reaproveita a base visual de .asset-table (cabeçalho escuro, linhas zebradas, linha de total), só ajustando alinhamento central, a largura da coluna "Período" e o destaque da coluna "Pago". */ /* min-width:0 é o ponto principal: sem isso, o item do grid (o card) e a div com scroll dentro dele tentam crescer para caber o conteúdo da tabela sem quebrar linha (herdado de .asset-table{white-space:nowrap}), e a coluna do grid acaba maior do que a fração (1.2fr) reservada pra ela — foi por isso que só 2-3 colunas apareciam de cada vez, mesmo com o card mais largo. Com min-width:0 em toda a cadeia, o card respeita o tamanho do grid e é a tabela (não o card) que fica com scroll, do jeito que já estava, mas agora com as colunas de fato espremidas para caber todas de uma vez. */ .period-summary-panel { display: flex; flex-direction: column; padding-left: 14px; padding-right: 14px; min-width: 0; } /* Sem banner-heading próprio: o cabeçalho da tabela (Período/Líquido/...) é que vira o "título" do card agora — sangra até as bordas do card com a mesma margem negativa que o banner-heading usava, e ganha o arredondado nos dois cantos de cima pra combinar com o card. */ .period-summary-table { min-width: 0; margin: -22px -14px 0; border-radius: 17px 17px 0 0; overflow: hidden; } .period-summary-panel .asset-table-scroll { min-width: 0; } /* No modo apresentação o padding do .panel é outro (10px/16px, ver mais abaixo), então a margem negativa do sangramento precisa acompanhar esse valor. */ body.presentation-mode .period-summary-table { margin: -10px -16px 0; } /* A causa real do "espaçamento demais" era esta: existe uma regra genérica table{min-width:1080px} lá em cima (pensada pra outra tabela da tela, a de registros/detalhamento), que por não ter nenhuma outra regra de min-width competindo, valia também para ESTA tabela — ela era obrigada a ter pelo menos 1080px de largura mesmo espremida num card de 300px, sobrando um scroll enorme. Zerando o min-width aqui, a tabela finalmente respeita a largura real do card. */ .period-table { table-layout: fixed; font-size: 11px; border-spacing: 0; width: 100%; min-width: 0; } .period-table th, .period-table td { text-align: center; padding: 2px 1px; white-space: normal; } .period-table th:first-child, .period-table td:first-child { width: 34px; text-align: left; white-space: nowrap; padding-left: 3px; } /* Cabeçalho padronizado com a mesma faixa azul (var(--navy)) e letras brancas do banner-heading do gráfico ao lado, com a mesma altura generosa — só a largura das colunas continua compacta pra caber as 5 lado a lado. */ .period-table thead th { background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 700; padding: 12px 4px; line-height: 1.2; } .period-col-paid { background: #dbe9f7; } .period-table thead th.period-col-paid { background: var(--navy); } .period-table tbody tr.asset-total-row td.period-col-paid { background: var(--brand-soft); } .period-value { font-weight: 700; } .period-dash { color: var(--muted); } .period-table-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 700; } .period-table-footer strong { font-size: 12.5px; } /* Tela totalizadora — mesma linguagem visual das tabelas por planta, mas somada entre todas as plantas: uma tabela "Outros ativos" e outra "Máquinas e equipamentos", cada uma com a linha do ano corrente e a linha da safra anterior paga no corrente. */ .asset-totals-title, .asset-detail-title { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 2px; } .asset-totals-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; margin-bottom: 22px; } @media (max-width: 1180px) { .filter-panel { grid-template-columns: repeat(2, 1fr) auto; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .distribution-grid.three-col, .distribution-grid.even-two { grid-template-columns: 1fr; } .asset-summary-grid, .asset-totals-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .sidebar { display: none; } .app-shell { padding: 28px 20px 90px; } .dashboard-grid, .distribution-grid { grid-template-columns: 1fr; } .bar-chart { overflow-x: auto; grid-template-columns: repeat(12, 50px); } footer { display: grid; } } @media (max-width: 650px) { .topbar { display: block; } .topbar-actions { margin-top: 20px; align-items: flex-start; flex-wrap: wrap; } .filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-grid { grid-template-columns: 1fr 1fr; } .kpi-card.outline-navy { grid-column: 1 / -1; } .chart-legend { display: none; } .plant-list { grid-template-columns: 1fr; } .rank-row { grid-template-columns: minmax(95px, 1fr) 1.5fr 78px; } } @media (max-width: 440px) { .filter-panel, .kpi-grid { grid-template-columns: 1fr; } .search-field, .kpi-card.primary { grid-column: auto; } .local-badge { white-space: normal; } } /* ===== Modo apresentação ===== */ /* Barra fixa de navegação entre telas — oculta fora do modo apresentação. */ .pm-toolbar { display: none; position: fixed; inset: 0 0 auto 0; z-index: 100; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: var(--navy-dark); color: white; box-shadow: 0 6px 18px rgba(0,0,0,.18); } .pm-toolbar button { padding: 9px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.08); color: white; font-size: 13px; font-weight: 700; } .pm-toolbar button:hover { background: rgba(255,255,255,.2); } #pmExit { border-color: rgba(255,255,255,.4); background: transparent; } .pm-slide-info { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.25; } .pm-slide-info span { font-size: 14px; font-weight: 800; letter-spacing: .01em; } .pm-slide-info small { font-size: 11px; color: rgba(255,255,255,.65); } .pm-toolbar-right { display: flex; align-items: center; gap: 10px; } /* Logo dentro da área de conteúdo (a que aparece no print), acima do título de cada tela. Fica no fluxo normal do documento (não fixa) para rolar junto com a página em vez de sobrepor as informações quando o quadro é mais alto do que a tela. */ .pm-content-logo { display: none; margin: 0 0 10px; } .pm-content-logo img { height: 44px; width: auto; display: block; } /* Fundo da página — sem alteração, o mesmo cinza claro padrão do dashboard. */ body.presentation-mode { background: var(--canvas); } body.presentation-mode .pm-toolbar { display: flex; } body.presentation-mode .pm-content-logo { display: block; } body.presentation-mode .sidebar, body.presentation-mode .filter-panel, body.presentation-mode footer, body.presentation-mode .topbar-actions, body.presentation-mode .loading, body.presentation-mode .error-state { display: none !important; } body.presentation-mode .app-shell { max-width: none; padding: 70px 22px 26px; } body.presentation-mode .topbar { padding-bottom: 0; margin-bottom: 10px; } /* Só o cartão muda de cor — cinza claro em vez de branco (era azul antes, trocado por falta de contraste). O fundo da tela continua o mesmo de sempre. */ body.presentation-mode .kpi-card, body.presentation-mode .panel { background: #cdd2d7; border-color: #b7bec4; box-shadow: 0 10px 26px rgba(20,45,80,.16); } /* Mesma cor de cartão aplicada também na tela principal fora do modo apresentação — cartões de KPI, quadro de filtros e todos os painéis de gráficos/tabelas (.panel). A borda colorida (outline-navy/green/red) de cada KPI card fica intacta. */ .kpi-grid .kpi-card, .filter-panel, .panel { background: #cdd2d7; border-color: #b7bec4; } /* Compactação vertical extra do cabeçalho estilo PPT e dos cartões de total, específicos da tela "Fluxo financeiro" — para o gráfico inteiro (barras + linha de valores por ano) caber numa única tela sem cortar embaixo. */ body.presentation-mode .ppt-title-banner { margin: 0 0 10px; } body.presentation-mode .ppt-title-left { font-size: 20px; } body.presentation-mode .ppt-title-center { font-size: 18px; } body.presentation-mode .ppt-title-date { font-size: 13px; } body.presentation-mode .ppt-title-rule { margin: 4px 0 8px; } body.presentation-mode .ppt-title-main { font-size: 22px; } body.presentation-mode .ppt-title-complement { font-size: 12px; margin-top: 2px; } body.presentation-mode .year-totals { margin: 0 0 10px; } body.presentation-mode .year-total-pill { padding: 9px 24px; } body.presentation-mode .year-total-pill .row { font-size: 13px; line-height: 1.4; } /* Cada seção com [data-pm-slide] só aparece quando é a tela ativa. */ body.presentation-mode [data-pm-slide] { display: none !important; } body.presentation-mode [data-pm-slide].pm-active { display: block !important; } body.presentation-mode .kpi-grid.pm-active { display: grid !important; } body.presentation-mode .dashboard-grid.pm-active { display: grid !important; } /* Tabelas largas: dar largura total (sem limite de largura no container) para caber todos os meses, e manter uma rolagem horizontal de segurança em vez de cortar silenciosamente caso ainda falte espaço (ex.: janela muito estreita). */ body.presentation-mode .asset-table-scroll { overflow-x: auto; } body.presentation-mode .asset-table-wrap { overflow: visible; } body.presentation-mode .asset-table { font-size: 11px; } body.presentation-mode .asset-table th, body.presentation-mode .asset-table td { padding: 5px 6px; } body.presentation-mode .asset-summary-grid, body.presentation-mode .asset-totals-grid { grid-template-columns: 1fr; gap: 12px; } /* Compactação vertical: reduz espaçamentos ao redor dos quadros para caber mais conteúdo por tela (a meta é a tela inteira — todos os meses e o total geral — aparecer numa única captura de print, sem cortar embaixo). */ body.presentation-mode .panel { padding: 10px 16px; } body.presentation-mode .banner-heading { margin: -10px -16px 8px; padding: 7px 16px; } body.presentation-mode .section-heading { margin-bottom: 4px; } body.presentation-mode .asset-totals-title, body.presentation-mode .asset-detail-title { margin: 0 0 4px; } body.presentation-mode .asset-col { gap: 8px; } body.presentation-mode .dashboard-grid { gap: 10px; margin-bottom: 10px; } /* ===== Experiência de portal ===== O modo normal ganha linguagem de site; o modo apresentação continua usando as regras compactas acima e os mesmos componentes de dados. */ :root { --canvas: #f5f7fa; --surface: #ffffff; --ink: #15202b; --muted: #667485; --line: #e2e8ef; --brand: #12395c; --brand-2: #245f8f; --brand-soft: #eef4f8; --navy: #12395c; --navy-dark: #092840; --green: #237457; --green-soft: #eaf6f0; --red: #b64343; --red-soft: #fbedeb; --gold: #ca7b2b; --row-band: #f6f8fa; --shadow: 0 14px 38px rgba(15, 38, 60, .08); --shadow-soft: 0 5px 18px rgba(15, 38, 60, .055); } body { background: var(--canvas); } a { color: inherit; } button, select, a { -webkit-tap-highlight-color: transparent; } button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(53, 126, 180, .28); outline-offset: 2px; } .site-header { position: sticky; inset: 0 0 auto; z-index: 20; min-height: 76px; padding: 12px clamp(20px, 3.5vw, 54px); display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); border-bottom: 1px solid rgba(18, 57, 92, .1); background: rgba(255, 255, 255, .96); box-shadow: 0 5px 20px rgba(12, 35, 55, .045); } .site-brand { display: flex; align-items: center; gap: 12px; min-width: max-content; color: var(--ink); text-decoration: none; } .brand-mark { width: 102px; height: 42px; padding: 4px 8px; object-fit: contain; border-radius: 9px; background: #fff; } .site-brand > span { display: flex; flex-direction: column; padding-left: 12px; border-left: 1px solid var(--line); line-height: 1.25; } .site-brand strong { font-size: 13px; color: var(--brand); } .site-brand small { color: var(--muted); font-size: 10px; letter-spacing: .045em; text-transform: uppercase; } .site-nav { display: flex; align-items: center; gap: 6px; margin-right: auto; } .site-nav a { padding: 9px 10px; border-radius: 9px; color: #485869; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; } .site-nav a:hover { background: var(--brand-soft); color: var(--brand); } .site-header .topbar-actions { margin: 0; gap: 7px; } .site-header .update-status:empty { display: none; } .site-header .update-status { position: absolute; top: calc(100% + 7px); right: 24px; max-width: 420px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-soft); } .local-badge { padding: 8px 10px; border: 0; background: var(--green-soft); font-size: 11px; } .local-badge span { width: 6px; height: 6px; box-shadow: 0 0 0 3px #cfe7db; } .header-button { min-height: 38px; padding: 0 13px; border: 1px solid #d8e0e7; border-radius: 10px; background: #fff; color: #344658; font-size: 12px; font-weight: 750; } .header-button:hover { border-color: #aebbc7; background: #f7f9fb; } .header-button.primary { border-color: var(--brand); background: var(--brand); color: #fff; } .header-button.primary:hover { background: var(--navy-dark); } .header-button:disabled { opacity: .6; cursor: default; } .app-shell { width: min(100%, 1480px); max-width: none; margin: 0 auto; padding: 36px clamp(20px, 4vw, 64px) 56px; } .topbar { position: relative; min-height: 280px; margin: 0 0 20px; padding: clamp(30px, 4.5vw, 58px); display: flex; align-items: center; overflow: hidden; border-radius: 28px; background: var(--navy-dark); box-shadow: 0 24px 60px rgba(9, 40, 64, .18); scroll-margin-top: 96px; } .topbar::after { content: ""; position: absolute; width: 310px; height: 310px; right: -90px; bottom: -175px; border: 54px solid rgba(255, 255, 255, .055); border-radius: 50%; pointer-events: none; } .topbar .ppt-title-banner { display: none; } .topbar-heading { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; } .eyebrow { margin-bottom: 12px; color: #9fc2db; font-size: 11px; } h1, h2 { font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif; } h1 { color: #fff; font-size: clamp(42px, 5vw, 68px); font-weight: 720; line-height: 1.02; letter-spacing: -.055em; } .subtitle { max-width: 610px; margin-top: 16px; color: #c4d5e2; font-size: 16px; line-height: 1.6; } .hero-context { min-width: 230px; padding: 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.075); color: #fff; } .hero-context-label { display: block; margin-bottom: 3px; color: #9fc2db; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .hero-context .ppt-title-date { color: #fff; font-size: 17px; font-style: normal; } .hero-years { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.13); } .hero-years > span { color: #b8cad7; font-size: 11px; } .sidebar-years { margin: 0; padding: 0; display: flex; gap: 6px; width: auto; border: 0; } .year-pill { width: auto; min-width: 54px; padding: 7px 10px; border-color: rgba(255,255,255,.2); border-radius: 8px; color: #c7d5df; font-size: 11px; } .year-pill:hover { background: rgba(255,255,255,.08); } .year-pill.active { background: #fff; border-color: #fff; color: var(--navy-dark); } .filter-panel { position: relative; margin: 0 0 22px; padding: 15px 16px; display: grid; grid-template-columns: minmax(110px, .65fr) repeat(4, minmax(125px, 1fr)) auto; gap: 12px; align-items: end; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-soft); } .filter-intro { align-self: center; padding-left: 4px; } .filter-intro span, .filter-intro small { display: block; } .filter-intro span { color: var(--ink); font-size: 13px; font-weight: 800; } .filter-intro small { margin-top: 2px; color: var(--muted); font-size: 10px; } .filter-panel label > span { margin-left: 2px; font-size: 10px; } .filter-panel select { height: 42px; padding: 0 36px 0 12px; border-color: var(--line); border-radius: 10px; background-color: #f8fafb; font-size: 12px; } .clear-button { height: 42px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; } .clear-button:hover { background: var(--brand-soft); } .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 42px; } .kpi-card, .panel { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-soft); } .kpi-card { position: relative; min-height: 156px; padding: 20px; border-radius: 18px; } .kpi-card.compact { min-height: 156px; padding: 20px; } .kpi-card.outline-navy, .kpi-card.outline-green, .kpi-card.outline-red { border: 1px solid var(--line); } .kpi-card::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 3px; border-radius: 0 0 3px 3px; background: #8da5b8; } .kpi-card.outline-navy::before { background: var(--navy); } .kpi-card.outline-green::before { background: var(--green); } .kpi-card.outline-red::before { background: var(--red); } .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; } .kpi-card strong, .kpi-card.compact strong { margin-top: 22px; color: var(--ink); font-size: clamp(21px, 2vw, 29px); } .kpi-card small, .kpi-card.compact small { margin-top: 10px; } .dashboard-grid { gap: 16px; margin-bottom: 42px; scroll-margin-top: 96px; } .site-section-heading { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; gap: 28px; margin: 0 2px 2px; padding-top: 2px; } .site-section-heading > div > span { color: var(--brand-2); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .site-section-heading h2 { margin-top: 5px; color: var(--ink); font-size: clamp(24px, 2.7vw, 34px); font-weight: 720; letter-spacing: -.035em; } .site-section-heading p { max-width: 440px; margin: 0 0 3px; color: var(--muted); font-size: 13px; line-height: 1.55; text-align: right; } .panel { border-radius: 20px; } .banner-heading { margin: -22px -24px 18px; padding: 16px 24px 14px; border-bottom: 1px solid var(--line); border-radius: 20px 20px 0 0; background: #fff; color: var(--ink); font-size: 13px; font-weight: 800; } .chart-legend { font-size: 10px; } .cum-bar { background: var(--brand-2); } .track { height: 8px; background: #edf1f4; } .track i { background: var(--brand-2); } .rank-row { min-height: 28px; } .rank-row label, .rank-row strong { font-size: 11px; } .period-summary-table { border-radius: 20px 20px 0 0; } .period-table thead th, .asset-table-title { background: var(--navy-dark); } .period-table-footer { background: var(--brand); } .asset-table-wrap { border-radius: 14px; } .asset-col-heading { border-radius: 11px; } footer { margin-top: 6px; padding: 24px 4px 0; border-top: 1px solid var(--line); color: #738090; } .footer-privacy { display: flex; align-items: center; gap: 7px; } .footer-privacy span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .loading { background: var(--canvas); } @media (max-width: 1260px) { .site-nav { display: none; } .site-header .topbar-actions { margin-left: auto; } .filter-panel { grid-template-columns: minmax(110px, .65fr) repeat(2, minmax(150px, 1fr)) auto; } .filter-intro { grid-row: span 2; } } @media (max-width: 980px) { .local-badge { display: none; } .site-brand > span { display: none; } .app-shell { padding-top: 24px; } .topbar { min-height: 260px; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-grid, .distribution-grid, #visao-charts { grid-template-columns: 1fr; } .site-section-heading p { max-width: 340px; } } @media (max-width: 720px) { .site-header { min-height: 66px; padding: 10px 16px; gap: 10px; } .brand-mark { width: 82px; height: 36px; padding-left: 0; } .site-header .topbar-actions { gap: 5px; } .site-header .header-button { min-height: 36px; padding: 0 10px; font-size: 11px; } .site-header .ghost { display: none; } .app-shell { padding: 16px 14px 44px; } .topbar { min-height: auto; padding: 28px 24px; border-radius: 20px; } .topbar-heading { grid-template-columns: 1fr; gap: 24px; } h1 { font-size: 43px; } .subtitle { font-size: 14px; } .hero-context { min-width: 0; padding: 16px; } .hero-years { margin-top: 12px; padding-top: 12px; } .filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; } .filter-intro { grid-column: 1 / -1; grid-row: auto; padding: 0 0 2px; } .clear-button { border-color: var(--line); background: #f8fafb; } .kpi-grid { margin-bottom: 34px; } .kpi-card, .kpi-card.compact { min-height: 142px; padding: 17px; } .site-section-heading { display: block; } .site-section-heading p { max-width: none; margin-top: 8px; text-align: left; } .dashboard-grid { margin-bottom: 34px; } .panel { padding: 18px; } .banner-heading { margin: -18px -18px 16px; padding: 14px 18px; } .period-summary-table { margin: -18px -14px 0; } } @media (max-width: 470px) { .site-header .primary { padding: 0 9px; } .site-header .primary { font-size: 0; } .site-header .primary::after { content: "Atualizar"; font-size: 11px; } .kpi-grid { grid-template-columns: 1fr; } .kpi-card.outline-navy { grid-column: auto; } .filter-panel { grid-template-columns: 1fr; } .filter-intro { grid-column: auto; } .hero-years { align-items: flex-start; flex-direction: column; } .site-section-heading h2 { font-size: 25px; } .rank-row { grid-template-columns: minmax(82px, 1fr) 1fr 80px; gap: 8px; } } /* O portal desaparece no modo apresentação; os slides mantêm seu layout próprio. */ body.presentation-mode .site-header, body.presentation-mode .site-section-heading { display: none !important; } body.presentation-mode .topbar-heading { display: none !important; } body.presentation-mode .topbar { min-height: 0; padding: 0; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; } body.presentation-mode .topbar::after { display: none; } body.presentation-mode .topbar .ppt-title-banner { display: block; width: 100%; } body.presentation-mode .kpi-card:hover { transform: none; } body.presentation-mode .kpi-card, body.presentation-mode .panel { border-radius: 17px; } body.presentation-mode .banner-heading { background: var(--navy); color: #fff; border-bottom: 0; } body.presentation-mode .period-table thead th { background: var(--navy); } /* ===== Retrovisor panorâmico ===== Inspiração automotiva sutil: aro grafite fino, vidro profundo e um pequeno módulo de câmera. A forma deixa de imitar literalmente uma peça física. */ .topbar { z-index: 1; min-height: 250px; margin-top: 30px; margin-bottom: 26px; padding: 38px clamp(34px, 4vw, 58px); border: 6px solid #202a31; border-radius: 52px 52px 64px 64px / 46px 46px 58px 58px; background: #082b43; box-shadow: inset 0 0 0 2px #526571, inset 0 3px 7px rgba(255,255,255,.07), 0 16px 38px rgba(9, 40, 64, .17), 0 3px 0 #10171c; overflow: visible; } .topbar::before { content: ""; position: absolute; z-index: 1; inset: 8px; border-radius: inherit; border: 1px solid rgba(162, 197, 220, .15); box-shadow: inset 18px 0 22px -24px rgba(0,0,0,.7), inset -18px 0 22px -24px rgba(0,0,0,.7); pointer-events: none; } .topbar::after { content: ""; position: absolute; z-index: 1; top: 17px; left: 12%; right: 12%; height: 1px; border-radius: 99px; background: rgba(219, 236, 246, .16); pointer-events: none; } .topbar-heading { z-index: 2; align-items: center; padding: 0 8px; } .topbar h1 { font-size: clamp(40px, 4.6vw, 62px); } .topbar .subtitle { max-width: 670px; } .mirror-visual { position: absolute; z-index: 0; inset: 9px; overflow: hidden; border-radius: 42px 42px 54px 54px / 36px 36px 48px 48px; pointer-events: none; } .mirror-visual::before { content: ""; position: absolute; inset: 0; background: url("assets/retrovisor-bg.png?v=20260930-4") center / contain no-repeat; opacity: .48; filter: blur(1.5px) saturate(.76) brightness(.78); } .mirror-visual::after { content: ""; position: absolute; inset: 0; background: rgba(5, 39, 61, .28); } .mirror-mount { position: absolute; z-index: -1; top: -27px; left: 50%; width: 76px; height: 26px; transform: translateX(-50%); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); border-radius: 12px 12px 2px 2px; background: #222c32; box-shadow: inset 6px 0 8px rgba(255,255,255,.06), inset -6px 0 8px rgba(0,0,0,.35), 0 -3px 10px rgba(12,22,28,.12); } .mirror-mount span { position: absolute; left: 50%; top: 5px; width: 12px; height: 12px; transform: translateX(-50%); border: 3px solid #596973; border-radius: 50%; background: #070b0d; box-shadow: 0 0 0 2px #151d22; } @media (max-width: 720px) { .topbar { min-height: 0; margin-top: 26px; margin-bottom: 24px; padding: 27px 22px; border-width: 5px; border-radius: 28px 28px 34px 34px; } .topbar-heading { padding: 0; } .topbar h1 { font-size: 41px; } .mirror-visual { inset: 7px; border-radius: 22px 22px 28px 28px; } .mirror-visual::before { background-position: center; background-size: contain; opacity: .4; } .mirror-mount { top: -21px; width: 58px; height: 20px; } .mirror-mount span { top: 3px; width: 10px; height: 10px; border-width: 2px; } } body.presentation-mode .mirror-mount, body.presentation-mode .mirror-visual { display: none; } body.presentation-mode .topbar { min-height: 0; margin-top: 0; margin-bottom: 10px; border: 0; box-shadow: none; } body.presentation-mode .topbar::before { display: none; } body.presentation-mode .topbar-heading { padding: 0; } /* ===== Hero com arte panorâmica ===== A arte ocupa toda a abertura. Não há mais moldura, vidro ou quadro azul construído por CSS; apenas uma camada escura leve preserva a leitura. */ .topbar { min-height: 330px; margin-top: 8px; margin-bottom: 26px; padding: 48px clamp(38px, 4.5vw, 68px); border: 0; border-radius: 28px; background: #071722 url("assets/hero-fluxo-cockpit-v3.png?v=20260930-6") center / cover no-repeat; box-shadow: 0 20px 46px rgba(7, 27, 42, .16); overflow: hidden; } .topbar::before { content: ""; position: absolute; z-index: 0; inset: 0; border: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(3, 15, 25, .5) 0%, rgba(3, 15, 25, .2) 52%, rgba(3, 15, 25, .26) 100%); box-shadow: none; pointer-events: none; } .topbar::after { display: none; } .topbar-heading { z-index: 1; align-items: center; padding: 0; } .topbar .hero-context { border-color: rgba(204, 226, 239, .2); background: rgba(5, 24, 37, .68); box-shadow: 0 12px 30px rgba(0, 0, 0, .14); backdrop-filter: blur(7px); } .mirror-mount, .mirror-visual { display: none; } @media (max-width: 720px) { .topbar { min-height: 0; margin-top: 4px; margin-bottom: 22px; padding: 30px 24px; border: 0; border-radius: 22px; background-position: 62% center; } .topbar::before { background: rgba(3, 18, 29, .48); } .topbar-heading { padding: 0; } } body.presentation-mode .topbar { min-height: 0; margin-top: 0; margin-bottom: 10px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } /* ===== Ambiente de cockpit ===== Azul-petróleo suavizado no plano de fundo. O contraste continua suficiente para destacar os cartões, sem competir com a arte panorâmica do hero. */ body { background-color: #17303f; background-image: radial-gradient(circle at 12% 16%, rgba(105, 168, 197, .18), transparent 36%), radial-gradient(circle at 88% 48%, rgba(76, 137, 166, .12), transparent 34%), repeating-linear-gradient(145deg, rgba(255,255,255,.018) 0 1px, transparent 1px 54px), linear-gradient(180deg, #1b3747 0%, #112936 100%); background-attachment: fixed; } .app-shell { position: relative; } .filter-panel, .kpi-card, .panel { border-color: rgba(220, 229, 236, .92); background: rgba(255, 255, 255, .975); box-shadow: 0 18px 42px rgba(0, 7, 13, .28), 0 1px 0 rgba(255,255,255,.7) inset; } .filter-panel { box-shadow: 0 14px 34px rgba(0, 7, 13, .24); } .kpi-card:hover { box-shadow: 0 22px 48px rgba(0, 7, 13, .34); } .site-section-heading > div > span { color: #78c4ef; } .site-section-heading h2 { color: #f4f8fa; } .site-section-heading p { color: #aebcc7; } footer { border-top-color: rgba(190, 212, 226, .18); color: #9babb7; } footer strong { color: #e7eef3; } footer code { color: #7dc8ef; } .footer-privacy span { box-shadow: 0 0 0 3px rgba(35, 116, 87, .25); } @media (max-width: 720px) { body { background-image: radial-gradient(circle at 10% 10%, rgba(105, 168, 197, .17), transparent 30%), linear-gradient(180deg, #1b3747 0%, #112936 100%); } } @media print { body { background: #fff; } .site-section-heading h2 { color: var(--ink); } .site-section-heading p { color: var(--muted); } } /* ===== Acabamento executivo ===== */ :root { --brand-2: #2a78a8; --green: #238160; --green-soft: #e8f5ef; --red: #c64d52; --red-soft: #faecec; --gold: #d0913d; } /* Ações secundárias formam um único conjunto; atualização continua primária. */ .site-header { min-height: 72px; } .utility-actions { display: flex; align-items: center; padding: 3px; border: 1px solid #dde5eb; border-radius: 12px; background: #f3f6f8; } .utility-actions .header-button { min-height: 32px; padding: 0 11px; border: 0; background: transparent; } .utility-actions .header-button + .header-button { border-left: 1px solid #d9e1e7; border-radius: 0 8px 8px 0; } .utility-actions .header-button:hover { background: #fff; color: var(--brand); } .site-header .header-button.primary { min-height: 40px; padding-inline: 16px; box-shadow: 0 7px 16px rgba(18, 57, 92, .16); } /* Console de filtros: escuro, compacto e com retorno de estado ativo. */ .filter-panel { padding: 13px 15px; border-color: rgba(135, 180, 207, .2); background: rgba(12, 30, 42, .94); box-shadow: 0 16px 36px rgba(0, 6, 11, .3), inset 0 1px 0 rgba(255,255,255,.045); backdrop-filter: blur(10px); transition: border-color .2s ease, box-shadow .2s ease; } .filter-panel.has-active-filters { border-color: rgba(91, 181, 231, .58); box-shadow: 0 16px 38px rgba(0, 6, 11, .34), 0 0 0 1px rgba(91,181,231,.12) inset; } .filter-intro span { color: #f4f8fa; } .filter-intro small { color: #8fa6b5; } .filter-panel.has-active-filters .filter-intro small { color: #79c7f1; font-weight: 700; } .filter-panel label > span { color: #a9bdca; } .filter-panel select { color-scheme: dark; border-color: #2b4556; background-color: #152b39; color: #edf5f8; } .filter-panel select:hover { border-color: #54758a; } .filter-panel select:focus { border-color: #63b7e5; box-shadow: 0 0 0 3px rgba(74, 166, 216, .16); } .filter-panel select option { background: #132633; color: #f3f7f9; } .filter-panel .clear-button { color: #8fcff2; opacity: .55; } .filter-panel.has-active-filters .clear-button { opacity: 1; background: rgba(105, 195, 243, .1); } .filter-panel .clear-button:hover { background: rgba(105, 195, 243, .16); color: #d7f1ff; } /* KPIs com hierarquia de painel de instrumentos. */ .kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; } .kpi-grid .primary-kpi { grid-column: span 2; } .kpi-card, .kpi-card.compact { min-height: 150px; padding: 20px; border-radius: 19px; } .kpi-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .kpi-card::before { left: 18px; right: 18px; height: 3px; } .primary-kpi { isolation: isolate; background: linear-gradient(135deg, #fff 0%, #f5f9fc 100%); } .primary-kpi::after { content: ""; position: absolute; z-index: 0; width: 168px; height: 168px; right: -48px; bottom: -86px; border: 26px solid rgba(42, 120, 168, .08); border-radius: 50%; } .primary-kpi > * { position: relative; z-index: 1; } .primary-kpi strong { font-size: clamp(29px, 2.6vw, 37px); color: var(--brand); } .kpi-top p { font-size: 10px; letter-spacing: .075em; } .kpi-card strong, .kpi-card.compact strong { margin-top: 24px; } /* Um único sistema de cartões e cabeçalhos. */ .panel { border-radius: 19px; } .banner-heading { display: flex; align-items: center; gap: 10px; border-radius: 19px 19px 0 0; } .banner-heading::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #4ea8d8; box-shadow: 0 0 0 4px rgba(78,168,216,.12); } .asset-table-wrap, .asset-col-heading, .period-table-footer { border-radius: 11px; } /* Cores semânticas: investimento azul, realizado verde, aberto coral. */ .cum-bar, .track i { background: var(--brand-2); } .cum-line-overlay g.cum-line-paid polyline { stroke: var(--green); } .cum-line-overlay circle.cum-dot.cum-line-paid { fill: var(--green); } .cum-line-overlay g.cum-line-open polyline { stroke: var(--red); } .cum-line-overlay circle.cum-dot.cum-line-open { fill: var(--red); } .legend-line.cum-legend-paid i { background: var(--green); } .legend-line.cum-legend-open i { background: var(--red); } .zone-frame.paid { border-width: 2px; } .zone-frame.pending { border-width: 2px; } /* Números financeiros com largura estável para facilitar comparação. */ .kpi-card strong, .rank-row strong, .period-value, .period-table-footer strong, .asset-table td:not(:first-child), .zone-value-cell, .year-total-pill, .ppt-title-date { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } .rank-row strong, .period-table-footer strong { letter-spacing: -.015em; } @media (max-width: 1180px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-grid .primary-kpi { grid-column: span 2; } } @media (max-width: 720px) { .utility-actions { display: none; } .filter-panel { padding: 14px; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-card, .kpi-card.compact { min-height: 140px; padding: 17px; } } @media (max-width: 470px) { .kpi-grid { grid-template-columns: 1fr; } .kpi-grid .primary-kpi { grid-column: auto; } } body.presentation-mode .utility-actions { display: none; } body.presentation-mode .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.presentation-mode .kpi-grid .primary-kpi { grid-column: auto; } body.presentation-mode .primary-kpi::after, body.presentation-mode .banner-heading::before { display: none; } @media print { .filter-panel { background: #fff; color: var(--ink); } .filter-panel label > span, .filter-intro span, .filter-intro small { color: var(--ink); } } /* ===== Barra de pesquisa mensal ===== */ .month-bar { margin: 0 0 14px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(135, 180, 207, .16); border-radius: 16px; background: rgba(17, 24, 22, .92); box-shadow: 0 16px 36px rgba(0, 6, 11, .3), inset 0 1px 0 rgba(255,255,255,.045); } .month-bar button { font: inherit; cursor: pointer; } .month-bar-year { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; } .month-bar-year strong { min-width: 64px; color: #f4f8fa; font-size: 15px; font-weight: 800; text-align: center; } .month-bar-arrow { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #c7d5df; font-size: 20px; line-height: 1; } .month-bar-arrow:hover:not(:disabled) { background: rgba(255,255,255,.08); color: #fff; } .month-bar-arrow:disabled { opacity: .3; cursor: default; } .month-bar-months { flex: 1 1 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; } .month-bar-month, .month-bar-total { height: 40px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: linear-gradient(180deg, #2b322f 0%, #1f2523 100%); color: #dfe7e3; font-size: 14px; font-weight: 700; transition: background .15s ease, border-color .15s ease, color .15s ease; } .month-bar-month:hover:not(:disabled), .month-bar-total:hover:not(.active) { border-color: rgba(255,255,255,.32); color: #fff; } .month-bar-month:disabled { opacity: .35; cursor: default; } .month-bar-month.active { border-color: #6fe3b0; background: linear-gradient(180deg, #5fd6a2 0%, #3bb57f 100%); color: #0d2a1d; box-shadow: 0 0 0 3px rgba(80, 210, 150, .18); } .month-bar-total { flex: 0 0 auto; padding: 0 16px; border-color: rgba(255,255,255,.28); background: transparent; white-space: nowrap; } .month-bar-total.active { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); color: #fff; } .month-bar button:focus-visible { outline: 2px solid #79c7f1; outline-offset: 2px; } /* O