/* Central do Clima (/clima/). Mesmo visual da Central de Esportes
   (assets/css/esportes.css): painéis, tokens do style.css e laranja de destaque. */
.clm {
	--clm-destaque: var(--orange); --clm-chuva: #7FB2FF; --clm-barra: linear-gradient(90deg, #7FB2FF, var(--lime) 50%, var(--orange));
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 18px; padding-bottom: 36px;
}
.clm > * { min-width: 0; }
[data-theme="light"] .clm { --clm-destaque: #B5470C; --clm-chuva: #1F5FBF; }
.clm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clm [hidden] { display: none !important; }
.clm a:focus-visible, .clm summary:focus-visible, .clm-horas__lista:focus-visible { outline: 3px solid var(--clm-destaque); outline-offset: 2px; }
.clm [id] { scroll-margin-top: 84px; }

/* Topo */
.clm-cabeca { display: flex; justify-content: space-between; align-items: end; gap: 12px 24px; flex-wrap: wrap; }
.clm-cabeca .breadcrumb { margin: 0; }
.clm-cabeca h1 { margin: 2px 0 0; font-size: 2rem; font-weight: 900; line-height: 1.05; }
.clm-cabeca h1 em { font-style: normal; color: var(--clm-destaque); }
.clm-cabeca__sub { margin: 6px 0 0; color: var(--ink-soft); font-size: .9rem; }
.clm-atual { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.clm-atual i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(177, 219, 75, .2); }
.clm-aviso { padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-soft); margin: 0; }

/* Ícones do tempo (SVG de posttv_ce_icone_svg) */
.clm-ic { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; color: var(--ink); }
.clm-ic svg { width: 100%; height: 100%; }
.clm-ic--g { width: 64px; height: 64px; color: var(--clm-destaque); }

/* Alertas do INMET: a severidade vem escrita; a cor só reforça. */
.clm-alertas { display: grid; gap: 10px; }
.clm-alertas__t { margin: 0; font-size: 1.12rem; font-weight: 900; }
.clm-alerta { background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--clm-alerta, #FFE100); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; }
.clm-alerta__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.clm-alerta__sev { font-size: .7rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: #FFE100; color: #111111; }
.clm-alerta--n2 .clm-alerta__sev { background: #FF9E1F; }
.clm-alerta--n3 .clm-alerta__sev { background: #C4161C; color: #FFFFFF; }
.clm-alerta__ev { font-size: 1.02rem; font-weight: 900; }
.clm-alerta p { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.clm-alerta__per { color: var(--ink) !important; font-weight: 700; }
.clm-alerta__mais summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--clm-destaque); min-height: 32px; display: inline-flex; align-items: center; }
.clm-alerta__mais p, .clm-alerta__mais ul { font-size: .82rem; color: var(--ink-soft); margin: 6px 0 0; }
.clm-alerta__mais ul { padding-left: 18px; }

/* Agora na região (também escolhe a cidade) */
.clm-regiao__t { margin: 0 0 10px; font-size: 1.12rem; font-weight: 900; }
.clm-regiao__t small { font-size: .75rem; font-weight: 500; color: var(--ink-mute); margin-left: 6px; }
.clm-regiao__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.clm-chip { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.clm-chip:hover { border-color: var(--ink-mute); }
.clm-chip__nome { font-size: .82rem; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clm-chip__t { font-size: 1.1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.clm-chip__al { position: absolute; top: -7px; right: -5px; font-size: .7rem; line-height: 1; padding: 3px 5px; border-radius: 999px; background: #FFE100; color: #111111; }
.clm-js .clm-chip.is-ativa { background: var(--orange); border-color: var(--orange); color: #1A0D04; }
.clm-js .clm-chip.is-ativa .clm-ic { color: #1A0D04; }

/* Cidade */
.clm-js .clm-cidade:not(.is-ativa) { display: none; }
.clm-cidades { display: grid; gap: 28px; }
.clm-cidade { display: grid; gap: 12px; }
.clm-cidade__t { margin: 0; font-size: 1.5rem; font-weight: 900; }
.clm-cidade__alerta { margin: 0; font-size: .85rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.clm-cidade__alerta a { color: var(--clm-destaque); font-weight: 700; margin-left: 4px; }
.clm-grade { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-areas: "agora dias" "horas horas"; gap: 16px; align-items: start; }
.clm-agora { grid-area: agora; } .clm-dias { grid-area: dias; } .clm-horas { grid-area: horas; }
.clm-bloco { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; min-width: 0; }
.clm-bloco__t { margin: 0 0 12px; font-size: 1rem; font-weight: 900; }
.clm-nota { margin: 10px 0 0; font-size: .72rem; color: var(--ink-mute); }

/* Agora */
.clm-agora__topo { display: flex; align-items: center; gap: 14px; }
.clm-agora__temp { font-size: 3.2rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.clm-agora__cond { font-weight: 700; margin-top: 4px; }
.clm-agora__sens { font-size: .82rem; color: var(--ink-soft); margin-top: 2px; }
.clm-medidas { margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.clm-medidas > div { background: var(--panel-raised); border-radius: 10px; padding: 8px 10px; }
.clm-medidas dt { font-size: .7rem; color: var(--ink-soft); }
.clm-medidas dd { margin: 2px 0 0; font-weight: 900; font-variant-numeric: tabular-nums; }

/* Próximas horas */
.clm-horas__lista { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(58px, 1fr); gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.clm-hora { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; background: var(--panel-raised); text-align: center; }
.clm-hora__h { font-size: .75rem; font-weight: 700; color: var(--ink-soft); }
.clm-hora__t { font-weight: 900; font-variant-numeric: tabular-nums; }
.clm-hora__c { font-size: .68rem; color: var(--ink-mute); white-space: nowrap; }
.clm-hora__c.tem-chuva, .clm-dia__chuva.tem-chuva { color: var(--clm-chuva); font-weight: 700; }

/* Próximos dias */
.clm-dias__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.clm-dia { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(150px, 220px) 64px; gap: 10px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--line); }
.clm-dia:first-child { border-top: 0; }
.clm-dia__nome b { font-weight: 900; }
.clm-dia__nome small { color: var(--ink-mute); font-size: .75rem; }
.clm-dia__cond { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-soft); min-width: 0; }
.clm-dia__cond > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clm-dia__temps { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.clm-dia__min { color: var(--ink-soft); text-align: right; }
.clm-dia__max { font-weight: 900; }
.clm-dia__barra { position: relative; height: 6px; border-radius: 999px; background: var(--panel-2); }
.clm-dia__barra i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--clm-barra); }
.clm-dia__chuva { text-align: right; font-size: .8rem; color: var(--ink-mute); white-space: nowrap; }

/* Notícias de Meio Ambiente (pé da página, como na Central de Esportes) */
.clm-noticias { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.clm-noticias__topo { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; }
.clm-noticias h2 { margin: 0; font-size: 1rem; font-weight: 900; }
.clm-noticias__sub { font-size: .75rem; color: var(--ink-mute); }
.clm-noticias__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.clm-noticias__lista li { border-left: 1px solid var(--line); padding-left: 14px; min-width: 0; }
.clm-noticias__lista li:first-child { border-left: 0; padding-left: 0; }
.clm-noticias__lista a { display: grid; gap: 2px; font-weight: 700; line-height: 1.3; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.clm-noticias__lista a:hover { color: var(--clm-destaque); }
.clm-noticias__lista time { font-size: .7rem; color: var(--ink-mute); font-weight: 500; }
.clm-noticias__mais { display: inline-flex; margin-top: 12px; font-size: .82rem; font-weight: 700; color: var(--clm-destaque); }
@media (max-width: 980px) {
	.clm-noticias__lista { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.clm-noticias__lista li { border-left: 0; padding: 10px 0 0; border-top: 1px solid var(--line); }
	.clm-noticias__lista li:first-child { border-top: 0; padding-top: 0; }
}

/* De onde vêm os dados */
.clm-fontes h2 { margin: 0 0 10px; font-size: 1rem; font-weight: 900; }
.clm-fontes__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.clm-fonte { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: .8rem; color: var(--ink-soft); }
.clm-fonte p { margin: 6px 0 0; }
.clm-fonte__cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.clm-fonte__cab b { color: var(--ink); font-size: .9rem; }
.clm-fonte__tipo { font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-mute); }
.clm-fonte__em { color: var(--ink); }
.clm-fontes__nota { font-size: .75rem; color: var(--ink-mute); margin: 10px 0 0; }
.clm-fontes__nota a { color: var(--ink-soft); }

@media (max-width: 980px) {
	.clm-regiao__lista { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.clm-grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "agora" "horas" "dias"; }
	.clm-fontes__lista { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
	.clm { gap: 16px; padding-top: 12px; }
	.clm-cabeca h1 { font-size: 1.5rem; }
	/* Cidades numa faixa que rola na horizontal. */
	.clm-regiao__lista { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 8px 16px 4px; }
	.clm-regiao__lista li { flex: none; }
	.clm-chip { min-width: 140px; }
	.clm-bloco { padding: 14px 12px; border-radius: 12px; }
	.clm-agora__temp { font-size: 2.8rem; }
	.clm-dia { grid-template-columns: 70px 28px minmax(0, 1fr) 52px; gap: 8px; }
	/* Só o ícone na tela; a condição continua para o leitor de tela. */
	.clm-dia__cond > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.clm-dia__cond { gap: 0; }
	.clm-dia__temps { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 6px; }
	.clm-dia__nome small { display: block; }
}