/* ============================================================
   Canarify — Telde Meteo V1 (local, no desplegado)
   Componente «El tiempo en Telde». Mismos tokens que Home V3 / Evento 5
   (--sol, --crema, --tostada, --noche, --f-serif…); prefijo propio m5-.
   Sin dependencia de home-5.css: puede aparecer en Cerca de mí, fichas
   territoriales o en cualquier página que cargue main.css.
   ============================================================ */
.m5-meteo{
  --m5-sol:var(--sol,#F5A800); --m5-sol-deep:var(--sol-deep,#C97E00); --m5-niebla:var(--sol-niebla,#FDF3D9);
  --m5-noche:var(--noche,#0F0E0B); --m5-crema:var(--crema,#FDFAF4); --m5-tostada:var(--tostada,#F3EAD6);
  --m5-gris:var(--gris,#717171); --m5-borde:var(--borde,#E0E0E0); --m5-radio:var(--radio-lg,18px);
  --m5-agua:#3F7CA8; --m5-luna:#5B6B9A;
  position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;
  max-width:var(--max,1240px);margin:0 auto;padding:1.6rem clamp(1rem,3vw,2rem) 1.4rem;
  font-family:var(--f-display,'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  color:var(--m5-noche);background:linear-gradient(160deg,var(--m5-niebla) 0%,#fff 62%);
  border:1px solid var(--m5-borde);border-radius:var(--m5-radio);
}
.m5-meteo *,.m5-meteo *::before,.m5-meteo *::after{box-sizing:border-box}
.m5-meteo a{color:inherit;text-decoration:none;border-bottom:1px solid var(--m5-sol-deep)}
.m5-meteo a:hover{background:var(--m5-niebla)}
.m5-meteo a:focus-visible,.m5-horas:focus-visible{outline:3px solid var(--m5-sol-deep);outline-offset:2px;border-radius:4px}

/* paisaje decorativo (colinas y mar), no transmite información */
.m5-meteo__paisaje{position:absolute;right:0;top:0;width:min(46%,420px);height:128px;z-index:-1;pointer-events:none;opacity:.9;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.m5-ico--vacio{visibility:hidden}
.m5-pai-mar{fill:rgba(63,124,168,.13)}
.m5-pai-monte{fill:rgba(201,126,0,.16)}
.m5-pai-monte--2{fill:rgba(201,126,0,.10)}

.m5-meteo__cabecera{margin:0 0 1.1rem;max-width:34rem}
.m5-meteo__eyebrow{margin:0 0 .35rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m5-sol-deep)}
.m5-meteo__titulo{margin:0;font-family:var(--f-serif,Georgia,serif);font-weight:600;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.01em;color:var(--m5-noche)}
.m5-meteo__sub{margin:0 0 .7rem;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--m5-gris)}

.m5-meteo__aviso,.m5-meteo__mensaje,.m5-meteo__aviso-dev{margin:0 0 1rem;padding:.7rem .9rem;border-radius:10px;font-size:.88rem;line-height:1.45}
.m5-meteo__aviso{background:#FFF4D6;border:1px solid #F1D48A;color:#5C4300}
.m5-meteo__mensaje{background:#fff;border:1px dashed var(--m5-borde);color:var(--m5-noche)}
.m5-meteo__aviso-dev{background:#FDECEC;border:1px solid #E7B4B4;color:#6B1F1F}

/* ---------- bloque principal ---------- */
.m5-meteo__grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
.m5-meteo__ahora{padding:1.1rem 1.2rem;background:rgba(255,255,255,.78);border:1px solid var(--m5-borde);border-radius:14px;backdrop-filter:blur(2px)}
.m5-meteo__temp-wrap{display:flex;align-items:center;gap:.9rem}
.m5-meteo__temp{margin:0;display:flex;align-items:flex-start;line-height:.95;font-family:var(--f-serif,Georgia,serif);font-weight:500}
.m5-meteo__temp-num{font-size:clamp(3.4rem,8vw,4.6rem);letter-spacing:-.03em}
.m5-meteo__temp-unit{margin:.45rem 0 0 .15rem;font-size:1.25rem;font-weight:600;color:var(--m5-gris)}
.m5-meteo__cond{margin:.55rem 0 0;font-size:1.05rem;font-weight:700}
.m5-meteo__sens{margin:.1rem 0 0;font-size:.85rem;color:var(--m5-gris)}
.m5-meteo__datos{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0 .2rem;padding:0;list-style:none}
.m5-meteo__datos li{padding:.32rem .7rem;border-radius:999px;background:var(--m5-tostada);font-size:.8rem;font-weight:600;line-height:1.3}
.m5-meteo__resumen{margin:.7rem 0 0;font-size:.9rem;line-height:1.45}
.m5-meteo__valid{margin:.6rem 0 0;font-size:.76rem;color:var(--m5-gris)}

/* ---------- iconos ---------- */
.m5-ico{display:inline-block;width:1.7rem;height:1.7rem;flex:none}
.m5-ico--grande{width:4.2rem;height:4.2rem}
.m5-ico--sol{color:var(--m5-sol-deep)}
.m5-ico--sol_nubes{color:var(--m5-sol-deep)}
.m5-ico--luna,.m5-ico--luna_nubes{color:var(--m5-luna)}
.m5-ico--nubes,.m5-ico--niebla,.m5-ico--calima{color:var(--m5-gris)}
.m5-ico--calima{color:#A8742A}
.m5-ico--lluvia,.m5-ico--nieve{color:var(--m5-agua)}
.m5-ico--tormenta{color:#6A5ACD}

/* ---------- próximas horas ---------- */
.m5-horas{overflow-x:auto;scroll-snap-type:x proximity;padding:.75rem .1rem .5rem;-webkit-overflow-scrolling:touch}   /* el padding superior deja sitio a la etiqueta de cambio de día */
.m5-horas{scrollbar-width:thin;scrollbar-color:#C9BFA6 transparent}
.m5-meteo--noche .m5-horas{scrollbar-color:#6B6757 transparent}
.m5-horas__lista{display:flex;gap:.5rem;margin:0;padding:0;list-style:none;min-width:max-content}
.m5-hora{position:relative;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:.28rem;width:4.4rem;padding:.65rem .3rem .6rem;border:1px solid var(--m5-borde);border-radius:12px;background:#fff}
.m5-hora--actual{border-color:var(--m5-sol-deep);background:var(--m5-niebla);box-shadow:0 0 0 1px var(--m5-sol-deep) inset}
.m5-hora__dia{position:absolute;top:-.55rem;left:50%;transform:translateX(-50%);padding:.05rem .45rem;border-radius:999px;background:var(--m5-noche);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.m5-hora__hora{font-size:.74rem;font-weight:600;color:var(--m5-gris)}
.m5-hora__temp{font-size:1rem}
.m5-hora__prob{font-size:.7rem;font-weight:600;color:var(--m5-agua)}
.m5-meteo__sol{margin:.7rem 0 0;font-size:.8rem;color:var(--m5-gris)}
.m5-meteo__proximas{min-width:0;padding-top:.5rem}

/* ---------- próximos días ---------- */
.m5-meteo__dias{margin-top:1.5rem}
.m5-dias{margin:0;padding:0;list-style:none;border-top:1px solid var(--m5-borde)}
.m5-dia{display:grid;grid-template-columns:4.2rem 1.7rem minmax(0,1fr) 2.8rem minmax(8.5rem,11rem);align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--m5-borde)}
.m5-dia__nombre{font-weight:700;font-size:.92rem}
.m5-dia__cond{font-size:.86rem;color:var(--m5-gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m5-dia__prob{font-size:.76rem;font-weight:600;color:var(--m5-agua);text-align:right}
.m5-dia__rango{display:grid;grid-template-columns:2rem 1fr 2rem;align-items:center;gap:.45rem;font-size:.86rem;font-weight:700}
.m5-dia__min{color:var(--m5-gris);text-align:right}
.m5-dia__barra{position:relative;height:6px;border-radius:999px;background:var(--m5-tostada)}
.m5-dia__barra i{position:absolute;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--m5-sol),var(--m5-sol-deep))}

/* ---------- pie ---------- */
.m5-meteo__pie{margin-top:1.2rem;padding-top:.8rem;border-top:1px solid var(--m5-borde);font-size:.76rem;color:var(--m5-gris);line-height:1.5}
.m5-meteo__pie p{margin:.1rem 0}

/* ---------- estados ---------- */
.m5-meteo--loading .m5-meteo__esqueleto{display:grid;gap:.6rem;margin:0 0 1rem}
.m5-meteo--loading .m5-meteo__esqueleto span{height:3.2rem;border-radius:12px;background:linear-gradient(90deg,var(--m5-tostada) 25%,#fff 50%,var(--m5-tostada) 75%);background-size:200% 100%;animation:m5-brillo 1.4s linear infinite}
.m5-meteo--loading .m5-meteo__esqueleto span:first-child{height:5rem}
@keyframes m5-brillo{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.m5-meteo--loading .m5-meteo__esqueleto span{animation:none}}
.m5-meteo--aviso{padding:1rem;background:#fff}

/* ---------- noche ---------- */
.m5-meteo--noche{color:#F6F1E6;background:linear-gradient(160deg,#1B1A15 0%,#2A2821 70%);border-color:#3A372D}
.m5-meteo--noche .m5-meteo__titulo{color:#fff}
.m5-meteo--noche .m5-meteo__eyebrow{color:var(--m5-sol)}
.m5-meteo--noche .m5-meteo__ahora,.m5-meteo--noche .m5-hora{background:rgba(255,255,255,.06);border-color:#3A372D}
.m5-meteo--noche .m5-hora--actual{background:rgba(245,168,0,.14);border-color:var(--m5-sol)}
.m5-meteo--noche .m5-meteo__datos li{background:rgba(255,255,255,.1)}
.m5-meteo--noche .m5-meteo__sens,.m5-meteo--noche .m5-meteo__valid,.m5-meteo--noche .m5-meteo__sol,.m5-meteo--noche .m5-hora__hora,.m5-meteo--noche .m5-dia__cond,.m5-meteo--noche .m5-dia__min,.m5-meteo--noche .m5-meteo__sub,.m5-meteo--noche .m5-meteo__pie,.m5-meteo--noche .m5-meteo__temp-unit{color:#C9C3B3}
.m5-meteo--noche .m5-dias,.m5-meteo--noche .m5-dia,.m5-meteo--noche .m5-meteo__pie{border-color:#3A372D}
.m5-meteo--noche .m5-dia__barra{background:rgba(255,255,255,.12)}
.m5-meteo--noche .m5-ico--nubes,.m5-meteo--noche .m5-ico--niebla{color:#C9C3B3}
.m5-meteo--noche .m5-hora__prob,.m5-meteo--noche .m5-dia__prob{color:#8EC1E6}
.m5-meteo--noche a:hover{background:rgba(245,168,0,.18)}
.m5-meteo--noche .m5-pai-monte{fill:rgba(245,168,0,.12)}

.m5-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- escritorio ---------- */
@media (min-width:880px){
  .m5-meteo{padding:2rem 2.2rem 1.6rem}
  .m5-meteo__grid{grid-template-columns:minmax(0,22rem) minmax(0,1fr);align-items:start}
}
/* ---------- móvil ---------- */
@media (max-width:620px){
  .m5-meteo__paisaje{width:70%;height:96px;opacity:.7}
  .m5-dia{grid-template-columns:3.4rem 1.6rem 2.4rem minmax(0,1fr);row-gap:.1rem}
  .m5-dia__cond{grid-column:1 / -1;grid-row:2;white-space:normal;font-size:.8rem;line-height:1.3}   /* el estado del cielo nunca se oculta en móvil: pasa a una segunda línea (el icono solo no es texto) */
  .m5-dia__prob{text-align:left}
  .m5-ico--grande{width:3.4rem;height:3.4rem}
}