/* JDServer-Webs v6.1 — forecast-hourly.css */
#fc-hourly.card{
  overflow: hidden;
}

#fc-hourly.loading .fc-hourly-grid{
  opacity: .6;
  filter: saturate(.6);
}

.fc-hourly-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--card-border, rgba(0,0,0,.08));
}

.fc-hourly-head h3{
  margin: 0;
  font-size: 1.05rem;
}

#fc-hourly-refresh{
  min-width: 44px;
}

.fc-hourly-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
  padding: 12px;
}

.fc-hourly-day{
  grid-column: 1 / -1;
  font-size: .85rem;
  opacity: .8;
  padding: 2px 4px 0;
}

.fc-hour{
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 6px;
  align-items: end;
  justify-items: center;
  padding: 10px 6px;
  border: 1px solid var(--hist-border, rgba(0,0,0,.08));
  border-radius: 12px;
  background: var(--hist-row-alt, rgba(0,0,0,.03));
}

.h-time{
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
  opacity: .9;
}

.h-pop{
  position: relative;
  width: 32px;
  height: 100px;             /* alto “máximo” de barra */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.h-pop .bar{
  width: 12px;
  border-radius: 6px;
  background: linear-gradient(to top,
    rgba(56,189,248,.9),
    rgba(56,189,248,.4)
  );
}

.h-pop .val{
  position: absolute;
  bottom: -18px;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.h-temp{
  font-variant-numeric: tabular-nums;
}

.h-wind{
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: .9rem;
}

.h-wind .wind-dir{
  opacity: .8;
}

/* Esqueleto */
.skel{
  padding: 16px;
  opacity: .75;
}

.no-data{
  padding: 16px;
  text-align: center;
  opacity: .8;
}

/* Responsive */
@media (max-width: 640px){
  .fc-hourly-grid{
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
  }
  .h-pop{ height: 88px; }
}