:root{--gap:10px;--panel:rgba(6,22,34,.68);--panel2:rgba(5,43,62,.54);--line:rgba(232,245,255,.40);--blue:#12a9ff;--orange:#ff9200;--text:#fff}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#061521;color:var(--text);font-family:Arial,Helvetica,sans-serif}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.scene{position:fixed;inset:0;overflow:hidden;background:#16678c}.scene-photo{position:absolute;inset:-6%;background-size:cover;background-position:center;animation:parallax 34s ease-in-out infinite alternate;filter:saturate(1.12) contrast(1.06) brightness(1.02);will-change:transform,background-position}.scene-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,7,14,.03),transparent 52%,rgba(0,6,12,.17)),linear-gradient(90deg,rgba(0,7,13,.10),transparent 32%,transparent 72%,rgba(0,7,13,.08))}@keyframes parallax{0%{transform:scale(1.045) translate3d(-1.1%,0,0);background-position:47% 50%}50%{transform:scale(1.075) translate3d(.2%,-.6%,0);background-position:53% 48%}100%{transform:scale(1.055) translate3d(1.1%,.3%,0);background-position:50% 52%}}
.dashboard{position:relative;z-index:5;width:100%;height:100%;padding:11px 13px 4px;display:grid;grid-template-rows:minmax(0,39fr) minmax(0,20fr) minmax(0,37fr) 12px;gap:var(--gap)}
.glass{background:linear-gradient(145deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.33),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(6px) saturate(1.08);-webkit-backdrop-filter:blur(6px) saturate(1.08)}h2{margin:0;font-size:15px}.hidden-runtime{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0}
.top{display:grid;grid-template-columns:23fr 47fr 30fr;grid-template-rows:minmax(0,1fr) 92px;gap:var(--gap);min-height:0}.date-card{grid-column:1;grid-row:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 10px 18px;background:linear-gradient(145deg,rgba(5,17,28,.76),rgba(7,42,63,.53))}.weekday{font-size:clamp(25px,2.45vw,39px);line-height:1;font-weight:900;letter-spacing:.05em;color:#27baff;text-shadow:0 4px 10px rgba(0,0,0,.78);margin-bottom:14px}.date-row{display:flex;align-items:center;justify-content:center;gap:18px}.day-number{font-size:clamp(118px,10.4vw,174px);line-height:.73;font-weight:900;letter-spacing:-.065em;text-shadow:0 7px 18px rgba(0,0,0,.82)}.date-meta{display:flex;flex-direction:column;align-items:flex-start}.date-meta strong{font-size:clamp(24px,2.2vw,35px);line-height:1.05}.date-meta span{font-size:clamp(29px,2.65vw,42px);line-height:1.05;font-weight:900;color:var(--orange)}
.current{grid-column:2;grid-row:1;min-height:0;padding:13px 18px 10px;display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px 15px}.weather-icon{font-size:clamp(74px,6.8vw,112px);line-height:1;text-align:center;align-self:center;filter:drop-shadow(0 0 18px rgba(255,210,50,.56)) drop-shadow(0 11px 20px rgba(0,0,0,.30))}.temp-area{align-self:center}.temp-line{display:grid;grid-template-columns:1fr 1px 1fr;gap:14px;align-items:center}.temp-reading{text-align:center}.temp{font-size:clamp(53px,5vw,82px);font-weight:850;line-height:.9;letter-spacing:-.04em}.temp small{font-size:.45em}.temp-reading b{display:block;margin-top:7px;font-size:clamp(9px,.8vw,12px)}.temp-line>i{height:68%;background:rgba(255,255,255,.26)}.feels-temp{color:var(--orange)}.feels-badge.feels-cold .feels-temp{color:#35baff}.feels-badge.feels-same .feels-temp{color:#fff}.feels-badge.feels-warm .feels-temp{color:var(--orange)}.feels-badge.feels-hot .feels-temp{color:#ff564f}.condition{text-align:center;font-size:clamp(19px,1.8vw,29px);font-weight:850;margin-top:12px}.range{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.24);padding-top:8px;font-size:clamp(13px,1.2vw,19px);font-weight:850}.range span:first-child strong{color:var(--blue)}.range span:last-child strong{color:var(--orange)}
.wind{grid-column:3;grid-row:1;padding:12px 14px;min-height:0}.wind-inner{height:calc(100% - 20px);display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:10px}.compass{position:relative;width:132px;height:132px;border:2px solid var(--blue);border-radius:50%;margin:auto;box-shadow:inset 0 0 22px rgba(0,170,255,.12)}.compass span{position:absolute;font-size:11px;font-weight:900}.compass .n{top:7px;left:59px}.compass .e{right:7px;top:58px}.compass .s{bottom:7px;left:59px}.compass .w{left:7px;top:58px}.needle{position:absolute;left:61px;top:5px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:25px solid var(--blue);transform-origin:7px 60px}.wind-speed{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.wind-speed strong{font-size:39px;line-height:1}.wind-speed small{font-size:12px}.wind-copy{font-size:14px;font-weight:850;line-height:1.6}.blue{color:var(--blue);font-size:20px;font-weight:900}
.metrics{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;min-height:0}.metric{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;padding:8px 10px}.metric>span{font-size:39px;text-align:center;filter:drop-shadow(0 7px 12px rgba(0,0,0,.25))}.metric div{text-align:center}.metric small{display:block;font-size:10px;font-weight:900}.metric strong{display:block;font-size:29px;line-height:1.05;margin-top:5px}.metric em{display:block;font-size:12px;font-style:normal;margin-top:2px}
.hourly{padding:9px 12px;min-height:0;overflow:hidden}.hourly-list{height:calc(100% - 19px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}.hour-cell{text-align:center;border-right:1px solid rgba(255,255,255,.14);font-size:10px;font-weight:850}.hour-cell:last-child{border-right:0}.hour-icon{font-size:clamp(29px,2.75vw,44px);line-height:1.05;margin:4px 0}.hour-temp{font-size:clamp(18px,1.7vw,27px);font-weight:900}.hour-pop{font-size:10px;color:var(--blue);margin-top:2px}
.bottom{display:grid;grid-template-columns:50fr 50fr;gap:var(--gap);min-height:0}.weekly,.air{height:100%;min-height:0;overflow:hidden;padding:9px 12px}.weekly-list{height:calc(100% - 19px);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center}.day-cell{text-align:center;border-right:1px solid rgba(255,255,255,.14);font-size:10px;font-weight:850}.day-cell:last-child{border-right:0}.day-icon{font-size:clamp(37px,3.5vw,56px);line-height:1.05;margin:3px 0}.day-max{font-size:clamp(21px,1.95vw,31px);font-weight:900;color:var(--orange)}.day-min{font-size:clamp(18px,1.7vw,27px);font-weight:900;color:var(--blue)}.day-pop{font-size:10px;color:var(--blue);margin-top:2px}
.air-layout{height:calc(100% - 19px);display:grid;grid-template-columns:52fr 48fr;align-items:center}.aqi-main{display:grid;grid-template-columns:145px minmax(0,1fr);align-items:center;gap:12px}.aqi-ring{--aqi-color:#28c8be;width:138px;height:138px;border:16px solid rgba(255,255,255,.14);border-top-color:var(--aqi-color);border-right-color:var(--aqi-color);border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 0 25px color-mix(in srgb,var(--aqi-color) 34%,transparent),inset 0 0 20px rgba(0,0,0,.18)}.aqi-ring strong{font-size:44px;line-height:1}.aqi-ring span{font-size:12px;font-weight:900;text-transform:uppercase}.aqi-advice{font-size:13px;line-height:1.32;font-weight:750;text-align:center;padding:0 7px}.air-values{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-left:12px;border-left:1px solid rgba(255,255,255,.22)}.air-values div{display:grid;grid-template-columns:1fr auto auto;align-items:end;gap:5px;padding:9px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.air-values span{font-size:11px;font-weight:900}.air-values strong{font-size:22px}.air-values small{font-size:8px}
footer{display:flex;justify-content:space-between;align-items:center;font-size:8px;padding:0 4px}.fullscreen-btn{position:fixed;z-index:10;right:7px;bottom:15px;width:32px;height:32px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(5,25,41,.5);color:#fff;opacity:.2}
.stars,.clouds,.fx,.lightning{position:absolute;inset:0;pointer-events:none}.stars{opacity:0}.scene.night .stars{opacity:.65;background-image:radial-gradient(#fff 1px,transparent 1.2px);background-size:47px 47px}.clouds{overflow:hidden}.clouds i{position:absolute;width:230px;height:48px;border-radius:80px;background:rgba(230,239,245,.56);opacity:0}.clouds i:before,.clouds i:after{content:"";position:absolute;border-radius:50%;background:inherit}.clouds i:before{width:82px;height:82px;left:38px;top:-39px}.clouds i:after{width:104px;height:104px;right:31px;top:-53px}.scene.cloudy .clouds i,.scene.rain .clouds i,.scene.storm .clouds i{opacity:.58;animation:cloudTravel 75s linear infinite}.clouds i:nth-child(1){left:-18%;top:16%}.clouds i:nth-child(2){left:-30%;top:30%;animation-delay:-24s}.clouds i:nth-child(3){left:-15%;top:8%;animation-delay:-45s}.clouds i:nth-child(4){left:-40%;top:40%;animation-delay:-62s}@keyframes cloudTravel{to{transform:translateX(140vw)}}.drop{position:absolute;top:-35px;width:2px;height:29px;background:linear-gradient(transparent,rgba(180,225,255,.92));animation:fall linear infinite}.flake{position:absolute;top:-25px;color:#fff;animation:fall linear infinite}@keyframes fall{to{transform:translate3d(-75px,112vh,0)}}.lightning{opacity:0;background:rgba(225,246,255,.92)}.scene.storm .lightning{animation:flash 9s infinite}@keyframes flash{0%,88%,90%,93%,100%{opacity:0}89%{opacity:.72}91%{opacity:.24}92%{opacity:.56}}
@media(max-width:1100px){.dashboard{grid-template-rows:minmax(0,39fr) minmax(0,20fr) minmax(0,37fr) 11px;padding:7px 8px 3px;--gap:7px}.top{grid-template-columns:23fr 47fr 30fr;grid-template-rows:minmax(0,1fr) 78px;gap:7px}.date-card{padding:9px 5px 12px}.weekday{font-size:25px;margin-bottom:9px}.date-row{gap:9px}.day-number{font-size:105px}.date-meta strong{font-size:21px}.date-meta span{font-size:27px}.current{padding:8px 11px 6px;grid-template-columns:78px minmax(0,1fr);gap:6px 8px}.weather-icon{font-size:66px}.temp-line{gap:8px}.temp{font-size:49px}.temp-reading b{font-size:7.5px}.condition{font-size:17px;margin-top:7px}.range{font-size:11px;padding-top:5px}.wind{padding:7px 8px}.wind-inner{grid-template-columns:100px minmax(0,1fr);gap:5px}.compass{width:97px;height:97px;margin:4px auto}.compass .n{left:43px}.compass .e{top:42px}.compass .s{left:43px}.compass .w{top:42px}.needle{left:45px;transform-origin:7px 43px}.wind-speed strong{font-size:30px}.wind-speed small{font-size:9px}.wind-copy{font-size:9px}.blue{font-size:13px}.metric{grid-template-columns:35px minmax(0,1fr);padding:5px}.metric>span{font-size:25px}.metric small{font-size:6.5px}.metric strong{font-size:19px}.metric em{font-size:8px}.hourly,.weekly,.air{padding:6px 8px}h2{font-size:12px}.hour-icon{font-size:29px}.hour-temp{font-size:20px}.day-icon{font-size:38px}.day-max{font-size:23px}.day-min{font-size:20px}.aqi-main{grid-template-columns:111px minmax(0,1fr);gap:7px}.aqi-ring{width:106px;height:106px;border-width:13px}.aqi-ring strong{font-size:34px}.aqi-ring span{font-size:9px}.aqi-advice{font-size:10.5px;padding:0 3px}.air-values{gap:5px;padding-left:7px}.air-values div{padding:6px}.air-values strong{font-size:17px}.air-values span{font-size:8px}.air-values small{font-size:6px}}
@media(prefers-reduced-motion:reduce){.scene-photo,.clouds i,.drop,.flake,.lightning{animation:none!important}}


/* ==========================================================
   WEATHER CENTER PRO V23 — PREMIUM VISUAL
   Mantiene la distribución estable de v22.
   ========================================================== */

:root{
  --v23-glass-a:rgba(6,25,39,.58);
  --v23-glass-b:rgba(8,47,67,.44);
  --v23-line:rgba(236,247,255,.42);
  --v23-shadow:0 14px 34px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.08);
}

/* Más fotografía, menos azul plano */
.scene-photo{
  inset:-8%!important;
  animation:v23Parallax 40s cubic-bezier(.43,.04,.57,.96) infinite alternate!important;
  filter:saturate(1.18) contrast(1.08) brightness(1.03)!important;
  will-change:transform,background-position,filter!important;
}

.scene-overlay{
  background:
    linear-gradient(180deg,rgba(0,7,14,.015),rgba(0,8,15,.01) 56%,rgba(0,5,10,.14)),
    linear-gradient(90deg,rgba(0,7,13,.075),transparent 32%,transparent 74%,rgba(0,7,13,.065))!important;
}

.scene::before{
  content:"";
  position:absolute;
  inset:-3%;
  pointer-events:none;
  background:
    radial-gradient(circle at 62% 16%,rgba(255,245,205,.17),transparent 18%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 54%,rgba(0,0,0,.09));
  animation:v23Light 24s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}

@keyframes v23Parallax{
  0%{transform:scale(1.055) translate3d(-1.3%,.1%,0);background-position:46% 50%}
  50%{transform:scale(1.085) translate3d(.15%,-.75%,0);background-position:54% 47%}
  100%{transform:scale(1.065) translate3d(1.35%,.35%,0);background-position:50% 52%}
}

@keyframes v23Light{
  from{transform:translate3d(-1%,0,0);opacity:.54}
  to{transform:translate3d(1.4%,-.4%,0);opacity:.90}
}

/* Cristal más fino y elegante */
.glass{
  background:linear-gradient(145deg,var(--v23-glass-a),var(--v23-glass-b))!important;
  border:1px solid var(--v23-line)!important;
  box-shadow:var(--v23-shadow)!important;
  backdrop-filter:blur(7px) saturate(1.10)!important;
  -webkit-backdrop-filter:blur(7px) saturate(1.10)!important;
}

/* Fecha más nítida */
.date-card{
  background:linear-gradient(145deg,rgba(5,18,29,.73),rgba(6,40,59,.48))!important;
}
.weekday{
  color:#28c4ff!important;
  text-shadow:0 4px 12px rgba(0,0,0,.78),0 0 15px rgba(40,196,255,.18)!important;
}
.day-number{
  text-shadow:0 8px 21px rgba(0,0,0,.84),0 0 18px rgba(255,255,255,.08)!important;
}
.date-meta span{
  color:#ff9d00!important;
}

/* Panel central más premium */
.current{
  background:
    radial-gradient(circle at 22% 30%,rgba(255,210,70,.06),transparent 30%),
    linear-gradient(145deg,rgba(4,25,39,.68),rgba(8,48,68,.46))!important;
}
.weather-icon{
  filter:
    drop-shadow(0 0 16px rgba(255,218,71,.70))
    drop-shadow(0 0 34px rgba(255,158,0,.22))
    drop-shadow(0 12px 22px rgba(0,0,0,.30))!important;
  animation:v23IconPulse 6.4s ease-in-out infinite alternate;
}
@keyframes v23IconPulse{
  from{transform:scale(.985)}
  to{transform:scale(1.025)}
}
.temp{
  text-shadow:0 5px 12px rgba(0,0,0,.54)!important;
}
.feels-temp{
  text-shadow:0 4px 10px rgba(0,0,0,.45)!important;
}

/* Viento más atractivo */
.wind{
  background:
    radial-gradient(circle at 50% 50%,rgba(0,163,255,.08),transparent 52%),
    linear-gradient(145deg,rgba(4,25,39,.69),rgba(8,48,68,.47))!important;
}
.compass{
  box-shadow:
    inset 0 0 26px rgba(0,171,255,.14),
    0 0 24px rgba(0,171,255,.11)!important;
}
.needle{
  filter:drop-shadow(0 0 7px rgba(0,184,255,.62))!important;
}
.wind-speed strong{
  text-shadow:0 5px 12px rgba(0,0,0,.68)!important;
}

/* Métricas */
.metric{
  background:linear-gradient(145deg,rgba(7,27,42,.61),rgba(11,51,70,.43))!important;
}
.metric>span{
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.24)) saturate(1.14)!important;
}
.metric strong{
  text-shadow:0 4px 10px rgba(0,0,0,.47)!important;
}

/* Pronósticos */
.hourly,.weekly,.air{
  background:linear-gradient(145deg,rgba(6,21,33,.63),rgba(7,43,60,.46))!important;
}
.hour-icon,.day-icon{
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.22)) saturate(1.12)!important;
}
.hour-cell,.day-cell{
  border-color:rgba(255,255,255,.12)!important;
}

/* Aire */
.aqi-ring{
  box-shadow:
    0 0 30px color-mix(in srgb,var(--aqi-color) 40%,transparent),
    inset 0 0 22px rgba(0,0,0,.20)!important;
}
.aqi-ring strong{
  text-shadow:0 4px 11px rgba(0,0,0,.60)!important;
}
.air-values div{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04)!important;
}

/* Leve aumento de legibilidad */
h2{
  text-shadow:0 3px 8px rgba(0,0,0,.58)!important;
}
footer{
  text-shadow:0 2px 5px rgba(0,0,0,.80)!important;
}

/* Tablet */
@media(max-width:1100px){
  .scene-photo{animation-duration:44s!important}
  .glass{
    backdrop-filter:blur(5px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(5px) saturate(1.08)!important;
  }
  .weather-icon{animation-duration:7s!important}
}

@media(prefers-reduced-motion:reduce){
  .scene-photo,.scene::before,.weather-icon{animation:none!important}
}


/* ==========================================================
   WEATHER CENTER PRO V24 PREMIUM
   Mantiene intacta la estructura estable de v23.
   Mejora fondo, profundidad y acabado de cristal.
   ========================================================== */

:root{
  --v24-panel-a:rgba(5,21,33,.49);
  --v24-panel-b:rgba(7,43,61,.36);
  --v24-line:rgba(238,248,255,.46);
  --v24-shadow:0 16px 40px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.10);
}

/* Fondo con más profundidad */
.scene-photo{
  inset:-10%!important;
  animation:v24Parallax 48s cubic-bezier(.42,.04,.58,.96) infinite alternate!important;
  filter:saturate(1.22) contrast(1.10) brightness(1.04)!important;
  transform:translate3d(0,0,0);
  will-change:transform,background-position,filter!important;
}

.scene-overlay{
  background:
    linear-gradient(180deg,rgba(0,5,10,.01),rgba(0,7,13,.005) 56%,rgba(0,4,8,.12)),
    linear-gradient(90deg,rgba(0,6,12,.055),transparent 34%,transparent 73%,rgba(0,6,12,.05))!important;
}

.scene::before{
  content:"";
  position:absolute;
  inset:-4%;
  pointer-events:none;
  background:
    radial-gradient(circle at 60% 17%,rgba(255,244,204,.22),transparent 17%),
    radial-gradient(ellipse at 55% 70%,rgba(255,218,140,.10),transparent 30%);
  animation:v24LightDrift 26s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}

.scene::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,transparent 46%,rgba(0,0,0,.14) 100%);
}

@keyframes v24Parallax{
  0%{
    transform:scale(1.065) translate3d(-1.7%,.1%,0);
    background-position:45% 51%;
  }
  50%{
    transform:scale(1.105) translate3d(.1%,-.9%,0);
    background-position:55% 47%;
  }
  100%{
    transform:scale(1.075) translate3d(1.7%,.45%,0);
    background-position:50% 53%;
  }
}

@keyframes v24LightDrift{
  from{transform:translate3d(-1.3%,0,0);opacity:.55}
  to{transform:translate3d(1.7%,-.5%,0);opacity:.96}
}

/* Cristal más transparente */
.glass{
  background:linear-gradient(145deg,var(--v24-panel-a),var(--v24-panel-b))!important;
  border:1px solid var(--v24-line)!important;
  box-shadow:var(--v24-shadow)!important;
  backdrop-filter:blur(9px) saturate(1.16)!important;
  -webkit-backdrop-filter:blur(9px) saturate(1.16)!important;
}

/* Reflejo superior suave */
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.075),transparent 24%);
  opacity:.55;
}

/* Fecha */
.date-card{
  background:linear-gradient(145deg,rgba(4,15,25,.69),rgba(5,37,55,.42))!important;
}
.weekday{
  color:#29c6ff!important;
  text-shadow:0 4px 12px rgba(0,0,0,.78),0 0 18px rgba(41,198,255,.22)!important;
}
.day-number{
  text-shadow:0 9px 22px rgba(0,0,0,.86),0 0 22px rgba(255,255,255,.10)!important;
}
.date-meta span{color:#ffa000!important}

/* Tiempo actual */
.current{
  background:
    radial-gradient(circle at 20% 30%,rgba(255,215,85,.08),transparent 28%),
    linear-gradient(145deg,rgba(4,22,35,.60),rgba(7,46,65,.37))!important;
}
.weather-icon{
  filter:
    drop-shadow(0 0 18px rgba(255,224,88,.78))
    drop-shadow(0 0 40px rgba(255,159,0,.24))
    drop-shadow(0 13px 24px rgba(0,0,0,.30))!important;
  animation:v24WeatherPulse 7.2s ease-in-out infinite alternate!important;
}
@keyframes v24WeatherPulse{
  from{transform:scale(.98) rotate(-1deg)}
  to{transform:scale(1.035) rotate(1deg)}
}
.temp,.condition,.current-bottom{
  text-shadow:0 4px 11px rgba(0,0,0,.48)!important;
}

/* Viento */
.wind{
  background:
    radial-gradient(circle at 50% 50%,rgba(0,175,255,.10),transparent 50%),
    linear-gradient(145deg,rgba(4,22,35,.61),rgba(7,46,65,.38))!important;
}
.compass{
  box-shadow:
    inset 0 0 30px rgba(0,171,255,.17),
    0 0 26px rgba(0,171,255,.13)!important;
}
.needle{
  filter:drop-shadow(0 0 8px rgba(0,190,255,.72))!important;
}

/* Tarjetas pequeñas */
.metric{
  background:linear-gradient(145deg,rgba(6,25,39,.54),rgba(10,48,66,.34))!important;
}
.metric>span{
  filter:drop-shadow(0 7px 13px rgba(0,0,0,.24)) saturate(1.16)!important;
}

/* Pronósticos y aire */
.hourly,.weekly,.air{
  background:linear-gradient(145deg,rgba(5,18,28,.56),rgba(6,39,54,.35))!important;
}
.hour-icon,.day-icon{
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.24)) saturate(1.15)!important;
}
.aqi-ring{
  box-shadow:
    0 0 34px color-mix(in srgb,var(--aqi-color) 44%,transparent),
    inset 0 0 24px rgba(0,0,0,.22)!important;
}
.air-values div{
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.14)!important;
}

/* Tablet: menos blur para mantener rendimiento */
@media(max-width:1100px){
  .scene-photo{animation-duration:54s!important}
  .glass{
    backdrop-filter:blur(6px) saturate(1.10)!important;
    -webkit-backdrop-filter:blur(6px) saturate(1.10)!important;
  }
  .weather-icon{animation-duration:8s!important}
}

@media(prefers-reduced-motion:reduce){
  .scene-photo,.scene::before,.weather-icon{animation:none!important}
}


/* ==========================================================
   WEATHER CENTER PRO V25 ULTRA
   Pulido final sobre la v24 estable.
   No cambia distribución ni lógica.
   ========================================================== */

:root{
  --v25-glass-a:rgba(6,20,31,.44);
  --v25-glass-b:rgba(8,40,56,.31);
  --v25-line:rgba(242,250,255,.50);
  --v25-shadow:0 18px 44px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.12);
}

/* Fondo cinematográfico con más relieve */
.scene-photo{
  inset:-11%!important;
  animation:v25Parallax 56s cubic-bezier(.42,.04,.58,.96) infinite alternate!important;
  filter:saturate(1.26) contrast(1.11) brightness(1.045)!important;
  transform:translate3d(0,0,0);
  will-change:transform,background-position,filter!important;
}

.scene-overlay{
  background:
    linear-gradient(180deg,rgba(0,4,8,.005),rgba(0,6,11,.003) 58%,rgba(0,3,7,.10)),
    linear-gradient(90deg,rgba(0,5,10,.045),transparent 34%,transparent 73%,rgba(0,5,10,.04))!important;
}

.scene::before{
  content:"";
  position:absolute;
  inset:-5%;
  pointer-events:none;
  background:
    radial-gradient(circle at 62% 15%,rgba(255,248,214,.26),transparent 16%),
    radial-gradient(ellipse at 55% 72%,rgba(255,220,150,.11),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.02),transparent 50%);
  animation:v25LightDrift 32s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}

.scene::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.12) 100%);
}

@keyframes v25Parallax{
  0%{
    transform:scale(1.07) translate3d(-1.9%,.15%,0);
    background-position:44% 51%;
  }
  50%{
    transform:scale(1.115) translate3d(.1%,-1.0%,0);
    background-position:56% 47%;
  }
  100%{
    transform:scale(1.08) translate3d(1.9%,.5%,0);
    background-position:50% 53%;
  }
}

@keyframes v25LightDrift{
  from{transform:translate3d(-1.5%,0,0);opacity:.52}
  to{transform:translate3d(1.9%,-.55%,0);opacity:.98}
}

/* Cristal más realista y fino */
.glass{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg,var(--v25-glass-a),var(--v25-glass-b))!important;
  border:1px solid var(--v25-line)!important;
  box-shadow:var(--v25-shadow)!important;
  backdrop-filter:blur(10px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.18)!important;
}

.glass::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 22%),
    linear-gradient(90deg,rgba(255,255,255,.035),transparent 28%);
  opacity:.68;
}

.glass::after{
  content:"";
  position:absolute;
  left:-35%;top:-70%;
  width:44%;height:220%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  animation:v25GlassSweep 18s ease-in-out infinite;
  pointer-events:none;
}

@keyframes v25GlassSweep{
  0%,70%{left:-40%;opacity:0}
  78%{opacity:.8}
  100%{left:125%;opacity:0}
}

/* Fecha */
.date-card{
  background:
    radial-gradient(circle at 25% 18%,rgba(52,190,255,.06),transparent 33%),
    linear-gradient(145deg,rgba(4,14,23,.67),rgba(5,34,50,.37))!important;
}
.weekday{
  color:#2ec8ff!important;
  text-shadow:0 4px 12px rgba(0,0,0,.80),0 0 20px rgba(46,200,255,.28)!important;
}
.day-number{
  text-shadow:
    0 10px 24px rgba(0,0,0,.88),
    0 0 24px rgba(255,255,255,.11)!important;
}
.date-meta span{color:#ffa200!important}

/* Tiempo actual */
.current{
  background:
    radial-gradient(circle at 20% 28%,rgba(255,220,92,.10),transparent 28%),
    linear-gradient(145deg,rgba(4,20,31,.55),rgba(7,42,59,.31))!important;
}
.weather-icon{
  filter:
    drop-shadow(0 0 22px rgba(255,229,101,.86))
    drop-shadow(0 0 48px rgba(255,157,0,.28))
    drop-shadow(0 15px 26px rgba(0,0,0,.32))!important;
  animation:v25WeatherFloat 8.5s ease-in-out infinite alternate!important;
}
@keyframes v25WeatherFloat{
  from{transform:translateY(1px) scale(.985) rotate(-1deg)}
  to{transform:translateY(-3px) scale(1.04) rotate(1deg)}
}
.temp,.condition,.current-bottom{
  text-shadow:0 5px 12px rgba(0,0,0,.52)!important;
}

/* Viento */
.wind{
  background:
    radial-gradient(circle at 50% 50%,rgba(0,177,255,.13),transparent 51%),
    linear-gradient(145deg,rgba(4,20,31,.57),rgba(7,42,59,.32))!important;
}
.compass{
  box-shadow:
    inset 0 0 34px rgba(0,174,255,.20),
    0 0 30px rgba(0,174,255,.15)!important;
}
.needle{
  filter:drop-shadow(0 0 10px rgba(0,194,255,.78))!important;
}

/* Métricas */
.metric{
  background:
    linear-gradient(145deg,rgba(5,23,35,.49),rgba(9,45,61,.28))!important;
}
.metric>span{
  filter:
    drop-shadow(0 8px 14px rgba(0,0,0,.25))
    saturate(1.18)!important;
}
.metric strong{
  text-shadow:0 4px 10px rgba(0,0,0,.48)!important;
}

/* Pronósticos y calidad del aire */
.hourly,.weekly,.air{
  background:
    linear-gradient(145deg,rgba(5,17,27,.50),rgba(6,36,50,.27))!important;
}
.hour-icon,.day-icon{
  filter:
    drop-shadow(0 8px 13px rgba(0,0,0,.25))
    saturate(1.18)!important;
}
.aqi-ring{
  box-shadow:
    0 0 38px color-mix(in srgb,var(--aqi-color) 48%,transparent),
    inset 0 0 26px rgba(0,0,0,.23)!important;
}
.air-values div{
  background:
    linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.04))!important;
  border:1px solid rgba(255,255,255,.15)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.055)!important;
}

/* Mejor legibilidad */
h2,footer{
  text-shadow:0 3px 8px rgba(0,0,0,.66)!important;
}

/* Tablet: rendimiento equilibrado */
@media(max-width:1100px){
  .scene-photo{animation-duration:62s!important}
  .glass{
    backdrop-filter:blur(6px) saturate(1.11)!important;
    -webkit-backdrop-filter:blur(6px) saturate(1.11)!important;
  }
  .glass::after{animation-duration:24s}
  .weather-icon{animation-duration:9.5s!important}
}

@media(prefers-reduced-motion:reduce){
  .scene-photo,.scene::before,.glass::after,.weather-icon{animation:none!important}
}


/* ==========================================================
   WEATHER CENTER PRO V30 DEFINITIVA
   Fotografías reales de Roquetas de Mar.
   La estructura y la lógica de la v25 se mantienen intactas.
   ========================================================== */

:root{
  --v30-panel-a:rgba(5,19,30,.48);
  --v30-panel-b:rgba(7,39,54,.33);
  --v30-line:rgba(240,249,255,.48);
  --v30-shadow:0 16px 40px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.10);
}

/* Fotografía real: menos filtros artificiales */
.scene-photo{
  inset:-5%!important;
  background-size:cover!important;
  background-position:center center!important;
  filter:saturate(1.04) contrast(1.035) brightness(1.01)!important;
  animation:v30PhotoParallax 58s cubic-bezier(.42,.04,.58,.96) infinite alternate!important;
  transform:translate3d(0,0,0);
  will-change:transform,background-position!important;
}

@keyframes v30PhotoParallax{
  0%{
    transform:scale(1.035) translate3d(-1.15%,.05%,0);
    background-position:47% 50%;
  }
  50%{
    transform:scale(1.065) translate3d(.1%,-.55%,0);
    background-position:53% 48%;
  }
  100%{
    transform:scale(1.045) translate3d(1.15%,.25%,0);
    background-position:50% 52%;
  }
}

/* Gradiente muy sutil: la foto sigue siendo protagonista */
.scene-overlay{
  background:
    linear-gradient(180deg,rgba(0,5,10,.025),rgba(0,7,12,.01) 58%,rgba(0,3,7,.15)),
    linear-gradient(90deg,rgba(0,5,10,.06),transparent 33%,transparent 73%,rgba(0,5,10,.055))!important;
}

/* Se eliminan los falsos halos intensos de versiones anteriores */
.scene::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.015),transparent 46%,rgba(0,0,0,.06))!important;
  animation:none!important;
  opacity:1!important;
}
.scene::after{
  background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.10) 100%)!important;
}

/* Cristal equilibrado para fotografías reales */
.glass{
  background:
    linear-gradient(145deg,var(--v30-panel-a),var(--v30-panel-b))!important;
  border:1px solid var(--v30-line)!important;
  box-shadow:var(--v30-shadow)!important;
  backdrop-filter:blur(8px) saturate(1.06)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.06)!important;
}

/* Reflejo casi imperceptible, sin distraer */
.glass::before{
  background:linear-gradient(180deg,rgba(255,255,255,.075),transparent 23%)!important;
  opacity:.56!important;
}
.glass::after{
  opacity:.38!important;
  animation-duration:28s!important;
}

/* Tarjetas principales con algo más de contraste local */
.date-card{
  background:linear-gradient(145deg,rgba(4,14,23,.66),rgba(6,32,47,.39))!important;
}
.current,.wind{
  background:linear-gradient(145deg,rgba(4,18,28,.57),rgba(7,38,53,.34))!important;
}
.metric{
  background:linear-gradient(145deg,rgba(5,22,34,.53),rgba(9,42,57,.31))!important;
}
.hourly,.weekly,.air{
  background:linear-gradient(145deg,rgba(4,16,25,.55),rgba(6,34,47,.31))!important;
}

/* Icono y brújula pulidos, sin exagerar */
.weather-icon{
  filter:
    drop-shadow(0 0 17px rgba(255,226,94,.72))
    drop-shadow(0 11px 22px rgba(0,0,0,.28))!important;
}
.compass{
  box-shadow:
    inset 0 0 25px rgba(0,174,255,.15),
    0 0 22px rgba(0,174,255,.10)!important;
}

/* Tablet Samsung: equilibrio entre calidad y fluidez */
@media(max-width:1100px){
  .scene-photo{animation-duration:66s!important}
  .glass{
    backdrop-filter:blur(5px) saturate(1.04)!important;
    -webkit-backdrop-filter:blur(5px) saturate(1.04)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .scene-photo{animation:none!important}
}


/* ==========================================================
   WEATHER CENTER PRO V31 DISTANCE EDITION
   Optimizada para lectura a 3-4 metros.
   Fondo negro, tarjetas opacas y menos información.
   ========================================================== */

:root{
  --distance-bg:#050607;
  --distance-card:#0d1013;
  --distance-card-2:#11161b;
  --distance-line:#303841;
  --distance-text:#ffffff;
}

/* Fondo negro real: sin fotografía, sin parallax ni efectos ambientales */
html,body{background:var(--distance-bg)!important}
.scene{
  background:
    radial-gradient(circle at 50% 15%,rgba(20,34,44,.24),transparent 38%),
    linear-gradient(180deg,#050607 0%,#020304 100%)!important;
}
.scene-photo,.scene-overlay,.stars,.clouds,.fx,.lightning,
.scene::before,.scene::after{
  display:none!important;
}

/* Tarjetas opacas y estables */
.glass{
  background:linear-gradient(145deg,var(--distance-card-2),var(--distance-card))!important;
  border:1px solid var(--distance-line)!important;
  box-shadow:0 9px 22px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.035)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:hidden!important;
}
.glass::before,.glass::after{display:none!important}

/* Reparto vertical diseñado para iconos grandes */
.dashboard{
  grid-template-rows:minmax(0,39fr) minmax(0,23fr) minmax(0,34fr) 18px!important;
  gap:10px!important;
  padding:12px 14px 5px!important;
}

/* Cabecera */
.top{
  grid-template-columns:19fr 52fr 29fr!important;
  grid-template-rows:minmax(0,1fr) 112px!important;
  gap:10px!important;
}
.date-card{padding:14px 8px 16px!important}
.weekday{
  font-size:clamp(28px,2.45vw,42px)!important;
  margin-bottom:10px!important;
}
.day-number{
  font-size:clamp(126px,10.6vw,184px)!important;
}
.date-meta strong{font-size:clamp(27px,2.25vw,38px)!important}
.date-meta span{font-size:clamp(34px,2.8vw,47px)!important}

.current{
  padding:13px 20px 10px!important;
  grid-template-columns:190px minmax(0,1fr)!important;
  column-gap:18px!important;
  background:linear-gradient(145deg,#101419,#0b0e11)!important;
}
.weather-icon{
  font-size:clamp(112px,9.2vw,166px)!important;
  animation:none!important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))!important;
}
.temp{font-size:clamp(72px,6.2vw,102px)!important}
.temp-reading b{font-size:clamp(12px,1vw,16px)!important}
.condition{
  font-size:clamp(27px,2.2vw,37px)!important;
  margin-top:12px!important;
}
.range{font-size:clamp(17px,1.45vw,23px)!important}

/* Viento */
.wind{padding:12px 17px!important;background:linear-gradient(145deg,#101419,#0b0e11)!important}
.wind h2{font-size:20px!important}
.wind-inner{grid-template-columns:170px minmax(0,1fr)!important;gap:13px!important}
.compass{width:158px!important;height:158px!important;margin:7px auto!important}
.compass .n{left:72px!important}.compass .e{top:71px!important}.compass .s{left:72px!important}.compass .w{top:71px!important}
.needle{left:74px!important;transform-origin:7px 72px!important}
.wind-speed strong{font-size:52px!important}.wind-speed small{font-size:16px!important}
.wind-copy{font-size:16px!important}.blue{font-size:27px!important}

/* Seis métricas grandes */
.metrics{gap:9px!important}
.metric{
  grid-template-columns:74px minmax(0,1fr)!important;
  padding:9px 12px!important;
  background:linear-gradient(145deg,#11161b,#0c1013)!important;
}
.metric>span{font-size:52px!important}
.metric small{font-size:12px!important}
.metric strong{font-size:37px!important}
.metric em{font-size:14px!important}

/* Solo seis momentos horarios, iconos grandes */
.hourly{padding:12px 15px!important}
.hourly h2,.weekly h2,.air h2{font-size:21px!important}
.hourly-list{
  height:calc(100% - 27px)!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
.hour-cell{font-size:16px!important}
.hour-icon{font-size:clamp(62px,5.5vw,88px)!important;margin:7px 0!important}
.hour-temp{font-size:clamp(34px,2.8vw,46px)!important}
.hour-pop{font-size:15px!important}

/* Cinco días y aire simplificado */
.bottom{grid-template-columns:50% 50%!important;gap:10px!important}
.weekly,.air{padding:11px 15px!important}
.weekly-list{
  height:calc(100% - 28px)!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
.day-cell{font-size:16px!important}
.day-icon{font-size:clamp(58px,5vw,82px)!important;margin:6px 0!important}
.day-max{font-size:clamp(34px,2.8vw,46px)!important}
.day-min{font-size:clamp(29px,2.45vw,40px)!important}
.day-pop{font-size:14px!important}

.distance-air{
  height:calc(100% - 28px)!important;
  display:block!important;
}
.distance-air .aqi-main{
  height:100%!important;
  display:grid!important;
  grid-template-columns:42% 58%!important;
  align-items:center!important;
  gap:18px!important;
}
.aqi-ring{
  width:190px!important;
  height:190px!important;
  border-width:21px!important;
  margin:auto!important;
}
.aqi-ring strong{font-size:68px!important}
.aqi-ring span{font-size:16px!important}
.aqi-advice{
  font-size:clamp(22px,1.8vw,30px)!important;
  line-height:1.42!important;
  text-align:left!important;
  padding:0 18px!important;
  font-weight:700!important;
}
.hidden-air-values{
  position:absolute!important;
  width:1px!important;height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Footer */
footer{
  display:grid!important;
  grid-template-columns:auto auto 1fr auto!important;
  gap:18px!important;
  align-items:center!important;
  font-size:11px!important;
  padding:0 8px!important;
}
footer span:nth-child(3){text-align:center}

/* Tablet Samsung */
@media(max-width:1100px){
  .dashboard{
    grid-template-rows:minmax(0,39fr) minmax(0,23fr) minmax(0,34fr) 16px!important;
    padding:7px 8px 3px!important;
    gap:7px!important;
  }
  .top{
    grid-template-columns:19fr 52fr 29fr!important;
    grid-template-rows:minmax(0,1fr) 92px!important;
    gap:7px!important;
  }
  .date-card{padding:9px 4px 11px!important}
  .weekday{font-size:27px!important}
  .day-number{font-size:108px!important}
  .date-meta strong{font-size:22px!important}.date-meta span{font-size:29px!important}
  .current{
    grid-template-columns:115px minmax(0,1fr)!important;
    padding:8px 11px 6px!important;
    gap:7px!important;
  }
  .weather-icon{font-size:92px!important}
  .temp{font-size:58px!important}
  .temp-reading b{font-size:8px!important}
  .condition{font-size:20px!important;margin-top:7px!important}
  .range{font-size:12px!important}
  .wind{padding:7px 8px!important}
  .wind h2{font-size:13px!important}
  .wind-inner{grid-template-columns:108px minmax(0,1fr)!important;gap:6px!important}
  .compass{width:104px!important;height:104px!important;margin:4px auto!important}
  .compass .n{left:46px!important}.compass .e{top:45px!important}.compass .s{left:46px!important}.compass .w{top:45px!important}
  .needle{left:48px!important;transform-origin:7px 46px!important}
  .wind-speed strong{font-size:34px!important}.wind-speed small{font-size:10px!important}
  .wind-copy{font-size:10px!important}.blue{font-size:15px!important}
  .metric{grid-template-columns:43px minmax(0,1fr)!important;padding:5px 7px!important}
  .metric>span{font-size:31px!important}.metric small{font-size:7px!important}.metric strong{font-size:22px!important}.metric em{font-size:9px!important}
  .hourly,.weekly,.air{padding:7px 9px!important}
  .hourly h2,.weekly h2,.air h2{font-size:13px!important}
  .hour-cell,.day-cell{font-size:10px!important}
  .hour-icon{font-size:45px!important}.hour-temp{font-size:27px!important}.hour-pop{font-size:10px!important}
  .day-icon{font-size:43px!important}.day-max{font-size:27px!important}.day-min{font-size:23px!important}.day-pop{font-size:9px!important}
  .aqi-ring{width:124px!important;height:124px!important;border-width:15px!important}
  .aqi-ring strong{font-size:43px!important}.aqi-ring span{font-size:10px!important}
  .aqi-advice{font-size:14px!important;padding:0 8px!important}
  footer{font-size:7px!important;gap:8px!important;padding:0 3px!important}
}


/* ==========================================================
   V31.1 ICON EDITION
   Iconos meteorológicos SVG uniformes y legibles.
   ========================================================== */

.weather-svg{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.30));
}

.weather-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.weather-icon .weather-svg{
  width:100%!important;
  height:100%!important;
}

.hour-icon,.day-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}

.hour-icon .weather-svg{
  width:84px!important;
  height:72px!important;
}

.day-icon .weather-svg{
  width:82px!important;
  height:72px!important;
}

@media(max-width:1100px){
  .hour-icon .weather-svg{
    width:52px!important;
    height:46px!important;
  }

  .day-icon .weather-svg{
    width:50px!important;
    height:44px!important;
  }
}


/* V32.2 — SOLO ICONOS DE PREVISIÓN
   Se usan emojis nativos, como el icono de precipitación que funciona bien.
   No se modifica ninguna medida ni distribución. */
.forecast-emoji{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  line-height:1;
  font-family:"Noto Color Emoji","Segoe UI Emoji","Apple Color Emoji",sans-serif;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.28));
}
.hour-icon .forecast-emoji{
  font-size:1em;
}
.day-icon .forecast-emoji{
  font-size:1em;
}


/* V32.3 — ICONOS 3D
   Solo cambia el recurso visual dentro de los huecos existentes. */
.icon3d{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.28));
}


/* V32.4 — ICONOS NATIVOS ESTABLES
   Solo cambia la representación de los iconos.
   No modifica medidas, disposición ni tarjetas. */
.native-weather-icon{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-family:"Noto Color Emoji","Segoe UI Emoji","Apple Color Emoji",sans-serif;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.28));
}
.weather-icon .native-weather-icon{
  font-size:1em;
}
.hour-icon .native-weather-icon,
.day-icon .native-weather-icon{
  font-size:1em;
}

.stale-alert{
  position:fixed;left:50%;top:14px;transform:translateX(-50%);
  z-index:99999;display:none;align-items:center;gap:12px;
  max-width:min(92vw,920px);padding:12px 20px;border-radius:15px;
  background:rgba(145,0,0,.97);border:2px solid rgba(255,100,100,.96);
  box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 24px rgba(255,60,60,.24);
  color:#fff;font-size:clamp(16px,1.45vw,23px);font-weight:900;text-align:center
}
.stale-alert.show{display:flex}
.stale-alert .stale-icon{font-size:1.35em;line-height:1}
.stale-alert small{display:block;margin-top:2px;font-size:.64em;font-weight:700;opacity:.96}

/* v32.6 - iconos meteorológicos 3D realistas locales. Sin cambios de layout. */
.realistic-weather-icon{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));}
.weather-icon .realistic-weather-icon,.hour-icon .realistic-weather-icon,.day-icon .realistic-weather-icon{width:100%;height:100%;object-fit:contain;}


/* ==========================================================
   v32.9 — PREVISIÓN DE VIENTO +3H / +6H
   Mantiene el tamaño exterior de la tarjeta.
   ========================================================== */
.wind-copy{
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0!important;
}
.wind-now-copy{flex:0 0 auto}
.wind-forecast{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:10px;
}
.wind-future{
  position:relative;
  min-width:0;
  padding:6px 5px 5px;
  border:1px solid rgba(0,174,255,.32);
  border-radius:10px;
  background:rgba(1,13,23,.48);
  text-align:center;
  line-height:1;
}
.wind-future span{
  display:block;
  color:#91ddff;
  font-size:9px;
  font-weight:950;
  letter-spacing:.07em;
  margin-bottom:3px;
}
.wind-future strong{
  display:inline;
  color:#fff;
  font-size:20px;
  line-height:1;
}
.wind-future small{
  color:#fff;
  font-size:7px;
  margin-left:2px;
}
.wind-future b{
  display:block;
  color:var(--blue);
  font-size:11px;
  margin-top:4px;
  white-space:nowrap;
}
.wind-future em{
  display:block;
  color:#b8c7d2;
  font-size:7px;
  font-style:normal;
  margin-top:3px;
}
.wind-future em i{font-style:normal;color:#fff;font-weight:900}

@media(max-width:1100px){
  .wind-forecast{gap:4px;margin-top:5px}
  .wind-future{padding:4px 3px 3px;border-radius:7px}
  .wind-future span{font-size:6px;margin-bottom:2px}
  .wind-future strong{font-size:14px}
  .wind-future small{font-size:5px}
  .wind-future b{font-size:7px;margin-top:2px}
  .wind-future em{font-size:5px;margin-top:2px}
}


/* ==========================================================
   v32.10 — VIENTO PREVISTO MÁS GRANDE + ALERTA >25 km/h
   Solo afecta a +3H / +6H.
   ========================================================== */
.wind-future{
  padding:8px 7px 7px !important;
}
.wind-future span{
  font-size:12px !important;
  margin-bottom:5px !important;
}
.wind-future strong{
  font-size:28px !important;
  font-weight:950 !important;
}
.wind-future small{
  font-size:9px !important;
  font-weight:800 !important;
}
.wind-future b{
  font-size:14px !important;
  margin-top:5px !important;
  font-weight:950 !important;
}
.wind-future em{
  font-size:9px !important;
  margin-top:4px !important;
  font-weight:800 !important;
}
.wind-future.wind-danger strong{
  color:#ff3b30 !important;
  font-weight:1000 !important;
  text-shadow:0 0 12px rgba(255,59,48,.35);
}
.wind-future.wind-danger{
  border-color:rgba(255,59,48,.62) !important;
  box-shadow:inset 0 0 0 1px rgba(255,59,48,.12);
}

@media(max-width:1100px){
  .wind-future{
    padding:6px 5px 5px !important;
  }
  .wind-future span{
    font-size:8px !important;
  }
  .wind-future strong{
    font-size:20px !important;
  }
  .wind-future small{
    font-size:7px !important;
  }
  .wind-future b{
    font-size:10px !important;
  }
  .wind-future em{
    font-size:7px !important;
  }
}


/* ==========================================================
   v32.11 — VIENTO ABAJO / CALIDAD DEL AIRE ARRIBA
   ========================================================== */

/* Calidad del aire en el hueco superior derecho */
.hero .air{
  min-height:0;
  height:100%;
  padding:14px 16px;
}
.hero .air .air-layout{
  height:calc(100% - 28px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero .air .aqi-main{
  width:100%;
  display:grid;
  grid-template-columns:110px 1fr;
  gap:16px;
  align-items:center;
}
.hero .air .aqi-ring{
  width:104px!important;
  height:104px!important;
}
.hero .air .aqi-ring strong{font-size:34px!important}
.hero .air .aqi-advice{
  font-size:15px!important;
  line-height:1.25!important;
}

/* Viento en el gran panel inferior derecho */
.bottom .wind{
  position:relative;
  height:100%;
  min-height:0;
  padding:14px 18px;
}
.bottom .wind .wind-inner{
  height:calc(100% - 28px);
  display:grid!important;
  grid-template-columns:.95fr 1.15fr 1.15fr;
  gap:18px;
  align-items:center;
}
.bottom .wind .compass{
  width:150px!important;
  height:150px!important;
  margin:auto;
}
.bottom .wind .wind-speed{
  font-size:56px!important;
}
.bottom .wind .wind-copy{
  display:contents!important;
}
.bottom .wind .wind-now-copy{
  position:absolute;
  left:32px;
  bottom:14px;
  font-size:15px;
}
.bottom .wind .wind-forecast{
  grid-column:2 / 4;
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:0!important;
}
.bottom .wind .wind-future{
  min-height:150px;
  padding:14px 10px!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.bottom .wind .wind-future span{
  font-size:18px!important;
  margin-bottom:6px!important;
}
.bottom .wind .wind-future strong{
  font-size:60px!important;
  line-height:.92!important;
}
.bottom .wind .wind-future small{
  font-size:15px!important;
  font-weight:900!important;
}
.bottom .wind .wind-future b{
  font-size:20px!important;
  margin-top:8px!important;
}
.bottom .wind .wind-future em{
  font-size:15px!important;
  margin-top:7px!important;
}
.bottom .wind .wind-future.wind-danger strong{
  color:#ff3b30!important;
  font-weight:1000!important;
  text-shadow:0 0 12px rgba(255,59,48,.35);
}

@media(max-width:1100px){
  .hero .air .aqi-main{grid-template-columns:74px 1fr;gap:8px}
  .hero .air .aqi-ring{width:70px!important;height:70px!important}
  .hero .air .aqi-ring strong{font-size:23px!important}
  .hero .air .aqi-advice{font-size:10px!important}

  .bottom .wind .wind-inner{
    grid-template-columns:.8fr 1.1fr 1.1fr;
    gap:8px;
  }
  .bottom .wind .compass{
    width:105px!important;
    height:105px!important;
  }
  .bottom .wind .wind-speed{font-size:40px!important}
  .bottom .wind .wind-future{
    min-height:105px;
    padding:8px 5px!important;
  }
  .bottom .wind .wind-future span{font-size:12px!important}
  .bottom .wind .wind-future strong{font-size:42px!important}
  .bottom .wind .wind-future small{font-size:10px!important}
  .bottom .wind .wind-future b{font-size:14px!important}
  .bottom .wind .wind-future em{font-size:10px!important}
}


/* ==========================================================
   v32.11.1 — FIX VISIBILIDAD TARJETA VIENTO
   ========================================================== */

.bottom .wind{
  grid-column:2 !important;
  grid-row:1 !important;
  display:block !important;
  visibility:visible !important;
  overflow:hidden !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
}

/* AQ realmente está en .top, no en .hero */
.top > .air{
  grid-column:3 !important;
  grid-row:1 !important;
  display:block !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:14px 16px !important;
}
.top > .air .air-layout{
  height:calc(100% - 28px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.top > .air .aqi-main{
  width:100% !important;
  display:grid !important;
  grid-template-columns:110px 1fr !important;
  gap:16px !important;
  align-items:center !important;
}
.top > .air .aqi-ring{
  width:104px !important;
  height:104px !important;
}
.top > .air .aqi-ring strong{
  font-size:34px !important;
}
.top > .air .aqi-advice{
  font-size:15px !important;
  line-height:1.25 !important;
}

/* Viento grande en el panel inferior derecho */
.bottom .wind .wind-inner{
  height:calc(100% - 28px) !important;
  display:grid !important;
  grid-template-columns:.95fr 1.15fr 1.15fr !important;
  gap:18px !important;
  align-items:center !important;
}
.bottom .wind .compass{
  width:150px !important;
  height:150px !important;
  margin:auto !important;
}
.bottom .wind .wind-copy{
  display:contents !important;
}
.bottom .wind .wind-now-copy{
  position:absolute !important;
  left:28px !important;
  bottom:14px !important;
  font-size:15px !important;
}
.bottom .wind .wind-forecast{
  grid-column:2 / 4 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:18px !important;
  margin:0 !important;
}
.bottom .wind .wind-future{
  min-height:145px !important;
  padding:12px 10px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
.bottom .wind .wind-future span{font-size:18px !important}
.bottom .wind .wind-future strong{font-size:58px !important;line-height:.95 !important}
.bottom .wind .wind-future small{font-size:15px !important}
.bottom .wind .wind-future b{font-size:20px !important}
.bottom .wind .wind-future em{font-size:15px !important}

@media(max-width:1100px){
  .top > .air .aqi-main{
    grid-template-columns:74px 1fr !important;
    gap:8px !important;
  }
  .top > .air .aqi-ring{
    width:70px !important;
    height:70px !important;
  }
  .top > .air .aqi-ring strong{font-size:23px !important}
  .top > .air .aqi-advice{font-size:10px !important}

  .bottom .wind .wind-inner{
    grid-template-columns:.8fr 1.1fr 1.1fr !important;
    gap:8px !important;
  }
  .bottom .wind .compass{
    width:105px !important;
    height:105px !important;
  }
  .bottom .wind .wind-future{
    min-height:105px !important;
  }
  .bottom .wind .wind-future strong{font-size:42px !important}
}

/* v32.16.5 — SOLO icono del clima actual más grande.
   Partimos de v32.16.2, donde AEMET funcionaba correctamente.
   No se modifica JavaScript ni lógica de previsión. */
#conditionIcon{
  overflow:visible!important;
  position:relative;
  z-index:2;
}
#conditionIcon .realistic-weather-icon{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:contain!important;
  transform:scale(2.05)!important;
  transform-origin:center center!important;
}
@media(max-width:1100px){
  #conditionIcon .realistic-weather-icon{
    transform:scale(2.15)!important;
  }
}

/* v32.17.1 — AVISOS AEMET */
.weather-alert-card{position:relative!important;overflow:hidden!important}
.weather-alert-body{height:calc(100% - 46px);display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;padding:2px 8px 8px}
.weather-alert-icon{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:50px;font-weight:900;border:3px solid #22c9a5;background:rgba(34,201,165,.12);box-shadow:0 0 28px rgba(34,201,165,.25)}
.weather-alert-copy{display:flex;flex-direction:column;gap:7px;min-width:0}
.weather-alert-copy strong{font-size:24px;line-height:1.05;text-transform:uppercase}
.weather-alert-copy span{font-size:17px;font-weight:900}
.weather-alert-copy small{font-size:14px;line-height:1.2}
.weather-alert-source{position:absolute;bottom:8px;right:12px;font-size:10px;opacity:.55}
.top-aqi-hidden{display:none!important}
.weather-alert-card.level-yellow .weather-alert-icon{border-color:#ffd23f;background:rgba(255,210,63,.13);box-shadow:0 0 30px rgba(255,210,63,.28)}
.weather-alert-card.level-yellow .weather-alert-copy span{color:#ffd23f}
.weather-alert-card.level-orange .weather-alert-icon{border-color:#ff9638;background:rgba(255,150,56,.14);box-shadow:0 0 32px rgba(255,150,56,.3)}
.weather-alert-card.level-orange .weather-alert-copy span{color:#ff9638}
.weather-alert-card.level-red .weather-alert-icon{border-color:#ff4f55;background:rgba(255,79,85,.14);box-shadow:0 0 34px rgba(255,79,85,.34)}
.weather-alert-card.level-red .weather-alert-copy span{color:#ff4f55}
@media(max-width:1100px){
  .weather-alert-body{grid-template-columns:70px 1fr;gap:8px}
  .weather-alert-icon{width:62px;height:62px;font-size:32px}
  .weather-alert-copy strong{font-size:14px}
  .weather-alert-copy span{font-size:10px}
  .weather-alert-copy small{font-size:9px}
}

/* v32.18.2: fecha compacta y más a la derecha */
.date-card{padding-left:34px!important;padding-right:12px!important}
#weekday,#dayNumber,#month,#year{transform:translateX(20px)}
#dayNumber{letter-spacing:-5px!important}
#month{margin-left:2px!important}

/* v32.18.3 — solo día y número */
#month,#year{display:none!important}
.date-card{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 14px!important;
}
#weekday{
  color:#fff!important;
  font-size:clamp(34px,3.2vw,58px)!important;
  line-height:1!important;
  font-weight:900!important;
  text-align:center!important;
  transform:translateX(18px)!important;
  margin-bottom:12px!important;
}
#dayNumber{
  color:#fff!important;
  font-size:clamp(110px,9vw,170px)!important;
  line-height:.9!important;
  font-weight:900!important;
  letter-spacing:-6px!important;
  text-align:center!important;
  transform:translateX(18px)!important;
}

/* v33.2 — aviso secundario radar: lluvia cerca, sin falsear el estado actual */
.radar-nearby{
  display:none;
  margin-top:6px;
  text-align:center;
  font-weight:900;
  font-size:clamp(12px,1.05vw,18px);
  line-height:1;
  color:#4fc3ff;
  letter-spacing:.2px;
  text-shadow:0 0 12px rgba(79,195,255,.22);
}
.radar-nearby.show{display:block}