/* Mapa interactivo de playas, del municipio y de la portada (static/js/oceanaria/mapa-playas.js):
   pestañas, fila de parámetros, días, mapa con su leyenda y lista de playas ordenadas. */

@layer componentes {
  /* Buscador de playas y municipios (portada), con sus sugerencias debajo. */
  .mapa-playas__buscador {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--espacio-5);
  }

  .mapa-playas__buscador svg {
    position: absolute;
    left: 14px;
    width: 20px;
    height: 20px;
    color: var(--color-texto-suave);
    pointer-events: none;
  }

  .mapa-playas__buscador input {
    width: 100%;
    padding: var(--espacio-3) var(--espacio-4) var(--espacio-3) 44px;
    border: 2px solid var(--color-acento);
    border-radius: 999px;
    background: var(--color-fondo);
    font: inherit;
    font-size: var(--paso-1);
  }

  .mapa-playas__buscador input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--color-seleccion-suave);
  }

  /* El buscador del mapa: mueve el mapa, no lleva a otra página. Más pequeño y sobrio que el grande (naranja, en
     píldora), con una chincheta, para que no parezcan el mismo. */
  .mapa-playas__buscador--mapa {
    max-width: 420px;
    margin-bottom: var(--espacio-4);
  }

  .mapa-playas__buscador--mapa svg {
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--color-marino);
  }

  .mapa-playas__buscador--mapa input {
    padding: var(--espacio-2) var(--espacio-3) var(--espacio-2) 38px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-size: var(--paso-0);
  }

  .mapa-playas__buscador--mapa input:focus-visible {
    border-color: var(--color-acento);
  }

  .mapa-playas__filtro[hidden],
  .mapa-playas__aviso-gesto[hidden] {
    display: none;
  }

  .mapa-playas__filtro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2) var(--espacio-3);
    align-items: center;
    margin: 0 0 var(--espacio-3);
    font-size: var(--paso--1);
  }

  .mapa-playas__info-municipio {
    padding: 2px var(--espacio-3);
    border: 1px solid var(--color-acento);
    border-radius: 999px;
    background: var(--color-seleccion-suave);
    color: var(--color-acento-texto-hondo);
    font-weight: 600;
  }

  .mapa-playas__info-municipio:empty {
    display: none;  /* en el mapa de un municipio, al buscar una playa, no hay página a la que llevar */
  }

  .mapa-playas__filtro button {
    padding: 2px var(--espacio-3);
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    background: var(--color-fondo);
    font: inherit;
    cursor: pointer;
  }

  /* Aviso en el móvil al intentar mover el mapa con un dedo. */
  .mapa-playas__aviso-gesto {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: var(--color-velo-fuerte);
    color: var(--color-texto-invertido);
    font-weight: 600;
    pointer-events: none;
  }

  /* Opciones: una etiqueta delante de cada fila («Datos de», «Dato», «Día»), como en las páginas de datos. */
  .mapa-playas__opciones {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--espacio-2) var(--espacio-4);
    align-items: center;
    margin-bottom: var(--espacio-2);
  }

  .mapa-playas__opciones [hidden],
  .mapa-playas__etiqueta:has(+ [hidden]) {
    display: none;
  }

  .mapa-playas__etiqueta {
    color: var(--color-marino);
    font-size: var(--paso--1);
    font-weight: 600;
  }

  /* «Datos de»: pestañas con el texto marino y el subrayado naranja */
  .mapa-playas__pestanas {
    display: flex;
    gap: var(--espacio-2);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mapa-playas__pestanas button {
    flex: none;
    padding: var(--espacio-1) var(--espacio-2);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--color-texto-suave);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .mapa-playas__pestanas button[aria-selected="true"],
  .mapa-playas__pestanas button[aria-pressed="true"] {
    border-bottom-color: var(--color-acento);
    color: var(--color-marino);
  }

  /* Filas de botones: en móvil se desplazan en horizontal, con barra fina visible y un degradado
     a la derecha que avisa de que hay más. */
  .mapa-playas__fila {
    display: flex;
    gap: var(--espacio-2);
    padding: 2px 0 var(--espacio-2);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .mapa-playas__fila[hidden] {
    display: none;
  }

  .mapa-playas__fila[data-desborda="true"] {
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  }

  .mapa-playas__fila[data-desborda="true"][data-al-final="true"] {
    mask-image: none;
  }

  /* Datos y días: la misma caja, rectangular con las esquinas algo redondeadas. Los datos llevan su icono en la
     misma línea; los días, su nombre y su fecha debajo (como los botones de día de la tabla horaria). */
  .mapa-playas__fila button {
    display: inline-flex;
    flex: none;
    gap: 6px;
    align-items: center;
    padding: 6px var(--espacio-3);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    background: var(--color-fondo);
    color: var(--color-marino);
    font: inherit;
    font-size: var(--paso--1);
    white-space: nowrap;
    cursor: pointer;
  }

  .mapa-playas__icono {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-marino);
  }

  .mapa-playas__fila--dias button {
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    min-width: 88px;
    padding: 4px var(--espacio-3);
    font-weight: 600;
    line-height: 1.25;
  }

  .mapa-playas__fila--dias small {
    color: var(--color-texto-suave);
    font-size: 0.72rem;
    font-weight: 400;
  }

  .mapa-playas__dia-corto {
    display: none;
  }

  .mapa-playas__fila button[aria-pressed="true"] {
    border-color: var(--color-acento);
    background: var(--color-seleccion-suave);
    color: var(--color-acento-texto-hondo);
    font-weight: 600;
  }

  .mapa-playas__fila button[aria-pressed="true"] small {
    color: var(--color-acento-texto);
  }

  .mapa-playas__resumen {
    margin: var(--espacio-3) 0 0;
    color: var(--color-texto-suave);
    font-size: var(--paso--1);
  }

  .mapa-playas__lienzo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--espacio-4);
  }

  .mapa-playas .leaflet-container {
    font-family: var(--fuente-texto);
  }

  /* Al cambiar de dato o de día, los puntos se reutilizan y su color se funde (mapa-playas.js). */
  .mapa-playas .leaflet-overlay-pane path {
    transition: fill 0.35s ease, stroke 0.35s ease, fill-opacity 0.35s ease;
  }

  .mapa-playas__pestanas button,
  .mapa-playas__fila button,
  .mapa-playas__lista li button {
    transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
  }

  .mapa-playas .leaflet-bar {
    user-select: none;
  }

  /* isolation: las capas de Leaflet (z-index 400–1000) quedan dentro del mapa y no tapan la cabecera fija. */
  .mapa-playas__mapa {
    isolation: isolate;
    height: 540px;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
  }

  .mapa-playas__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1) var(--espacio-4);
    margin-top: var(--espacio-2);
    color: var(--color-texto-suave);
    font-size: var(--paso--1);
  }

  .mapa-playas__leyenda i {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: var(--espacio-1);
    border-radius: 50%;
    background: var(--punto);
    vertical-align: -1px;
  }

  .mapa-playas__leyenda i[data-vacio] {
    border: 2px solid var(--mapa-sin-dato);
    background: var(--color-fondo);
  }

  .mapa-playas__lista {
    max-height: 540px;
    padding: var(--espacio-3);
    overflow: auto;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
  }

  .mapa-playas__lista h3 {
    margin: 0;
    color: var(--color-marino);
    font-size: var(--paso-0);
  }

  .mapa-playas__lista p {
    margin: 0 0 var(--espacio-2);
    color: var(--color-texto-suave);
    font-size: var(--paso--1);
  }

  .mapa-playas__provincia {
    width: 100%;
    margin-bottom: var(--espacio-2);
    padding: var(--espacio-1) var(--espacio-2);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pequeno);
    background: var(--color-fondo);
    font: inherit;
    font-size: var(--paso--1);
  }

  .mapa-playas__lista ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mapa-playas__lista li button {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--espacio-2);
    align-items: center;
    width: 100%;
    padding: var(--espacio-2) 2px;
    border: 0;
    border-bottom: 1px solid var(--color-borde);
    background: none;
    color: var(--color-texto);
    font: inherit;
    font-size: var(--paso--1);
    text-align: left;
    cursor: pointer;
  }

  .mapa-playas__lista li button:hover {
    background: var(--color-fondo-suave);
  }

  .mapa-playas__lista small {
    display: block;
    color: var(--color-texto-suave);
  }

  .mapa-playas__mas {
    display: none;
    margin-top: var(--espacio-2);
    color: var(--color-texto-suave);
    font-size: var(--paso--1);
    text-align: center;
  }

  .mapa-playas__valor {
    padding: 2px var(--espacio-2);
    border-radius: 999px;
    background: var(--punto);
    color: var(--texto-punto);
    font-weight: 700;
    white-space: nowrap;
  }

  .mapa-playas__valor[data-vacio] {
    border: 1px solid var(--mapa-sin-dato);
    background: var(--color-fondo);
    color: var(--color-texto-suave);
    font-weight: 600;
  }

  /* Los controles, rótulos y atribución de todos los mapas de Leaflet, con los colores de la web (en el tema oscuro,
     oscuros como el mapa); las etiquetas propias (.cerca__playa, .mapa-ficha__playa) las ajustan sus páginas. */
  .leaflet-container {
    background: var(--color-fondo-suave);
  }

  .leaflet-bar a,
  .leaflet-bar a:hover,
  .leaflet-bar a:focus {
    border-bottom-color: var(--color-borde);
    background-color: var(--color-fondo);
    color: var(--color-texto);
  }

  .leaflet-bar a:hover {
    background-color: var(--color-fondo-suave);
  }

  .leaflet-bar a.leaflet-disabled {
    background-color: var(--color-fondo-suave);
    color: var(--color-texto-suave);
  }

  .leaflet-container .leaflet-control-attribution {
    background: color-mix(in srgb, var(--color-fondo) 80%, transparent);
    color: var(--color-texto-suave);
  }

  .leaflet-control-attribution a {
    color: var(--color-marino);
  }

  .leaflet-tooltip {
    border-color: var(--color-borde);
    background: var(--color-fondo);
    color: var(--color-texto);
  }

  .leaflet-tooltip-top::before {
    border-top-color: var(--color-fondo);
  }

  .leaflet-tooltip-bottom::before {
    border-bottom-color: var(--color-fondo);
  }

  .leaflet-tooltip-left::before {
    border-left-color: var(--color-fondo);
  }

  .leaflet-tooltip-right::before {
    border-right-color: var(--color-fondo);
  }

  .leaflet-popup-content-wrapper,
  .leaflet-popup-tip {
    background: var(--color-fondo);
    color: var(--color-texto);
    box-shadow: var(--sombra);
  }

  .leaflet-container a.leaflet-popup-close-button {
    color: var(--color-texto-suave);
  }

  .leaflet-container a.leaflet-popup-close-button:hover,
  .leaflet-container a.leaflet-popup-close-button:focus {
    color: var(--color-texto);
  }

  /* Botón de centrar (static/js/oceanaria/leaflet-centrar.js), también en la animación de corrientes. */
  .control-centrar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-texto);
  }

  .mapa-playas__rotulo {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--color-rotulo);
    box-shadow: 0 0 0 1px var(--color-borde);
    color: var(--color-texto);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    pointer-events: none;
  }

  .mapa-playas__ficha strong {
    display: block;
    margin-bottom: var(--espacio-1);
    color: var(--color-marino);
    font-size: var(--paso-0);
  }

  .mapa-playas__ficha p {
    margin: 2px 0;
  }

  .mapa-playas__ficha a {
    display: inline-block;
    margin-top: var(--espacio-2);
    padding: var(--espacio-1) var(--espacio-3);
    border-radius: 999px;
    background: var(--color-acento);
    color: var(--color-texto-sobre-color);
    font-weight: 600;
    text-decoration: none;
  }

  /* El segundo enlace (el deporte elegido en esa playa), sin relleno */
  .mapa-playas__ficha a + a {
    display: table;
    margin-top: var(--espacio-1);
    background: none;
    box-shadow: inset 0 0 0 1px var(--color-acento);
  }

  /* Sin la lista junto al mapa (la página de un deporte: sus mejores playas van debajo) */
  .mapa-playas--sin-lista .mapa-playas__lienzo {
    grid-template-columns: 1fr;
  }

  .mapa-playas--sin-lista .mapa-playas__lista {
    display: none;
  }

  /* Municipio: sin la lista junto al mapa; las tarjetas de playa, debajo, hacen de lista ordenada. */
  .mapa-playas--tarjetas .mapa-playas__lienzo {
    grid-template-columns: 1fr;
  }

  .mapa-playas--tarjetas .mapa-playas__lista {
    display: none;
  }

  .mapa-playas--tarjetas .mapa-playas__mapa {
    height: 460px;
  }

  /* Con tarjetas, las opciones se quedan fijas bajo la cabecera al bajar por las tarjetas y el mapa. Entran en
     las transiciones (como la cabecera) para seguir tapando las tarjetas que se recolocan por debajo. */
  .mapa-playas--tarjetas .mapa-playas__controles {
    position: sticky;
    top: var(--alto-barra-compacta);
    z-index: 5;
    view-transition-name: opciones-mapa;
    margin-inline: calc(-1 * var(--espacio-3));
    padding: var(--espacio-2) var(--espacio-3) var(--espacio-1);
    background: var(--color-fondo);
    box-shadow: 0 6px 8px -8px var(--color-velo);
  }

  .mapa-playas--tarjetas .mapa-playas__resumen {
    display: none;
  }

  .mapa-playas__titulo-mapa {
    margin: var(--espacio-7) 0 var(--espacio-3);
    color: var(--color-marino);
    font-size: var(--paso-1);
  }

  .playas-mapa__orden {
    margin: var(--espacio-3) 0 var(--espacio-4);
    color: var(--color-texto-suave);
    font-size: var(--paso--1);
    text-align: center;
  }

  .playas-mapa {
    overflow-anchor: none;  /* al reordenarse, la página la sujeta mapa-playas.js, no el navegador */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--espacio-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .playa-mapa {
    display: block;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    color: var(--color-texto);
  }

  .playa-mapa:hover {
    border-color: var(--color-acento);
    box-shadow: var(--sombra);
    color: var(--color-texto);
  }

  .playa-mapa img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .playa-mapa span {
    display: grid;
    gap: 2px;
    padding: var(--espacio-2) var(--espacio-3) var(--espacio-3);
  }

  .playa-mapa small {
    color: var(--color-texto-suave);
  }

  .playa-mapa .playa-mapa__dato {
    justify-self: start;
    margin: 2px 0;
    padding: 1px var(--espacio-2);
    border-radius: 999px;
    background: var(--punto);
    color: var(--texto-punto);
    font-size: 0.75rem;
    font-weight: 700;
  }

  .playa-mapa .playa-mapa__dato[data-vacio] {
    border: 1px solid var(--mapa-sin-dato);
    background: var(--color-fondo);
    color: var(--color-texto-suave);
  }

  .playa-mapa .playa-mapa__bandera {
    display: inline-flex;
    padding: 0;  /* no la de .playa-mapa span */
    gap: 6px;
    align-items: center;
    font-size: var(--paso--1);
    font-weight: 600;
  }

  .playa-mapa__bandera::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--punto);
  }

  /* En móvil la lista va debajo del mapa y muestra unas seis playas; el resto, deslizando dentro. */
  @media (max-width: 820px) {
    .mapa-playas__lienzo {
      grid-template-columns: 1fr;
    }

    .mapa-playas__mapa {
      height: 420px;
    }

    .mapa-playas--tarjetas .mapa-playas__mapa {
      height: 340px;
    }

    /* En el móvil, compacto: sin etiquetas y los días abreviados («Lun.» y su fecha). */
    .mapa-playas__opciones {
      grid-template-columns: minmax(0, 1fr);
      gap: 2px;
    }

    .mapa-playas__etiqueta,
    .mapa-playas__dia-largo {
      display: none;
    }

    .mapa-playas__dia-corto {
      display: inline;
    }

    .mapa-playas__fila--dias button {
      min-width: 0;
      padding: 3px 10px;
    }

    .playas-mapa {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--espacio-3);
    }

    /* Andalucía es ancha y baja: en el móvil, un mapa más bajo enseña la costa sin media España encima. */
    .mapa-playas--andalucia .mapa-playas__mapa {
      height: 340px;
    }

    .mapa-playas__lista {
      max-height: none;
    }

    .mapa-playas__lista ol {
      max-height: 330px;
      overflow-y: auto;
      overscroll-behavior: contain;
      mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
    }

    .mapa-playas__mas {
      display: block;
    }
  }
}