/* Tempo — o céu de Goiânia para a moto (28/09/2026).
   O farol manda na tela: verde, âmbar e vermelho com o mesmo significado em
   todo lugar (hora, trajeto, agora). Reaproveita as abas de Saúde (.sd-aba). */

.tp-farol {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 11px;
  font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid var(--linha-forte);
  color: var(--fraco);
}
.tp-farol.tp-livre { background: rgba(95, 174, 132, .16); color: var(--ok); border-color: rgba(95, 174, 132, .4); }
.tp-farol.tp-atencao { background: rgba(212, 162, 75, .16); color: var(--aviso); border-color: rgba(212, 162, 75, .4); }
.tp-farol.tp-evite { background: rgba(220, 100, 78, .18); color: var(--alerta); border-color: rgba(220, 100, 78, .45); }

/* ------------------------------------------------ o ícone de televisão */
svg.tv { display: block; width: 26px; height: 26px; flex: none; }

/* --------------------------------------------- o canto de toda tela */
.barra-agora { align-items: center; }
.canto-tempo {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--texto); text-decoration: none; padding: 3px 10px 3px 6px; border-radius: 999px;
  background: var(--painel); border: 1px solid var(--linha);
}
.canto-tempo:hover { background: var(--painel2); }
.canto-tempo svg.tv { width: 22px; height: 22px; }
.canto-tempo b { font: 700 14px/1 var(--redonda); color: var(--texto); }
.canto-tempo small { font-size: 11.5px; color: var(--fraco); }
.canto-tempo .cn-chuva { color: var(--azul-claro); }
.canto-tempo .cn-moto.cn-atencao { color: var(--aviso); }
.canto-tempo .cn-moto.cn-evite { color: var(--alerta); }
.barra-agora > span, .barra-agora > b { font-size: 13px; }

/* ------------------------------------------------------------ o agora */
.tp-heroi {
  display: grid; grid-template-columns: 1fr auto; gap: 14px 18px; align-items: center;
  background: var(--painel); border: 1px solid var(--linha); border-left: 4px solid var(--ok);
  border-radius: var(--raio); padding: 18px; margin-bottom: 14px;
}
.tp-heroi.tp-borda-atencao { border-left-color: var(--aviso); }
.tp-heroi.tp-borda-evite { border-left-color: var(--alerta); }
.tp-agora { display: flex; align-items: center; gap: 14px; }
.tp-ceu svg.tv { width: 58px; height: 58px; }
.tp-agora b { display: block; font: 700 48px/1 var(--redonda); letter-spacing: -1px; }
.tp-agora small { color: var(--fraco); font-size: 14px; }
.tp-moto { display: grid; justify-items: end; gap: 6px; text-align: right; max-width: 260px; }
.tp-moto-rot { display: flex; align-items: center; gap: 6px; color: var(--fraco); font-size: 13px; }
.tp-moto-rot .ic { width: 18px; height: 18px; }
.tp-moto .tp-farol { font-size: 17px; padding: 6px 16px; }
.tp-moto small { color: var(--fraco); font-size: 13px; }
.tp-numeros {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px;
  color: var(--fraco); font-size: 14px; border-top: 1px solid var(--linha); padding-top: 12px;
}
.tp-numeros span { display: inline-flex; align-items: center; gap: 6px; }
.tp-numeros .ic { width: 16px; height: 16px; }
.tp-numeros b { color: var(--texto); }

/* ------------------------------------------------ chuva de 15 em 15 */
.tp-minutos {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px 16px 10px; margin-bottom: 14px;
}
.tp-min-titulo { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.tp-min-titulo .ic { width: 18px; height: 18px; color: var(--azul-claro); }
.tp-min-barras { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 54px; align-items: end; }
.tp-min-barras i { display: block; border-radius: 4px 4px 2px 2px; background: var(--linha-forte); }
.tp-min-barras i.molha { background: var(--azul-claro); }
.tp-min-barras i.raio { background: var(--alerta); }
.tp-min-horas { display: grid; grid-template-columns: repeat(3, 1fr); color: var(--apagado); font-size: 12px; margin-top: 6px; }

.tp-levar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 14px;
  color: var(--fraco); font-size: 14px;
}
.tp-levar .ic { width: 17px; height: 17px; }
.tp-levar span {
  background: var(--painel2); border-radius: 999px; padding: 5px 11px; color: var(--texto); font-size: 13px;
}
.tp-alerta-sabao {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; padding: 12px 14px;
  border-radius: var(--raio-p); background: rgba(220, 100, 78, .12); color: var(--texto); font-size: 14px;
}
.tp-alerta-sabao .ic { flex: 0 0 auto; color: var(--alerta); width: 19px; height: 19px; }

/* --------------------------------------------------------- hora a hora */
.tp-horas {
  display: flex; gap: 6px; overflow-x: auto; padding: 12px 14px 8px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.tp-hora {
  flex: 0 0 58px; display: grid; justify-items: center; gap: 4px; padding: 8px 4px;
  border-radius: 12px; background: var(--painel2); border-top: 4px solid var(--ok); font-size: 13px;
}
.tp-hora.tp-atencao { border-top-color: var(--aviso); }
.tp-hora.tp-evite { border-top-color: var(--alerta); }
.tp-hora small { color: var(--fraco); }
.tp-hora svg.tv { width: 28px; height: 28px; }
.tp-hora b { font-size: 15px; }
.tp-hora span { color: var(--azul-claro); font-size: 12px; min-height: 15px; }
.tp-legenda { display: flex; align-items: center; gap: 6px; padding: 0 16px 12px; color: var(--apagado); font-size: 12px; flex-wrap: wrap; }
.tp-legenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 6px; }
.tp-legenda i.tp-livre { background: var(--ok); }
.tp-legenda i.tp-atencao { background: var(--aviso); }
.tp-legenda i.tp-evite { background: var(--alerta); }

.tp-trajeto .hora { font-weight: 700; }
.tp-trajeto small .ic { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; }

/* ------------------------------------------------------ avisos oficiais */
.tp-oficial { border-left: 4px solid var(--aviso); margin: 10px 14px; padding: 6px 12px; display: grid; gap: 3px; }
.tp-oficial b small { font-weight: 500; color: var(--fraco); margin-left: 6px; }
.tp-oficial > small { color: var(--apagado); }
.tp-oficial p { margin: 4px 0 0; font-size: 14px; color: var(--fraco); }
.tp-oficial .tp-dica { color: var(--texto); display: flex; gap: 8px; align-items: flex-start; }
.tp-oficial .ic { width: 16px; height: 16px; margin-top: 2px; }

/* -------------------------------------------------------------- semana */
.tp-dia { align-items: center; }
.tp-dia-nome { min-width: 76px; text-transform: capitalize; font-weight: 600; }
.tp-dia-nome small { display: block; font-weight: 400; color: var(--apagado); }
.tp-ceu-p svg.tv { width: 34px; height: 34px; }
.tp-chuva { color: var(--fraco); font-size: 13px; white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.tp-chuva .ic { width: 14px; height: 14px; }
.tp-chuva.forte { color: var(--azul-claro); font-weight: 600; }
.tp-temps { white-space: nowrap; color: var(--fraco); min-width: 64px; text-align: right; }
.tp-temps b { color: var(--texto); }

/* ------------------------------------------------------------- ajustes */
.tp-chave { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; cursor: pointer; }
.tp-chave input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--marca); flex: 0 0 auto; }
.tp-chave small { display: block; color: var(--fraco); font-size: 13px; }
.tp-linha-cfg { display: flex; align-items: center; gap: 8px; padding: 6px 16px 12px 48px; color: var(--fraco); flex-wrap: wrap; }
.tp-linha-cfg input, .tp-traj-linha input {
  background: var(--fundo2); color: var(--texto); border: 1px solid var(--linha-forte);
  border-radius: 10px; padding: 8px 10px; font: inherit; min-height: 40px;
}
.tp-linha-cfg input[type=number] { width: 64px; }
.tp-traj { display: grid; gap: 8px; padding: 12px 16px 4px; }
.tp-traj-linha { display: grid; grid-template-columns: minmax(0, 1.6fr) 110px minmax(0, 1.2fr) 44px; gap: 8px; }
.tp-traj-linha input { min-width: 0; width: 100%; }
.tp-traj-linha button, .tp-botoes button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px;
  border-radius: 10px; border: 1px solid var(--linha-forte); background: transparent; color: var(--texto);
  padding: 0 14px; font: inherit; cursor: pointer;
}
.tp-botoes button.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.tp-botoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 14px; }
.tp-botoes .ic, .tp-traj-linha .ic { width: 17px; height: 17px; }
.tp-nota { color: var(--apagado); font-size: 13px; padding: 0 16px 14px; margin: 0; }
.tp-fontes { color: var(--apagado); font-size: 12px; margin: 16px 2px 40px; }
.tp-erro { color: var(--aviso); }

@media (max-width: 640px) {
  .tp-heroi { grid-template-columns: 1fr; }
  .tp-moto { justify-items: start; text-align: left; max-width: none; }
  .tp-agora b { font-size: 42px; }
  .tp-traj-linha { grid-template-columns: minmax(0, 1fr) 96px 44px; }
  .tp-traj-linha input[data-c=dias] { grid-column: 1 / 3; grid-row: 2; }
  .tp-dia .titulo small { display: none; }
  .tp-linha-cfg { padding-left: 16px; }
}

/* O canto não quebra linha: no celular fica só o ícone e o número. */
.canto-tempo small, .barra-agora > span { white-space: nowrap; }
@media (max-width: 640px) {
  .canto-tempo small { display: none; }
}