/* Dia, noite e clima (public/clima.js): o fundo atrás do canvas com a cor do céu e o chip do tempo no topo. */

/* o canvas é transparente fora do prédio: o fundo do mapa ganha a cor do céu do momento, misturada ao fundo de sempre.
   clima.js põe --clima-ceu (cor) e --clima-forca (quanto dela, já mais forte no fim de tarde, à noite e com chuva) */
.mapa[data-clima] {
  --clima-mistura: var(--clima-forca);
  background:
    radial-gradient(120% 90% at 50% 40%,
      color-mix(in srgb, var(--clima-ceu) calc(var(--clima-mistura) * .7), color-mix(in srgb, var(--acento-suave) 70%, var(--fundo))),
      color-mix(in srgb, var(--clima-ceu) var(--clima-mistura), var(--fundo)));
}
/* tema escuro: o céu claro do dia quase não entra (clarearia a tela); a noite e o tempo fechado entram um pouco */
@media (prefers-color-scheme: dark) {
  .mapa[data-clima] { --clima-mistura: calc(var(--clima-forca) * (.25 + .5 * var(--clima-noite, 0))); }
}

/* chip: nome do escritório · cidade · tempo e temperatura, ao lado da marca */
.clima-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 28px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 999px;
  background: var(--painel); color: var(--tinta); font: 500 12.5px/1 var(--corpo); white-space: nowrap; overflow: hidden; cursor: default; flex: 0 1 auto; }
.clima-chip[hidden] { display: none; }
.clima-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.clima-chip .clima-nome { font-weight: 600; }
.clima-chip .clima-cidade { color: var(--suave); }
.clima-chip i { font-style: normal; color: var(--suave); opacity: .6; }
.clima-chip .clima-tempo { display: inline-flex; align-items: center; gap: 4px; flex: none; overflow: visible; }
.clima-chip svg { width: 16px; height: 16px; flex: none; color: var(--suave); }
.clima-chip b { font: 500 12.5px/1 var(--mono); }
/* a contagem de quem está online cede espaço ao chip */
.esc-marca:has(.clima-chip:not([hidden])) .esc-online { flex: 0 2 auto; min-width: 0; }

@media (max-width: 760px) {
  .clima-chip .clima-nome, .clima-chip .clima-nome + i { display: none; }
}
@media (max-width: 480px) {
  .clima-chip .clima-cidade, .clima-chip .clima-cidade + i { display: none; }
}