/* Chavantes Notícia — Clima Tempo Automático v1.2.0 */

.cn-clima {
  --cn-bg: #ffffff;
  --cn-fg: #0f1a2b;
  --cn-mut: #566175;
  --cn-line: #e5eaf1;
  --cn-soft: #f2f5f9;
  --cn-bar: #dde5ee;
  --cn-acc: #b3201f;
  --cn-focus: #1c6dd0;
  --cn-alerta-bg: #fff5de;
  --cn-alerta-bd: #efd698;
  --cn-alerta-fg: #6b3f06;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 24px auto;
  padding: 0 0 4px;
  border: 1px solid var(--cn-line);
  border-radius: 24px;
  background: var(--cn-bg);
  color: var(--cn-fg);
  box-shadow: 0 10px 30px rgba(15, 26, 43, .08);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
}

.cn-tema-escuro {
  --cn-bg: #111927;
  --cn-fg: #e9eef6;
  --cn-mut: #9eaabd;
  --cn-line: #243148;
  --cn-soft: #1a2538;
  --cn-bar: #2b3a53;
  --cn-acc: #ff8a85;
  --cn-focus: #6cb0ff;
  --cn-alerta-bg: #2b2413;
  --cn-alerta-bd: #5a4a1b;
  --cn-alerta-fg: #f1d9a3;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: dark) {
  .cn-tema-auto {
    --cn-bg: #111927;
    --cn-fg: #e9eef6;
    --cn-mut: #9eaabd;
    --cn-line: #243148;
    --cn-soft: #1a2538;
    --cn-bar: #2b3a53;
    --cn-acc: #ff8a85;
    --cn-focus: #6cb0ff;
    --cn-alerta-bg: #2b2413;
    --cn-alerta-bd: #5a4a1b;
    --cn-alerta-fg: #f1d9a3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }
}

.cn-clima *, .cn-clima *::before, .cn-clima *::after { box-sizing: border-box; }
.cn-clima [hidden] { display: none !important; }
.cn-clima p { margin: 0; }

.cn-clima .cn-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Topo: marca + busca ---------- */

.cn-clima .cn-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 16px 18px 12px;
}

.cn-clima .cn-marca {
  margin-right: auto;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--cn-acc);
}

.cn-clima .cn-busca {
  position: relative;
  display: flex;
  flex: 1 1 280px;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.cn-clima .cn-busca input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--cn-line);
  border-radius: 999px;
  background: var(--cn-soft);
  color: inherit;
  font: inherit;
  font-size: 15px;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.cn-clima .cn-busca input[type="search"]::placeholder { color: var(--cn-mut); opacity: 1; }

.cn-clima .cn-busca input[type="search"]:focus {
  outline: 2px solid var(--cn-focus);
  outline-offset: 1px;
  background: var(--cn-bg);
}

.cn-clima .cn-btn-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cn-line);
  border-radius: 50%;
  background: var(--cn-soft);
  color: var(--cn-fg);
  cursor: pointer;
  box-shadow: none;
}

.cn-clima .cn-btn-icone:hover { background: var(--cn-line); }
.cn-clima .cn-btn-icone svg { width: 20px; height: 20px; }

.cn-clima .cn-btn-icone:focus-visible,
.cn-clima .cn-chip:focus-visible,
.cn-clima .cn-horas:focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}

.cn-clima .cn-lista {
  position: absolute;
  z-index: 30;
  top: 48px;
  left: 0;
  right: 0;
  max-height: 300px;
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
  background: var(--cn-bg);
  border: 1px solid var(--cn-line);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(15, 26, 43, .22);
}

.cn-clima .cn-lista li {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.cn-clima .cn-lista li[aria-selected="true"],
.cn-clima .cn-lista li:hover { background: var(--cn-soft); }

.cn-clima .cn-lista small { display: block; font-size: 12px; color: var(--cn-mut); }
.cn-clima .cn-lista li.cn-vazio { color: var(--cn-mut); cursor: default; background: none; }

/* ---------- Atalhos de cidades ---------- */

.cn-clima .cn-chips {
  display: flex;
  gap: 8px;
  padding: 0 18px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cn-clima .cn-chips::-webkit-scrollbar { display: none; }

.cn-clima .cn-chip {
  flex: none;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--cn-line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: none;
}

.cn-clima .cn-chip:hover { background: var(--cn-soft); }

.cn-clima .cn-chip.is-ativo {
  background: var(--cn-fg);
  border-color: var(--cn-fg);
  color: var(--cn-bg);
}

.cn-clima .cn-msg {
  margin: 0 18px 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--cn-soft);
  color: var(--cn-fg);
  font-size: 14px;
}

/* ---------- Corpo (atualizado automaticamente) ---------- */

.cn-clima .cn-clima-body { transition: opacity .2s ease; }
.cn-clima.cn-carregando .cn-clima-body { opacity: .45; }

.cn-clima .cn-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 12px;
  padding: 22px 22px 22px 26px;
  border-radius: 20px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  background: linear-gradient(135deg, #1a56a8, #2b7bcf);
}

.cn-clima .cn-bg-clear-day    { background: linear-gradient(135deg, #1a56a8, #2b7bcf); }
.cn-clima .cn-bg-clear-night  { background: linear-gradient(135deg, #0b1633, #233468); }
.cn-clima .cn-bg-partly-day   { background: linear-gradient(135deg, #2a5a8c, #487daf); }
.cn-clima .cn-bg-partly-night { background: linear-gradient(135deg, #17224a, #34456f); }
.cn-clima .cn-bg-cloud        { background: linear-gradient(135deg, #465366, #647387); }
.cn-clima .cn-bg-rain         { background: linear-gradient(135deg, #2e4559, #4a6781); }
.cn-clima .cn-bg-storm        { background: linear-gradient(135deg, #23263b, #403d5c); }
.cn-clima .cn-bg-fog          { background: linear-gradient(135deg, #566370, #74818d); }

.cn-clima .cn-local {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
}

.cn-clima .cn-temp {
  font-size: 80px;
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.cn-clima .cn-temp sup {
  position: relative;
  top: .12em;
  margin-left: 2px;
  font-size: .38em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: top;
}

.cn-clima .cn-cond { margin: 8px 0 3px; font-size: 19px; font-weight: 600; }
.cn-clima .cn-sens { font-size: 14px; opacity: .95; }

.cn-clima .cn-hero-icone .cn-ico {
  display: block;
  width: 116px;
  height: 116px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .22));
}

/* ---------- Detalhes ---------- */

.cn-clima .cn-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 18px 0;
  border-top: 1px solid var(--cn-line);
}

.cn-clima .cn-stat {
  min-width: 0;
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid var(--cn-line);
}

.cn-clima .cn-stat span { display: block; font-size: 12px; color: var(--cn-mut); }
.cn-clima .cn-stat b { display: block; margin-top: 3px; font-size: 16px; font-weight: 700; }

.cn-clima h3.cn-sec {
  margin: 22px 18px 10px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}

/* ---------- Próximas horas ---------- */

.cn-clima .cn-horas {
  display: flex;
  gap: 6px;
  margin: 0 18px;
  padding: 2px 0 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  border-radius: 12px;
}

.cn-clima .cn-hora {
  display: flex;
  flex: 0 0 64px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 14px;
  background: var(--cn-soft);
  font-size: 13px;
  scroll-snap-align: start;
}

.cn-clima .cn-hora:first-child { background: var(--cn-fg); color: var(--cn-bg); }
.cn-clima .cn-hora .cn-ico { width: 32px; height: 32px; }
.cn-clima .cn-hora b { font-size: 15px; }
.cn-clima .cn-hora small { min-height: 14px; font-size: 11px; color: var(--cn-mut); }
.cn-clima .cn-hora:first-child small { color: inherit; opacity: .8; }

/* ---------- Próximos dias ---------- */

.cn-clima .cn-dias { margin: 0 18px; padding: 0; list-style: none; }

.cn-clima .cn-dia {
  display: grid;
  grid-template-columns: 60px 32px 40px 32px minmax(48px, 1fr) 32px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--cn-line);
}

.cn-clima .cn-dia:last-child { border-bottom: 0; }

.cn-clima .cn-dia-nome b { display: block; font-size: 14px; line-height: 1.2; white-space: nowrap; }
.cn-clima .cn-dia-nome small { display: block; font-size: 11px; color: var(--cn-mut); }
.cn-clima .cn-dia-ico .cn-ico { display: block; width: 32px; height: 32px; }
.cn-clima .cn-dia-chuva { font-size: 12px; color: var(--cn-focus); font-variant-numeric: tabular-nums; }
.cn-clima .cn-dia-min { text-align: right; color: var(--cn-mut); font-variant-numeric: tabular-nums; }
.cn-clima .cn-dia-max { font-weight: 700; font-variant-numeric: tabular-nums; }

.cn-clima .cn-barra {
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: var(--cn-bar);
}

.cn-clima .cn-barra i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #4aa3ff, #ffb347);
}

/* ---------- Avisos e rodapé ---------- */

.cn-clima .cn-alerta {
  margin: 20px 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--cn-alerta-bd);
  border-radius: 14px;
  background: var(--cn-alerta-bg);
  color: var(--cn-alerta-fg);
}

.cn-clima .cn-alerta p { margin: 4px 0 8px; font-size: 13px; }
.cn-clima .cn-alerta a { font-size: 13px; font-weight: 700; color: inherit; text-decoration: underline; }

.cn-clima .cn-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  padding: 16px 18px 14px;
  font-size: 12px;
  color: var(--cn-mut);
}

.cn-clima .cn-foot a { color: inherit; text-decoration: underline; }

.cn-clima .cn-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #1f9d55;
}

.cn-clima.cn-velho .cn-dot { background: #d98a00; }
.cn-clima.cn-velho .cn-ago { color: #b36f00; font-weight: 600; }

.cn-clima .cn-erro {
  margin: 0 18px 14px;
  padding: 16px;
  border-radius: 14px;
  background: var(--cn-soft);
}

.cn-clima .cn-erro p { margin-top: 6px; font-size: 14px; }
.cn-clima .cn-erro a { color: var(--cn-focus); }

/* ---------- Ícones do tempo ---------- */

.cn-clima .cn-sol circle { fill: #fbbf24; }
.cn-clima .cn-sol path { fill: none; stroke: #fbbf24; stroke-width: 3; stroke-linecap: round; }
.cn-clima .cn-lua { fill: #fde68a; }
.cn-clima .cn-nuvem { fill: #e8eef7; stroke: #9db0c9; stroke-width: 1.5; }
.cn-clima .cn-nuvem-escura { fill: #9aa8bb; stroke: #6f7f95; }
.cn-clima .cn-gota { fill: none; stroke: #38bdf8; stroke-width: 3; stroke-linecap: round; }
.cn-clima .cn-raio { fill: #fbbf24; }
.cn-clima .cn-linha { fill: none; stroke: #9db0c9; stroke-width: 3; stroke-linecap: round; }

/* ---------- Versão compacta (barra lateral) ---------- */

.cn-clima.cn-compacto { max-width: 380px; }
.cn-clima.cn-compacto .cn-temp { font-size: 58px; }
.cn-clima.cn-compacto .cn-hero { padding: 18px; }
.cn-clima.cn-compacto .cn-hero-icone .cn-ico { width: 78px; height: 78px; }
.cn-clima.cn-compacto .cn-stat:nth-child(n+4) { display: none; }
.cn-clima.cn-compacto .cn-dia:nth-child(n+4) { display: none; }

/* ---------- Telas pequenas ---------- */

@media (max-width: 560px) {
  .cn-clima { border-radius: 20px; margin: 16px auto; }
  .cn-clima .cn-top { padding: 14px 14px 10px; }
  .cn-clima .cn-chips { padding: 0 14px 12px; }
  .cn-clima .cn-msg { margin: 0 14px 10px; }
  .cn-clima .cn-hero { margin: 0 10px; padding: 18px 16px 18px 20px; }
  .cn-clima .cn-temp { font-size: 66px; }
  .cn-clima .cn-hero-icone .cn-ico { width: 88px; height: 88px; }
  .cn-clima .cn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 14px 0; }
  .cn-clima h3.cn-sec { margin: 20px 14px 8px; }
  .cn-clima .cn-horas { margin: 0 14px; }
  .cn-clima .cn-dias { margin: 0 14px; }
  .cn-clima .cn-alerta { margin: 18px 14px 0; }
  .cn-clima .cn-foot { padding: 14px 14px 12px; }
}

@media (max-width: 380px) {
  .cn-clima .cn-dia { grid-template-columns: 58px 28px 34px 28px minmax(30px, 1fr) 30px; gap: 5px; }
  .cn-clima .cn-dia-ico .cn-ico { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-clima *, .cn-clima *::before, .cn-clima *::after { transition: none !important; scroll-behavior: auto !important; }
}