@layer paginas {
  /* Iconos de los datos (static/img/iconos-datos.svg): de línea, en azul marino. Solo los del contenido: el del tema,
     en la barra, sigue el color de la barra. */
  main .icono-dato {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--color-marino);
  }

  /* Lo observado por los socorristas: el texto con un punto del color de su tramo (--c) delante. */
  .etiqueta-dato {
    display: inline-flex;
    gap: var(--espacio-2);
    align-items: baseline;
    color: var(--color-marino);
    font-weight: 600;
  }

  .etiqueta-dato::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c);
  }

  /* Lo que han visto hoy los socorristas: la bandera en grande y, al lado, medusas, algas y natas. */
  .socorristas {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--espacio-4);
    margin-top: var(--espacio-4);
  }

  .socorristas__bandera {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--espacio-1);
    margin: 0;
    padding: var(--espacio-4);
    border: 1px solid var(--color-borde);
    border-left: 6px solid var(--c);
    border-radius: 4px;
    background: var(--color-fondo);
    color: color-mix(in srgb, var(--c) 75%, black);
    font-size: var(--paso-2);
    text-align: center;
  }

  .socorristas__bandera .icono-dato {
    width: 56px;
    height: 56px;
    color: var(--c);
  }

  .socorristas__otros {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .socorristas__otros li {
    display: flex;
    gap: var(--espacio-4);
    align-items: center;
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--color-borde);
    border-radius: 4px;
  }

  .socorristas__otros .icono-dato {
    width: 32px;
    height: 32px;
  }

  .socorristas__nombre {
    flex: 1;
    font-weight: 600;
  }

  .etiqueta-dato {
    font-size: 0.875rem;
    text-align: right;
  }

  /* Tabla de los próximos cinco días (playas/partials/prevision.html), sobria como un parte técnico: cifras en
     azul marino y alineadas, sin fondos de color; una marca fina bajo los datos que no son favorables. Compacta, con
     la cabecera de los días fija bajo la barra al bajar (overflow: clip recorta las esquinas sin impedirlo). */
  .prevision {
    overflow: clip;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
  }

  .prevision__tabla {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
  }

  .prevision__tabla th,
  .prevision__tabla td {
    padding: 3px var(--espacio-1);
    border-bottom: 1px solid var(--color-borde);
    text-align: center;
  }

  /* Cabecera de los días en naranja claro con el borde naranja, como la tabla horaria de la evolución detallada.
     Los bordes, como sombras dentro de cada celda: con los bordes juntos (border-collapse) son de la tabla y no
     seguirían a la cabecera fija, y por el hueco se vería lo que pasa por debajo. */
  .prevision__tabla thead th,
  .prevision__tabla thead td {
    position: sticky;
    top: var(--alto-barra-compacta);
    z-index: 2;
    padding: calc(var(--espacio-2) + 3px) var(--espacio-1) var(--espacio-2);
    border-bottom: 0;
    background: var(--color-seleccion-suave);
    box-shadow: inset 0 3px 0 var(--color-acento), inset 0 -1px 0 var(--color-acento);
    color: var(--color-acento-texto-hondo);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  /* El día: el icono del cielo y, a su lado, el nombre y la fecha */
  .prevision__dia {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 0 var(--espacio-2);
    align-items: center;
    text-align: left;
  }

  /* La esquina: «Previsión» y la leyenda de las marcas */
  .prevision__tabla thead .prevision__esquina {
    padding-left: var(--espacio-4);
    text-align: left;
  }

  .prevision__esquina b {
    display: block;
    margin-bottom: 3px;
  }

  .prevision__tabla thead small {
    display: block;
    color: var(--color-acento-texto);
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .prevision__cielo {
    width: 30px;
    height: 30px;
    color: var(--color-marino);
  }

  .prevision__dato {
    width: 190px;
  }

  .prevision__tabla tbody .prevision__dato {
    padding-left: var(--espacio-4);
    font-weight: 400;
    text-align: left;
  }

  .prevision__nombre {
    display: flex;
    gap: var(--espacio-3);
    align-items: center;
    line-height: 1.25;
  }

  /* La explicación de la fila («máxima / mínima»…) va en el title del nombre: aquí no ocupa una línea más */
  .prevision__nombre[title] {
    cursor: help;
  }

  .prevision__nombre small {
    display: none;
  }

  .prevision__unidad-fila {
    color: var(--color-texto-suave);
    font-style: normal;
  }

  .prevision__grupo th {
    padding: var(--espacio-3) var(--espacio-4) 2px;
    border-bottom: 0;
    color: var(--color-acento-texto);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
  }

  .prevision__tabla .prevision__hoy {
    background: var(--color-fondo-suave);
  }

  .prevision__tabla thead th.prevision__hoy {
    background: color-mix(in srgb, var(--color-acento) 30%, var(--color-fondo));
  }

  .prevision__tabla tbody tr:last-child > * {
    border-bottom: 0;
  }

  /* La cifra y su nota en una línea (en el móvil, una debajo de la otra) */
  .prevision__celda {
    position: relative;
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 6px 6px 8px;
    color: var(--color-marino);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .prevision__celda[data-marca]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--marca-regular);  /* regular */
    translate: -50% 0;
  }

  .prevision__celda--aviso[data-marca]::after {
    background: var(--marca-malo);  /* desfavorable */
  }

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

  .prevision__celda--aviso small {
    color: var(--color-acento-texto);
    font-weight: 600;
  }

  .prevision__valor {
    display: inline-flex;
    gap: 3px;
    align-items: center;
  }

  .prevision__valor .flecha-rumbo {
    width: 16px;
    height: 16px;
  }

  .prevision__min {
    color: var(--color-texto-suave);
    font-weight: 400;
  }

  .prevision__corto {
    display: none;
  }

  .prevision__leyenda {
    display: grid;
    gap: 1px;
    color: var(--color-texto-suave);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  .prevision__leyenda span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }

  .prevision__leyenda i {
    flex: none;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: var(--marca-regular);
  }

  .prevision__leyenda .prevision__leyenda--malo {
    background: var(--marca-malo);
  }

  /* Paneles de la evolución detallada y de los deportes: todo el panel lleva a su página. */
  .avances {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-5);
    margin: var(--espacio-6) 0 0;
    padding: 0;
    list-style: none;
  }

  .avance {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    padding: var(--espacio-5);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    background: linear-gradient(170deg, var(--color-seleccion-suave), var(--color-fondo) 45%);
    transition: border-color var(--transicion), box-shadow var(--transicion);
  }

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

  .avance__titulo {
    margin: 0;
    color: var(--color-marino);
    font-size: var(--paso-1);
    font-weight: 700;
  }

  .avance__texto {
    margin: 0;
    color: var(--color-texto-suave);
    font-size: 0.875rem;
  }

  .avance__etiqueta {
    margin: var(--espacio-3) 0 0;
    color: var(--color-marino);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .avance__boton {
    align-self: flex-start;
    margin-top: auto;
    padding: 7px var(--espacio-4);
    border-radius: 999px;
    background: var(--color-acento);
    color: var(--color-texto-sobre-color);
    font-size: 0.875rem;
    font-weight: 600;
  }

  .avance__boton::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
  }

  .avance__boton:hover {
    color: var(--color-texto);
  }

  /* Gráfica del día: líneas en SVG (estiradas al recuadro) y rótulos en HTML (de tamaño fijo). */
  .grafica-dia {
    position: relative;
    height: 120px;
    margin: var(--espacio-3) 0 var(--espacio-5);
  }

  .grafica-dia__lineas {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .grafica-dia__lineas polyline {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
  }

  .grafica-dia__temperatura {
    stroke: var(--mapa-malo);
    stroke-width: 2.5;
  }

  .grafica-dia__viento {
    stroke: var(--dato-viento);
    stroke-width: 2;
    stroke-dasharray: 4 3;
  }

  .grafica-dia__punto {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mapa-malo);
    translate: -50% -50%;
  }

  .grafica-dia__cota {
    position: absolute;
    top: var(--y);
    left: var(--x);
    color: var(--dato-maxima);
    font-size: 0.75rem;
    font-weight: 700;
    translate: -50% calc(-100% - 6px);
  }

  .grafica-dia__horas span {
    position: absolute;
    top: calc(100% + 4px);
    left: var(--x);
    color: var(--color-texto-suave);
    font-size: 0.7rem;
    white-space: nowrap;
    translate: -50% 0;
  }

  /* Las horas de los extremos, dentro del recuadro. */
  .grafica-dia__horas span:first-child {
    translate: 0 0;
  }

  .grafica-dia__horas span:last-child {
    translate: -100% 0;
  }

  .avance__aviso {
    margin: var(--espacio-3) 0;
    color: var(--color-texto-suave);
    font-size: 0.875rem;
  }

  .avance__leyenda {
    display: flex;
    gap: var(--espacio-4);
    margin: 0;
    color: var(--color-texto-suave);
    font-size: 0.75rem;
  }

  .avance__leyenda span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }

  .avance__leyenda span::before {
    content: "";
    width: 16px;
    border-top: 2.5px solid var(--mapa-malo);
  }

  .avance__leyenda .avance__viento::before {
    border-top: 2px dashed var(--dato-viento);
  }

  .avance__datos {
    display: grid;
    gap: var(--espacio-1);
    margin: var(--espacio-1) 0 var(--espacio-3);
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
  }

  .avance__datos li {
    display: flex;
    gap: var(--espacio-2);
    align-items: center;
  }

  .avance__datos .icono-dato {
    width: 20px;
    height: 20px;
  }

  .barras-deporte {
    display: grid;
    gap: 7px;
    margin: var(--espacio-1) 0 var(--espacio-3);
    padding: 0;
    list-style: none;
  }

  /* Cada deporte lleva a ese deporte en esta playa: por encima del enlace que cubre todo el recuadro */
  .barras-deporte a {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 28px 96px 1fr 34px;
    gap: var(--espacio-3);
    align-items: center;
    color: var(--color-texto);
    font-size: 0.875rem;
  }

  .barras-deporte a:hover span:not(.barras-deporte__barra) {
    color: var(--color-marino);
    text-decoration: underline;
  }

  .barras-deporte__barra {
    height: 10px;
    border-radius: 99px;
    background: linear-gradient(var(--c), var(--c)) 0 / var(--ancho) 100% no-repeat, var(--color-fondo-suave);
  }

  .barras-deporte b {
    text-align: right;
  }

  /* Cómo llegar */
  .mapa-ficha {
    height: 380px;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    isolation: isolate;  /* las capas de Leaflet no tapan la cabecera fija */
  }

  /* La letra de la web en el mapa (Leaflet trae la suya) y el nombre de la playa como en los mapas de «cerca» */
  .mapa-ficha.leaflet-container {
    font-family: var(--fuente-texto);
  }

  .mapa-ficha__playa {
    border: 0;
    background: var(--color-acento);
    box-shadow: var(--sombra-barra);
    color: var(--color-texto-sobre-color);
    font-weight: 700;
  }

  .mapa-ficha__playa::before {
    border-top-color: var(--color-acento);
  }

  .como-llegar {
    display: flex;
    justify-content: center;
    margin: var(--espacio-4) 0 0;
  }

  .boton-ruta {
    display: inline-flex;
    gap: var(--espacio-2);
    align-items: center;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--color-acento);
    color: var(--color-texto-sobre-color);
    font-weight: 600;
  }

  .boton-ruta:hover {
    background: var(--color-acento-oscuro);
    color: var(--color-texto-sobre-color);
  }

  @media (max-width: 992px) {
    .avances {
      grid-template-columns: 1fr;
    }
  }

  /* En el móvil: la tabla cabe sin desplazarla (unidades en el nombre de la fila, notas cortas) y la bandera
     va en una franja encima de lo demás. */
  @media (max-width: 768px) {
    .socorristas {
      grid-template-columns: 1fr;
      gap: var(--espacio-3);
    }

    .socorristas__bandera {
      flex-direction: row;
      justify-content: flex-start;
      gap: var(--espacio-3);
      padding: var(--espacio-3) var(--espacio-4);
      text-align: left;
    }

    .socorristas__bandera .icono-dato {
      width: 44px;
      height: 44px;
    }

    .socorristas__otros li {
      gap: var(--espacio-3);
      padding: var(--espacio-2) var(--espacio-3);
    }

    .etiqueta-dato {
      font-size: var(--paso--1);
    }

    .prevision {
      margin-inline: calc(-1 * var(--margen-lateral));
      border-inline: 0;
      border-radius: 0;
    }

    .prevision__tabla th,
    .prevision__tabla td {
      padding: 3px 2px;
    }

    .prevision__dato {
      width: 86px;
    }

    .prevision__tabla thead .prevision__esquina {
      padding-inline: var(--espacio-2) 4px;
    }

    .prevision__esquina b {
      font-size: 0.7rem;
    }

    .prevision__leyenda {
      font-size: 0.62rem;
    }

    .prevision__leyenda span {
      gap: 4px;
    }

    .prevision__leyenda i {
      width: 10px;
    }

    .prevision__dia {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
    }

    .prevision__dia .prevision__cielo {
      margin-bottom: 2px;
    }

    .prevision__tabla tbody .prevision__dato {
      padding-left: var(--espacio-2);
    }

    .prevision__nombre {
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      font-size: 0.72rem;
    }

    .prevision__nombre .icono-dato {
      width: 22px;
      height: 22px;
    }

    .prevision__nombre small,
    .prevision__largo {
      display: none;
    }

    .prevision__corto {
      display: inline;
    }

    /* «MAÑANA» en mayúsculas cabe en su columna sin partirse. */
    .prevision__tabla thead th {
      font-size: 0.68rem;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .prevision__cielo {
      width: 24px;
      height: 24px;
    }

    .prevision__grupo th {
      padding: var(--espacio-3) var(--espacio-2) var(--espacio-1);
      font-size: 0.7rem;
    }

    .prevision__celda {
      flex-direction: column;
      gap: 0;
      align-items: center;
      width: 100%;
      padding: 4px 2px 7px;
      font-size: var(--paso--1);
    }

    .prevision__celda small {
      font-size: 0.66rem;
    }

    .prevision__valor .flecha-rumbo {
      width: 13px;
      height: 13px;
    }

    .avance {
      padding: var(--espacio-4);
    }

    .barras-deporte a {
      grid-template-columns: 26px 86px 1fr 30px;
      gap: var(--espacio-2);
      font-size: var(--paso--1);
    }

    .mapa-ficha {
      height: 280px;
    }
  }
}