/*
  Financiamento APS - Frontend dashboard (Tema claro institucional)
  Escopo: tudo dentro de .ped-dashboard (nao vaza para o tema do site)
*/

.ped-dashboard{
  /* Paleta clara e neutra (destaque discreto em roxo) */
  --ped-primary:#2F6FB7;            /* azul institucional (referencia) */
  --ped-primary-2:#2F6FB7;
  --ped-accent:#2F6FB7;

  --ped-bg:#F5F7FB;
  --ped-bg-2:#FFFFFF;
  --ped-card:#FFFFFF;

  --ped-text:#111827;
  --ped-text-muted:#6B7280;
  --ped-border:#E5E7EB;
  --ped-border-strong:#D1D5DB;
  --ped-shadow:0 12px 28px rgba(17,24,39,0.06);
  --ped-shadow-soft:0 8px 18px rgba(17,24,39,0.06);

  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.35;
  color:var(--ped-text);
}

/* Container geral */
.ped-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:18px;
  background:linear-gradient(180deg, var(--ped-bg-2), var(--ped-bg));
  border:1px solid rgba(17,24,39,0.06);
  border-radius:22px;
  box-shadow:var(--ped-shadow);
}

/* Header */
.ped-header{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:16px;
  padding:16px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, #2F6FB7, #2B67AA);
  border:1px solid rgba(17,24,39,0.06);
  box-shadow:0 12px 28px rgba(17,24,39,0.08);
}

.ped-title{
  font-size:18px;
  font-weight:800;
  margin:0;
  letter-spacing:0.2px;
  color:#FFFFFF;
}

.ped-sub{
  font-size:12px;
  color:rgba(255,255,255,0.85);
  margin:2px 0 0;
}

/* Filtros */
.ped-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
}

.ped-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:160px;
}

.ped-field label{
  font-size:12px;
  color:rgba(255,255,255,0.90);
  letter-spacing:0.02em;
}

.ped-field select{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.45);
  border-radius:12px;
  background:#fff;
  color:var(--ped-text);
  outline:none;
  box-shadow:0 6px 16px rgba(17,24,39,0.10);
}

.ped-field select:focus{
  border-color:#93C5FD;
  box-shadow:0 0 0 3px rgba(147,197,253,0.35), 0 10px 22px rgba(17,24,39,0.10);
}

/* Grid */
.ped-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
  align-items:stretch; /* mesma altura para colunas lado a lado */
}

/* Linha de um programa (cards + grafico) */
.ped-row{
  grid-column:span 12;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
  align-items:stretch; /* cards e grafico ficam com a mesma altura */
}

/* Bloco de CARDS (agora com borda como o grafico) */
.ped-panel{
  grid-column:span 12;
  padding:18px 18px;
  background:var(--ped-card);
  border:1px solid var(--ped-border);
  border-radius:16px;
  box-shadow:var(--ped-shadow-soft);
  height:100%;
  display:flex;
  flex-direction:column;
}

@media(min-width:900px){
  .ped-panel.half{grid-column:span 6}
}

/* Card generico (usado no grafico / blocos) */
.ped-card{
  grid-column:span 12;
  background:var(--ped-card);
  border:1px solid var(--ped-border);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--ped-shadow-soft);
  height:100%;
  display:flex;
  flex-direction:column;
}

@media(min-width:900px){
  .ped-card.half{grid-column:span 6}
}

/* Titulos (preto, sem lilas) */
.ped-card h3,
.ped-section-title{
  margin:0 0 14px;
  font-size:16px;
  font-weight:700;
  letter-spacing:0.01em;
  color:var(--ped-text);
}

/* Titulo dos cards: somente "eSF (01/2026)" */
.ped-section-title{padding:0 2px;}

/* KPIs */
.ped-kpis{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}

/* Grupos de KPIs (ex.: eSB -> Situação / Valores) */
.ped-kpi-group{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ped-kpi-group + .ped-kpi-group{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--ped-border);
}

.ped-kpi-group-title{
  font-size:13px;
  font-weight:700;
  color:var(--ped-text);
  display:flex;
  align-items:center;
  gap:8px;
}

.ped-kpi-group-title::before{
  content:'';
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--ped-accent);
  display:inline-block;
}

.ped-kpi{
  grid-column:span 6;
  background:#F3F4F6;
  border:1px solid var(--ped-border);
  border-radius:12px;
  padding:14px 14px;
}

@media(min-width:900px){
  .ped-kpi{grid-column:span 3}
}

.ped-kpi .k{
  font-size:12px;
  color:var(--ped-text-muted);
  font-weight:600;
  letter-spacing:0.02em;
  line-height:1.2;
}

.ped-kpi .v{
  margin-top:8px;
  /* Valores grandes (especialmente no eSB) podem estourar o card; use tamanho responsivo */
  font-size:clamp(14px, 1.7vw, 18px);
  font-weight:700;
  color:var(--ped-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}

.ped-kpi .hint{
  margin-top:6px;
  font-size:12px;
  color:var(--ped-text-muted);
}

/* Grafico */
.ped-chart-wrap{
  margin-top:14px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--ped-border);
  background:#FFFFFF;
  flex:1;           /* ocupa o espaco restante do card */
  min-height:240px; /* evita ficar pequeno demais */
  display:flex;
}

.ped-chart-wrap canvas{
  width:100% !important;
  height:100% !important;  /* altura acompanha o card (igual aos cards à esquerda) */
}

/* Loading / mensagens */
.ped-note{
  font-size:12px;
  color:var(--ped-text-muted);
  margin:8px 0 0;
}

.ped-error{
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(220,38,38,0.20);
  background:rgba(220,38,38,0.06);
  color:#7F1D1D;
}

/* Separacao */
.ped-divider{height:1px; background:var(--ped-border); margin:14px 0;}