/** * com_anuariocoop :: estilos específicos da view "Governança". * O shell comum vive em anuario-shell.css; aqui ficam apenas os blocos desta * dimensão (intro/direção, gráficos por sexo, ramo e faixa etária) e o loader. * * @copyright (C) 2026 OCB / SESCOOP * @license GNU General Public License version 3 or later; see LICENSE.txt */ .ac-governanca-content { min-width: 0; display: flex; flex-direction: column; gap: 20px; } /* Loader centralizado e FIXO no viewport (visível mesmo rolando a página): spinner girando + percentual + "Buscando os dados…". Criado via JS (governanca.js) e anexado ao , sem libs externas. */ .ac-governanca-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-governanca-loader.is-visible { opacity: 1; pointer-events: auto; } .ac-governanca-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-governanca-loader.is-visible .ac-governanca-loader__box { transform: translateY(0) scale(1); } /* Anel girando (gradiente OCB). */ .ac-governanca-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-governanca-spin .8s linear infinite; } @keyframes ac-governanca-spin { to { transform: rotate(360deg); } } .ac-governanca-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-governanca-loader__label { font-family: var(--font-inter); font-size: 13px; color: #4a4f7a; } @media (prefers-reduced-motion: reduce) { .ac-governanca-loader__spinner { animation-duration: 2s; } } /* Mensagem de erro acessível, sem quebrar o layout. */ .ac-governanca-flash { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #fdecec; color: #b3261e; font-family: var(--font-inter); font-size: 13px; } /* Cabeçalho da dimensão padronizado no parcial comum + anuario-shell.css. */ /* --- Cabeçalho dos cards de gráfico ---------------------------------------- */ .ac-governanca-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: nowrap; margin-bottom: 12px; } .ac-governanca-card__title { font-family: var(--font-inter); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--ocb-azul-marinho); margin: 0; } .ac-governanca-card__desc { font-family: var(--font-inter); font-size: 12px; line-height: 1.35; color: var(--ocb-azul-marinho); margin: 3px 0 0; } .ac-governanca-card__text { font-family: var(--font-inter); font-size: 15px; line-height: 1.6; color: var(--ocb-azul-marinho); margin: 16px 0 0; max-width: 860px; } .ac-governanca-card__text strong { color: var(--ocb-azul-marinho); font-weight: 800; } .ac-governanca-card__note { font-family: var(--font-inter); font-size: 12px; font-style: italic; color: #8b8fae; margin: 12px 0 0; } /* Texto comparativo do card de sexo: logo após o subtítulo, antes da barra. */ .ac-governanca-sexdir__intro { margin: 4px 0 18px; } .ac-governanca-sex__legend { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 16px; margin: 0 0 14px; color: var(--ocb-azul-marinho); font-family: var(--font-inter); font-size: 12px; font-weight: 700; } .ac-governanca-sex__legend-bar { display: flex; justify-content: space-between; align-items: center; } .ac-governanca-sex__legend-bar span { display: inline-flex; align-items: center; gap: 6px; } .ac-governanca-sex__legend-bar .is-men { color: var(--ocb-azul-ceu); } .ac-governanca-sex__legend-bar .is-women { color: var(--ocb-azul-marinho); } .ac-governanca-sex__rows { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; } .ac-governanca-sex__row { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 16px; align-items: center; } .ac-governanca-sex__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: 700; } .ac-governanca-sex__bar { height: 28px; display: flex; overflow: hidden; border-radius: 6px; background: #eef2fb; } /* Linha divisória entre o gráfico e a nota "Informações referentes…". */ .ac-governanca-rule { border: 0; border-top: 1px solid var(--ac-shell-border, #e6e8f0); margin: 18px 0 0; } /* Unidade/prefixo do formatador padrão (mil/mi/bi/tri e R$). */ .ac-governanca-kpi__unit { font-size: 15px; color: #4a4f7a; } .ac-governanca-kpi__prefix { font-size: 12.5px; font-weight: 400; letter-spacing: 0; } /* --- Card intro / Direção --------------------------------------------------- */ .ac-governanca-intro { display: grid; grid-template-columns: minmax(0, 320px) 1px minmax(0, 1fr); gap: 30px; align-items: center; padding: 30px 34px; } .ac-governanca-intro__divider { width: 1px; min-height: 130px; background: var(--ac-shell-border, #e6e8f0); } .ac-governanca-direcao__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: #8b8fae; margin: 0 0 18px; } .ac-governanca-direcao__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; } .ac-governanca-direcao__item { display: flex; flex-direction: column; gap: 6px; } /* Ícone + rótulo (Homens/Mulheres) lado a lado, ACIMA do número. */ .ac-governanca-direcao__head { display: inline-flex; align-items: center; gap: 8px; } .ac-governanca-direcao__icon { font-size: 20px; line-height: 1; } /* Rótulo + ícone: Inter 600 12px, cor por sexo (Mulheres escura, Homens clara). */ .ac-governanca-direcao__item.is-men .ac-governanca-direcao__icon, .ac-governanca-direcao__item.is-men .ac-governanca-direcao__caption, .ac-governanca-direcao__item.is-men .ac-governanca-direcao__big { color: var(--ocb-azul-ceu); } .ac-governanca-direcao__item.is-women .ac-governanca-direcao__icon, .ac-governanca-direcao__item.is-women .ac-governanca-direcao__caption, .ac-governanca-direcao__item.is-women .ac-governanca-direcao__big { color: var(--ocb-azul-marinho); } /* Números grandes (78% / 22%): Intro 300, 54px, cor herdada do sexo. */ .ac-governanca-direcao__big { font-family: var(--font-intro-light); font-weight: 300; font-size: 54px; line-height: .92; letter-spacing: -0.02em; } /* O "%" depois do número é menor (26px), na mesma cor do sexo. */ .ac-governanca-direcao__pct { font-size: 26px; letter-spacing: 0; } .ac-governanca-direcao__caption { font-family: var(--font-inter); font-weight: 600; font-size: 12px; } .ac-governanca-intro__body { min-width: 0; } .ac-governanca-intro__text { font-family: var(--font-inter); font-size: 16.5px; line-height: 1.62; color: var(--ocb-azul-marinho); margin: 0; } /* Pílula abaixo do texto: ícone + número (Intro) + texto (Inter). */ .ac-governanca-badge { display: inline-flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 10px 16px; border-radius: 12px; background: var(--color-bg-site); border: 1px solid var(--ac-shell-border, #e6e8f0); } .ac-governanca-badge__icon { display: inline-flex; font-size: 20px; line-height: 1; color: var(--ocb-azul-marinho); } .ac-governanca-badge__value { font-family: var(--font-intro-light); font-weight: 300; font-size: 24px; line-height: 1; letter-spacing: -0.01em; color: var(--ocb-azul-marinho); } .ac-governanca-badge__text { font-family: var(--font-inter); font-size: 14px; color: #4a4f7a; } /* --- Nota informativa (faixa etária) --------------------------------------- */ .ac-governanca-info { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 16px; padding: 12px 16px; border-radius: 10px; background: #f1f4fb; color: var(--ac-shell-ink-2, #444b60); font-family: var(--font-inter); font-size: 12.5px; line-height: 1.45; } .ac-governanca-info i { margin-top: 2px; color: var(--ocb-azul-ceu); } /* --- Seletor de ano por SETAS ↑↓ (padrão Cooperados) ----------------------- */ .ac-governanca-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-governanca-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-governanca-yeararrows__btn:hover:not(:disabled) { background: #dbe4f7; } .ac-governanca-yeararrows__btn:disabled { opacity: .3; cursor: default; } .ac-governanca-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; } /* --- Distribuição por sexo dos dirigentes: barra empilhada 100% ------------ */ .ac-governanca-stack { display: flex; height: 46px; overflow: hidden; border-radius: 8px; background: #eef2fb; } .ac-governanca-stack__seg { display: flex; align-items: center; min-width: 0; padding: 0 14px; color: var(--ocb-branco); font-family: var(--font-inter); font-weight: 700; font-size: 13px; white-space: nowrap; transition: width .35s cubic-bezier(.4, 0, .2, 1); } .ac-governanca-stack__seg.is-men { background: var(--ocb-azul-ceu); justify-content: flex-end; } .ac-governanca-stack__seg.is-women { background: var(--ocb-azul-marinho); } .ac-governanca-stack__lbl i { margin: 0 6px; } /* --- Legenda dos ramos (alinhada à coluna da barra) ------------------------ */ /* Coluna vazia sobre o rótulo + Homens à esquerda / Mulheres à direita. */ .ac-governanca-ramos__legend { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; margin: 0 0 14px; color: var(--ocb-azul-marinho); font-family: var(--font-inter); font-size: 12px; font-weight: 700; } .ac-governanca-ramos__legend-bar { display: flex; justify-content: space-between; align-items: center; } .ac-governanca-ramos__legend-bar span { display: inline-flex; align-items: center; gap: 6px; } .ac-governanca-ramos__legend-bar .is-men { color: var(--ocb-azul-ceu); } .ac-governanca-ramos__legend-bar .is-women { color: var(--ocb-azul-marinho); } /* --- Barras de ramo (ícone oficial + barra empilhada Homens/Mulheres) ------ */ .ac-governanca-ramos__rows { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; } .ac-governanca-ramos__row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: center; } .ac-governanca-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: 700; } .ac-governanca-ramos__badge { width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; border-radius: 12px; background: #eef2fb; color: var(--ocb-azul-marinho); font-size: 14px; } .ac-governanca-ramos__icon { width: 30px; height: 30px; display: block; } .ac-governanca-ramos__bar { height: 28px; display: flex; overflow: hidden; border-radius: 6px; background: #eef2fb; } .ac-governanca-ramos__fill { min-width: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--ocb-branco); font-family: var(--font-inter); font-size: 11px; font-weight: 800; white-space: nowrap; } .ac-governanca-ramos__fill.is-men { background: var(--ocb-azul-ceu); } .ac-governanca-ramos__fill.is-women { background: var(--ocb-azul-marinho); } /* --- Faixa etária: barras divergentes (butterfly) em HTML ------------------ */ .ac-governanca-butterfly { margin: 8px 0 12px; } .ac-governanca-butterfly__legend { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-inter); font-weight: 700; font-size: 12px; margin-bottom: 24px; } .ac-governanca-butterfly__legend span { display: inline-flex; align-items: center; gap: 6px; } .ac-governanca-butterfly__legend .is-men { color: var(--ocb-azul-ceu); } .ac-governanca-butterfly__legend .is-women { color: var(--ocb-azul-marinho); } .ac-governanca-butterfly__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } .ac-governanca-butterfly__row { display: grid; grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr); align-items: center; gap: 16px; } .ac-governanca-butterfly__side { display: flex; align-items: center; gap: 10px; min-width: 0; } .ac-governanca-butterfly__pct { flex: none; font-family: var(--font-inter); font-weight: 700; font-size: 13px; color: var(--ocb-azul-marinho); } .ac-governanca-butterfly__side.is-men .ac-governanca-butterfly__pct { color: var(--ocb-azul-ceu); } .ac-governanca-butterfly__track { flex: 1 1 auto; min-width: 0; display: flex; height: 22px; } /* Mulheres crescem do centro para a esquerda; Homens do centro para a direita. */ .ac-governanca-butterfly__side.is-men .ac-governanca-butterfly__track { justify-content: flex-start; } .ac-governanca-butterfly__side.is-women .ac-governanca-butterfly__track { justify-content: flex-end; } .ac-governanca-butterfly__fill { height: 100%; min-width: 3px; } .ac-governanca-butterfly__fill.is-men { background: var(--ocb-azul-ceu); border-radius: 0 4px 4px 0; } .ac-governanca-butterfly__fill.is-women { background: var(--ocb-azul-marinho); border-radius: 4px 0 0 4px; /* canto reto no centro */ } .ac-governanca-butterfly__cat { text-align: center; font-family: var(--font-inter); font-weight: 700; font-size: 13px; color: var(--ocb-azul-marinho); } /* --- Figuras e containers dos gráficos ------------------------------------- */ .ac-governanca-figure { margin: 0; } .ac-governanca-chart { width: 100%; } .ac-governanca-chart canvas, .ac-governanca-chart svg { display: block; } .ac-governanca-faixa__chart { min-height: 320px; } .ac-governanca-chart-empty { font-family: var(--font-inter); font-size: 13px; color: #8b8fae; padding: 24px 0; text-align: center; } .ac-governanca-content .ac-shell-empty { margin: 0; } /* Fonte itálica padrão. */ .ac-governanca-figure figcaption { font-family: var(--font-inter); font-size: 12px; font-style: italic; color: #8b8fae; margin-top: 4px; } @media (max-width: 900px) { .ac-governanca-intro { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px; } .ac-governanca-intro__divider { display: none; } .ac-governanca-ramos__row { grid-template-columns: minmax(0, 1fr); gap: 8px; } /* Legenda acompanha a barra em coluna única (some o espaçador do rótulo). */ .ac-governanca-ramos__legend { grid-template-columns: minmax(0, 1fr); } .ac-governanca-ramos__legend-spacer { display: none; } } @media (max-width: 620px) { .ac-governanca-direcao__list { gap: 24px; } .ac-governanca-sexdir, .ac-governanca-ramos { padding: 22px; } } .ac-governanca-butterfly__side.is-women { justify-content: flex-end; } .ac-governanca-butterfly__side.is-men { justify-content: flex-start; } .ac-governanca-butterfly__fill { flex: none; height: 22px; } .ac-governanca-butterfly__fill.is-women { border-radius: 4px 0 0 4px; } .ac-governanca-butterfly__fill.is-men { border-radius: 0 4px 4px 0; }