* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #0a1a2f;
}

#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Color de mar oscuro: cualquier margen sin tiles parece agua, no un hueco. */
  background: #14324a;
}

/* Atenuamos las tiles de OSM para un look oscuro sin depender de un proveedor
   de tiles oscuras con API key. Ni tan oscuro que no se reconozca la isla, ni
   tan claro que compita con el viento. */
.leaflet-tile-pane {
  filter: grayscale(0.75) brightness(0.62) contrast(1.05);
}

/* Lectura del viento bajo el cursor */
.readout {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  background: rgba(255, 255, 255, 0.95);
  color: #12303f;
  padding: 8px 12px;
  border-radius: 10px;
  min-width: 118px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.readout-name {
  font-size: 15px;
  font-weight: 700;
  color: #1d6f66;
  letter-spacing: .2px;
  margin-bottom: 1px;
}
.readout-speed { font-size: 20px; font-weight: 800; }
.readout-speed-alt { font-size: 13px; font-weight: 600; color: #5a6b7b; }
.readout-dir { font-size: 12px; color: #5a6b7b; margin-top: 2px; }
.readout-wave {
  font-size: 12px;
  color: #2a6f97;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Barra de tiempo inferior */
.timebar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 600;
  width: min(920px, calc(100% - 24px));
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(10, 26, 47, 0.82);
  backdrop-filter: blur(8px);
  padding: 10px 16px;
  border-radius: 14px;
  color: #eaf2f9;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

.play {
  flex: none;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: #2a9d8f;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s;
}
.play:hover { background: #248277; }

.time-info { flex: 1; min-width: 0; }

.time-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.time-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
}
.time-weather {
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.time-slider {
  width: 100%;
  margin: 0;
  accent-color: #2a9d8f;
  cursor: pointer;
}

.time-ticks {
  position: relative;
  height: 18px;
  margin-top: 3px;
  font-size: 10px;
  color: #9db4c9;
}
.time-ticks span {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.time-ticks span.day { color: #eaf2f9; font-weight: 700; }
/* Rayita vertical que marca el arranque de cada día. */
.time-ticks .tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 5px;
  background: rgba(157, 180, 201, 0.55);
  transform: translateX(-50%);
}

.loading {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 700;
  background: rgba(10, 26, 47, 0.9);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
}
.loading.error { background: #922b21; }

/* Aviso para quien tiene JavaScript desactivado (el mapa no puede mostrarse). */
.noscript {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 700;
  width: min(420px, calc(100% - 32px));
  background: rgba(10, 26, 47, 0.92);
  color: #eaf2f9;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
}
.noscript p { margin: 0 0 8px; }
.noscript p:last-child { margin-bottom: 0; }

/* Contenido solo para buscadores/lectores de pantalla (SEO + accesibilidad),
   oculto visualmente sin usar display:none (que lo ignorarían). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Leyenda de la escala de color del viento (abajo-izquierda). */
.legend {
  position: absolute;
  left: 12px;
  bottom: 16px;
  z-index: 500;
  background: rgba(10, 26, 47, 0.82);
  backdrop-filter: blur(6px);
  padding: 8px 10px 6px;
  border-radius: 10px;
  color: #eaf2f9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  width: 148px;
  pointer-events: none;
}
.legend-bar {
  height: 8px;
  border-radius: 4px;
  /* El degradado se fija por JS con los colores reales de la escala. */
}
.legend-scale {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #b9cbdc;
  margin-top: 3px;
}
.legend-unit {
  font-size: 9px;
  color: #8ba2b8;
  text-align: center;
  margin-top: 1px;
}

/* Marcador de avistamiento de medusa (icono SVG propio, minimalista). Color
   cálido para destacar sobre el mar y el viento sin romper la estética. */
/* OJO: no poner "position" aquí. Leaflet coloca los marcadores con
   position:absolute + transform; si se pisa (p. ej. con relative) los iconos se
   apilan unos bajo otros y se desplazan ~15 px por cada marcador anterior. El
   contador rojo se coloca igualmente: el marcador de Leaflet ya es absoluto. */
.medusa-marker {
  color: #ffd166;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  cursor: pointer;
}
.medusa-marker svg {
  display: block;
  fill: #ffd166;
  stroke: #ffd166;
}
/* Pequeño contador cuando hay varios avistamientos en el mismo punto. */
.medusa-marker .medusa-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: #e63946;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Popup del avistamiento de medusa: fondo oscuro, acorde al resto de la UI. */
.leaflet-popup.medusa-leaflet .leaflet-popup-content-wrapper {
  background: rgba(10, 26, 47, 0.95);
  color: #eaf2f9;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.leaflet-popup.medusa-leaflet .leaflet-popup-tip {
  background: rgba(10, 26, 47, 0.95);
}
.leaflet-popup.medusa-leaflet a.leaflet-popup-close-button {
  color: #9db4c9;
}
.leaflet-popup.medusa-leaflet a.leaflet-popup-close-button:hover {
  color: #eaf2f9;
}

.medusa-popup {
  font-size: 13px;
  color: #eaf2f9;
  line-height: 1.5;
  min-width: 160px;
}
.medusa-popup .medusa-multi {
  font-size: 11px;
  font-weight: 700;
  color: #ffd166;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.medusa-popup .medusa-especie {
  font-size: 15px;
  font-style: italic;
  font-weight: 700;
  color: #7fd8c6;
  margin-bottom: 4px;
}
/* Filas etiqueta/valor: la etiqueta a la izquierda, el valor a la derecha. */
.medusa-popup .medusa-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.medusa-popup .medusa-lbl {
  color: #9db4c9;
}
.medusa-popup .medusa-val {
  font-weight: 600;
  text-align: right;
}
/* Nivel de urticancia con color: de verde (inocuo) a rojo (muy urticante). */
.medusa-popup .medusa-urti-1 { color: #8fd694; }
.medusa-popup .medusa-urti-2 { color: #ffd166; }
.medusa-popup .medusa-urti-3 { color: #f4a259; }
.medusa-popup .medusa-urti-4 { color: #ff6b6b; }

.medusa-popup .medusa-sep {
  border: 0;
  border-top: 1px solid rgba(157, 180, 201, 0.25);
  margin: 8px 0;
}
/* Nota aclaratoria: los avisos son de las últimas 24h, no una previsión. */
.medusa-popup .medusa-nota {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(157, 180, 201, 0.25);
  font-size: 11px;
  font-style: italic;
  color: #8aa0b6;
  line-height: 1.4;
}
.medusa-popup .medusa-fuente {
  margin-top: 6px;
  font-size: 11px;
  color: #9db4c9;
}
.medusa-popup .medusa-fuente a { color: #2a9d8f; }

/* En móvil, subimos el control de zoom para que no lo tape la barra de tiempo,
   y agrandamos ligeramente sus botones para el uso con el dedo. */
@media (max-width: 640px) {
  .leaflet-bottom.leaflet-right {
    bottom: 120px;
  }
  .leaflet-control-zoom a {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 22px;
  }
  /* La leyenda, más pequeña y arriba de la barra de tiempo. */
  .legend {
    width: 120px;
    bottom: 128px;
    padding: 6px 8px 5px;
  }
}