/** * com_anuariocoop :: conteúdo específico da view pública "Dados". * * A estrutura compartilhada (hero, submenu, sidebar, dashboard, fonte e CTA) * vive em anuario-shell.css. Este arquivo mantém apenas a visão geral. * * @copyright (C) 2026 OCB / SESCOOP * @license GNU General Public License version 3 or later; see LICENSE.txt */ .ac-dados-view { --ac-dados-gap: var(--ac-shell-gap, 24px); --ac-dados-radius: var(--ac-shell-radius, 18px); --ac-dados-surface: var(--ac-shell-surface, var(--ocb-branco)); --ac-dados-bg: var(--ac-shell-bg, var(--color-bg-site)); --ac-dados-border: var(--ac-shell-border, #e6e8f0); --ac-dados-navy: var(--ac-shell-navy, var(--ocb-azul-marinho)); --ac-dados-blue: var(--ac-shell-blue, var(--ocb-azul-ceu)); --ac-dados-green: var(--ac-shell-green, var(--ocb-verde-sescoop)); --ac-dados-ink: var(--ac-shell-ink, #1f2433); --ac-dados-ink-2: var(--ac-shell-ink-2, #444b60); --ac-dados-muted: var(--ac-shell-muted, #8a90a6); } .ac-dados-main { position: relative; } /* Loader centralizado e FIXO no viewport (fica visível mesmo rolando a página): spinner girando + percentual + "Buscando os dados…". Criado via JS (dados.js) e anexado ao , sem libs externas. */ .ac-dados-loader { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ocb-azul-marinho) 14%, var(--ocb-transparent)); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .ac-dados-loader.is-visible { opacity: 1; pointer-events: auto; } .ac-dados-loader__box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 38px; background: var(--ocb-branco); border-radius: 18px; box-shadow: 0 18px 54px color-mix(in srgb, var(--ocb-azul-marinho) 24%, var(--ocb-transparent)); transform: translateY(6px) scale(.98); transition: transform .2s ease; } .ac-dados-loader.is-visible .ac-dados-loader__box { transform: translateY(0) scale(1); } /* Anel girando (gradiente OCB) — a "imagem rodando". */ .ac-dados-loader__spinner { width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(from 0deg, var(--ocb-verde-sescoop), var(--ocb-azul-ceu), var(--ocb-azul-marinho), var(--ocb-verde-sescoop)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); animation: ac-dados-spin .8s linear infinite; } @keyframes ac-dados-spin { to { transform: rotate(360deg); } } .ac-dados-loader__pct { margin-top: 4px; font-family: var(--font-intro-light); font-weight: 300; font-size: 26px; line-height: 1; letter-spacing: -0.01em; color: var(--ocb-azul-marinho); } .ac-dados-loader__label { font-family: var(--font-inter); font-size: 13px; color: #4a4f7a; } @media (prefers-reduced-motion: reduce) { .ac-dados-loader__spinner { animation-duration: 2s; } } /* Mensagem de erro acessível, sem quebrar o layout. */ .ac-dados-flash { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #fdecec; color: #b3261e; font-family: var(--font-inter); font-size: 13px; } .ac-dados-content { min-width: 0; display: flex; flex-direction: column; gap: 20px; } .ac-dados-card { background: var(--ac-dados-surface); border: 1px solid var(--ac-dados-border); border-radius: var(--ac-dados-radius); padding: 18px; } .ac-dados-card__eyebrow { font-size: 10px; letter-spacing: 0; text-transform: uppercase; color: var(--ac-dados-muted); margin: 0 0 10px; } .ac-dados-intro { font-family: var(--font-inter); font-size: 16.5px; line-height: 1.62; color: var(--ocb-azul-marinho); font-weight: 400; margin: 0 0 22px; max-width: none; } /* Tags (valores) em negrito: mesma configuração do texto. */ .ac-dados-intro strong, .ac-dados-intro b { font-family: var(--font-inter); font-size: 16.5px; line-height: 1.62; color: var(--ocb-azul-marinho); font-weight: 700; } .ac-dados-dimhead { margin-bottom: 12px; } /* Eyebrow "Dimensão" no topo do conteúdo (≠ "Dimensões" da sidebar). */ .ac-dados-dimhead .ac-dados-card__eyebrow { font-family: var(--font-intro-regular-alt); font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ocb-azul-ceu); margin-bottom: 8px; } .ac-dados-dimhead__title { font-family: var(--font-intro-light); font-weight: 300; font-size: 34px; line-height: 1.05; color: var(--ocb-azul-marinho); margin: 2px 0 0; } .ac-dados-dimpanel { display: none; } .ac-dados-dimpanel.is-active { display: block; } .ac-dados-kpis { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; background: none !important; border: none !important; } .ac-dados-kpi { background: var(--ac-dados-surface); border: 1px solid var(--ac-dados-border); border-radius: 12px; min-height: 92px; padding: 16px 16px; display: grid; flex-direction: column; gap: 6px; grid-template-columns: 52px 1fr auto; align-items: center; column-gap: 18px; background: var(--ocb-branco); text-decoration: none; color: inherit; transition: .2s ease; } .ac-dados-kpi__icon { color: var(--ac-dados-blue); font-size: 21px; line-height: 1; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #eef1fb; } /* A cor do ícone vem inline, por card (style no ); o herda quando vazio. */ .ac-dados-view .ac-dados-kpi__icon i { color: inherit; } .ac-dados-kpi__value { font-family: var(--font-intro-light); color: var(--ocb-azul-marinho); line-height: 1; font-weight: 300; letter-spacing: -0.01em; display: block; font-size: 32px; } /* Sufixo da unidade (mil/mi/bi/tri…) menor, depois do número. */ .ac-dados-kpi__value .ac-dados-kpi__unit { font-size: 15px; color: #4a4f7a; } /* Prefixo "R$" com configuração própria: metade do número (12,5px), demais propriedades herdadas do número (família/cor var(--ocb-azul-marinho)). */ .ac-dados-kpi__value .ac-dados-kpi__prefix { font-size: 30px; font-weight: 300; letter-spacing: 0; } .ac-dados-kpi__label, .ac-dados-kpi__meta { font-family: var(--font-inter); font-size: 12.5px; line-height: 1.35; } .ac-dados-kpi__label { color: #4a4f7a; font-weight: 600; display: block; margin-top: 6px; font-family: var(--font-body); font-size: 14px; } .ac-dados-kpi__meta { color: #8b91b3; } .ac-dados-card__badge { display: inline-block; margin-left: 4px; font-family: var(--font-inter); font-weight: 700; color: var(--ocb-verde-sescoop); } .ac-dados-card__badge.is-down { color: #e2574c; } .ac-dados-card__badge small { font-family: var(--font-inter); font-weight: 400; font-size: 11px; line-height: 1.35; color: #8b8fae; } .ac-dados-charts { display: grid; gap: 18px; } /*.ac-dados-chart-card { background: var(--ac-dados-surface); border: 1px solid var(--ac-dados-border); border-radius: var(--ac-dados-radius); padding: 24px 28px; }*/ .ac-dados-chart-card--mini { padding: 18px; } .ac-dados-chart-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .ac-dados-chart-card__title { font-family: var(--font-inter); font-weight: 700; font-size: 15px; color: var(--ocb-azul-marinho); margin: 0; } .ac-dados-chart-card__desc { font-family: var(--font-inter); font-size: 12px; color: #8b8fae; margin: 2px 0 0; } .ac-dados-chart-card__value { font-family: var(--font-intro-light); font-weight: 300; font-size: 24px; line-height: 1; color: var(--ocb-azul-marinho); margin: 0; } .ac-dados-chart-card__value span { font-size: 13px; color: var(--ac-dados-muted); } .ac-dados-chart-card__legend { display: flex; gap: 16px; margin: 0; font-size: 12.5px; color: var(--ac-dados-ink-2); flex-wrap: wrap; } .ac-dados-chart-card__legend span { display: inline-flex; align-items: center; gap: 6px; } .ac-dados-chart-card__legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .ac-dados-chart-figure { margin: 0; } .ac-dados-chart { width: 100%; min-height: 220px; } .ac-dados-chart canvas, .ac-dados-chart svg { display: block; } .ac-dados-chart-figure figcaption { font-family: var(--font-inter); font-size: 12px; font-style: italic; color: #8b8fae; margin-top: 4px; } .ac-dados-chart-empty, .ac-dados-chart-card__noscript { font-size: 13px; color: var(--ac-dados-muted); padding: 24px 0; text-align: center; } .ac-dados-donut { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, .82fr); gap: 22px; align-items: center; } .ac-dados-donut__chart { margin: 0; } .ac-dados-donut__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .ac-dados-donut__item { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--ac-dados-border); font-size: 13px; } .ac-dados-donut__item:last-child { border-bottom: 0; } .ac-dados-donut__dot { width: 12px; height: 12px; border-radius: 4px; } .ac-dados-donut__name { color: var(--ac-dados-ink-2); } .ac-dados-donut__count { font-weight: 700; color: var(--ac-dados-ink); } .ac-dados-donut__pct { color: var(--ac-dados-muted); min-width: 44px; text-align: right; } @media (max-width: 1200px) { .ac-dados-kpis { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .ac-dados-donut { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .ac-dados-kpis { grid-template-columns: repeat(2, 1fr); } } /* novo css cards dados gerais */ .ac-dados-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); } .ac-dados-kpi__icon svg, .ac-dados-kpi__icon i { font-size: 22px; } .ac-dados-kpi__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; text-align: left; } .ac-dados-kpi__arrow { justify-self: end; align-self: center; color: #8b8fae; font-size: 14px; } @media (max-width: 991px) { .ac-dados-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ac-dados-kpis { grid-template-columns: 1fr; } } /* --- Seletor de ano por SETAS ↑↓ (padrão Cooperados) ----------------------- */ .ac-dados-yeararrows { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid #dce3f3; border-radius: 14px; background: var(--ocb-branco); } .ac-dados-yeararrows__btn { width: 30px; height: 24px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: #eef2fb; color: var(--ocb-azul-marinho); cursor: pointer; transition: background .15s ease, opacity .15s ease; } .ac-dados-yeararrows__btn:hover:not(:disabled) { background: #dbe4f7; } .ac-dados-yeararrows__btn:disabled { opacity: .3; cursor: default; } .ac-dados-yeararrows__value { font-family: var(--font-intro-light); font-weight: 300; font-size: 20px; line-height: 1; color: var(--ocb-azul-marinho); letter-spacing: -0.01em; } /* tabela ramos cooperativismo */ .ac-dados-cooperativismo-ramos__wrapper { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } .ac-dados-cooperativismo-ramos__table { margin: 0; padding: 0; width: 100%; min-width: 920px; } .ac-dados-cooperativismo-ramos__table thead th:first-child, .ac-dados-cooperativismo-ramos__table tfoot th:first-child { text-align: left; } .ac-dados-cooperativismo-ramos__table tfoot th { font-weight: 500; color: var(--ocb-azul-marinho); border-bottom: none; font-family: var(--font-inter); font-size: 13.5px; text-align: right; white-space: nowrap; } .ac-dados-cooperativismo-ramos__table thead tr { border-bottom: 1px solid #e3e5ef; } .ac-dados-cooperativismo-ramos__table tfoot tr { border-top: 2px solid #e3e5ef; } .ac-dados-cooperativismo-ramos__table th, .ac-dados-cooperativismo-ramos__table td { vertical-align: middle; white-space: nowrap; } .ac-dados-cooperativismo-ramos__table thead th { font-family: var(--font-inter); font-weight: 700; font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase; color: #8b8fae; padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; } .ac-dados-cooperativismo-ramos__rows { margin: 0; padding: 0; } .ac-dados-cooperativismo-ramos__row { align-items: center; font-family: var(--font-inter); font-size: 13.5px; padding: 13px 14px; text-align: right; white-space: nowrap; font-weight: 500; } .ac-dados-cooperativismo-ramos__label { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ocb-azul-marinho); font-family: var(--font-inter); font-size: 13.5px; font-weight: 600; white-space: nowrap; } .ac-dados-cooperativismo-ramos__badge { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: 12px; background: #eef2fb; color: var(--ocb-azul-marinho); font-size: 14px; } /* Ícone oficial do ramo (SVG colorido) dentro do badge. */ .ac-dados-cooperativismo-ramos__icon { width: 30px; height: 30px; display: block; } @media (max-width: 992px) { .ac-dados-cooperativismo-ramos__wrapper { overflow-x: auto; overflow-y: hidden; } .ac-dados-cooperativismo-ramos__table { min-width: 900px; } /* primeira coluna fixa */ .ac-dados-cooperativismo-ramos__table th:first-child, .ac-dados-cooperativismo-ramos__table td:first-child { position: sticky; left: 0; z-index: 20; background: #fff; width: 74px; min-width: 74px; max-width: 74px; padding-left: 10px; padding-right: 10px; box-shadow: 8px 0 10px rgba(0,0,0,.05); } .ac-dados-cooperativismo-ramos__table thead th:first-child { z-index: 30; } .ac-dados-cooperativismo-ramos__table tfoot th:first-child { z-index: 30; } .ac-dados-cooperativismo-ramos__nomeramo { display: none; } .ac-dados-cooperativismo-ramos__table td:not(:first-child), .ac-dados-cooperativismo-ramos__table th:not(:first-child) { min-width: 135px; } .ac-dados-cooperativismo-ramos__table tfoot th:not(:first-child) { min-width: 135px; } }