/* Estado del Cielo – estilos (sin dependencias) */
.ecielo { 
  --ec-bg1: #0b1a2b;
  --ec-bg2: #163a5a;
  --ec-card: rgba(255,255,255,.10);
  --ec-border: rgba(255,255,255,.18);
  --ec-text: rgba(255,255,255,.92);
  --ec-muted: rgba(255,255,255,.72);
  --ec-muted2: rgba(255,255,255,.60);
  --ec-accent: rgba(255,255,255,.92);
  --ec-shadow: 0 20px 60px rgba(0,0,0,.35);
  --ec-radius: 22px;

  color: var(--ec-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.ecielo * { box-sizing: border-box; }

.ecielo .ecielo-card{
  background: linear-gradient(160deg, var(--ec-bg1), var(--ec-bg2));
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow);
  padding: 18px 18px 14px;
  overflow: hidden;
  position: relative;
}

.ecielo--compact .ecielo-card{ padding: 16px; }

.ecielo--bg-sun{ --ec-bg1:#0f355b; --ec-bg2:#1b5ea5; }
.ecielo--bg-night{ --ec-bg1:#070b18; --ec-bg2:#1a1f3a; }
.ecielo--bg-cloud{ --ec-bg1:#26374a; --ec-bg2:#3f5a74; }
.ecielo--bg-fog{ --ec-bg1:#2a3640; --ec-bg2:#4b5b68; }
.ecielo--bg-rain{ --ec-bg1:#142438; --ec-bg2:#2b4f6f; }
.ecielo--bg-storm{ --ec-bg1:#140c1f; --ec-bg2:#3a2a55; }
.ecielo--bg-snow{ --ec-bg1:#274158; --ec-bg2:#4e7aa6; }

.ecielo-head{
  display:flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
}

.ecielo-title{ min-width: 0; }
.ecielo-kicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ec-muted2);
  margin-bottom: 6px;
}
.ecielo-h1{
  font-size: 20px;
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 6px;
  word-break: break-word;
}
.ecielo-sub{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ec-muted);
}
.ecielo-pill{
  display:inline-flex;
  align-items:center;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 650;
  color: var(--ec-text);
}
.ecielo-subdot{ opacity: .7; }

.ecielo-now{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.ecielo-icon{
  width: 54px;
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ecielo-icon svg{
  width: 54px;
  height: 54px;
  color: rgba(255,255,255,.92);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}
.ecielo-temp{ text-align: right; }
.ecielo-temp-main{
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.02em;
}
.ecielo-unit{ font-size: 14px; font-weight: 800; opacity: .9; margin-left: 2px; }
.ecielo-temp-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--ec-muted2);
}

.ecielo-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.ecielo-metric{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.12);
  border-radius: 16px;
  padding: 10px 10px;
  display:flex;
  gap: 10px;
  align-items: center;
  min-height: 54px;
}
.ecielo-metric-ic{
  width: 26px;
  height: 26px;
  opacity: .92;
  flex-shrink:0;
}
.ecielo-metric-ic svg{ width:26px; height:26px; color: rgba(255,255,255,.92); }
.ecielo-metric-l{
  font-size: 11px;
  color: var(--ec-muted2);
  letter-spacing: .02em;
}
.ecielo-metric-v{
  font-size: 13px;
  font-weight: 750;
  color: var(--ec-text);
  line-height: 1.2;
}

.ecielo-section{
  margin-top: 14px;
}
.ecielo-section-head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.ecielo-section-title{
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .01em;
}
.ecielo-section-sub{
  font-size: 12px;
  color: var(--ec-muted2);
}

.ecielo-hourly{
  display:flex;
  gap: 10px;
  overflow:auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}
.ecielo-hour{
  scroll-snap-align: start;
  min-width: 126px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.12);
  border-radius: 18px;
  padding: 10px;
}
.ecielo-hour-h{
  font-size: 12px;
  color: var(--ec-muted);
  font-weight: 750;
}
.ecielo-hour-ic{
  width: 34px;
  height: 34px;
  margin: 8px 0 6px;
}
.ecielo-hour-ic svg{
  width: 34px;
  height: 34px;
  color: rgba(255,255,255,.92);
}
.ecielo-hour-t{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.01em;
}
.ecielo-hour-t span{ font-size: 12px; font-weight: 800; opacity: .9; margin-left: 2px; }
.ecielo-hour-kv{
  margin-top: 6px;
  display:flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--ec-muted);
}

.ecielo-daily{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.ecielo-day{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.12);
  border-radius: 18px;
  padding: 10px;
  min-width: 0;
}
.ecielo-day.is-today{
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.08);
}
.ecielo-day-top{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ecielo-day-name{
  font-size: 12px;
  font-weight: 850;
  color: var(--ec-text);
}
.ecielo-day-ic{
  width: 30px;
  height: 30px;
  flex-shrink:0;
}
.ecielo-day-ic svg{
  width: 30px;
  height: 30px;
  color: rgba(255,255,255,.92);
}
.ecielo-day-temp{
  margin-top: 8px;
  display:flex;
  gap: 8px;
  align-items: baseline;
}
.ecielo-day-temp .max{
  font-size: 16px;
  font-weight: 900;
}
.ecielo-day-temp .min{
  font-size: 13px;
  font-weight: 800;
  color: var(--ec-muted);
}
.ecielo-day-meta{
  margin-top: 8px;
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ecielo-day-meta .pill{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--ec-muted);
}
.ecielo-day-sun{
  margin-top: 8px;
  font-size: 11px;
  color: var(--ec-muted2);
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.ecielo-day-sun strong{ color: var(--ec-text); font-weight: 900; }

.ecielo-foot{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
  font-size: 11px;
  color: var(--ec-muted2);
  opacity: .95;
}
.ecielo-footdot{ opacity: .6; }

.ecielo--error .ecielo-card{
  background: linear-gradient(160deg, #3a1b1b, #5a2a2a);
}

@media (max-width: 980px){
  .ecielo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecielo-daily{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecielo-head{ flex-direction: column; align-items: stretch; }
  .ecielo-now{ justify-content: space-between; }
  .ecielo-temp{ text-align: left; }
}

@media (max-width: 480px){
  .ecielo-icon{ width: 48px; height: 48px; }
  .ecielo-icon svg{ width: 48px; height: 48px; }
  .ecielo-temp-main{ font-size: 30px; }
}