/* Ishiku Lemu · clima.css — widget "Estado del tiempo" ([cc_clima], inc/clima.php).
   Movido tal cual desde el módulo Code del Inicio (2026-10-04). Prefijo propio: .iw. */
/* ============================================================
   ESTADO DEL TIEMPO — Ishiku Lemu
   Todo bajo #ishiku-weather-widget para no chocar con Divi ni
   con el tema: las clases genéricas del widget anterior
   (.weather-card, .details, .day-name) eran una colisión esperando.
   ============================================================ */
#ishiku-weather-widget{
  --iw-moss:#7fa42f;
  --iw-forest:#3f5123;
  --iw-dark:#1a2e1a;
  --iw-deep:#101a10;
  --iw-sage:#acc08f;
  --iw-cream:#f5f3ea;
  --iw-ink:#3b3427;
  --iw-dim:#6b6450;
  --iw-h:"Raleway",-apple-system,BlinkMacSystemFont,sans-serif;
  --iw-b:"Quicksand","Garet","Raleway",sans-serif;

  font-family:var(--iw-b);
  color:var(--iw-ink);
  max-width:560px;
  margin:0 auto;
  box-sizing:border-box;
}
#ishiku-weather-widget *{box-sizing:border-box;}
#ishiku-weather-widget .iw-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Tarjeta ─────────────────────────────────────────── */
#ishiku-weather-widget .iw-card{
  position:relative; overflow:hidden;
  background:var(--iw-cream);
  border:1px solid rgba(63,81,35,.14);
  border-radius:20px;
  padding:24px;
  box-shadow:0 22px 44px -20px rgba(26,46,26,.28), 0 4px 14px rgba(26,46,26,.05);
}
#ishiku-weather-widget .iw-fern{
  position:absolute; right:-28px; bottom:-32px; width:186px; height:186px;
  color:var(--iw-forest); opacity:.055; transform:rotate(-12deg); pointer-events:none;
}

/* ── Encabezado ──────────────────────────────────────── */
#ishiku-weather-widget .iw-head{
  position:relative; display:flex; justify-content:space-between;
  align-items:flex-start; gap:14px; margin-bottom:20px;
}
#ishiku-weather-widget .iw-eyebrow{
  margin:0 0 7px; font-family:var(--iw-h); font-size:12px; font-weight:600;
  letter-spacing:2.4px; text-transform:uppercase; color:var(--iw-moss); line-height:1.4;
}
#ishiku-weather-widget .iw-place{
  margin:0; font-family:var(--iw-h); font-weight:800; color:var(--iw-dark);
  font-size:clamp(19px, 2.4vw, 23px); line-height:1.15; letter-spacing:-.01em;
}
#ishiku-weather-widget .iw-date{
  margin:0; flex-shrink:0; text-align:right; font-size:12px;
  font-weight:600; color:var(--iw-dim); line-height:1.5;
}

/* ── Panel del momento ───────────────────────────────── */
#ishiku-weather-widget .iw-now{
  position:relative; overflow:hidden;
  border-radius:16px; padding:22px; margin-bottom:22px;
  color:var(--iw-cream);
  background:linear-gradient(140deg, var(--iw-forest) 0%, #4a6029 100%);
  box-shadow:inset 0 1px 0 rgba(245,243,234,.14);
  transition:background .6s ease;
}
#ishiku-weather-widget .iw-now::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 88% -8%, rgba(172,192,143,.26), transparent 55%),
    radial-gradient(ellipse at -5% 105%, rgba(127,164,47,.2), transparent 52%);
}
/* Ambiente según la condición — solo paleta de marca */
#ishiku-weather-widget[data-condition="sunny"]   .iw-now{background:linear-gradient(140deg, var(--iw-forest) 0%, var(--iw-moss) 135%);}
#ishiku-weather-widget[data-condition="cloudy"]  .iw-now,
#ishiku-weather-widget[data-condition="foggy"]   .iw-now{background:linear-gradient(140deg, var(--iw-forest) 0%, #4a6029 100%);}
#ishiku-weather-widget[data-condition="rainy"]   .iw-now,
#ishiku-weather-widget[data-condition="showery"] .iw-now{background:linear-gradient(150deg, var(--iw-ink) 0%, var(--iw-forest) 92%);}
#ishiku-weather-widget[data-condition="snowy"]   .iw-now{background:linear-gradient(150deg, #2f4a34 0%, var(--iw-forest) 100%);}
#ishiku-weather-widget[data-condition="stormy"]  .iw-now,
#ishiku-weather-widget.iw-night                  .iw-now{background:linear-gradient(135deg, var(--iw-deep) 0%, #2d3a1e 100%);}

#ishiku-weather-widget .iw-firefly{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--iw-sage); box-shadow:0 0 8px 2px rgba(172,192,143,.6);
  pointer-events:none; opacity:0;
  animation:iw-float 8s ease-in-out infinite, iw-glow 3.5s ease-in-out infinite;
}
#ishiku-weather-widget .iw-firefly:nth-of-type(1){top:20%; right:11%; animation-delay:0s,1s;}
#ishiku-weather-widget .iw-firefly:nth-of-type(2){bottom:22%; right:28%; animation-delay:3s,2.2s; transform:scale(.7);}
@keyframes iw-float{0%,100%{translate:0 0;}33%{translate:-10px -8px;}66%{translate:6px -14px;}}
@keyframes iw-glow{0%,100%{opacity:0;}50%{opacity:.85;}}

#ishiku-weather-widget .iw-now-top{
  position:relative; display:flex; align-items:center; gap:18px; margin-bottom:16px;
}
#ishiku-weather-widget .iw-halo{position:relative; width:78px; height:78px; flex-shrink:0; display:block;}
#ishiku-weather-widget .iw-halo::before{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1.5px dashed rgba(172,192,143,.5);
  animation:iw-spin 40s linear infinite;
}
@keyframes iw-spin{to{transform:rotate(360deg);}}
#ishiku-weather-widget .iw-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:2px solid var(--iw-moss); color:var(--iw-cream);
  background:rgba(245,243,234,.07);
  box-shadow:0 0 22px rgba(127,164,47,.32), inset 0 0 14px rgba(127,164,47,.14);
}
#ishiku-weather-widget .iw-icon svg{
  width:40px; height:40px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
#ishiku-weather-widget .iw-temp{
  margin:0; font-family:var(--iw-h); font-weight:800; line-height:1;
  font-size:clamp(40px, 6vw, 50px); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
#ishiku-weather-widget .iw-temp .iw-unit{
  font-size:.42em; color:var(--iw-sage); margin-left:3px; letter-spacing:0;
}
#ishiku-weather-widget .iw-desc{
  margin:6px 0 0; font-weight:700; font-size:14.5px;
  color:var(--iw-cream); line-height:1.4;
}

#ishiku-weather-widget .iw-pills{
  position:relative; display:flex; flex-wrap:wrap; gap:6px; font-size:11.5px;
}
#ishiku-weather-widget .iw-pill{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:5px 11px; border-radius:999px;
  background:rgba(245,243,234,.1); border:1px solid rgba(172,192,143,.3);
  color:#d6dcca;
}
#ishiku-weather-widget .iw-pill b{color:var(--iw-cream); font-weight:800;}
#ishiku-weather-widget .iw-pill svg{
  width:13px; height:13px; flex-shrink:0; fill:none; stroke:var(--iw-sage);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* Escala UV: color semántico internacional, no decorativo */
#ishiku-weather-widget .iw-uv{
  padding:1px 6px; border-radius:10px; font-size:9px; font-weight:800;
  text-transform:uppercase; letter-spacing:.5px;
}
#ishiku-weather-widget .iw-uv-bajo{background:rgba(127,164,47,.3); color:#cfe09a;}
#ishiku-weather-widget .iw-uv-moderado{background:rgba(212,160,23,.3); color:#ecd28a;}
#ishiku-weather-widget .iw-uv-alto{background:rgba(255,140,0,.28); color:#ffc180;}
#ishiku-weather-widget .iw-uv-muyalto{background:rgba(220,50,50,.28); color:#f0a0a0;}
#ishiku-weather-widget .iw-uv-extremo{background:rgba(123,111,176,.3); color:#c9c2e6;}

/* Consejo para la visita */
#ishiku-weather-widget .iw-tip{
  position:relative; margin:16px 0 0; padding:13px 15px 13px 15px;
  border-left:3px solid var(--iw-moss); border-radius:0 10px 10px 0;
  background:rgba(245,243,234,.09);
  font-size:13px; line-height:1.55; font-weight:600; color:#e7ebdc;
}
#ishiku-weather-widget .iw-tip b{color:#fff; font-weight:800;}

/* ── Pronóstico ──────────────────────────────────────── */
#ishiku-weather-widget .iw-forecast-title{
  position:relative; display:flex; align-items:center; gap:10px;
  margin:0 0 12px; font-family:var(--iw-h); font-size:11px; font-weight:800;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--iw-dim);
}
#ishiku-weather-widget .iw-forecast-title::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(127,164,47,.35), transparent);
}
#ishiku-weather-widget .iw-forecast{
  position:relative; display:flex; gap:8px; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px;
}
#ishiku-weather-widget .iw-forecast::-webkit-scrollbar{height:3px;}
#ishiku-weather-widget .iw-forecast::-webkit-scrollbar-track{background:transparent;}
#ishiku-weather-widget .iw-forecast::-webkit-scrollbar-thumb{background:var(--iw-sage); border-radius:3px;}

#ishiku-weather-widget .iw-day{
  flex:0 0 auto; width:78px; scroll-snap-align:start; text-align:center;
  padding:12px 6px; background:#fffdf8; border-radius:16px;
  border:1px solid rgba(63,81,35,.1);
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;
}
#ishiku-weather-widget .iw-day:hover{
  transform:translateY(-4px); border-color:rgba(127,164,47,.5);
  box-shadow:0 12px 24px -10px rgba(26,46,26,.28);
}
#ishiku-weather-widget .iw-dayname{
  display:block; margin-bottom:7px; font-family:var(--iw-h); font-size:10px;
  font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--iw-dim);
}
#ishiku-weather-widget .iw-dayicon{
  display:flex; align-items:center; justify-content:center;
  margin-bottom:7px; color:var(--iw-forest);
}
#ishiku-weather-widget .iw-dayicon svg{
  width:26px; height:26px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
#ishiku-weather-widget .iw-day:hover .iw-dayicon{color:var(--iw-moss);}
#ishiku-weather-widget .iw-daytemp{
  display:block; margin-bottom:6px; font-family:var(--iw-h);
  font-size:13px; font-weight:800; color:var(--iw-forest); font-variant-numeric:tabular-nums;
}
#ishiku-weather-widget .iw-daytemp small{font-size:10.5px; font-weight:600; color:#a8a290;}
#ishiku-weather-widget .iw-rain{
  display:inline-flex; align-items:center; justify-content:center; gap:3px;
  font-size:10px; font-weight:700; font-variant-numeric:tabular-nums;
}
#ishiku-weather-widget .iw-rain svg{
  width:10px; height:10px; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
#ishiku-weather-widget .iw-rain-low{color:#a8a290;}
#ishiku-weather-widget .iw-rain-mid{color:var(--iw-moss);}
#ishiku-weather-widget .iw-rain-high{color:var(--iw-forest);}

/* Día de cierre: se atenúa y se rotula, para no invitar a venir un martes */
#ishiku-weather-widget .iw-day.iw-closed{background:#efece0; border-style:dashed;}
#ishiku-weather-widget .iw-day.iw-closed .iw-dayicon,
#ishiku-weather-widget .iw-day.iw-closed .iw-daytemp,
#ishiku-weather-widget .iw-day.iw-closed .iw-rain{opacity:.42;}
#ishiku-weather-widget .iw-closed-tag{
  display:block; margin-top:5px; font-family:var(--iw-h); font-size:8.5px;
  font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#a08b6a;
}

/* ── Pie ─────────────────────────────────────────────── */
#ishiku-weather-widget .iw-foot{
  position:relative; display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; margin:16px 0 0; font-size:10px; font-weight:600; color:#a8a290;
}
#ishiku-weather-widget .iw-source{flex-shrink:0;}

/* ── Error ───────────────────────────────────────────── */
#ishiku-weather-widget .iw-errorcard{align-items:center; gap:14px;}
#ishiku-weather-widget .iw-errorcard svg{
  width:28px; height:28px; flex-shrink:0; fill:none; stroke:var(--iw-forest);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
#ishiku-weather-widget .iw-errorcard p{margin:0; font-size:14px; line-height:1.55; color:var(--iw-dim);}

/* ── Carga ───────────────────────────────────────────── */
@keyframes iw-shimmer{0%{background-position:-600px 0;}100%{background-position:600px 0;}}
#ishiku-weather-widget .iw-skel{
  display:block; height:15px; border-radius:6px;
  background:linear-gradient(90deg,#e8e6dc 25%,#f7f6ef 50%,#e8e6dc 75%);
  background-size:1440px 100%; animation:iw-shimmer 1.4s infinite linear;
}
@keyframes iw-fadein{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}
#ishiku-weather-widget .iw-in{animation:iw-fadein .6s cubic-bezier(.22,1,.36,1) forwards;}

/* ── Anchos ──────────────────────────────────────────── */
@media (min-width:480px){
  #ishiku-weather-widget .iw-forecast{overflow-x:visible; padding-bottom:0;}
  #ishiku-weather-widget .iw-day{flex:1; width:auto;}
}
@media (max-width:420px){
  #ishiku-weather-widget .iw-card{padding:20px;}
  #ishiku-weather-widget .iw-now{padding:20px 18px;}
  #ishiku-weather-widget .iw-head{flex-direction:column; gap:6px;}
  #ishiku-weather-widget .iw-date{text-align:left;}
  #ishiku-weather-widget .iw-foot{flex-direction:column; gap:3px;}
}

@media (prefers-reduced-motion:reduce){
  #ishiku-weather-widget .iw-skel,
  #ishiku-weather-widget .iw-halo::before{animation:none !important;}
  #ishiku-weather-widget .iw-firefly{display:none;}
  #ishiku-weather-widget .iw-in{animation:none; opacity:1;}
  #ishiku-weather-widget .iw-day,
  #ishiku-weather-widget .iw-day:hover{transition:none; transform:none;}
}

/* ── Contraste (auditoría WCAG 2026-10-04) ───────────────
   Los grises cálidos #a8a290 y el verde #7fa42f no llegaban a 4.5:1 sobre blanco ni
   crema. Se usan --iw-dim (#6b6450) y el acento de texto del sitio (#557320). El día
   cerrado ya no se apaga con opacidad sobre el texto: solo el ícono. */
#ishiku-weather-widget .iw-eyebrow{color:#557320; font-weight:800;}
#ishiku-weather-widget .iw-daytemp small,
#ishiku-weather-widget .iw-rain-low,
#ishiku-weather-widget .iw-foot{color:var(--iw-dim);}
#ishiku-weather-widget .iw-day.iw-closed .iw-daytemp,
#ishiku-weather-widget .iw-day.iw-closed .iw-rain{opacity:1; color:var(--iw-dim);}
#ishiku-weather-widget .iw-day.iw-closed .iw-daytemp small{color:var(--iw-dim);}
#ishiku-weather-widget .iw-closed-tag{color:#6b5a3e;}