/* Pestañas de las páginas que cuelgan de la ficha de una playa: hora a hora y deportes
   (playas/partials/navegacion_datos.html) y restaurantes, alojamientos y náuticos (partials/servicios_cerca.html). */

@layer componentes {
  .pestanas-datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    align-items: center;
    margin: var(--espacio-4) 0 var(--espacio-6);
    padding-bottom: var(--espacio-3);
    border-bottom: 1px solid var(--color-borde);
  }

  .pestanas-datos a {
    display: inline-flex;
    gap: var(--espacio-2);
    align-items: center;
    padding: var(--espacio-2) var(--espacio-3);
    border-bottom: 2px solid transparent;
    color: var(--color-texto-suave);
    font-weight: 600;
  }

  .pestanas-datos a:hover {
    color: var(--color-marino);
  }

  .pestanas-datos .pestanas-datos__ficha {
    margin-right: auto;
    padding-left: 0;
    color: var(--color-acento-texto);
  }

  .pestanas-datos a[aria-current="page"] {
    border-color: var(--color-acento);
    color: var(--color-marino);
  }

  .pestanas-datos .icono-dato {
    flex: none;
    width: 20px;
    height: 20px;
  }

  .pestanas-datos__corto {
    display: none;
  }

  @media (max-width: 760px) {
    .pestanas-datos {
      margin-bottom: var(--espacio-4);
    }

    .pestanas-datos a {
      padding: var(--espacio-1) var(--espacio-2);
      font-size: var(--paso--1);
    }

    .pestanas-datos .pestanas-datos__ficha {
      flex-basis: 100%;
    }

    .pestanas-datos .icono-dato {
      width: 16px;
      height: 16px;
    }

    .pestanas-datos__largo {
      display: none;
    }

    .pestanas-datos__corto {
      display: inline;
    }
  }
}