/* assets/css/travel-weather.css — Fase 4 (OpenWeather).
   Bloque de tiempo: situación actual, próximas horas, recomendaciones. */

.twd-weather {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-brand-cream, #FAF7F1);
  border: 1px solid var(--color-linea, #DCE3E9);
}

.twd-weather__now {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.twd-weather__icon { font-size: 32px; line-height: 1; }
.twd-weather__now-txt { display: flex; flex-direction: column; }
.twd-weather__temp { font-size: 20px; font-weight: 700; }
.twd-weather__desc { font-size: 13px; color: var(--color-mudo, #4E617A); text-transform: capitalize; }
.twd-weather__meta { font-size: 12px; color: var(--color-mudo, #4E617A); margin-left: auto; }

.twd-weather__hours {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.twd-weather__hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 42px;
  font-size: 12px;
  color: var(--color-mudo, #4E617A);
}
.twd-weather__hour-icon { font-size: 16px; }
.twd-weather__hour-temp { font-weight: 600; color: var(--color-brand-ink, #0B2742); }

.twd-weather__recs { display: flex; flex-direction: column; gap: 8px; }
.twd-weather__rec {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.twd-weather__rec p { margin: 2px 0 0; color: var(--color-mudo, #4E617A); }
.twd-weather__rec--info { background: #eef6f0; }
.twd-weather__rec--warning { background: #fff4e5; }
.twd-weather__rec--danger { background: #fdeaea; }
.twd-weather__rec-icon { font-size: 15px; line-height: 1.4; }

@media (max-width: 640px) {
  .twd-weather__meta { margin-left: 0; width: 100%; }
}

@media (prefers-color-scheme: dark) {
  .twd-weather { background: var(--color-brand-night, #001B35); border-color: #1B3550; }
  .twd-weather__desc, .twd-weather__meta, .twd-weather__hour { color: #A8B8CA; }
  .twd-weather__hour-temp, .twd-weather__temp { color: var(--color-brand-cream, #FAF7F1); }
  .twd-weather__rec p { color: #C2CEDB; }
  .twd-weather__rec--info { background: #16241a; }
  .twd-weather__rec--warning { background: #2b2311; }
  .twd-weather__rec--danger { background: #2b1616; }
}