/* ============================================================
   opex-summary.css — Refinamento visual da tela de Resumo do OPEX
   EQI Budget System  |  Controlling

   Carregado SÓ em /opex/index.html, depois de opex.css. Tudo fica
   escopado em .opex-resumo porque opex.css é compartilhado com as
   10 telas de lançamento (Marketing, TI etc.) e elas não devem mudar.

   Mesma linguagem visual de /revenue/ e /auc-aum/: cabeçalhos claros,
   valores sem "R$" repetido em cada célula (unidade no subtítulo),
   coluna de nome fixa no scroll horizontal, totais em verde suave.
   ============================================================ */

/* ------------------------------------------------------------
   CABEÇALHOS DE SEÇÃO (título + subtítulo discreto)
   ------------------------------------------------------------ */
.opex-resumo .opx-section-hdr {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 1.125rem 1.5rem 1rem;
}
/* Dentro de .chart-section-header, que já tem padding próprio */
.opex-resumo .opx-section-hdr--flush { padding: 0; }

.opex-resumo .opx-section-hdr .section-title,
.opex-resumo .opx-section-hdr .chart-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--green-dark, #00291E);
  margin: 0;
  padding: 0;
}

.opex-resumo .opx-section-sub {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted, #5A6A66);
}

.opex-resumo .card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-sm, 0 1px 4px rgba(0, 41, 30, 0.08));
}

.opex-resumo .chart-section-header { padding: 1.125rem 1.5rem 0; }

/* ------------------------------------------------------------
   TABELA CONSOLIDADA POR MÓDULO
   ------------------------------------------------------------ */
.opex-resumo .opex-table-wrapper { border-top: 1px solid #EEF2F1; }

.opex-resumo .opex-summary-table {
  border-collapse: separate;   /* necessário para o sticky manter as bordas */
  border-spacing: 0;
  min-width: 1280px;
}

.opex-resumo .opex-summary-table thead,
.opex-resumo .opex-summary-table thead th {
  background: #F7F9F9;
}
.opex-resumo .opex-summary-table th {
  padding: 0.625rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted, #5A6A66);
  border-bottom: 1px solid var(--border, #D0DCDA);
}
.opex-resumo .opex-summary-table th.col-pct { text-align: right; }

.opex-resumo .opex-summary-table td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid #EEF2F1;
  background: #fff;
  transition: background-color 150ms ease;
}
.opex-resumo .opex-summary-table tbody tr:hover { background: transparent; }
.opex-resumo .opex-summary-table tbody tr:hover td { background: #F4F8F7; }

/* Células de mês: peso normal, sem o fundo verde de .total-cell */
.opex-resumo .opex-summary-table tbody .total-cell {
  font-weight: 400;
  color: var(--text-base, #1A1A1A);
}
.opex-resumo .opex-summary-table .total-cell { background: #fff; }
.opex-resumo .opex-summary-table tbody tr:hover .total-cell { background: #F4F8F7; }

/* Coluna Módulo fixa ao rolar na horizontal */
.opex-resumo .opex-summary-table .col-modulo,
.opex-resumo .opex-summary-table .total-label {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 240px;
  text-align: left;
  font-weight: 600;
  color: var(--green-dark, #00291E);
  box-shadow: 1px 0 0 #EEF2F1, 6px 0 8px -6px rgba(0, 41, 30, 0.12);
}
.opex-resumo .opex-summary-table thead .col-modulo { z-index: 3; }

.opex-resumo .module-name-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: 0.05em;
}

/* Total Ano — destaque suave */
.opex-resumo .opex-summary-table .total-cell--mod,
.opex-resumo .opex-summary-table th.col-total {
  font-weight: 700;
  color: var(--green-dark, #00291E);
  background: #F4FAF8;
  border-left: 1px solid var(--border, #D0DCDA);
}
.opex-resumo .opex-summary-table th.col-total { background: #EAF5F1; }

.opex-resumo .opex-summary-table td.col-pct {
  color: var(--text-muted, #5A6A66);
  border-left: 1px solid #EEF2F1;
}

.opex-resumo .cell-zero { color: var(--border, #D0DCDA); }

/* Rodapé: verde suave + linha verde em cima */
.opex-resumo .opex-summary-table .grand-total-row td {
  background: #EAF5F1;
  color: var(--green-dark, #00291E);
  font-weight: 700;
  border-top: 2px solid var(--green-primary, #009E76);
  border-bottom: 0;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.opex-resumo .opex-summary-table .grand-total-row .total-cell--grand { background: #DDEFE8; }

/* ------------------------------------------------------------
   EVOLUÇÃO MENSAL E SAZONALIDADE
   ------------------------------------------------------------ */
.opex-resumo .trend-body { padding: 1rem 1.5rem 0.25rem; }

.opex-resumo .seasonality-summary {
  padding: 0.75rem 1.5rem 1.25rem;
  border-top: 1px solid #EEF2F1;
  margin-top: 0.5rem;
}
.opex-resumo .seasonality-tag {
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
}
.opex-resumo .seasonality-tag b { font-weight: 700; margin-right: 0.125rem; }

/* ------------------------------------------------------------
   RANKING DE DIRETORIAS
   Linha = posição | nome | valor | participação, barra fina abaixo.
   Cor única (verde da marca): num ranking a cor não carrega
   informação, só a posição e o tamanho da barra.
   ------------------------------------------------------------ */
.opex-resumo .hbar-body { padding: 1rem 1.5rem 1.25rem; }

.opx-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.opx-rank-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.opx-rank-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.opx-rank-pos {
  flex-shrink: 0;
  width: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, #5A6A66);
  font-variant-numeric: tabular-nums;
}

.opx-rank-label {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-base, #1A1A1A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opx-rank-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--green-dark, #00291E);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.opx-rank-share {
  min-width: 3.25rem;
  font-size: 0.75rem;
  color: var(--text-muted, #5A6A66);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.opx-rank-track {
  margin-left: 2rem; /* alinha a barra com o nome, após a posição */
  height: 6px;
  background: #EEF2F1;
  border-radius: 999px;
  overflow: hidden;
}

.opx-rank-fill {
  height: 100%;
  background: var(--green-primary, #009E76);
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* 1º lugar em tom mais escuro para ancorar a leitura */
.opx-rank-item:first-child .opx-rank-fill { background: #007A5B; }

.opx-rank-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1.125rem;
  padding-top: 0.875rem;
  border-top: 1px solid #EEF2F1;
  font-size: 0.75rem;
  color: var(--text-muted, #5A6A66);
}
.opx-rank-total strong {
  font-size: 0.875rem;
  color: var(--green-dark, #00291E);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   RESUMO MATRICIAL — CC × PACOTE
   ------------------------------------------------------------ */
.opex-resumo .opx-mtx-table {
  border-collapse: separate;
  border-spacing: 0;
}

.opex-resumo .opx-mtx-table thead th {
  background: #F7F9F9;
  color: var(--text-muted, #5A6A66);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border, #D0DCDA);
}

.opex-resumo .opx-mtx-table tbody td,
.opex-resumo .opx-mtx-table tfoot td {
  padding: 0.5625rem 0.875rem;
  border-bottom: 1px solid #EEF2F1;
  background: #fff;
}

/* Tabulação por nível do drilldown (Diretoria ▸ Gerência ▸ Coordenação ▸ CC).
   Precisa do td.opx-mtx-name--* aqui: o padding fixo do seletor acima empata
   em especificidade com a indentação de opex.css e, por este arquivo carregar
   depois, zerava todos os níveis na mesma coluna. A folha (CC) soma a largura
   do ícone ▸ (0.75rem + gap 0.375rem) para o texto cair um nível abaixo do
   rótulo da Coordenação, e não sob o ícone. */
.opex-resumo .opx-mtx-table { --mtx-indent: 1.5rem; --mtx-base: 0.875rem; --mtx-icon: 1.125rem; }
.opex-resumo .opx-mtx-table tbody td.opx-mtx-name--dir  { padding-left: var(--mtx-base); }
.opex-resumo .opx-mtx-table tbody td.opx-mtx-name--dep  { padding-left: calc(var(--mtx-base) + var(--mtx-indent)); }
.opex-resumo .opx-mtx-table tbody td.opx-mtx-name--area { padding-left: calc(var(--mtx-base) + 2 * var(--mtx-indent)); }
.opex-resumo .opx-mtx-table tbody td.opx-mtx-name--cc   { padding-left: calc(var(--mtx-base) + 3 * var(--mtx-indent) + var(--mtx-icon)); }
@media (max-width: 1024px) {
  .opex-resumo .opx-mtx-table { --mtx-indent: 1rem; }
}

/* Hierarquia por indentação e peso — fundos quase neutros */
.opex-resumo .opx-mtx-row--dir td  { background: #F7F9F9; }
.opex-resumo .opx-mtx-row--dep td  { background: #FBFCFC; }
.opex-resumo .opx-mtx-row--area td { background: #fff; }
.opex-resumo .opx-mtx-table tbody tr:hover td { background: #F4F8F7; }

/* Primeira coluna (estrutura de CCs) fixa ao rolar na horizontal */
.opex-resumo .opx-mtx-table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 #EEF2F1, 6px 0 8px -6px rgba(0, 41, 30, 0.12);
}
.opex-resumo .opx-mtx-table thead tr > :first-child { z-index: 3; }

.opex-resumo .opx-mtx-cell--total {
  background: #F4FAF8;
  border-left: 1px solid var(--border, #D0DCDA);
}
.opex-resumo .opx-mtx-table thead th:last-child {
  background: #EAF5F1;
  color: var(--green-dark, #00291E);
  border-left: 1px solid var(--border, #D0DCDA);
}

.opex-resumo .opx-mtx-toggle-icon {
  color: var(--text-muted, #5A6A66);
  transition: color 150ms ease;
}
.opex-resumo .opx-mtx-toggle-btn:hover .opx-mtx-toggle-icon,
.opex-resumo .opx-mtx-toggle-btn[aria-expanded="true"] .opx-mtx-toggle-icon {
  color: var(--green-primary, #009E76);
}

.opex-resumo .opx-mtx-foot-row td {
  background: #EAF5F1;
  border-top: 2px solid var(--green-primary, #009E76);
}
.opex-resumo .opx-mtx-foot-row td.opx-mtx-cell--total { background: #DDEFE8; }

/* ------------------------------------------------------------
   CARDS DE MÓDULO — variação % frente ao ano anterior
   Custo maior que o ano-base = desfavorável (vermelho);
   menor = favorável (verde); sem base = traço neutro.
   ------------------------------------------------------------ */
.opex-resumo .module-card-yoy { font-weight: 700; white-space: nowrap; }
.opex-resumo .module-card-yoy.is-up      { color: #DC2626; }
.opex-resumo .module-card-yoy.is-down    { color: #009E76; }
.opex-resumo .module-card-yoy.is-neutral { color: var(--text-muted, #6b7280); }
.opex-resumo .module-card-yoy-nota {
  font-size: 0.6875rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.2;
}

/* Cards de módulo: só Total Ano + variação anual (Média Mensal removida) — 2 colunas */
.opex-resumo .module-card-body { grid-template-columns: repeat(2, 1fr); }