/**
 * Estilo del mapa de avistamientos en la web.
 *
 * Dos criterios que guían todo lo de aquí:
 *
 *  - **Se lee en un móvil.** La mayoría de quien llegue desde una tienda de
 *    apps lo hará desde el teléfono, así que nada baja de 14px ni depende de
 *    pasar el ratón por encima.
 *  - **El color no es la única señal.** Los tres niveles de riesgo se
 *    distinguen por color, pero también llevan su texto ("Peligrosa",
 *    "Precaución"): una de cada doce personas no distingue el rojo del verde.
 */

.wv-mapa-caja {
  margin: 1.5rem 0;
}

.wv-mapa {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  /* El mapa es contenido, no decoración: se le da un borde suave para que se
     separe del fondo de la página sin competir con él. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  z-index: 0; /* por debajo de menús desplegables del tema */
}

/* Lo que se ve MIENTRAS las teselas todavía se están dibujando.
   Sin esto sale el gris de fábrica de Leaflet (#ddd), que parece un mapa roto
   durante el segundo que tarda en pintarse. Con el azul del mar parece un mapa
   que aún no ha cargado, que es lo que es.

   OJO al selector: `#wv-mapa` ES el contenedor de Leaflet —la clase se la pone
   Leaflet a ese mismo elemento—, así que va PEGADO (`.wv-mapa.leaflet-container`)
   y no separado por un espacio. Escrito como descendiente no encuentra nada y
   la regla no hace absolutamente nada, sin dar ningún error.

   Es el mismo `agua` de `tema-mapa.js`: si allí cambia, aquí también. */
.wv-mapa.leaflet-container {
  background: #a9d5e8;
}

.wv-mapa-barra {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}

.wv-mapa-cerca {
  background: #12A150;      /* el verde de la app */
  color: #fff;
  border: 0;
  border-radius: 999px;
  /* Área táctil cómoda: por debajo de 44px de alto, un dedo falla. */
  padding: .6rem 1.1rem;
  min-height: 44px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}

.wv-mapa-cerca:hover,
.wv-mapa-cerca:focus-visible {
  background: #0e8442;
}

.wv-mapa-estado {
  font-size: .9rem;
  opacity: .75;
}

/* --- Los marcadores ------------------------------------------------------ */

.wv-pin {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  background: #12A150;
}

.wv-pin--caution { background: #F57C00; }
.wv-pin--danger  { background: #D32F2F; }
.wv-pin--unknown { background: #757575; }

/* --- La ficha que sale al pulsar ----------------------------------------- */

.wv-ficha {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 180px;
  max-width: 240px;
}

.wv-ficha img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

.wv-ficha strong { font-size: 1rem; line-height: 1.25; }
.wv-ficha em { font-size: .85rem; opacity: .75; font-style: italic; }

.wv-riesgo {
  align-self: flex-start;
  font-size: .78rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 999px;
  color: #fff;
  background: #12A150;
}

.wv-riesgo--caution { background: #F57C00; }
.wv-riesgo--danger  { background: #D32F2F; }
.wv-riesgo--unknown { background: #757575; }

.wv-aviso {
  font-size: .78rem;
  line-height: 1.35;
  opacity: .8;
}

/* En pantallas estrechas el mapa se queda un poco más bajo: 520px en un móvil
   se come toda la pantalla y quien lee no ve que la página sigue. */
@media (max-width: 600px) {
  .wv-mapa { height: 380px !important; }
}

/* ---------------------------------------------------------------------------
   LOS LUGARES DE NATURALEZA: parques, reservas, campings y miradores
   ---------------------------------------------------------------------------
   Se dibujan con CSS y un símbolo, no con imágenes: se ven nítidos en
   cualquier pantalla, no hay nada que descargar, y cambiar un color es cambiar
   una línea.

   Cada tipo tiene su color y su forma, no solo su color: quien no distingue
   bien el verde del marrón necesita otra pista, y la forma se la da.
   -------------------------------------------------------------------------- */
.wv-lugar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  /* Un borde blanco para que el icono se lea sobre cualquier fondo del mapa,
     sea el verde de un bosque o el azul del mar. */
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.wv-lugar--parque  { background: #2f6b3a; }  /* verde bosque */
.wv-lugar--reserva { background: #1d6b63; }  /* verde azulado: está protegido */
.wv-lugar--camping { background: #a0602a; }  /* tierra: es donde se acampa */
.wv-lugar--mirador { background: #3a5f9e; }  /* azul: se mira a lo lejos */

/* El tipo de lugar dentro de su ficha, en pequeño y discreto. */
.wv-lugar-tipo {
  font-size: .85em;
  color: #5c5c5c;
}