/* JDServer-Webs — forecast-meteogram.css
 * - Scroll horizontal en móvil (zoom)
 * - Más altura para eje inferior
 * Nota: colores del SVG los gestiona el JS (robusto en auto/light/dark)
 */

#fc-mgram.card{ overflow:hidden; }

/* Header */
#fc-mgram .mgram-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--card-border, rgba(0,0,0,.08));
}
#fc-mgram .mgram-head h3{ margin:0; font-size:1.05rem; }

/* Meta */
#fc-mgram .mgram-meta{
  opacity:.85;
  font-size:.9rem;
  padding:10px 14px 0;
}

/* Contenedor con scroll horizontal */
#fc-mgram .mgram-wrap{
  padding: 10px 12px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#fc-mgram .mgram-wrap::-webkit-scrollbar{ height: 10px; }
#fc-mgram .mgram-wrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
html[data-theme="light"] #fc-mgram .mgram-wrap::-webkit-scrollbar-thumb,
body[data-theme="light"] #fc-mgram .mgram-wrap::-webkit-scrollbar-thumb,
.theme-light #fc-mgram .mgram-wrap::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.12);
}

/* SVG */
#fc-mgram .mgram-svg{
  display:block;
  width: 100%;
  height: 380px;
}

/* Legend */
#fc-mgram .mgram-legend{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  padding: 8px 14px 14px;
  opacity:.85;
}
#fc-mgram .mgram-dot{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.9rem;
}
#fc-mgram .dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
#fc-mgram .dot.temp{ background: rgba(248,113,113,.95); }
#fc-mgram .dot.pop{ background: rgba(56,189,248,.85); }
#fc-mgram .dot.wind{ background: rgba(34,197,94,.85); }

#fc-mgram .no-data{ padding: 16px; text-align:center; opacity:.8; }
#fc-mgram.loading .mgram-wrap{ opacity:.6; filter:saturate(.7); }

/* ===== Mobile: ancho grande + scroll ===== */
@media (max-width: 820px){
  #fc-mgram .mgram-svg{
    width: 1500px;
    max-width: none;
    height: 470px;
  }
  #fc-mgram .mgram-meta{ padding:10px 12px 0; }
  #fc-mgram .mgram-wrap{ padding: 8px 10px 10px; }
}

@media (max-width: 420px){
  #fc-mgram .mgram-svg{
    width: 1650px;
    height: 520px;
  }
}