/**
 * Metrópoli 360 — Clima de la ciudad.
 * Hereda la paleta del tema y funciona sola si el plugin se usa en otro portal.
 */

.m360c{
  --c-obsidiana:var(--m360-obsidiana,#12100E);
  --c-humo:var(--m360-humo,#1C1916);
  --c-cal:var(--m360-cal,#DED8C8);
  --c-tenue:var(--m360-cal-tenue,#9C9484);
  --c-cuerpo:var(--m360-cuerpo,#A9A292);
  --c-oro:var(--m360-oro,#C89B3C);
  --c-arco:var(--m360-arco,#58C4EE);
  --c-linea:rgba(222,216,200,.2);

  border:1px solid var(--c-linea);
  background:var(--c-humo);
  color:var(--c-cal);
  padding:0;
  overflow:hidden;
}

.m360c *{box-sizing:border-box}

/* ---------- Cabeza ---------- */
.m360c-cabeza{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:20px 26px;border-bottom:1px solid var(--c-linea);
}
.m360c-titulo{
  font-family:'Limelight',cursive;font-size:18px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-oro);margin:0;line-height:1.2;
}
.m360c-patrocinio{display:flex;align-items:center;gap:12px}
.m360c-patrocinio-etiqueta{
  font-family:'Archivo',sans-serif;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-tenue);
}
.m360c-patrocinio-marca{
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:700;
  font-size:20px;letter-spacing:.05em;text-transform:uppercase;color:var(--c-cal);
}
.m360c-patrocinio-logo{max-height:32px;width:auto;display:block}

/* ---------- Zonas ---------- */
.m360c-zonas{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--c-linea)}
.m360c-zona{
  background:none;border:0;border-right:1px solid var(--c-linea);
  padding:14px 8px;cursor:pointer;text-align:center;color:var(--c-tenue);
  transition:background .2s,color .2s;display:flex;flex-direction:column;gap:3px;
}
.m360c-zona:last-child{border-right:0}
.m360c-zona:hover{background:rgba(200,155,60,.08);color:var(--c-cal)}
.m360c-zona-nombre{
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:700;
  font-size:17px;letter-spacing:.12em;text-transform:uppercase;
}
.m360c-zona-detalle{font-family:'Archivo',sans-serif;font-size:9.5px;letter-spacing:.1em;opacity:.75}
.m360c-zona.m360c-activa{background:var(--c-oro);color:var(--c-obsidiana)}
.m360c-zona.m360c-activa .m360c-zona-detalle{opacity:.8}
.m360c-zona:focus-visible{outline:2px solid var(--c-arco);outline-offset:-2px}

/* ---------- Tablero ---------- */
.m360c-tablero{padding:0}
.m360c-cargando,.m360c-error{
  padding:52px 26px;text-align:center;font-family:'Archivo',sans-serif;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-tenue);
}
.m360c-error{color:#D97A5E}

/* Lectura principal */
.m360c-ahora{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;padding:28px 26px}
.m360c-glifo{width:92px;height:92px;flex-shrink:0}
.m360c-glifo svg{width:100%;height:100%;display:block}
.m360c-lectura{display:flex;flex-direction:column;gap:6px}
.m360c-grados{
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:900;
  font-size:clamp(56px,9vw,84px);line-height:.84;color:var(--c-cal);letter-spacing:.01em;
}
.m360c-grados sup{font-size:.38em;vertical-align:super;color:var(--c-oro);font-weight:600}
.m360c-condicion{
  font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-oro);
}
.m360c-sensacion{font-family:'Archivo',sans-serif;font-size:12px;color:var(--c-tenue);letter-spacing:.08em}

/* Métricas */
.m360c-metricas{
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--c-linea);border-bottom:1px solid var(--c-linea);
}
.m360c-metrica{
  padding:16px 12px;text-align:center;border-right:1px solid var(--c-linea);
  display:flex;flex-direction:column;gap:6px;
}
.m360c-metrica:last-child{border-right:0}
.m360c-metrica-etiqueta{
  font-family:'Archivo',sans-serif;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-tenue);
}
.m360c-metrica-valor{
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:700;
  font-size:24px;line-height:1;color:var(--c-cal);
}

/* Calidad del aire */
.m360c-aire{padding:20px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.m360c-aire-etiqueta{
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-tenue);white-space:nowrap;
}
.m360c-aire-barra{flex:1;min-width:160px;height:8px;background:rgba(222,216,200,.12);position:relative;overflow:hidden}
.m360c-aire-relleno{position:absolute;left:0;top:0;bottom:0;width:0;transition:width .9s cubic-bezier(.2,.7,.3,1)}
.m360c-aire-juicio{
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:700;
  font-size:19px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}

/* Conmutador */
.m360c-conmutador{display:flex;border-top:1px solid var(--c-linea)}
.m360c-conmutador button{
  flex:1;background:none;border:0;border-right:1px solid var(--c-linea);
  padding:12px;cursor:pointer;color:var(--c-tenue);
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.m360c-conmutador button:last-child{border-right:0}
.m360c-conmutador button:hover{color:var(--c-cal)}
.m360c-conmutador button.m360c-activa{background:rgba(200,155,60,.14);color:var(--c-oro)}
.m360c-conmutador button:focus-visible{outline:2px solid var(--c-arco);outline-offset:-2px}

/* Pronóstico */
.m360c-serie{display:grid;padding:22px 26px 26px;gap:0}
.m360c-serie--dias{grid-template-columns:repeat(5,1fr)}
.m360c-serie--horas{grid-template-columns:repeat(6,1fr)}
.m360c-punto{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 6px;border-right:1px solid rgba(222,216,200,.1);
}
.m360c-punto:last-child{border-right:0}
.m360c-punto-rotulo{
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-tenue);
}
.m360c-punto-glifo{width:34px;height:34px}
.m360c-punto-glifo svg{width:100%;height:100%;display:block}
.m360c-punto-max{
  font-family:'Big Shoulders Display','Archivo',sans-serif;font-weight:700;
  font-size:21px;line-height:1;color:var(--c-cal);
}
.m360c-punto-min{font-family:'Archivo',sans-serif;font-size:11px;color:var(--c-tenue)}
.m360c-punto-lluvia{font-family:'Archivo',sans-serif;font-size:10px;color:var(--c-arco);letter-spacing:.06em}

/* Pie */
.m360c-pie{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 26px;border-top:1px solid var(--c-linea);
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-tenue);
}
.m360c-sello{color:var(--c-oro)}

/* Compacto */
.m360c--compacto .m360c-conmutador,
.m360c--compacto .m360c-serie{display:none}
.m360c--compacto .m360c-metricas{grid-template-columns:repeat(3,1fr)}
.m360c--compacto .m360c-metrica:nth-child(n+4){display:none}

/* Movimiento */
@keyframes m360c-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.m360c-tablero > *{animation:m360c-entra .5s ease both}
@media (prefers-reduced-motion:reduce){
  .m360c *{animation:none !important;transition:none !important}
}

/* Responsivo */
@media(max-width:860px){
  .m360c-zonas{grid-template-columns:repeat(3,1fr)}
  .m360c-zona:nth-child(3){border-right:0}
  .m360c-zona:nth-child(-n+3){border-bottom:1px solid var(--c-linea)}
  .m360c-metricas{grid-template-columns:repeat(3,1fr)}
  .m360c-metrica:nth-child(3){border-right:0}
  .m360c-metrica:nth-child(-n+3){border-bottom:1px solid var(--c-linea)}
  .m360c-serie--horas{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:520px){
  .m360c-cabeza{padding:16px 18px}
  .m360c-ahora{grid-template-columns:1fr;gap:16px;padding:22px 18px;text-align:center;justify-items:center}
  .m360c-serie{padding:18px 14px;grid-template-columns:repeat(3,1fr) !important;gap:18px 0}
  .m360c-punto:nth-child(3n){border-right:0}
  .m360c-aire{padding:18px}
  .m360c-pie{padding:12px 18px;font-size:9px}
}