/*
Theme Name: Formentera Hoy
Author: S'AlgaHub
Description: Portada diaria que recomienda la mejor playa de Formentera según viento y oleaje (Open-Meteo). One-page minimalista que lee el CCT JetEngine jet_cct_playas.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: formentera-hoy
Tags: one-page, minimal, news
*/

/* ==========================================================================
   Tokens de diseño (sistema de variables)
   - Paleta semántica (arena/tinta) + estado del día
   - Tipografía fluida con clamp() (se adapta a cualquier ancho)
   - Espaciado, radio, sombra y transición como tokens reutilizables
   ========================================================================== */
:root {
    /* Paleta base */
    --color-arena: #f4f1ea;
    --color-tinta: #14232e;
    --color-gris: #5f6d75;
    --color-linea: #dcd7cc;
    --color-acento: #c4643c;
    --color-oscuro-chip: #3a1f12;

    /* Alias cortos del mapa (fh-mapa.php) */
    --arena: var(--color-arena);
    --tinta: var(--color-tinta);
    --gris:  var(--color-gris);
    --linea: var(--color-linea);

    /* Paleta de estado del día (barra superior) */
    --estado-bueno: #7a8b5c;
    --estado-medio: #c9a227;
    --estado-malo: #c4643c;
    --estado-defecto: var(--color-linea);

    /* Escala de clasificación (badges), de mejor a peor */
    --badge-optima: #2f6b4f;
    --badge-muy-buena: #35735a;
    --badge-buena: #3f7a2e;
    --badge-regular: #945f12;
    --badge-mala: #a83232;

    /* Tipografía fluida */
    --font-family: 'Instrument Sans', system-ui, sans-serif;
    --texto-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
    --texto-s:  clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --texto-m:  clamp(0.8125rem, 0.75rem + 0.3vw, 1rem);
    --texto-l:  clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    --texto-xl: clamp(1.25rem, 1rem + 1vw, 1.5rem);
    --destacada: clamp(2.75rem, 12vw, 4.5rem);

    /* Espaciado */
    --esp-2xs: 0.125rem;
    --esp-xs: 0.375rem;
    --esp-s: 0.5rem;
    --esp-m: 0.875rem;
    --esp-l: 1rem;
    --esp-xl: 1.5rem;
    --esp-2xl: 2rem;
    --esp-3xl: 3rem;
    --esp-4xl: 4rem;

    /* Radios */
    --radio-pill: 999px;
    --radio-circulo: 50%;

    /* Sombras */
    --sombra-suave: 0 3px 12px rgba(217, 102, 63, 0.28);
    --sombra-flotante: 0 4px 14px rgba(0, 0, 0, 0.25);

    /* Transición */
    --transicion: 0.15s ease;

    /* Capas */
    --z-flotante: 50;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--color-arena);
    color: var(--color-tinta);
    font-family: var(--font-family);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Barra superior de estado del día */
body::before {
    content: "";
    display: block;
    height: 4px;
    background: var(--estado, var(--estado-defecto));
}

body.dia-bueno {
    --estado: var(--estado-bueno);
}

body.dia-medio {
    --estado: var(--estado-medio);
}

body.dia-malo {
    --estado: var(--estado-malo);
}

/* Contenedor principal */
.envoltura {
    max-width: 34rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 2vw + 1rem, 2rem) clamp(1rem, 3vw, 1.5rem) var(--esp-4xl);
}

/* Cabecera */
.cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--esp-l);
    font-size: var(--texto-s);
    color: var(--color-gris);
    margin-bottom: var(--esp-3xl);
}

/* Antetítulo ("Mejor playa hoy") */
.antetitulo {
    font-size: var(--texto-s);
    color: var(--color-gris);
    margin-bottom: var(--esp-xs);
}

/* Playas */
.destacada__nombre {
    font-size: var(--destacada);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: var(--esp-l);
}

.destacada__texto {
    font-size: var(--texto-l);
    margin-bottom: var(--esp-xl);
}

/* Datos estructurados de la destacada: rejilla a todo el ancho.
   4 columnas en escritorio, 2 en móvil; cada celda ocupa su espacio y el
   conjunto se lee más despejado que una fila apiñada. */
.datos dt {
    font-size: var(--texto-xs);
    color: var(--color-gris);
    margin-bottom: var(--esp-2xs);
}

.datos dd {
    font-size: var(--texto-m);
}

.datos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--esp-l) var(--esp-xl);
    padding: var(--esp-xl) 0;
    border-top: 1px solid var(--color-linea);
    border-bottom: 1px solid var(--color-linea);
    margin-bottom: var(--esp-2xl);
}

.datos div {
    min-width: 0;
}

.dato--dir {
    display: block;
    font-size: var(--texto-s);
    color: var(--color-gris);
    margin-top: var(--esp-2xs);
}

/* Aviso de datos: solo se colorea (rojo) cuando un dato cruza un umbral que
   merece aviso (sensación > 34 °C, UV >= 8, lluvia > 20 %). El resto de
   valores se muestran en el color de texto por defecto: el color refuerza el
   número, nunca es el único canal (el valor siempre se lee). */
.datos dd.dato--extremo {
    color: #a83232;
    font-weight: 600;
}

.datos dd .dato--dir {
    color: var(--color-gris);
}

/* Flecha de dirección del viento: apunta hacia el origen del viento (0° =
   norte) y se rota según los grados. Gris discreto, alineada con el valor. */
.dato__viento-flecha {
    flex: none;
    display: inline-block;
    vertical-align: -0.125rem;
    margin-left: 0.3125rem;
    color: var(--color-gris);
    transition: transform 0.4s ease;
}

@media (max-width: 639px) {
    .datos {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Fila de días: filtros a la izquierda y bloque de soles a la derecha */
.barra-dias {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-s) var(--esp-l);
    flex-wrap: wrap;
    margin-bottom: var(--esp-2xl);
}

/* Píldoras de días: solo los filtros, agrupados a la izquierda */
.pildoras {
    display: flex;
    align-items: center;
    gap: var(--esp-s);
    flex-wrap: wrap;
}

/* Bloque de soles (salida y puesta): tarjeta con gradiente de horizonte.
   `margin-left: auto` lo empuja a la derecha de la fila; en móvil baja a su
   propia línea (flex-wrap del padre) sin tocar los filtros. */
/* Salida y puesta de sol: texto plano, información de apoyo. Sin caja ni
   fondo, para no competir con la pestaña activa. Etiquetas en gris y horas
   en el color de texto principal. */
.soles {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    margin-left: auto;
    color: var(--color-gris);
    line-height: 1.2;
    text-align: right;
}

.sol {
    display: flex;
    align-items: baseline;
    gap: 0.4375rem;
    font-size: var(--texto-s);
}

.sol__texto {
    font-weight: 400;
}

.sol__hora {
    font-weight: 500;
    color: var(--color-tinta);
    letter-spacing: 0.01em;
}

/* Escritorio: una sola fila, filtros a la izquierda y soles a la derecha */
@media (min-width: 640px) {
    .barra-dias {
        flex-wrap: nowrap;
    }

    .soles {
        flex: none;
    }
}

/* Píldora (filtro de día) */
.pildora {
    appearance: none;
    border: 1px solid var(--color-linea);
    background: transparent;
    color: var(--color-gris);
    font: inherit;
    font-size: var(--texto-s);
    padding: 0.4375rem 0.875rem;
    border-radius: var(--radio-pill);
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}

.pildora:hover {
    border-color: var(--color-acento);
    color: var(--color-tinta);
}

.pildora.is-activa {
    background: var(--color-acento);
    border-color: var(--color-acento);
    color: var(--color-arena);
    font-weight: 500;
}

.pildora:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

/* Paneles de día: solo el activo se muestra. Sin JS, el panel "Hoy"
   (primer panel, sin [hidden]) es el único visible. */
.panel[hidden] {
    display: none;
}

.panel.is-activa {
    display: block;
}

/* Mapa del día: desplegable nativo (details/summary), sin JavaScript.
   El botón es discreto (sin fondo ni borde), en gris secundario, coherente
   con el resto de la interfaz. El SVG ocupa todo el ancho y conserva su
   proporción con height: auto. */
.mapa-desplegable {
    margin-bottom: var(--esp-2xl);
}

.mapa-desplegable__boton {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--esp-xs);
    color: var(--gris);
    font: inherit;
    font-size: var(--texto-s);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.mapa-desplegable__boton::-webkit-details-marker {
    display: none;
}

.mapa-desplegable__boton::before {
    content: "+";
    font-weight: 400;
    line-height: 1;
}

.mapa-desplegable[open] .mapa-desplegable__boton::before {
    content: "−";
}

.mapa-desplegable__boton:hover,
.mapa-desplegable__boton:focus-visible {
    color: var(--color-acento);
}

.mapa-desplegable__boton:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

.mapa-desplegable svg {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--esp-m);
}

/* Título de la sección "También" */
.resto__titulo {
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--color-gris);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--esp-s);
}

/* Texto visible solo para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fila de playa del listado */
.playa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--esp-l);
    padding: var(--esp-m) 0;
    border-bottom: 1px solid var(--color-linea);
}

.playa__info {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.playa__nombre {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
}

/* Enlace discreto "cómo llegar": icono pequeño + texto en gris suave, sin
   fondo ni borde, para no recargar la fila. El espacio con el nombre lo
   gestiona el `gap` de .playa__info. Se intensifica al pasar el ratón. */
.playa__llegar {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    color: var(--color-gris);
    font-size: var(--texto-xs);
    text-decoration: none;
    transition: color var(--transicion);
}

.playa__llegar svg {
    flex: none;
    opacity: 0.8;
    transition: opacity var(--transicion);
}

.playa__llegar:hover,
.playa__llegar:focus-visible {
    color: var(--color-acento);
}

.playa__llegar:hover svg {
    opacity: 1;
}

.playa__llegar:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

/* Enlace "cómo llegar" de la playa destacada: mismo estilo discreto que el
   del listado, con un tamaño ligeramente mayor. Va junto al nombre y la
   clasificación, antes de los datos, sin caja ni fondo. */
.destacada__llegar {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.375rem 0 0.75rem;
    color: var(--color-gris);
    font-size: var(--texto-m);
    text-decoration: none;
    transition: color var(--transicion);
}

.destacada__llegar svg {
    flex: none;
    opacity: 0.8;
    transition: opacity var(--transicion);
}

.destacada__llegar:hover,
.destacada__llegar:focus-visible {
    color: var(--color-acento);
}

.destacada__llegar:hover svg {
    opacity: 1;
}

.destacada__llegar:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

.playa__estado {
    font-size: var(--texto-s);
    color: var(--color-gris);
    text-align: right;
}

/* Badges de clasificación */
/* Pill con fondo de color y texto arena de alto contraste. El color solo
   refuerza la etiqueta (que ya se lee), nunca es el único canal. */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radio-pill);
    font-size: var(--texto-xs);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.4;
    color: var(--color-arena);
    white-space: nowrap;
}

/* Nota numérica dentro del badge: separada de la etiqueta y más sutil, para
   calibrar las matrices de viento viendo la puntuación exacta. */
.badge__nota {
    margin-left: 0.375rem;
    padding-left: 0.375rem;
    border-left: 1px solid rgba(255, 255, 255, 0.45);
    font-weight: 500;
    opacity: 0.95;
}

/* Escala semántica continua de mejor (verde) a peor (rojo) */
.badge--optima {
    background: var(--badge-optima);
}

.badge--muy-buena {
    background: var(--badge-muy-buena);
}

.badge--buena {
    background: var(--badge-buena);
}

.badge--regular {
    background: var(--badge-regular);
}

.badge--mala {
    background: var(--badge-mala);
}

/* Pie */
.pie {
    margin-top: var(--esp-3xl);
    font-size: var(--texto-xs);
    color: var(--color-gris);
}

.pie a {
    color: inherit;
}

/* Botón flotante de compartir: fijo abajo a la derecha, circular (solo
   icono), con sombra y elevación al pasar el ratón. Color neutro de marca
   (ya no es verde WhatsApp): comparte la web con la hoja nativa o copia
   el enlace. */
.compartir {
    position: fixed;
    right: clamp(0.75rem, 2vw, 1.25rem);
    bottom: clamp(0.75rem, 2vw, 1.25rem);
    z-index: var(--z-flotante);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(3rem, 5vw, 3.25rem);
    height: clamp(3rem, 5vw, 3.25rem);
    border-radius: var(--radio-circulo);
    background: var(--color-acento);
    color: #ffffff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--sombra-flotante);
    transition: background var(--transicion), transform var(--transicion);
}

.compartir > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.compartir:hover {
    background: var(--color-acento);
    transform: translateY(-2px);
}

.compartir:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

.compartir__icono {
    flex: none;
    color: #ffffff;
}

/* Aviso (toast) junto al botón cuando se copia el enlace. */
.compartir__aviso {
    position: absolute;
    right: calc(100% + 0.625rem);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: var(--color-tinta);
    color: var(--color-arena);
    font-size: var(--texto-s);
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transicion);
}

.compartir__aviso.is-visible {
    opacity: 1;
}