/* ==========================================================================
   IPDS — Info Plus Design System
   File:    ipds.components.css
   Version: 1.1.0 (Dashboard BI: chips de filtros e botões de ação)
   --------------------------------------------------------------------------
   Componentes NOVOS do IPDS — não são migração de código existente.
   Todos com prefixo .ipds-* e desacoplados de qualquer produto específico.
   Reusáveis em SIGAME, ÁGILIBlue, IPS Condomínio, ServSaúde, GovFácil, etc.

   DEPENDE DE: ipds.tokens.css

   ORDEM NO JSP:
     ... outros CSS do IPDS ...
     <link rel="stylesheet" href="css/ipds.css">
     <link rel="stylesheet" href="css/ipds.components.css">  ← AQUI
     <link rel="stylesheet" href="css/index.css">

   ÍNDICE:
     1.  KPI Card                  (.ipds-kpi-card)
     2.  Gradient Feature Card     (.ipds-gradient-card)
     3.  Action Chip               (.ipds-chip)
     4.  Hero Panel Header         (.ipds-hero)
     5.  Calendar                  (.ipds-calendar)
     6.  Sidebar Navigation        (.ipds-sidebar)
     7.  Responsivo

   FILOSOFIA DE USO:
     • Componentes são "blocos prontos" — cole o HTML, ajuste conteúdo,
       funciona com a identidade IPDS automaticamente.
     • Nunca aplique tokens diretamente no HTML — sempre passe pelo
       componente. Se precisar de variação, crie um modificador
       (.ipds-kpi-card--compact, .ipds-chip--gold, etc).
     • Modificadores seguem padrão BEM relaxado: .ipds-bloco--variante.
     • Componentes não fazem layout de página — quem decide grid/flex é
       o container que você criar.

   EXEMPLO MÍNIMO DE USO:
     <div class="ipds-kpi-card">
       <div class="ipds-kpi-card__header">
         <div class="ipds-kpi-card__icon ipds-kpi-card__icon--navy">
           <span class="material-symbols-outlined">attach_money</span>
         </div>
         <div class="ipds-kpi-card__label">Valor total</div>
       </div>
       <div class="ipds-kpi-card__value">R$ 872,7 Mi</div>
       <div class="ipds-kpi-card__chips">
         <span class="ipds-chip ipds-chip--dark">Meta 2026</span>
         <span class="ipds-chip ipds-chip--success">100%</span>
       </div>
       <div class="ipds-kpi-card__delta ipds-kpi-card__delta--up">
         ▲ 9,3% vs 2025
       </div>
     </div>
   ========================================================================== */


/* ==========================================================================
   1. KPI CARD (.ipds-kpi-card)
   --------------------------------------------------------------------------
   Card de indicador para dashboards. Comporta:
     • Ícone gradient categorizado (5 variantes de cor)
     • Label uppercase
     • Valor grande em tabular-nums
     • Linha de chips contextuais (meta, status, percentual)
     • Linha de variação YTD com seta colorida (up/down/neutral)
     • Linha extra com bullet (saldo, observação)

   ESTRUTURA:
     .ipds-kpi-card
       └ .ipds-kpi-card__header
           ├ .ipds-kpi-card__icon (+ modificador de cor)
           └ .ipds-kpi-card__label
       └ .ipds-kpi-card__value
       └ .ipds-kpi-card__chips
           └ .ipds-chip (ver seção 3)
       └ .ipds-kpi-card__delta (+ modificador up/down)
       └ .ipds-kpi-card__extra (opcional)
   ========================================================================== */

.ipds-kpi-card {
	background: var(--ipds-card-bg);
	border: 1px solid var(--ipds-card-border);
	border-radius: var(--ipds-card-radius);
	padding: var(--ipds-space-6);
	box-shadow: var(--ipds-card-shadow);
	transition: var(--ipds-transition-base);
	min-width: 0;
	font-family: var(--ipds-font-sans);
}

.ipds-kpi-card:hover {
	box-shadow: var(--ipds-card-shadow-hover);
}

.ipds-kpi-card--compact {
	padding: var(--ipds-space-5);
}

.ipds-kpi-card__header {
	display: flex;
	align-items: center;
	gap: var(--ipds-space-3);
	margin-bottom: var(--ipds-space-4);
}

.ipds-kpi-card__icon {
	width: 32px;
	height: 32px;
	border-radius: var(--ipds-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--ipds-text-on-dark);
}

.ipds-kpi-card__icon .material-symbols-outlined {
	font-size: 18px;
	color: inherit;
}

/* Variantes de cor do ícone — uma para cada categoria de KPI */
.ipds-kpi-card__icon--navy    { background: var(--ipds-kpi-icon-1-bg); }
.ipds-kpi-card__icon--gold    { background: var(--ipds-kpi-icon-2-bg); color: var(--ipds-text-on-gold); }
.ipds-kpi-card__icon--blue    { background: var(--ipds-kpi-icon-3-bg); }
.ipds-kpi-card__icon--success { background: var(--ipds-kpi-icon-4-bg); }
.ipds-kpi-card__icon--danger  { background: linear-gradient(135deg, var(--ipds-color-red-500), var(--ipds-color-red-700)); }

.ipds-kpi-card__label {
	font-size: var(--ipds-font-size-xs);
	font-weight: var(--ipds-font-weight-bold);
	color: var(--ipds-text-secondary);
	text-transform: uppercase;
	letter-spacing: var(--ipds-letter-spacing-wider);
	flex: 1;
	line-height: var(--ipds-line-height-tight);
}

.ipds-kpi-card__value {
	font-size: var(--ipds-font-size-xl);
	font-weight: var(--ipds-font-weight-bold);
	color: var(--ipds-text-primary);
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--ipds-space-3);
	letter-spacing: var(--ipds-letter-spacing-tight);
}

.ipds-kpi-card__value--lg {
	font-size: var(--ipds-font-size-2xl);
}

.ipds-kpi-card__value--xl {
	font-size: var(--ipds-font-size-3xl);
}

.ipds-kpi-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ipds-space-2);
	margin-bottom: var(--ipds-space-3);
}

.ipds-kpi-card__delta {
	font-size: var(--ipds-font-size-xs);
	font-weight: var(--ipds-font-weight-semibold);
	color: var(--ipds-text-secondary);
	font-variant-numeric: tabular-nums;
}

.ipds-kpi-card__delta--up      { color: var(--ipds-color-green-700); }
.ipds-kpi-card__delta--down    { color: var(--ipds-color-red-500); }
.ipds-kpi-card__delta--neutral { color: var(--ipds-text-secondary); }

.ipds-kpi-card__extra {
	font-size: var(--ipds-font-size-xs);
	color: var(--ipds-text-secondary);
	margin-top: var(--ipds-space-2);
	display: flex;
	align-items: center;
	gap: var(--ipds-space-2);
}

.ipds-kpi-card__extra::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: var(--ipds-radius-full);
	background: var(--ipds-text-muted);
	flex-shrink: 0;
}

.ipds-kpi-card__extra--accent::before { background: var(--ipds-color-gold-500); }
.ipds-kpi-card__extra--info::before   { background: var(--ipds-color-blue-500); }


/* ==========================================================================
   2. GRADIENT FEATURE CARD (.ipds-gradient-card)
   --------------------------------------------------------------------------
   Card de destaque com fundo gradient e texto claro. Substitui donut/pizza
   com 2-4 fatias por uma visualização mais impactante.

   ESTRUTURA:
     .ipds-gradient-card (+ modificador de cor)
       └ .ipds-gradient-card__header
           ├ .ipds-gradient-card__icon
           └ .ipds-gradient-card__label
       └ .ipds-gradient-card__value
       └ .ipds-gradient-card__sub  (opcional, valor secundário)
       └ .ipds-gradient-card__delta (opcional)

   VARIANTES:
     --navy    fundo navy 900→700, texto branco com %% em gold
     --gold    fundo gold 500→700, texto branco
     --blue    fundo blue 500→700, texto branco
     --success fundo green 500→700, texto branco
     --danger  fundo red 500→700, texto branco
   ========================================================================== */

.ipds-gradient-card {
	border-radius: var(--ipds-radius-lg);
	padding: var(--ipds-space-6);
	color: var(--ipds-text-on-dark);
	font-family: var(--ipds-font-sans);
	box-shadow: var(--ipds-shadow-sm);
	transition: var(--ipds-transition-base);
	min-width: 0;
	position: relative;
	overflow: hidden;
}

.ipds-gradient-card:hover {
	box-shadow: var(--ipds-shadow-md);
	transform: translateY(-1px);
}

.ipds-gradient-card--navy    { background: var(--ipds-gradient-navy); }
.ipds-gradient-card--gold    { background: var(--ipds-gradient-gold); }
.ipds-gradient-card--blue    { background: var(--ipds-gradient-blue); }
.ipds-gradient-card--success { background: var(--ipds-gradient-success); }
.ipds-gradient-card--danger  { background: linear-gradient(135deg, var(--ipds-color-red-500), var(--ipds-color-red-700)); }

.ipds-gradient-card__header {
	display: flex;
	align-items: center;
	gap: var(--ipds-space-3);
	margin-bottom: var(--ipds-space-3);
}

.ipds-gradient-card__icon {
	width: 32px;
	height: 32px;
	border-radius: var(--ipds-radius-full);
	background: rgba(255, 255, 255, 0.20);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ipds-gradient-card__icon .material-symbols-outlined {
	font-size: 18px;
	color: var(--ipds-text-on-dark);
}

/* No card --gold, o ícone destaca em navy ao invés de branco/gold */
.ipds-gradient-card--gold .ipds-gradient-card__icon {
	background: rgba(10, 22, 40, 0.20);
}

.ipds-gradient-card__label {
	font-size: var(--ipds-font-size-xs);
	font-weight: var(--ipds-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--ipds-letter-spacing-wider);
	flex: 1;
	line-height: var(--ipds-line-height-tight);
	opacity: 0.95;
}

.ipds-gradient-card__value {
	font-size: var(--ipds-font-size-2xl);
	font-weight: var(--ipds-font-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--ipds-letter-spacing-tight);
	line-height: var(--ipds-line-height-tight);
}

/* No card --navy, o número grande sai em gold (assinatura visual da marca) */
.ipds-gradient-card--navy .ipds-gradient-card__value {
	color: var(--ipds-color-gold-500);
}

.ipds-gradient-card__sub {
	font-size: var(--ipds-font-size-xs);
	margin-top: var(--ipds-space-1);
	opacity: 0.85;
	font-variant-numeric: tabular-nums;
}

.ipds-gradient-card__delta {
	font-size: var(--ipds-font-size-xs);
	margin-top: var(--ipds-space-2);
	opacity: 0.90;
	font-variant-numeric: tabular-nums;
	font-weight: var(--ipds-font-weight-semibold);
}


/* ==========================================================================
   3. ACTION CHIP (.ipds-chip)
   --------------------------------------------------------------------------
   Pílula colorida usada em headers de gráficos (drill-down) e em KPIs
   (status, contexto). 5 variantes de cor, 2 tamanhos, suporta ícone.

   ESTRUTURA:
     <span class="ipds-chip ipds-chip--blue">
       <span class="material-symbols-outlined ipds-chip__icon">trending_up</span>
       Comparar
     </span>

   VARIANTES DE COR:
     --dark     fundo navy 900, texto branco                 (chips de meta, totais)
     --gold     fundo gold 100, texto gold 700               (chips de destaque)
     --blue     fundo blue 100, texto blue 700               (chips de info/comparativo)
     --success  fundo green 100, texto green 700             (chips de sucesso)
     --warning  fundo amber 100, texto amber 700             (chips de atenção)
     --danger   fundo red 100, texto red 700                 (chips de erro/alerta)
     --neutral  fundo navy 50, texto navy 500                (chips de detalhar/genérico)

   TAMANHOS:
     padrão     padding 2x8px,  font 10px
     --sm       padding 1x6px,  font 9px
     --lg       padding 4x12px, font 11px

   COMPORTAMENTO:
     • Adicionar [role="button"] ou usar <button> faz hover/active.
     • Sem isso, fica como label estático (não mostra hover).
   ========================================================================== */

.ipds-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ipds-space-1);
	padding: var(--ipds-chip-padding-y) var(--ipds-chip-padding-x);
	border-radius: var(--ipds-chip-radius);
	font-size: var(--ipds-chip-font-size);
	font-weight: var(--ipds-chip-font-weight);
	font-family: var(--ipds-font-sans);
	letter-spacing: var(--ipds-letter-spacing-wide);
	white-space: nowrap;
	line-height: var(--ipds-line-height-tight);
	border: 1px solid transparent;
	user-select: none;
	transition: var(--ipds-transition-fast);
}

.ipds-chip__icon.material-symbols-outlined {
	font-size: 12px;
	margin-right: 2px;
	font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;
}

/* Variantes de cor */
.ipds-chip--dark {
	background: var(--ipds-state-active-bg);
	color: var(--ipds-state-active-text);
}

.ipds-chip--gold {
	background: var(--ipds-color-gold-100);
	color: var(--ipds-color-gold-700);
}

.ipds-chip--blue {
	background: var(--ipds-color-blue-100);
	color: var(--ipds-color-blue-700);
}

.ipds-chip--success {
	background: var(--ipds-color-green-100);
	color: var(--ipds-color-green-700);
}

.ipds-chip--warning {
	background: var(--ipds-color-amber-100);
	color: var(--ipds-color-amber-700);
}

.ipds-chip--danger {
	background: var(--ipds-color-red-100);
	color: var(--ipds-color-red-700);
}

.ipds-chip--neutral {
	background: var(--ipds-bg-subtle);
	color: var(--ipds-text-secondary);
}

/* Tamanhos */
.ipds-chip--sm {
	padding: 1px 6px;
	font-size: 9px;
}

.ipds-chip--lg {
	padding: 4px 12px;
	font-size: var(--ipds-font-size-sm);
}

/* Estado interativo (botão/link/role=button) */
.ipds-chip[role="button"],
button.ipds-chip,
a.ipds-chip {
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
}

.ipds-chip[role="button"]:hover,
button.ipds-chip:hover,
a.ipds-chip:hover {
	filter: brightness(0.96);
	transform: translateY(-1px);
}

.ipds-chip[role="button"]:active,
button.ipds-chip:active,
a.ipds-chip:active {
	transform: translateY(0);
	filter: brightness(0.92);
}


/* ==========================================================================
   4. HERO PANEL HEADER (.ipds-hero)
   --------------------------------------------------------------------------
   Cabeçalho de painel com ícone gradient + título + subtítulo + ações.
   Usado no topo de Dashboard BI, painéis de relatório, telas-âncora.

   ESTRUTURA:
     .ipds-hero
       └ .ipds-hero__icon (+ variante de cor)
           └ <span class="material-symbols-outlined">
       └ .ipds-hero__text
           ├ .ipds-hero__title (suporta <span class="ipds-hero__title-accent">)
           └ .ipds-hero__subtitle
       └ .ipds-hero__actions  (opcional — botões à direita)
   ========================================================================== */

.ipds-hero {
	display: flex;
	align-items: center;
	gap: var(--ipds-space-6);
	padding: var(--ipds-space-4) 0;
	font-family: var(--ipds-font-sans);
}

.ipds-hero__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--ipds-radius-lg);
	background: var(--ipds-gradient-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: var(--ipds-shadow-sm);
	color: var(--ipds-color-gold-500);
}

.ipds-hero__icon .material-symbols-outlined {
	font-size: 24px;
	color: inherit;
	font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.ipds-hero__icon--gold    { background: var(--ipds-gradient-gold); color: var(--ipds-text-on-gold); }
.ipds-hero__icon--blue    { background: var(--ipds-gradient-blue); color: var(--ipds-text-on-dark); }
.ipds-hero__icon--success { background: var(--ipds-gradient-success); color: var(--ipds-text-on-dark); }

.ipds-hero__text {
	flex: 1;
	min-width: 0;
}

.ipds-hero__title {
	font-size: var(--ipds-font-size-xl);
	font-weight: var(--ipds-font-weight-bold);
	color: var(--ipds-text-primary);
	letter-spacing: var(--ipds-letter-spacing-tight);
	line-height: var(--ipds-line-height-tight);
	margin: 0;
}

.ipds-hero__title-accent {
	color: var(--ipds-color-gold-500);
}

.ipds-hero__subtitle {
	font-size: var(--ipds-font-size-sm);
	color: var(--ipds-text-secondary);
	letter-spacing: var(--ipds-letter-spacing-wide);
	margin-top: 2px;
	font-weight: var(--ipds-font-weight-regular);
}

.ipds-hero__actions {
	display: flex;
	align-items: center;
	gap: var(--ipds-space-3);
	flex-shrink: 0;
}

.ipds-hero--compact {
	gap: var(--ipds-space-4);
	padding: var(--ipds-space-3) 0;
}

.ipds-hero--compact .ipds-hero__icon {
	width: 36px;
	height: 36px;
}

.ipds-hero--compact .ipds-hero__icon .material-symbols-outlined {
	font-size: 20px;
}

.ipds-hero--compact .ipds-hero__title {
	font-size: var(--ipds-font-size-lg);
}

/* Variante "underlined" — barra dourada de 2px embaixo do hero inteiro */
.ipds-hero--underlined {
	padding-bottom: var(--ipds-space-4);
	border-bottom: 2px solid var(--ipds-color-gold-500);
}


/* ==========================================================================
   5. CALENDAR (.ipds-calendar)
   --------------------------------------------------------------------------
   Calendário de visualização para dashboards (não é input). Cada célula
   pode conter múltiplos eventos. Apropriado para calendário de pagamentos,
   parcelas, vencimentos, agenda institucional.

   ESTRUTURA:
     .ipds-calendar
       └ .ipds-calendar__header
           ├ .ipds-calendar__nav  (botões prev/next/hoje)
           └ .ipds-calendar__title
       └ .ipds-calendar__grid
           ├ .ipds-calendar__weekday × 7
           └ .ipds-calendar__day (várias)
               ├ .ipds-calendar__day-number
               └ .ipds-calendar__event (várias, com variantes de cor)

   VARIANTES DE EVENTO:
     --primary  navy 900 com texto gold        (alta prioridade / destaque)
     --info     blue 500 com texto branco      (informativo)
     --success  green 500 com texto branco
     --warning  gold 500 com texto navy 900
     --danger   red 500 com texto branco

   MODIFICADORES DE DIA:
     --other-month  cinza apagado (dia do mês anterior/seguinte)
     --today        destacado (fundo gold suave + número em gold)
     --weekend      fundo levemente diferenciado
     --selected     borda gold de 2px
   ========================================================================== */

.ipds-calendar {
	font-family: var(--ipds-font-sans);
	background: var(--ipds-bg-surface);
	border: 1px solid var(--ipds-border-subtle);
	border-radius: var(--ipds-radius-lg);
	overflow: hidden;
}

.ipds-calendar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ipds-space-4) var(--ipds-space-6);
	border-bottom: 1px solid var(--ipds-border-subtle);
	background: var(--ipds-bg-surface);
	gap: var(--ipds-space-4);
}

.ipds-calendar__title {
	font-size: var(--ipds-font-size-lg);
	font-weight: var(--ipds-font-weight-semibold);
	color: var(--ipds-text-primary);
	margin: 0;
	flex: 1;
	text-align: center;
	letter-spacing: var(--ipds-letter-spacing-wide);
	text-transform: capitalize;
}

.ipds-calendar__nav {
	display: flex;
	align-items: center;
	gap: var(--ipds-space-2);
}

.ipds-calendar__nav-btn {
	width: 32px;
	height: 32px;
	border: 1px solid var(--ipds-border-default);
	background: var(--ipds-bg-surface);
	border-radius: var(--ipds-radius-sm);
	color: var(--ipds-text-secondary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: var(--ipds-font-size-sm);
	font-weight: var(--ipds-font-weight-semibold);
	transition: var(--ipds-transition-fast);
	padding: 0;
}

.ipds-calendar__nav-btn:hover {
	background: var(--ipds-state-hover-bg);
	border-color: var(--ipds-color-blue-500);
	color: var(--ipds-color-blue-700);
}

.ipds-calendar__nav-btn .material-symbols-outlined {
	font-size: 18px;
}

.ipds-calendar__nav-btn--today {
	width: auto;
	padding: 0 var(--ipds-space-3);
}

.ipds-calendar__view-toggle {
	display: inline-flex;
	gap: var(--ipds-space-1);
}

.ipds-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: var(--ipds-border-subtle);
	padding: 1px;
}

.ipds-calendar__weekday {
	background: var(--ipds-bg-surface);
	padding: var(--ipds-space-3) var(--ipds-space-2);
	text-align: center;
	font-size: var(--ipds-font-size-xs);
	font-weight: var(--ipds-font-weight-bold);
	color: var(--ipds-text-secondary);
	text-transform: uppercase;
	letter-spacing: var(--ipds-letter-spacing-wider);
}

.ipds-calendar__day {
	background: var(--ipds-bg-surface);
	min-height: 80px;
	padding: var(--ipds-space-2);
	display: flex;
	flex-direction: column;
	gap: 2px;
	transition: var(--ipds-transition-fast);
	position: relative;
	overflow: hidden;
}

.ipds-calendar__day:hover {
	background: var(--ipds-state-hover-bg);
}

.ipds-calendar__day--other-month {
	background: var(--ipds-bg-surface-alt);
	opacity: 0.55;
}

.ipds-calendar__day--weekend {
	background: var(--ipds-bg-surface-alt);
}

.ipds-calendar__day--today {
	background: var(--ipds-color-gold-50);
}

.ipds-calendar__day--today .ipds-calendar__day-number {
	background: var(--ipds-color-gold-500);
	color: var(--ipds-text-on-gold);
	font-weight: var(--ipds-font-weight-bold);
}

.ipds-calendar__day--selected {
	box-shadow: inset 0 0 0 2px var(--ipds-color-gold-500);
	z-index: 1;
}

.ipds-calendar__day-number {
	font-size: var(--ipds-font-size-xs);
	font-weight: var(--ipds-font-weight-semibold);
	color: var(--ipds-text-secondary);
	width: 22px;
	height: 22px;
	border-radius: var(--ipds-radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2px;
	font-variant-numeric: tabular-nums;
}

.ipds-calendar__day--other-month .ipds-calendar__day-number {
	color: var(--ipds-text-muted);
}

/* Eventos dentro da célula */
.ipds-calendar__event {
	font-size: 9px;
	font-weight: var(--ipds-font-weight-semibold);
	padding: 2px 5px;
	border-radius: var(--ipds-radius-xs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: var(--ipds-transition-fast);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--ipds-letter-spacing-wide);
}

.ipds-calendar__event:hover {
	transform: translateX(1px);
}

.ipds-calendar__event--primary {
	background: var(--ipds-state-active-bg);
	color: var(--ipds-state-active-text);
}

.ipds-calendar__event--info {
	background: var(--ipds-color-blue-500);
	color: var(--ipds-text-on-dark);
}

.ipds-calendar__event--success {
	background: var(--ipds-color-green-500);
	color: var(--ipds-text-on-dark);
}

.ipds-calendar__event--warning {
	background: var(--ipds-color-gold-500);
	color: var(--ipds-text-on-gold);
}

.ipds-calendar__event--danger {
	background: var(--ipds-color-red-500);
	color: var(--ipds-text-on-dark);
}

.ipds-calendar__event--neutral {
	background: var(--ipds-bg-subtle);
	color: var(--ipds-text-secondary);
}

.ipds-calendar__event-more {
	font-size: 9px;
	color: var(--ipds-text-muted);
	font-weight: var(--ipds-font-weight-semibold);
	padding: 1px 4px;
}


/* ==========================================================================
   6. SIDEBAR NAVIGATION (.ipds-sidebar)
   --------------------------------------------------------------------------
   Navegação lateral persistente, padrão de SaaS moderno. Comporta avatar
   do usuário, label de seção, itens com ícone, item ativo e divisores.

   ESTRUTURA:
     .ipds-sidebar
       └ .ipds-sidebar__user
           ├ .ipds-sidebar__avatar
           └ .ipds-sidebar__user-info
               ├ .ipds-sidebar__user-name
               └ .ipds-sidebar__user-sub
       └ .ipds-sidebar__section-label   (× N)
       └ .ipds-sidebar__divider
       └ .ipds-sidebar__nav
           └ .ipds-sidebar__item (+ --active)
               ├ .ipds-sidebar__item-icon
               └ .ipds-sidebar__item-label
       └ .ipds-sidebar__footer  (opcional)

   LARGURA PADRÃO: 240px. Ajustável via inline style ou wrapper.
   ========================================================================== */

.ipds-sidebar {
	width: 240px;
	min-width: 240px;
	background: var(--ipds-sidebar-bg);
	border-right: 1px solid var(--ipds-sidebar-border);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	font-family: var(--ipds-font-sans);
}

.ipds-sidebar__user {
	display: flex;
	align-items: center;
	gap: var(--ipds-space-3);
	padding: var(--ipds-space-4) var(--ipds-space-4) var(--ipds-space-3);
	border-bottom: 1px solid var(--ipds-border-subtle);
	flex-shrink: 0;
}

.ipds-sidebar__avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--ipds-radius-full);
	background: var(--ipds-gradient-navy);
	color: var(--ipds-color-gold-500);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--ipds-font-size-md);
	font-weight: var(--ipds-font-weight-bold);
	flex-shrink: 0;
	overflow: hidden;
}

.ipds-sidebar__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ipds-sidebar__user-info {
	flex: 1;
	min-width: 0;
}

.ipds-sidebar__user-name {
	font-size: var(--ipds-font-size-sm);
	font-weight: var(--ipds-font-weight-semibold);
	color: var(--ipds-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ipds-sidebar__user-sub {
	font-size: var(--ipds-font-size-xs);
	color: var(--ipds-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ipds-sidebar__section-label {
	font-size: var(--ipds-font-size-xs);
	font-weight: var(--ipds-font-weight-bold);
	color: var(--ipds-text-muted);
	text-align: center;
	letter-spacing: var(--ipds-letter-spacing-wider);
	text-transform: uppercase;
	padding: var(--ipds-space-4) 0 var(--ipds-space-2);
}

.ipds-sidebar__divider {
	height: 1px;
	background: var(--ipds-border-subtle);
	margin: 0 var(--ipds-space-4);
	flex-shrink: 0;
}

.ipds-sidebar__nav {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--ipds-space-2) 0;
	display: flex;
	flex-direction: column;
}

.ipds-sidebar__item {
	display: flex;
	align-items: center;
	gap: var(--ipds-space-3);
	padding: var(--ipds-space-3) var(--ipds-space-5);
	color: var(--ipds-sidebar-item-text);
	font-size: var(--ipds-font-size-base);
	text-decoration: none;
	cursor: pointer;
	transition: var(--ipds-transition-fast);
	border: none;
	background: transparent;
	font-family: inherit;
	font-weight: var(--ipds-font-weight-medium);
	text-align: left;
	width: 100%;
}

.ipds-sidebar__item:hover {
	background: var(--ipds-sidebar-item-bg-hover);
	color: var(--ipds-text-primary);
}

.ipds-sidebar__item--active {
	background: var(--ipds-sidebar-item-bg-active);
	color: var(--ipds-sidebar-item-text-active);
	font-weight: var(--ipds-font-weight-semibold);
	border-radius: 0 var(--ipds-radius-pill) var(--ipds-radius-pill) 0;
	margin-right: var(--ipds-space-3);
}

.ipds-sidebar__item--active:hover {
	background: var(--ipds-sidebar-item-bg-active);
	color: var(--ipds-sidebar-item-text-active);
}

.ipds-sidebar__item-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ipds-sidebar__item-icon .material-symbols-outlined {
	font-size: 20px;
	color: inherit;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.ipds-sidebar__item--active .ipds-sidebar__item-icon .material-symbols-outlined {
	font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.ipds-sidebar__item-label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ipds-sidebar__item-arrow {
	flex-shrink: 0;
	color: var(--ipds-text-muted);
	font-size: 14px;
}

.ipds-sidebar__item-badge {
	flex-shrink: 0;
	background: var(--ipds-color-gold-500);
	color: var(--ipds-text-on-gold);
	font-size: 9px;
	font-weight: var(--ipds-font-weight-bold);
	padding: 2px 6px;
	border-radius: var(--ipds-radius-pill);
	letter-spacing: var(--ipds-letter-spacing-wide);
}

.ipds-sidebar__footer {
	padding: var(--ipds-space-3) var(--ipds-space-4);
	border-top: 1px solid var(--ipds-border-subtle);
	flex-shrink: 0;
	font-size: var(--ipds-font-size-xs);
	color: var(--ipds-text-muted);
	text-align: center;
}

/* Variante --collapsed: sidebar mais estreita, mostrando só ícones */
.ipds-sidebar--collapsed {
	width: 64px;
	min-width: 64px;
}

.ipds-sidebar--collapsed .ipds-sidebar__user-info,
.ipds-sidebar--collapsed .ipds-sidebar__item-label,
.ipds-sidebar--collapsed .ipds-sidebar__item-arrow,
.ipds-sidebar--collapsed .ipds-sidebar__item-badge,
.ipds-sidebar--collapsed .ipds-sidebar__section-label,
.ipds-sidebar--collapsed .ipds-sidebar__user-sub,
.ipds-sidebar--collapsed .ipds-sidebar__user-name,
.ipds-sidebar--collapsed .ipds-sidebar__footer {
	display: none;
}

.ipds-sidebar--collapsed .ipds-sidebar__item {
	justify-content: center;
	padding: var(--ipds-space-3);
}

.ipds-sidebar--collapsed .ipds-sidebar__item--active {
	margin-right: 0;
	border-radius: 0;
	border-left: 3px solid var(--ipds-color-gold-500);
}


/* ==========================================================================
   7. RESPONSIVO
   --------------------------------------------------------------------------
   Ajustes para tablet (768px) e mobile (480px). Os componentes são
   pensados para escalar bem em desktop; em mobile precisam de ajustes
   pontuais de tamanho e layout.
   ========================================================================== */

@media (max-width: 768px) {

	/* KPI Card — fonte um pouco menor, padding reduzido */
	.ipds-kpi-card {
		padding: var(--ipds-space-5);
	}

	.ipds-kpi-card__value {
		font-size: var(--ipds-font-size-lg);
	}

	.ipds-kpi-card__value--lg {
		font-size: var(--ipds-font-size-xl);
	}

	/* Gradient Card — número grande reduz para caber melhor */
	.ipds-gradient-card {
		padding: var(--ipds-space-5);
	}

	.ipds-gradient-card__value {
		font-size: var(--ipds-font-size-xl);
	}

	/* Hero — empilha vertical em mobile */
	.ipds-hero {
		flex-wrap: wrap;
		gap: var(--ipds-space-3);
	}

	.ipds-hero__actions {
		width: 100%;
		justify-content: flex-end;
		order: 3;
	}

	.ipds-hero__title {
		font-size: var(--ipds-font-size-lg);
	}

	/* Calendar — células menores e eventos compactos */
	.ipds-calendar__day {
		min-height: 60px;
		padding: 4px;
	}

	.ipds-calendar__event {
		font-size: 8px;
		padding: 1px 3px;
	}

	.ipds-calendar__title {
		font-size: var(--ipds-font-size-md);
	}

	.ipds-calendar__weekday {
		font-size: 9px;
		padding: var(--ipds-space-2) 2px;
	}

	/* Sidebar — vira slide-in (controlado por classe externa --open) */
	.ipds-sidebar {
		position: fixed;
		top: 0;
		left: -100%;
		height: 100vh;
		z-index: var(--ipds-z-modal);
		transition: left 0.3s ease;
		box-shadow: var(--ipds-shadow-xl);
	}

	.ipds-sidebar--open {
		left: 0;
	}
}

@media (max-width: 480px) {

	.ipds-kpi-card {
		padding: var(--ipds-space-4);
	}

	.ipds-kpi-card__value {
		font-size: var(--ipds-font-size-md);
	}

	.ipds-kpi-card__icon {
		width: 28px;
		height: 28px;
	}

	.ipds-kpi-card__icon .material-symbols-outlined {
		font-size: 16px;
	}

	.ipds-gradient-card {
		padding: var(--ipds-space-4);
	}

	.ipds-gradient-card__value {
		font-size: var(--ipds-font-size-lg);
	}

	.ipds-hero__icon {
		width: 36px;
		height: 36px;
	}

	.ipds-hero__icon .material-symbols-outlined {
		font-size: 20px;
	}

	.ipds-hero__title {
		font-size: var(--ipds-font-size-md);
	}

	.ipds-calendar__day {
		min-height: 48px;
	}

	.ipds-calendar__day-number {
		width: 18px;
		height: 18px;
		font-size: 10px;
	}

	.ipds-calendar__event {
		font-size: 8px;
	}

	/* Sidebar full-width em telas muito pequenas */
	.ipds-sidebar {
		width: 85%;
		max-width: 320px;
	}
}


/* ============================================================================
   DASHBOARD BI — chips de filtros e botões de ação

   Componentes próprios usados na tela Dashboard BI (telaDashboardBI.js).
   O JS aplica essas classes via parametros["classes"] (Button) e .addClass()
   nos containers/chips.

   Os chips são as "pills" de filtros no estilo do mockup aprovado:
   • dot gold pequeno
   • label cinza
   • valor em bold navy (vem do <select> ou input estilizado)

   O dropdown nativo do <select> é mantido (Opção A do plano), mas com a
   seta nativa escondida e estilizado pra parecer texto puro clicável.
   ============================================================================ */

/* CARD DE FILTROS — recebe todos os chips em uma linha única branca */
.ipds-bi-filtros {
	background: var(--ipds-card-bg);
	border: 1px solid var(--ipds-border-default);
	border-radius: var(--ipds-radius-lg);
	box-shadow: var(--ipds-card-shadow);
	padding: 8px 12px !important;
	gap: 14px !important;
	row-gap: 6px !important;
}

/* CHIP — cada filtro é um chip com dot + label + valor */
.ipds-bi-chip {
	font-size: 11px !important;
	color: var(--ipds-text-secondary) !important;
	gap: 6px !important;
	white-space: nowrap;
}

/* DOT — bolinha gold pequena antes do label (substitui o accent blue) */
.ipds-bi-chip-dot {
	background: var(--ipds-color-gold-500) !important;
	width: 6px !important;
	height: 6px !important;
}

/* LABEL — "Esfera:", "Modalidade:" etc. — cinza, sem bold */
.ipds-bi-chip-label {
	color: var(--ipds-text-secondary);
	font-weight: 500;
}

/* VALOR (select) — texto bold navy, sem seta nativa, hover discreto.
   Mantém o <select> nativo (zero JS pra trocar), só esconde a seta e
   estiliza pra parecer texto clicável do mockup. */
.ipds-bi-chip-select {
	color: var(--ipds-text-primary) !important;
	font-weight: 700 !important;
	font-size: 11px !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 2px 4px 2px 0;
	border-radius: 4px;
	transition: background 0.15s ease;
}
.ipds-bi-chip-select:hover {
	background: var(--ipds-state-hover-bg) !important;
}
.ipds-bi-chip-select:focus {
	outline: 2px solid var(--ipds-color-blue-500);
	outline-offset: 1px;
}

/* INPUT DE DATA (chip de Período) — mesmo estilo do select, sem ícone nativo */
.ipds-bi-chip-input {
	color: var(--ipds-text-primary) !important;
	font-weight: 700 !important;
}
.ipds-bi-chip-input::-webkit-calendar-picker-indicator {
	opacity: 0.5;
	cursor: pointer;
}
.ipds-bi-chip-input::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

/* BOTÕES PEQUENOS DE CHIP (💾 🗑) — discretos, hover navy claro */
.ipds-bi-chip-btn {
	font-size: 13px !important;
	padding: 2px 4px !important;
	border-radius: 4px;
	transition: background 0.15s ease;
}
.ipds-bi-chip-btn:hover {
	background: var(--ipds-state-hover-bg);
}

/* ============================================================================
   BOTÕES DE AÇÃO DO BI (Metas / Consultar / Exportar / Apresentação)

   O JS passa parametros["classes"] = "ipds-bi-action-btn" para getTelaButton.
   Aqui sobrescrevemos o tamanho gigante padrão por algo refinado e compacto,
   mantendo o ícone Material Symbols + texto.
   ============================================================================ */

.ipds-bi-action-btn {
	font-size: 11px !important;
	font-weight: 600 !important;
	border-radius: var(--ipds-radius-md) !important;
	border: 1px solid var(--ipds-border-default) !important;
	background: var(--ipds-card-bg) !important;
	color: var(--ipds-text-primary) !important;
	box-shadow: var(--ipds-card-shadow);
	transition: all 0.15s ease;
	gap: 6px;
}

/* Alinhamento com FormFields empilhados (Painel Cenário, Projeção)
   ------------------------------------------------------------------
   Quando .ipds-bi-action-btn aparece ao lado de .divFormField.empilhado
   (50px total: ~18px label + 32px input), o botão ficaria visualmente
   "afundado" sem este ajuste.

   Detalhe importante: o button.js (linha 174) seta inline
   `margin-bottom: 5` em TODOS os botões. No painel de cenário/projeção,
   esse padding inferior empurra a base do botão pra cima, desalinhando
   da base dos inputs. Zeramos o margin-bottom aqui e usamos margin-top
   = 18px (altura do label do form field empilhado) para o botão alinhar
   exatamente com a área do input. */
.ipds-bi-painel-cenario:has(.divFormField.empilhado) .ipds-bi-action-btn,
.ipds-bi-painel-projecao:has(.divFormField.empilhado) .ipds-bi-action-btn {
	margin-top: 18px;
	margin-bottom: 0 !important;
}

.ipds-bi-action-btn:hover {
	background: var(--ipds-state-hover-bg) !important;
	border-color: var(--ipds-border-strong) !important;
	box-shadow: var(--ipds-card-shadow-hover);
}

/* Material Symbols dentro do botão — menores que o padrão */
.ipds-bi-action-btn .material-symbols-outlined {
	font-size: 16px !important;
	color: var(--ipds-text-secondary);
}

/* Span de texto dentro do botão */
.ipds-bi-action-btn span:not(.material-symbols-outlined) {
	letter-spacing: 0.2px;
}


/* ============================================================================
   DASHBOARD BI — KPI CARDS

   Replica visual aprovado no mockup (sigame_bi_redesenhado_navy_gold.html):
   • Ícone quadrado arredondado (radius 7px) com gradiente IPDS por variante
   • Pílulas Meta + status (substitui barra de progresso linear)
   • Linha de trend unificada (▲/▼ vs ano anterior · YTD)
   • Hover lift sutil (1px + sombra mais forte)

   Estrutura HTML (criada em renderizarCard):
   <div class="ipds-bi-kpi-card">
     <div class="ipds-bi-kpi-header">
       <div class="ipds-bi-kpi-icon ipds-bi-kpi-icon--N">
         <span class="material-symbols-outlined">…</span>
       </div>
       <div class="ipds-bi-kpi-label">…</div>
     </div>
     <div class="ipds-bi-kpi-value">…</div>
     <div class="ipds-bi-kpi-pills">
       <span class="ipds-bi-kpi-pill ipds-bi-kpi-pill--meta">Meta 2026</span>
       <span class="ipds-bi-kpi-pill ipds-bi-kpi-pill--success">100%</span>
     </div>
     <div class="ipds-bi-kpi-trend ipds-bi-kpi-trend--up">▲ 9,3% vs 2025 · YTD …</div>
   </div>
   ============================================================================ */

.ipds-bi-kpi-card {
	/* flex: 1 1 0 → todos cards crescem igualmente do tamanho zero,
	   garantindo larguras idênticas independente do conteúdo.
	   min-width: 180px → suficiente para "R$ 1.206.138.100,00" caber
	   sem quebrar linha; impede cards minúsculos quando há muitos KPIs. */
	flex: 1 1 0;
	min-width: 180px;
	background: var(--ipds-card-bg);
	border: 1px solid var(--ipds-border-default);
	border-radius: var(--ipds-radius-lg);
	box-shadow: var(--ipds-card-shadow);
	padding: 11px;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ipds-bi-kpi-card:hover {
	transform: translateY(-1px);
	box-shadow: var(--ipds-card-shadow-hover);
}

/* Header: ícone + label, gap pequeno */
.ipds-bi-kpi-header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

/* Ícone quadrado arredondado — variantes 1-4 ciclam pelos gradientes IPDS */
.ipds-bi-kpi-icon {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #FFFFFF;
}

.ipds-bi-kpi-icon .material-symbols-outlined {
	font-size: 14px;
	color: #FFFFFF;
	font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.ipds-bi-kpi-icon--1 { background: var(--ipds-kpi-icon-1-bg); }
.ipds-bi-kpi-icon--2 { background: var(--ipds-kpi-icon-2-bg); }
.ipds-bi-kpi-icon--3 { background: var(--ipds-kpi-icon-3-bg); }
.ipds-bi-kpi-icon--4 { background: var(--ipds-kpi-icon-4-bg); }

/* Label — UPPERCASE pequena com letter-spacing pra dar "presença" */
.ipds-bi-kpi-label {
	font-size: 10px;
	font-weight: 700;
	color: var(--ipds-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Valor principal — números em tabular-nums alinham em colunas.
   nowrap impede que "R$ 1.234.567,89" quebre entre o R$ e o número.
   Sem ellipsis: o min-width: 180px do card já garante espaço para
   valores típicos. Em casos extremos, o overflow do card lida com isso. */
.ipds-bi-kpi-value {
	font-size: 15px;
	font-weight: 700;
	color: var(--ipds-text-primary);
	font-variant-numeric: tabular-nums;
	margin-bottom: 6px;
	line-height: 1.2;
	white-space: nowrap;
}

/* Cenário (modo what-if) — texto pequeno em roxo do tema cenário */
.ipds-bi-kpi-cenario-delta {
	font-size: 9px;
	color: var(--ipds-color-blue-500);
	font-weight: 500;
	margin-bottom: 2px;
}

/* Pílulas justapostas (Meta + status) */
.ipds-bi-kpi-pills {
	display: flex;
	gap: 4px;
	margin-bottom: 5px;
	flex-wrap: wrap;
}

.ipds-bi-kpi-pill {
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 9px;
	font-weight: 700;
	white-space: nowrap;
}

/* Pílula "Meta XXXX" — fundo sólido com peso de "âncora" */
.ipds-bi-kpi-pill--meta {
	background: var(--ipds-state-active-bg);
	color: var(--ipds-text-on-dark);
	font-weight: 600;
}

/* Pílulas de status do progresso (cor reflete % atingido) */
.ipds-bi-kpi-pill--success {
	background: var(--ipds-color-green-100);
	color: var(--ipds-color-green-700);
}

.ipds-bi-kpi-pill--warning {
	background: var(--ipds-color-amber-100);
	color: var(--ipds-color-amber-700);
}

.ipds-bi-kpi-pill--danger {
	background: var(--ipds-color-red-100);
	color: var(--ipds-color-red-700);
}

/* Linha de tendência (YoY + YTD) — uma linha só, cor reflete sinal */
.ipds-bi-kpi-trend {
	font-size: 10px;
	font-weight: 600;
	margin-top: 2px;
	font-variant-numeric: tabular-nums;
}

.ipds-bi-kpi-trend--up    { color: var(--ipds-color-green-500); }
.ipds-bi-kpi-trend--down  { color: var(--ipds-color-red-500); }
.ipds-bi-kpi-trend--flat  { color: var(--ipds-text-muted); }

/* Sparkline — pequeno line chart histórico que aparece apenas em modo
   comparativo (Ano anterior / 3 anos / 5 anos). Renderizado pelo echarts
   no JS; aqui só dimensiona o container. Margin negativa nas laterais
   compensa o padding do card pra a linha "respirar" até as bordas. */
.ipds-bi-kpi-spark {
	width: calc(100% + 4px);
	height: 30px;
	margin: 4px -2px 0;
}