/* Animación de corrientes y medusas de la portada (static/js/oceanaria/corrientes.js). */

@layer componentes {
  .corrientes__barra {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-3);
    align-items: center;
    margin-bottom: var(--espacio-3);
    font-size: var(--paso--1);
  }

  .corrientes__boton {
    padding: var(--espacio-1) var(--espacio-4);
    border: 1px solid var(--color-acento);
    border-radius: 999px;
    background: var(--color-seleccion-suave);
    color: var(--color-acento-texto-hondo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .corrientes__hora {
    display: flex;
    flex: 1;
    gap: var(--espacio-2);
    align-items: center;
    min-width: 240px;
  }

  .corrientes__hora input {
    flex: 1;
    accent-color: var(--color-acento);
  }

  .corrientes__hora output {
    min-width: 15ch;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  /* Ancho y alto, de corrientes.js: la zona a zoom entero llena el recuadro (sin agua sin corrientes alrededor);
     centrado si es más estrecho que la sección. Sin JavaScript, la proporción de la zona. */
  .corrientes__mapa {
    isolation: isolate;  /* las capas de Leaflet no tapan la cabecera fija */
    margin-inline: auto;
    aspect-ratio: 1.9 / 1;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
  }

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

  /* En el móvil el mapa es bajo: los créditos, en letra pequeña para no tapar media zona. */
  @media (max-width: 600px) {
    .corrientes .leaflet-control-attribution {
      font-size: 8px;
      line-height: 1.3;
    }
  }

  .corrientes__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2) var(--espacio-3);
    align-items: center;
    margin-top: var(--espacio-2);
    color: var(--color-texto-suave);
    font-size: var(--paso--1);
  }

  /* La escala con sus dos extremos, y el punto con su texto: cada uno en un bloque que no se parte */
  .corrientes__grupo {
    display: inline-flex;
    gap: var(--espacio-2);
    align-items: center;
    white-space: nowrap;
  }

  .corrientes__escala {
    width: 160px;
    height: 10px;
    border-radius: 2px;
  }

  .corrientes__medusa {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-fondo);
    border-radius: 50%;
    background: var(--corrientes-medusa);
    box-shadow: 0 0 0 1px var(--color-borde);
  }
}