/* ============================================================
   Melhor Passagem · Agency OS — Dashboards (Fase 7)
   ------------------------------------------------------------
   Meu placar (#pg-inicio) e Painel do dono (#pg-painel) — que já
   herdam card/kpi/tabela via .ds-lista — ganham aqui os blocos
   próprios (insights, programas, metas). Mais o botão de OCULTAR
   VALORES (olho) para compartilhar a tela sem expor números.

   Só CSS, sob .ds-theme; o ds-dash.js (olho) fica inerte sem a
   classe. Zero hex fora de ds-tokens.css.
   ============================================================ */

/* ── blocos de insight (fila operacional / leitura executiva) ── */
.ds-theme #pg-inicio .insight-item,
.ds-theme #pg-painel .insight-item {
  border: 1px solid var(--ds-n-200); border-radius: var(--ds-raio-kpi);
  background: var(--ds-branco); padding: var(--ds-esp-12) var(--ds-esp-16);
}
.ds-theme #pg-inicio .insight-item b,
.ds-theme #pg-painel .insight-item b { color: var(--ds-texto-forte); font-weight: 500; }
.ds-theme #pg-inicio .insight-item span, .ds-theme #pg-inicio .insight-item small,
.ds-theme #pg-painel .insight-item span, .ds-theme #pg-painel .insight-item small {
  color: var(--ds-texto-meta);
}
.ds-theme #pg-inicio .insight-item.positivo,
.ds-theme #pg-painel .insight-item.positivo { border-color: var(--ds-ok-icone); background: var(--ds-ok-fundo); }
.ds-theme #pg-inicio .insight-item.alerta,
.ds-theme #pg-painel .insight-item.alerta { border-color: var(--ds-alerta-icone); background: var(--ds-alerta-fundo); }
.ds-theme #pg-inicio .insight-item.risco,
.ds-theme #pg-painel .insight-item.risco { border-color: var(--ds-erro-icone); background: var(--ds-erro-fundo); }
.ds-theme #pg-inicio .insight-item.azul,
.ds-theme #pg-painel .insight-item.azul { border-color: var(--ds-brand-300); background: var(--ds-brand-50); }
.ds-theme #pg-inicio .insight-valor,
.ds-theme #pg-painel .insight-valor {
  color: var(--ds-texto-forte); font-weight: 500; font-variant-numeric: tabular-nums;
}

/* ── cards de programa (milhas por programa) ── */
.ds-theme #pg-inicio .programa,
.ds-theme #pg-painel .programa {
  background: var(--ds-kpi-fundo); border: 1px solid var(--ds-brand-300);
  border-radius: var(--ds-raio-kpi); padding: var(--ds-esp-16);
}
.ds-theme #pg-inicio .programa h3,
.ds-theme #pg-painel .programa h3 {
  color: var(--ds-titulo); font-size: var(--ds-tam-sec); font-weight: 500;
  letter-spacing: var(--ds-espaco-letras);
}
.ds-theme #pg-inicio .programa div,
.ds-theme #pg-painel .programa div { font-size: 13px; }
.ds-theme #pg-inicio .programa div span:first-child,
.ds-theme #pg-painel .programa div span:first-child { color: var(--ds-texto-meta); }

/* ── metas e bonificações ── */
.ds-theme #pg-inicio .meta-linha { border-bottom: 1px solid var(--ds-n-200); }

/* ============================================================
   OCULTAR VALORES (olho no cabeçalho) — template 2
   ============================================================ */
.ds-olho {
  width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--ds-n-300); border-radius: var(--ds-raio-botao);
  background: var(--ds-branco); color: var(--ds-texto-sec); cursor: pointer;
}
.ds-olho:hover { background: var(--ds-n-50); color: var(--ds-brand-600); }
.ds-olho[aria-pressed="true"] { background: var(--ds-brand-50); color: var(--ds-brand-700); border-color: var(--ds-brand-300); }
.ds-olho svg { width: 20px; height: 20px; }
.ds-olho:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; }

/* quando ativo, mascara os números da área de conteúdo (não some com o
   layout — só borra, para atender cliente com a tela compartilhada) */
.ds-ocultar .kpi b,
.ds-ocultar .ds-kpi-valor,
.ds-ocultar .calculo b,
.ds-ocultar .insight-valor,
.ds-ocultar .num,
.ds-ocultar td.num,
.ds-ocultar .programa div span:last-child,
.ds-ocultar .ds-def-item dd,
.ds-ocultar .kpi span:last-child {
  filter: blur(7px); user-select: none; cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .ds-olho { transition: none; }
}

/* ============================================================
   GASTOS (#pg-gastos) — tela financeira com design próprio
   ------------------------------------------------------------
   Não usa os componentes padrão (tem ~109 linhas .gastos-*).
   Abordagem eficiente e segura: reaponta as variáveis LEGADAS
   pra paleta ds (recolore texto/acentos/barras de uma vez) +
   overrides de superfície/tipo nos containers, preservando
   TODOS os grids e a estrutura. Só visual; nada de handler.
   ============================================================ */
.ds-theme #pg-gastos {
  --cinza-900: var(--ds-texto-forte); --cinza-600: var(--ds-texto-meta);
  --azul-700: var(--ds-brand-700); --azul-800: var(--ds-brand-800);
  --marca: var(--ds-brand-600); --sub: var(--ds-texto-meta);
  --amber: var(--ds-alerta-icone); --vermelho: var(--ds-erro-icone); --verde: var(--ds-ok-icone);
  --ok: var(--ds-kpi-positivo); --erro: var(--ds-kpi-negativo); --alerta: var(--ds-alerta-texto);
  font-family: var(--ds-fonte); letter-spacing: var(--ds-espaco-letras);
}

/* tipografia */
.ds-theme #pg-gastos .gastos-hero h2 {
  color: var(--ds-titulo); font-family: var(--ds-fonte); letter-spacing: var(--ds-espaco-letras);
}
.ds-theme #pg-gastos h2, .ds-theme #pg-gastos h3 {
  font-family: var(--ds-fonte); letter-spacing: var(--ds-espaco-letras);
}
.ds-theme #pg-gastos .modulo-tag {
  background: var(--ds-brand-50); color: var(--ds-brand-800); border-radius: var(--ds-esp-8);
}

/* superfícies neutras → cartão ds */
.ds-theme #pg-gastos .card { border: 1px solid var(--ds-n-200); border-radius: var(--ds-raio-avatar); }
.ds-theme #pg-gastos .gastos-hero-bloco,
.ds-theme #pg-gastos .gastos-status-mes {
  border: 1px solid var(--ds-n-200); border-radius: var(--ds-raio-avatar);
  background: var(--ds-branco); box-shadow: none;
}
.ds-theme #pg-gastos .gastos-form-bloco,
.ds-theme #pg-gastos .gastos-categoria-linha,
.ds-theme #pg-gastos .gastos-saude-metricas div {
  border: 1px solid var(--ds-n-200); border-radius: var(--ds-raio-kpi); background: var(--ds-painel-frio);
}
.ds-theme #pg-gastos .gastos-pendencia-resumo {
  border: 1px dashed var(--ds-brand-300); border-radius: var(--ds-raio-kpi); background: var(--ds-brand-25);
}
.ds-theme #pg-gastos .gastos-status-mes .linha { border-bottom-color: var(--ds-n-100); }
.ds-theme #pg-gastos .gastos-saude-card { border-left-color: var(--ds-n-200); }

/* pendências e faixas de saúde → tints semânticos ds */
.ds-theme #pg-gastos .gastos-pendencia {
  border: 1px solid var(--ds-n-200); border-left: 4px solid var(--ds-alerta-icone);
  border-radius: var(--ds-raio-kpi); background: var(--ds-alerta-fundo);
}
.ds-theme #pg-gastos .gastos-pendencia.fatura { border-left-color: var(--ds-erro-icone); background: var(--ds-erro-fundo); }
.ds-theme #pg-gastos .gastos-pendencia.pago { border-left-color: var(--ds-ok-icone); background: var(--ds-ok-fundo); }
.ds-theme #pg-gastos .gastos-saude-faixa { border-radius: var(--ds-raio-kpi); background: var(--ds-painel-frio); }
.ds-theme #pg-gastos .gastos-saude-faixa.positivo { background: var(--ds-ok-fundo); }
.ds-theme #pg-gastos .gastos-saude-faixa.alerta { background: var(--ds-alerta-fundo); }
.ds-theme #pg-gastos .gastos-saude-faixa.risco { background: var(--ds-erro-fundo); }

/* barra de progresso → gradiente da marca */
.ds-theme #pg-gastos .gastos-barra { background: var(--ds-n-200); }
.ds-theme #pg-gastos .gastos-barra i { background: var(--ds-grad-marca); }

/* KPIs do período → cartão de KPI ds */
.ds-theme #pg-gastos .kpi {
  background: var(--ds-kpi-fundo); border: 1px solid var(--ds-brand-300);
  border-radius: var(--ds-raio-kpi); min-height: 0;
}
.ds-theme #pg-gastos .kpi.positivo { border-color: var(--ds-ok-icone); }
.ds-theme #pg-gastos .kpi.risco { border-color: var(--ds-erro-icone); }
.ds-theme #pg-gastos .kpi.alerta { border-color: var(--ds-alerta-icone); }
.ds-theme #pg-gastos .kpi b { color: var(--ds-texto-forte); font-variant-numeric: tabular-nums; }
.ds-theme #pg-gastos .kpi span { color: var(--ds-texto-sec); }

/* campos e botões */
.ds-theme #pg-gastos input:not([type=checkbox]):not([type=radio]):not([type=file]),
.ds-theme #pg-gastos select,
.ds-theme #pg-gastos textarea {
  height: 46px; border: 1px solid var(--ds-n-300); border-radius: var(--ds-raio-input);
  padding: 0 14px; background: var(--ds-branco); box-shadow: none;
  font-family: var(--ds-fonte); font-size: var(--ds-tam-sec); font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); color: var(--ds-texto-forte);
}
.ds-theme #pg-gastos .gastos-form-bloco input,
.ds-theme #pg-gastos .gastos-form-bloco select { min-height: 46px; }
.ds-theme #pg-gastos textarea { height: auto; min-height: 84px; padding: var(--ds-esp-12) 14px; }
.ds-theme #pg-gastos select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background: var(--ds-branco) var(--ds-icone-chevron) no-repeat right 12px center; background-size: 16px 16px;
}
.ds-theme #pg-gastos input:focus, .ds-theme #pg-gastos select:focus, .ds-theme #pg-gastos textarea:focus {
  outline: none; border-color: var(--ds-foco); box-shadow: 0 0 0 2px var(--ds-brand-200);
}
.ds-theme #pg-gastos label {
  color: var(--ds-texto-sec); font-family: var(--ds-fonte); font-size: var(--ds-tam-sec);
  font-weight: 500; letter-spacing: var(--ds-espaco-letras);
}
.ds-theme #pg-gastos .acao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-esp-8);
  background: var(--ds-grad-marca); color: var(--ds-brand-00); border: 0;
  border-radius: var(--ds-raio-botao); min-height: 44px; padding: 12px 18px;
  font-family: var(--ds-fonte); font-weight: 500; letter-spacing: var(--ds-espaco-letras); box-shadow: none;
}
.ds-theme #pg-gastos .acao:hover { background: var(--ds-grad-marca-hover); }
.ds-theme #pg-gastos .leve {
  background: var(--ds-branco); border: 1px solid var(--ds-n-300); border-radius: var(--ds-esp-8);
  color: var(--ds-texto-sec); font-family: var(--ds-fonte); font-weight: 500;
  letter-spacing: var(--ds-espaco-letras);
}
.ds-theme #pg-gastos .leve:hover { background: var(--ds-n-50); color: var(--ds-brand-700); }
.ds-theme #pg-gastos input:focus-visible, .ds-theme #pg-gastos select:focus-visible,
.ds-theme #pg-gastos .acao:focus-visible, .ds-theme #pg-gastos .leve:focus-visible {
  outline: 2px solid var(--ds-foco); outline-offset: 2px;
}

/* toggle Recorrente/Pontual (usa .seg-btn legado dark) → tabs ds */
.ds-theme #pg-gastos .seg {
  display: inline-flex; background: var(--ds-n-100); border: 0; border-radius: var(--ds-raio-chip);
  padding: var(--ds-esp-4); gap: var(--ds-esp-2); overflow: hidden;
}
.ds-theme #pg-gastos .seg-btn {
  border: 0; background: none; border-radius: 9px; padding: 8px 14px;
  font-family: var(--ds-fonte); font-size: var(--ds-tam-sec); font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); color: var(--ds-texto-sec); cursor: pointer;
}
.ds-theme #pg-gastos .seg-btn.ativo {
  background: var(--ds-branco); color: var(--ds-brand-900); box-shadow: 0 1px 3px rgba(16, 29, 40, .12);
}
/* rótulo das métricas de saúde em bloco (label acima do valor) */
.ds-theme #pg-gastos .gastos-saude-metricas div small { display: block; margin-bottom: 2px; }
.ds-theme #pg-gastos .gastos-saude-metricas div b { color: var(--ds-texto-forte); font-variant-numeric: tabular-nums; }