/* JDServer-Webs v6.1 — modules/forecast/forecast.css
   - Layout robusto: cabecera + contenido en grid
   - Más alto de tarjeta para evitar solapes
   - Iconos coloridos + animaciones
   - Badge PR (≥50%) con niveles
*/

#forecast { margin: 16px 0 28px; }
#forecast > h3 { font-weight: 600; margin: 0 0 12px; }

.forecast-row{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* móvil: 2 por fila */
  gap: 12px;
  overflow: hidden;
}

@media (min-width: 900px){
  .forecast-row{
    grid-template-columns: repeat(6, minmax(0,1fr)); /* EXACTO: 6 tarjetas */
  }
}

/* Tarjeta */
.card.forecast-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 12px;
  min-height: 155px;                 /* 🔼 más alto */
  display: grid;
  grid-template-rows: auto 1fr;      /* header + body */
  gap: 10px;
  min-width: 0;
}

/* Cabecera: fecha a la izq, badge a la dcha */
.fc-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}
.fc-date{
  font: 700 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Cuerpo: dos columnas — icono+estado | métricas */
.fc-body{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 12px;
  min-width: 0;
}

.fc-left{
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 6px;
  min-width: 0;
}
.fc-icon{ line-height: 0; }
.fc-sky{
  font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Derecha: valores */
.fc-right{
  display: grid;
  align-content: start;
  gap: 6px;
  text-align: right;
  min-width: 0;
}
.fc-line{
  font: 13px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--muted-2, var(--muted));
}
.fc-line strong{ color: var(--text); font-weight: 700; }

/* Badge precipitación */
.pr-badge{
  justify-self: end;
  font: 800 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
}
.pr-hidden{ display:none; }

/* Niveles alerta ≥50% */
.pr-50{ background: hsla(35, 95%, 55%, .14); color: hsl(35, 95%, 55%); border-color: hsla(35,95%,55%,.35); }
.pr-60{ background: hsla(25, 95%, 50%, .16); color: hsl(25, 95%, 50%); border-color: hsla(25,95%,50%,.38); }
.pr-70{ background: hsla(15, 95%, 50%, .18); color: hsl(15, 95%, 50%); border-color: hsla(15,95%,50%,.40); }
.pr-80{ background: hsla( 0, 85%, 55%, .20); color: hsl( 0, 85%, 55%); border-color: hsla( 0,85%,55%,.42); }
.pr-90{ background: hsla( 0, 85%, 50%, .22); color: hsl( 0, 85%, 50%); border-color: hsla( 0,85%,50%,.45); }
.pr-100{background: hsla( 0, 85%, 45%, .24); color: hsl( 0, 85%, 45%); border-color: hsla( 0,85%,45%,.48); }

/* Iconos coloridos */
.w-icon{ width: 48px; height: 48px; display: inline-block; }
.w-sunspin{ transform-origin: center; animation: wspin 28s linear infinite; }
.w-float{ animation: wfloat 6s ease-in-out infinite; }
.w-float-slow{ animation: wfloat 9s ease-in-out infinite; }
.w-rain line{ animation: wrain 1.6s linear infinite; }
.w-bolt{ animation: wbolt 1.4s ease-in-out infinite; }

@keyframes wspin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes wfloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-2px) } }
@keyframes wrain{ 0%{ transform:translateY(0); opacity:1 } 90%{ opacity:1 } 100%{ transform:translateY(10px); opacity:0 } }
@keyframes wbolt{ 0%,80%,100%{ opacity:.95; transform:translateY(0) } 40%{ opacity:.45; transform:translateY(1px) } }