main .dashboard-graficos,
main .dashboard-graficos:hover {
  margin-top: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
main .dashboard-graficos .graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: stretch;
  gap: 1rem;
}
.dashboard-graficos .dashboard-grafico-card {
  min-width: 0;
  padding: 1.25rem;
  border-radius: var(--card-border-radius);
  color: var(--clr-dark);
}
.dashboard-grafico-cabecalho { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; }
.dashboard-grafico-cabecalho > div { flex: 1; min-width: 140px; }
.dashboard-grafico-cabecalho > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  font-size: 30px;
  color: var(--clr-dark-variant);
}
main .dashboard-grafico-cabecalho h2 { margin: 0; font-size: 1rem; line-height: 1.4; }
.dashboard-grafico-cabecalho p { margin-top: .25rem; color: var(--clr-dark-variant); font-size: .8rem; }
.dashboard-grafico-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; }
.dashboard-grafico-total strong { font-size: 2rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dashboard-grafico-total span { color: var(--clr-dark-variant); font-size: .8rem; }
.dashboard-grafico-carregando { display: flex; align-items: center; justify-content: center; height: 360px; }
.dashboard-grafico-area { position: relative; height: 280px; min-width: 0; }
.dashboard-grafico-area:has(canvas[hidden]) { display: none; }
.dashboard-graficos [hidden] { display: none !important; }
@media (max-width: 540px) {
  .dashboard-graficos .dashboard-grafico-card { padding: 1rem; }
  .dashboard-grafico-area { height: 260px; }
  .dashboard-grafico-carregando { height: 340px; }
}

.dashboard-grafico-cabecalho .dashboard-grafico-filtro {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--clr-dark-variant);
  font-size: .72rem;
  font-weight: 500;
}
.portal-refinado main #filtroAno {
  width: 90px;
  appearance: auto;
  min-height: 38px;
  padding: .4rem .65rem;
  border-radius: 8px;
  background: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, .15);
  color: var(--clr-dark);
  font-size: .85rem;
  cursor: pointer;
}
.portal-refinado main #filtroAno option {
  background: var(--clr-white);
  color: var(--clr-dark);
}

/* O painel de prazos substitui o gráfico de contratos na segunda coluna. */
main .dashboard-graficos { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:1rem; }
main .dashboard-graficos .graficos { display:block; min-width:0; }
main .dashboard-graficos .graficos > .dashboard-grafico-card { height:100%; }
main .dashboard-graficos > #prazosProximos { margin:0; min-width:0; }
@media(max-width:900px) { main .dashboard-graficos { grid-template-columns:minmax(0,1fr); } }

/* Dois gráficos agrupados à esquerda, prazos próximos à direita. */
main .dashboard-graficos .graficos {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
  align-content:start;
}
main .dashboard-graficos .graficos > .dashboard-grafico-card { height:auto; }
main .dashboard-graficos .dashboard-grafico-area { height:230px; }
@media(max-width:900px) {
  main .dashboard-graficos .graficos { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  main .dashboard-graficos .graficos { grid-template-columns:minmax(0,1fr); }
}

/* Carrossel de indicadores: um gráfico por vez, com controles iguais aos atalhos. */
main .dashboard-graficos .dashboard-graficos-carrossel { min-width:0; display:flex; flex-direction:column; }
main .dashboard-graficos .dashboard-graficos-navegacao {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  min-height:2rem; margin-bottom:.65rem;
}
main .dashboard-graficos .dashboard-graficos-navegacao h2 {
  margin:0; font-size:1rem; font-weight:600; color:var(--clr-dark);
}
main .dashboard-graficos .dashboard-graficos-setas { display:flex; align-items:center; gap:.4rem; }
main .dashboard-graficos #graficosDashboard {
  display:flex; gap:0; min-width:0; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-inline:contain;
  scrollbar-width:none; -ms-overflow-style:none; align-items:stretch;
}
main .dashboard-graficos #graficosDashboard::-webkit-scrollbar { display:none; }
main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card {
  flex:0 0 100%; width:100%; min-width:0; height:auto; scroll-snap-align:start;
}
main .dashboard-graficos #graficosDashboard:focus-visible {
  outline:2px solid var(--clr-primary); outline-offset:2px; border-radius:var(--card-border-radius);
}
@media(max-width:900px) { main .dashboard-graficos #graficosDashboard { grid-template-columns:none; } }
@media(prefers-reduced-motion:reduce) { main .dashboard-graficos #graficosDashboard { scroll-behavior:auto; } }

/* Mobile: impede que o trilho herde altura esticada e garante deslize lateral. */
main .dashboard-graficos #graficosDashboard {
  display:flex !important;
  flex-wrap:nowrap;
  grid-template-columns:none !important;
  align-items:flex-start;
  height:auto;
  max-height:none;
  touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;
}
main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card {
  box-sizing:border-box;
  flex:0 0 100%;
  width:100%;
  max-width:100%;
  height:auto !important;
  min-height:0;
  align-self:flex-start;
}
main .dashboard-graficos .dashboard-graficos-carrossel { align-self:start; }
main .dashboard-graficos #graficosDashboard .dashboard-grafico-carregando { height:260px; }
main .dashboard-graficos #graficosDashboard .dashboard-grafico-area { height:230px; }
@media(max-width:650px) {
  main .dashboard-graficos { align-items:start; }
  main .dashboard-graficos #graficosDashboard .dashboard-grafico-area { height:205px; }
  main .dashboard-graficos #graficosDashboard .dashboard-grafico-carregando { height:220px; }
  main .dashboard-graficos #graficosDashboard .dashboard-grafico-card { padding:1rem; }
  main .dashboard-graficos #graficosDashboard .dashboard-grafico-total { margin:.8rem 0; }
}

/* Acabamento: respiro entre slides, controles somente no desktop e alturas iguais. */
main .dashboard-graficos #graficosDashboard { gap:12px; align-items:stretch; }
main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card {
  flex:0 0 100%;
  scroll-snap-align:start;
  align-self:stretch;
}
@media(min-width:901px) {
  main .dashboard-graficos { align-items:stretch; }
  main .dashboard-graficos > #prazosProximos {
    align-self:stretch;
    height:100%;
    box-sizing:border-box;
  }
  main .dashboard-graficos .dashboard-graficos-carrossel {
    align-self:stretch;
    min-height:0;
  }
  main .dashboard-graficos #graficosDashboard { flex:1 1 auto; min-height:0; }
  main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card {
    height:100% !important;
    box-sizing:border-box;
  }
}
@media(max-width:650px) {
  main .dashboard-graficos .dashboard-graficos-setas { display:none; }
  main .dashboard-graficos #graficosDashboard {
    gap:14px;
    scroll-padding-inline:0;
    touch-action:pan-x pan-y;
  }
  main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card {
    flex:0 0 100%;
    align-self:flex-start;
    height:auto !important;
  }
}

/* Peek: mostra uma faixa do próximo indicador, sem cortar o gráfico atual. */
main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card {
  flex:0 0 89%;
  width:89%;
  max-width:89%;
  scroll-snap-align:start;
}
main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card:last-child {
  scroll-snap-align:end;
}
@media(min-width:901px) {
  main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card {
    flex-basis:89%;
    width:89%;
    max-width:89%;
  }
}
@media(max-width:650px) {
  main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card {
    flex:0 0 89%;
    width:89%;
    max-width:89%;
  }
}

/* Refinamento: indicadores inteiros, sem prévia cortada do próximo. */
main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card {
  flex:0 0 100%;
  width:100%;
  max-width:100%;
  scroll-snap-align:start;
}
@media(min-width:901px) {
  main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card {
    flex-basis:100%;
    width:100%;
    max-width:100%;
  }
}
@media(max-width:650px) {
  main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card {
    flex:0 0 100%;
    width:100%;
    max-width:100%;
  }
}

/* Gráficos: sem molduras, com superfície separada do fundo. */
.portal-refinado main .dashboard-graficos #graficosDashboard > .dashboard-grafico-card {
  border: 0;
  box-shadow: none;
}