/* SN Clima — estilos do dashboard (escopado em #sn-clima-app) */
#sn-clima-app{
  --azul:#0D2B6B; --vermelho:#E31B23; --branco:#fff;
  --grafite:#0a1018; --card:#13203a; --card2:#1a2c4d;
  --texto:#eaf0fb; --apagado:#9fb0cf; --linha:#22325a; --dourado:#f4b740;
  font-family:'DM Sans','Segoe UI',system-ui,sans-serif;
  background:var(--grafite); color:var(--texto); line-height:1.5;
  width:100%; margin:0; padding:28px 0; border-radius:0;
  overflow-x:hidden;
}
/* Container interno único: segura todo o conteúdo no mesmo alinhamento */
#sn-clima-app > *{
  max-width:1180px;
  margin-left:auto; margin-right:auto;
  padding-left:clamp(16px,4vw,48px);
  padding-right:clamp(16px,4vw,48px);
}
/* Blindagem: título e descrição não herdam margens do tema */
#sn-clima-app > h1,
#sn-clima-app > .sub{
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:clamp(16px,4vw,48px) !important;
  padding-right:clamp(16px,4vw,48px) !important;
  width:100%; max-width:1180px; box-sizing:border-box;
}
#sn-clima-app *{box-sizing:border-box}
#sn-clima-app .topo{
  display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--vermelho);
  padding-bottom:14px;margin-bottom:20px;flex-wrap:wrap;
}
#sn-clima-app .marca{font-family:'Oswald','DM Sans',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.5px;text-transform:uppercase;color:var(--branco)}
#sn-clima-app .marca b{color:var(--vermelho)}
#sn-clima-app .eyebrow{font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--apagado);font-weight:600}
#sn-clima-app h1{font-family:'Oswald','DM Sans',sans-serif;font-size:1.9rem;line-height:1.1;margin:0 0 4px;font-weight:700;color:var(--texto)}
#sn-clima-app .sub{color:var(--apagado);font-size:.92rem;margin-bottom:18px}

#sn-clima-app .barra-busca{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
#sn-clima-app .campo-busca{flex:1;min-width:200px;position:relative}
#sn-clima-app .campo-busca input{width:100%;background:var(--card);border:1px solid var(--linha);color:var(--texto);padding:11px 14px;border-radius:10px;font-size:.92rem;font-family:inherit}
#sn-clima-app .campo-busca input:focus{outline:none;border-color:var(--vermelho)}
#sn-clima-app .campo-busca input::placeholder{color:var(--apagado)}
#sn-clima-app .resultados{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;background:var(--card2);border:1px solid var(--linha);border-radius:10px;overflow:hidden;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
#sn-clima-app .resultados.show{display:block}
#sn-clima-app .resultados div{padding:10px 14px;cursor:pointer;font-size:.88rem;border-bottom:1px solid var(--linha)}
#sn-clima-app .resultados div:last-child{border-bottom:none}
#sn-clima-app .resultados div:hover{background:var(--vermelho);color:#fff}
#sn-clima-app .resultados .vazio{cursor:default;color:var(--apagado)}
#sn-clima-app .resultados .vazio:hover{background:transparent;color:var(--apagado)}
#sn-clima-app .btn-detectar{background:var(--azul);border:1px solid var(--linha);color:#fff;padding:11px 16px;border-radius:10px;font-size:.88rem;cursor:pointer;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:7px;transition:all .18s}
#sn-clima-app .btn-detectar:hover{background:#10316f}

#sn-clima-app .rotulo-destaques{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--apagado);margin-bottom:8px;font-weight:600}
#sn-clima-app .abas-regiao{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;border-bottom:1px solid var(--linha);padding-bottom:12px}
#sn-clima-app .aba{background:transparent;border:1px solid transparent;color:var(--apagado);padding:6px 12px;border-radius:8px;font-size:.8rem;cursor:pointer;font-weight:600;font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap}
#sn-clima-app .aba:hover{color:var(--texto);background:var(--card)}
#sn-clima-app .aba.ativa{color:#fff;background:var(--azul);border-color:var(--linha)}

#sn-clima-app .cidades{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
#sn-clima-app .cidade-btn{background:var(--card);border:1px solid var(--linha);color:var(--texto);padding:8px 14px;border-radius:999px;font-size:.85rem;cursor:pointer;font-weight:500;transition:all .18s;white-space:nowrap}
#sn-clima-app .cidade-btn:hover{border-color:var(--vermelho);transform:translateY(-1px)}
#sn-clima-app .cidade-btn.ativa{background:var(--vermelho);border-color:var(--vermelho);color:#fff;font-weight:700}

#sn-clima-app .agora{background:linear-gradient(135deg,var(--azul) 0%,#091d4d 100%);border-radius:18px;padding:24px;margin-bottom:16px;position:relative;overflow:hidden;border:1px solid var(--linha)}
#sn-clima-app .agora::after{content:"";position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(244,183,64,.18),transparent 70%)}
#sn-clima-app .agora .cidade-nome{font-family:'Oswald',sans-serif;font-size:1.5rem;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#sn-clima-app .badge-auto{font-size:.6rem;background:rgba(244,183,64,.2);color:var(--dourado);padding:3px 8px;border-radius:999px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;font-family:'DM Sans',sans-serif}
#sn-clima-app .agora .data{color:#b8c8ea;font-size:.82rem;margin-bottom:18px;text-transform:capitalize}
#sn-clima-app .agora .linha-temp{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#sn-clima-app .agora .icone{font-size:4.5rem;line-height:1}
#sn-clima-app .agora .temp{font-size:3.6rem;font-weight:700;font-family:'Oswald',sans-serif;line-height:1}
#sn-clima-app .agora .cond{font-size:1rem;color:#dce6fa;margin-top:2px}
#sn-clima-app .agora .sensacao{font-size:.85rem;color:#b8c8ea;margin-top:4px}

#sn-clima-app .metricas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
#sn-clima-app .metrica{background:var(--card);border:1px solid var(--linha);border-radius:12px;padding:14px 10px;text-align:center}
#sn-clima-app .metrica .rotulo{font-size:.68rem;text-transform:uppercase;letter-spacing:.8px;color:var(--apagado);margin-bottom:6px}
#sn-clima-app .metrica .valor{font-size:1.25rem;font-weight:700;font-family:'Oswald',sans-serif}
#sn-clima-app .metrica .uni{font-size:.7rem;color:var(--apagado)}

#sn-clima-app .secao-titulo{font-family:'Oswald',sans-serif;font-size:1.1rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
#sn-clima-app .secao-titulo::before{content:"";width:4px;height:18px;background:var(--vermelho);border-radius:2px}

#sn-clima-app .orientacoes{margin-bottom:22px}
#sn-clima-app .conselho{background:linear-gradient(135deg,#1a2c4d,#13203a);border:1px solid var(--linha);border-left:4px solid var(--dourado);border-radius:12px;padding:13px 16px;margin-bottom:8px;display:flex;gap:12px;align-items:flex-start}
#sn-clima-app .conselho .ic{font-size:1.4rem;line-height:1.2;flex-shrink:0}
#sn-clima-app .conselho .corpo .alvo{font-weight:700;font-size:.82rem;margin-bottom:2px}
#sn-clima-app .conselho .corpo .txt{font-size:.86rem;color:#cdd9f0}
#sn-clima-app .conselho.alerta{border-left-color:var(--vermelho)}
#sn-clima-app .conselho.alerta .alvo{color:#ff8a8a}

#sn-clima-app .dias{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:22px}
#sn-clima-app .dia{background:var(--card);border:1px solid var(--linha);border-radius:12px;padding:12px 6px;text-align:center}
#sn-clima-app .dia .nome{font-size:.72rem;text-transform:uppercase;color:var(--apagado);font-weight:600;margin-bottom:6px}
#sn-clima-app .dia .ic{font-size:1.6rem;margin-bottom:6px}
#sn-clima-app .dia .max{font-weight:700;font-size:.95rem}
#sn-clima-app .dia .min{color:var(--apagado);font-size:.82rem}
#sn-clima-app .dia .chuva{font-size:.66rem;color:#5aa9f0;margin-top:4px}

#sn-clima-app .rodape{text-align:center;color:var(--apagado);font-size:.75rem;border-top:1px solid var(--linha);padding-top:16px}
#sn-clima-app .rodape a{color:var(--apagado)}
#sn-clima-app .carregando{text-align:center;padding:30px;color:var(--apagado)}

@media(max-width:680px){
  #sn-clima-app .metricas{grid-template-columns:repeat(2,1fr)}
  #sn-clima-app .dias{grid-template-columns:repeat(4,1fr)}
  #sn-clima-app h1{font-size:1.5rem}
  #sn-clima-app .agora .temp{font-size:3rem}
  #sn-clima-app .agora .icone{font-size:3.6rem}
}
@media(max-width:380px){#sn-clima-app .dias{grid-template-columns:repeat(3,1fr)}}

/* ====== CARD DE CLIMA (injetado no fim das matérias) ====== */
.sn-clima-card{
  --azul:#0D2B6B; --vermelho:#E31B23; --grafite:#0a1018;
  --card:#13203a; --texto:#eaf0fb; --apagado:#9fb0cf; --linha:#22325a; --dourado:#f4b740;
  font-family:'DM Sans','Segoe UI',system-ui,sans-serif;
  background:linear-gradient(135deg,var(--azul) 0%,#091d4d 100%);
  border:1px solid var(--linha); border-left:4px solid var(--dourado);
  border-radius:14px; padding:18px 20px; margin:28px 0;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  position:relative; overflow:hidden; color:var(--texto);
}
.sn-clima-card *{box-sizing:border-box}
.sn-clima-card::after{
  content:""; position:absolute; right:-26px; top:-26px;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,rgba(244,183,64,.16),transparent 70%);
}
.sn-clima-card .scc-icone{font-size:3rem;line-height:1;flex-shrink:0}
.sn-clima-card .scc-info{flex:1;min-width:160px}
.sn-clima-card .scc-eyebrow{
  font-size:.64rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--dourado);font-weight:700;margin-bottom:3px;
}
.sn-clima-card .scc-cidade{font-family:'Oswald','DM Sans',sans-serif;font-size:1.15rem;font-weight:700;line-height:1.15}
.sn-clima-card .scc-temp{font-family:'Oswald',sans-serif;font-size:1.7rem;font-weight:700;line-height:1}
.sn-clima-card .scc-cond{font-size:.82rem;color:#cfdcf5}
.sn-clima-card .scc-bloco-temp{display:flex;align-items:center;gap:12px}
.sn-clima-card .scc-cta{
  background:var(--vermelho);color:#fff !important;text-decoration:none !important;
  padding:10px 18px;border-radius:999px;font-weight:700;font-size:.85rem;
  white-space:nowrap;transition:transform .15s,filter .15s;flex-shrink:0;
  display:inline-flex;align-items:center;gap:6px;
}
.sn-clima-card .scc-cta:hover{transform:translateY(-1px);filter:brightness(1.08)}
.sn-clima-card .scc-carregando{font-size:.85rem;color:#cfdcf5}
@media(max-width:560px){
  .sn-clima-card{flex-direction:column;align-items:flex-start;text-align:left}
  .sn-clima-card .scc-cta{width:100%;justify-content:center}
}