:root{
  --bg: #0f0f10;
  --glass: rgba(20,20,22,0.85);
  --panel: rgba(255,255,255,0.95);
  --muted: #6b7280;
  --accent: #2563eb;
}

*{box-sizing:border-box}
html, body { height:100%; margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }

#map{
  position:fixed;
  inset:0;
}

/* Topbar (meteoblue) */
#topbar{
  position: fixed;
  top: 12px; left: 12px; right: 12px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--glass);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  z-index: 1000;
}
#topbar label{ display:flex; gap:8px; align-items:center; }
#topbar input[type=date], #topbar select{
  padding:6px 8px; border-radius:8px; border:1px solid #333; background:#111; color:#fff;
  position: relative;
}
.hint{ color:#cbd5e1; font-size:14px; }
.status{ margin-left:auto; color:#fbbf24; font-weight:600; }

/* Panel datos meteoblue (se reposiciona por JS para no solapar la escala) */
#panel{
  position: fixed;
  left: 12px;
  bottom: 120px; /* valor de reserva; JS lo ajusta respecto a la escala */
  width: 460px; max-height: 50vh; overflow:auto;
  background: var(--panel);
  color: #111;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.28);
  padding: 12px 14px;
  z-index: 650;
}
#panel h3{ margin: 4px 0 8px; }
.meta{ color:#334155; font-size:13px; margin-bottom:8px; }
.muted{ color: var(--muted); text-align:left; }

/* Toolbar raster (debajo del topbar, recolocado por JS) */
#toolbar{
  position:absolute; z-index:750; left:12px;
  background:rgba(0,0,0,.85); color:#fff; padding:10px; border-radius:10px;
  font:14px system-ui; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  max-width: calc(100vw - 24px);
}
#toolbar .group{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
#toolbar input[type="number"]{ width:90px }

/* Leyenda raster (debajo del toolbar, recolocada por JS) */
#legend{
  position:absolute; z-index:740; right:10px;
  background:rgba(255,255,255,.95); border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.2); padding:10px 12px;
  font:12px system-ui; color:#222; min-width:260px;
}
#legend .title{ font-weight:600; margin-bottom:6px }
#legend .muted{ opacity:.8; margin-bottom:6px }
#legend .swatch{ width:18px; height:18px; border-radius:4px; border:1px solid #bbb }
table.leg { width:100%; border-collapse:separate; border-spacing:6px 4px }
table.leg td { vertical-align:middle }

/* Escala fija 0–25 kt */
#scaleBar{
  position:absolute; z-index:730; left:50%; transform:translateX(-50%);
  bottom:16px; padding:6px 10px; border-radius:14px;
  background:rgba(30,30,30,0.65); box-shadow:0 8px 24px rgba(0,0,0,.35);
  display:flex; align-items:center; gap:10px; color:#fff; font:14px system-ui;
}
#scaleBar canvas{ display:block; border-radius:12px }
#scaleBar .kt{
  font-weight:700; padding:4px 10px; background:rgba(0,0,0,.35);
  border-radius:999px; letter-spacing:.5px
}

/* Errores */
.error{
  position: absolute; top: 120px; right: 12px;
  background: #fee2e2; color:#991b1b;
  padding: 10px 12px; border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 900;
  display:none;
}

/* Render */
.leaflet-image-layer{
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Responsivo */
@media (max-width: 1200px){
  #toolbar{ top: 120px; }
  #legend{ top: 170px; }
}