/* JDServer-Webs v6.12 — climate_pro_uv.css
 * Módulo: Índice UV anual (barras + línea)
 * FIX: tokens auto/claro/oscuro + iOS/Safari text-fill + badges legibles
 */

#climate-pro-uv{
  max-width: 1120px;
  margin: 18px auto 64px;

  /* base text + coherencia en auto */
  color: var(--text, inherit);
  -webkit-text-fill-color: var(--text, currentColor);
  color-scheme: light dark;
}

#climate-pro-uv .cp-uv-card{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 18px;
  padding: 14px 18px 18px;
  box-shadow: var(--shadow-1);

  /* base text: evita herencias raras en auto */
  color: var(--text, inherit);
  -webkit-text-fill-color: var(--text, currentColor);
  color-scheme: light dark;
}

#climate-pro-uv .cp-uv-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px 18px;
  margin-bottom:10px;
}

#climate-pro-uv .cp-uv-title{
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--text, inherit);
}

#climate-pro-uv .cp-uv-sub{
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .88rem;
}

#climate-pro-uv .cp-uv-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#climate-pro-uv .cp-uv-badge{
  border-radius:999px;
  padding:4px 10px;
  font-size:.84rem;
  background: var(--bg-elevated, var(--card));
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  white-space:nowrap;

  color: var(--text, inherit);
  -webkit-text-fill-color: var(--text, currentColor);
}

#climate-pro-uv .cp-uv-badge strong{
  font-weight:600;
  color: var(--text, inherit);
  -webkit-text-fill-color: var(--text, currentColor);
}

#climate-pro-uv .cp-uv-meta{
  margin-top: 2px;
  font-size: .86rem;
  color: var(--muted);
}

#climate-pro-uv .cp-uv-meta span{
  font-weight:600;
  color: var(--text, inherit);
  -webkit-text-fill-color: var(--text, currentColor);
}

#climate-pro-uv .cp-uv-body{
  margin-top: 12px;
}

#climate-pro-uv .cp-uv-chart-wrap{
  position: relative;
  width: 100%;
  height: 260px;
}

@media (min-width: 1024px){
  #climate-pro-uv .cp-uv-chart-wrap{ height: 320px; }
}

#climate-pro-uv .cp-uv-empty{
  margin-top: 8px;
  font-size: .9rem;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 640px){
  #climate-pro-uv{
    margin: 16px 0 40px;
  }
  #climate-pro-uv .cp-uv-card{
    padding: 14px 12px 18px;
  }
  #climate-pro-uv .cp-uv-chart-wrap{
    height: 230px;
  }
}