/* Camada climática do site — recebe intensidade apenas do endpoint próprio. */
.cuiaba-weather {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  max-width: 250px;
  padding: 5px 11px 5px 7px;
  border: 1px solid rgba(133, 191, 226, .2);
  border-radius: 8px;
  background: rgba(10, 31, 52, .72);
  color: #eaf6ff;
  transition: border-color .3s ease, background-color .3s ease;
}

.cuiaba-weather-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 7px;
  color: var(--cyan);
  background: rgba(8, 201, 245, .1);
}

.cuiaba-weather-icon .icon { width: 18px; height: 18px; }

.cuiaba-weather-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  line-height: 1.15;
}

.cuiaba-weather-copy strong {
  overflow: hidden;
  color: #eef8ff;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuiaba-weather-copy small {
  color: #9eb3c8;
  font-size: 8px;
  letter-spacing: .035em;
  white-space: nowrap;
}

.cuiaba-weather[data-state="rain"] {
  border-color: rgba(74, 180, 236, .4);
  background: rgba(9, 37, 63, .82);
}

.cuiaba-weather[data-state="rain"] .cuiaba-weather-icon {
  color: #70dafa;
  background: rgba(40, 160, 214, .16);
}

.cuiaba-weather[data-state="clear"] .cuiaba-weather-icon { color: #93d7ff; }
.cuiaba-weather[data-state="pending"] .cuiaba-weather-icon { color: #a7b8c9; }

#rain-canvas {
  position: fixed;
  z-index: 31;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: .8;
}

.weather-disclosure {
  max-width: 950px;
  margin: 18px auto 0;
  padding: 0 24px;
  color: #8196aa;
  font-size: 10px;
  line-height: 1.7;
}

.weather-disclosure p { margin: 0; }
.weather-disclosure a { color: #81dff5; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.weather-disclosure a:hover { color: #c2f3ff; }

@media (max-width: 760px) {
  .cuiaba-weather { max-width: 100%; }
  #rain-canvas { opacity: .68; }
}

@media (max-width: 430px) {
  .cuiaba-weather { max-width: 235px; }
  .weather-disclosure { padding-inline: 18px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  #rain-canvas { display: none; }
}