/* Previsão horária: o desenho segue a leitura vertical de apps de clima. */
.hourly-weather-chart { height: 368px; flex: none; }
.hourly-weather-chart-canvas { position: relative; height: 280px; margin-top: 12px; padding: 0 4px 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: #279eea transparent; }
.hourly-weather-chart-canvas::-webkit-scrollbar { height: 15px; }
.hourly-weather-chart-canvas::-webkit-scrollbar-track { margin: 0 14px; background: transparent; }
.hourly-weather-chart-canvas::-webkit-scrollbar-thumb { min-width: 48px; border: 2px solid transparent; border-radius: 999px; background: linear-gradient(90deg, #1595e8, #45b7fb); background-clip: padding-box; }
.hourly-weather-chart-canvas::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #087ed1, #22a7f5); background-clip: padding-box; }
.hourly-weather-chart.daily-forecast-mode { height: 318px; }
.home-chart-toolbar { min-height: 34px; }
.home-chart-toolbar small { color: #7187a0; font-size: .82rem; }
.home-temporal-canvas { height: 280px !important; margin-top: 12px !important; }
.hourly-weather-points { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--hourly-items), minmax(0, 1fr)); min-width: 100%; height: 100%; }
.hourly-weather-point { display: grid; min-width: 0; grid-template-rows: 22px 58px 32px minmax(90px, 1fr) 26px; align-items: center; justify-items: center; gap: 3px; padding: 0 8px; color: #7187a0; text-align: center; }
.hourly-weather-point time { grid-row: 1; color: #607a99; font-size: .93rem; font-variant-numeric: tabular-nums; }
.hourly-weather-icon { display: grid; grid-row: 2; place-items: center; width: 68px; height: 56px; }
.hourly-weather-symbol { width: 68px; height: 56px; object-fit: contain; }
.hourly-weather-point strong { grid-row: 3; color: #082a59; font-size: 1.48rem; line-height: 1; letter-spacing: -.045em; }
.hourly-rain-chance { display: inline-flex; grid-row: 5; align-items: center; gap: 7px; color: #5d82ae; font-size: .97rem; font-weight: 500; }
.hourly-rain-chance .icon { width: 21px; height: 21px; color: #22a9f1; fill: #22a9f1; }
.hourly-temperature-line { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hourly-temperature-dots { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.hourly-temperature-dots i { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #1299ed; box-shadow: 0 1px 4px #128fe847; transform: translate(-50%, -50%); }
.hourly-grid-line { stroke: #dceefa; stroke-width: .45; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; }
.hourly-grid-line-vertical { stroke: #d9ebf8; }
.hourly-temperature-area { fill: url(#hourly-temperature-fill); }
.hourly-temperature-line polyline { fill: none; stroke: #1299ed; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .hourly-weather-chart { height: auto; } .hourly-weather-chart-canvas { height: 280px; margin-left: -8px; margin-right: -8px; padding-left: 0; padding-right: 0; width: calc(100% + 16px); } .hourly-weather-point { padding-left: 2px; padding-right: 2px; } }
/* No desktop a Visão geral ocupa uma única área de trabalho. Os cartões usam
   a altura disponível e a previsão por hora cresce quando a janela cresce. */
@media (min-width: 761px) {
  .app-layout:has(.overview-grid) { height: 100vh; overflow: hidden; }
  .app-layout:has(.overview-grid) .workspace { min-height: 0; overflow: hidden; }
  .app-layout:has(.overview-grid) .page-content { height: calc(100vh - 118px); padding-bottom: 22px; overflow: hidden; }
  .app-layout:has(.overview-grid) .overview-grid,
  .app-layout:has(.overview-grid) .overview-left,
  .app-layout:has(.overview-grid) .overview-right { height: 100%; min-height: 0; }
  .app-layout:has(.overview-grid) .overview-left,
  .app-layout:has(.overview-grid) .overview-right { gap: clamp(12px, 1.6vh, 20px); }
  .app-layout:has(.overview-grid) .weather-hero { height: clamp(178px, 20.6vh, 222px); }
  .app-layout:has(.overview-grid) .metric-card { height: clamp(158px, 20.5vh, 221px); }
  .app-layout:has(.overview-grid) .home-chart.hourly-weather-chart { display: block; flex: none; height: 368px; min-height: 0; }
  .app-layout:has(.overview-grid) .home-chart.hourly-weather-chart.daily-forecast-mode { height: 318px; }
  .app-layout:has(.overview-grid) .hourly-weather-chart-canvas { flex: none; height: 280px; min-height: 0; }
  .app-layout:has(.overview-grid) .home-daily-forecast { flex: none; height: 230px; min-height: 0; }
  .app-layout:has(.overview-grid) .forecast-card { flex: none; height: 431px; min-height: 0; }
  .app-layout:has(.overview-grid) .recent-card { flex: 1 1 0; height: auto; min-height: 0; }
}
@media (min-width: 761px) and (max-height: 850px) {
  .app-layout:has(.overview-grid) .forecast-card .card-title { height: 52px; }
  .app-layout:has(.overview-grid) .forecast-row { min-height: 54px; }
}

/* A visão geral pode crescer para acomodar os gráficos complementares. */
@media (min-width: 761px) {
  .app-layout:has(.overview-grid) { height: auto; min-height: 100vh; overflow: visible; }
  .app-layout:has(.overview-grid) .workspace { min-height: calc(100vh - 28px); overflow: visible; }
  .app-layout:has(.overview-grid) .page-content { height: auto; overflow: visible; padding-bottom: 32px; }
  .app-layout:has(.overview-grid) .overview-grid,
  .app-layout:has(.overview-grid) .overview-left,
  .app-layout:has(.overview-grid) .overview-right { height: auto; }
  .app-layout:has(.overview-grid) .recent-card { flex: none; min-height: 560px; }
}
html[data-theme="dark"] .hourly-weather-point strong { color: #edf7ff; }
html[data-theme="dark"] .hourly-weather-point time { color: #a6bbd0; }
html[data-theme="dark"] .hourly-grid-line { stroke: #294763; }
html[data-theme="dark"] .hourly-weather-chart-canvas { scrollbar-color: #52b8f4 transparent; }

/* Faixa de previsão diária navegável no mesmo cartão principal. */
.home-daily-forecast { position: relative; height: 230px; margin-top: 8px; }
.home-daily-forecast-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(142px, calc((100% - 48px) / 7)); gap: 8px; height: 100%; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 4px 16px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: #279eea transparent; }
.home-daily-forecast-scroll.fit-seven-days { grid-auto-flow: initial; grid-auto-columns: auto; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow-x: hidden; overscroll-behavior-inline: auto; scroll-snap-type: none; }
.home-daily-forecast-scroll::-webkit-scrollbar { height: 15px; }
.home-daily-forecast-scroll::-webkit-scrollbar-track { margin: 0 14px; background: transparent; }
.home-daily-forecast-scroll::-webkit-scrollbar-thumb { min-width: 48px; border: 2px solid transparent; border-radius: 999px; background: linear-gradient(90deg, #1595e8, #45b7fb); background-clip: padding-box; }
.home-daily-forecast-scroll::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #087ed1, #22a7f5); background-clip: padding-box; }
.daily-forecast-item { display: grid; min-height: 198px; align-content: center; justify-items: center; gap: 7px; padding: 6px 8px; scroll-snap-align: start; text-align: center; }
.daily-forecast-item time { color: #55799d; font-size: .82rem; font-weight: 600; }
.daily-forecast-item time small { display: block; margin-top: 3px; color: #91a5bc; font-size: .71rem; font-weight: 400; }
.forecast-meteocon { width: 48px; height: 48px; object-fit: contain; }
.daily-forecast-item .forecast-meteocon { width: 64px; height: 64px; }
.daily-forecast-item strong { color: #0b2e60; font-size: 1.18rem; }
.daily-forecast-item strong small { color: #748ba6; font-size: .64rem; font-weight: 500; vertical-align: baseline; }
.daily-forecast-rain { display: inline-flex; align-items: center; gap: 4px; color: #168fe9; font-size: .86rem; font-weight: 700; }
.daily-forecast-rain .icon { width: 17px; height: 17px; fill: currentColor; }
html[data-theme="dark"] .daily-forecast-item { border-color: #294763; }
html[data-theme="dark"] .daily-forecast-item strong { color: #edf7ff; }