/**
 * Estilos globales de SurfBCN: variables de tema, cabecera, pestañas y
 * selector de ubicación. Se cargan en todas las páginas a través de
 * header.php.
 */
:root {
    /* Colores de marca de SurfBCN: iguales en los dos temas (no varían
       entre claro/oscuro), por eso viven aquí y no dentro de [data-theme]. */
    --accent: #0bb6cc;       /* color principal (usos puntuales: foco, enlaces) */
    --accent-hover: #0992a3; /* principal, versión oscurecida para :hover */
    --accent-text: #04252b;  /* texto sobre fondo --accent */
    --accent2: #e6348b;      /* color secundario */
    --shadow-accent: rgba(11, 182, 204, 0.18);

    /* Degradado de marca, sacado directamente del logo (rosa → naranja).
       Es el fondo de los botones principales. */
    --franja-safari: #0a1522; /* fondo de la franja inferior del modal del menú móvil */
    --gradiente-marca: linear-gradient(135deg, #e31a83, #e8413c);
    --gradiente-inicio: #e31a83;
    --gradiente-fin: #e8413c;
    --shadow-gradiente: rgba(227, 26, 131, 0.28);
    --radio-boton: 999px; /* botones: siempre en pastilla, lo más redondos posible */

    /* Fondos de página: ocho degradados suaves (cuatro por tema) que se
       eligen al azar por visita. El script de <head> pone data-fondo="1..4"
       en <html> y body::before pinta el que toca. Constantes: iguales en
       los dos temas. */
    /* Fuente de toda la web (cuerpo, titulares y controles). Prueba: Avenir
       Next (Apple) → Nunito Sans → redondeada del sistema. Para volver a
       Outfit: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif. */
    /* Tacto: feedback al pulsar (ver EFECTOS-CSS.md, bloque 1). */
    --toque-escala: 0.97;
    --toque-duracion: 160ms;
    --toque-curva: cubic-bezier(0.2, 0.9, 0.3, 1.3); /* rebote suave */
    --toque-elevacion: 2px; /* cuánto sube una tarjeta al tocarla */
    --sombra-toque: 0 2px 4px rgba(16, 35, 55, 0.08), 0 14px 28px rgba(16, 35, 55, 0.16);
    /* Aparición escalonada de listas (EFECTOS-CSS.md, bloque 2). */
    --aparece-duracion: 750ms;
    --aparece-subida: 20px;
    --aparece-curva: cubic-bezier(0.33, 0, 0.2, 1); /* sube despacio y se asienta */
    --aparece-paso: 110ms; /* retraso entre una tarjeta y la siguiente */
    /* Bloques grandes de página: fundido corto, sin retraso. */
    --aparece-bloque-duracion: 350ms;
    --aparece-bloque-subida: 10px;
    --aparece-bloque-curva: ease-out;
    --fuente-web: "Avenir Next", "Nunito Sans", ui-rounded, system-ui, -apple-system, sans-serif;
    --fondo-brisa: linear-gradient(145deg, #edf7fa 0%, #f8fbfd 46%, #e8f1f7 100%);
    --fondo-amanecer: linear-gradient(145deg, #fff5ef 0%, #faf5fb 48%, #edf6f8 100%);
    --fondo-espuma: linear-gradient(145deg, #f8fbfc 0%, #eef5f8 52%, #f4f7fa 100%);
    --fondo-coral: linear-gradient(145deg, #fff2f7 0%, #f6f5fb 48%, #eaf7f8 100%);
    --fondo-noche: linear-gradient(145deg, #071725 0%, #0b2031 48%, #102b3e 100%);
    --fondo-profundidad: linear-gradient(145deg, #06151f 0%, #092331 52%, #103441 100%);
    --fondo-tinta: linear-gradient(145deg, #0a1222 0%, #111b31 48%, #132b3b 100%);
    --fondo-coral-nocturno: linear-gradient(145deg, #151321 0%, #19192d 45%, #0d2935 100%);
    /* Los cuatro de cada tema, por número (tema oscuro por defecto). */
    --fondo-1: var(--fondo-noche);
    --fondo-2: var(--fondo-profundidad);
    --fondo-3: var(--fondo-tinta);
    --fondo-4: var(--fondo-coral-nocturno);
    --fondo-pagina: var(--fondo-1);

    --bg: #0d1b2a;
    --bg-pagina: var(--bg);
    --bg-card: #13273c;
    --bg-card-alt: #1a3350;
    --text: #e0e6ed;
    /* Color de los titulares (h1-h4): igual que --text en oscuro, pero un
       azul marino propio en claro — mismo tono que ya usa la landing de
       surfbcn.com para sus titulares. */
    --titular: var(--text);
    --text-muted: #8fa3b8;
    --icon: #9fc6e8;
    --border: #1f3750;
    --blue: #4fa3e0;
    --green: #59c98a;
    /* Color del bloque "Periodo" (icono sticky de previsiones y caja del
       snippet de olas) — en una única variable para poder cambiarlo de un
       solo sitio. */
    --periodo: #e8935a;
    --overlay: rgba(13, 27, 42, 0.45);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.18);

    /* Escala de radios y espaciado, reutilizada por todos los componentes
       para que un único cambio aquí se note en toda la web. */
    --radio: 10px;
    --radio-lg: 16px;
    --fs-titulo-pagina: 1.5rem;
    --fs-titulo-seccion: 1.2rem;
    --fs-titulo-sub: 1rem;
    /* Botones de texto: mismo tamaño, peso y relleno en toda la web. */
    --fs-boton: 0.9rem;
    --fw-boton: 600;
    --lh-boton: 1.25;
    --boton-pad-y: 12px;
    --boton-pad-x: 20px;
    --espacio-1: 6px;
    --espacio-2: 10px;
    --espacio-3: 16px;
    --espacio-4: 24px;
    --espacio-5: 32px;

    /* Alto reservado para el menú fijo inferior en móvil (ver más abajo) —
       en variable para no repetir el número en cada media query que toca
       el padding del body. */
    /* Con el menú inferior activo: 72px (112px en Safari iOS). Ahora está
       desactivado, así que vale el relleno normal de la página. */
    --altura-nav-inferior: 16px;
}
[data-theme="light"] {
    --franja-safari: #d5d9de;
    --bg: #f1f5f9;
    /* Fondo de la página (solo body): más oscuro que --bg para que se vean
       los brillos. --bg sigue siendo el de campos, chips y cajas. */
    --bg-pagina: #eef4f8;
    --fondo-1: var(--fondo-brisa);
    --fondo-2: var(--fondo-amanecer);
    --fondo-3: var(--fondo-espuma);
    --fondo-4: var(--fondo-coral);
    --bg-card: #ffffff;
    --bg-card-alt: #e7eef5;
    --text: #16232f;
    --titular: #10273b;
    --text-muted: #5c7185;
    --icon: #2274a5;
    --border: #dbe4ec;
    --blue: #1f6fa8;
    --green: #1f8a52;
    --overlay: rgba(255, 255, 255, 0.55);
    --shadow-card: 0 1px 2px rgba(16, 35, 55, 0.04), 0 8px 24px rgba(16, 35, 55, 0.06);
}
/* Outfit (Google Fonts), self-hosted — prueba solo para titulares (h1-h4).
   Fuente variable: un único archivo cubre todo el rango de grosores. */
@font-face {
    font-family: "Outfit";
    src: url("/fonts/outfit/Outfit-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
* {
    box-sizing: border-box;
}
html, body {
    max-width: 100%;
    overflow-x: clip;
}
body {
    font-family: var(--fuente-web);
    background: var(--bg-pagina);
    color: var(--text);
    margin: 0 auto;
    max-width: 1024px;
    padding: 20px 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background 0.2s ease, color 0.2s ease;
    animation: pagina-fade-in 0.25s ease;
}
/* Fondo: capa fija detrás del contenido con el degradado elegido (no usa
   background-attachment: fixed, que iOS ignora). Las tarjetas siguen siendo
   blancas encima. */
/* Sin el parpadeo gris al tocar y sin el retraso de 300 ms en algunos móviles. */
a, button, input, select, textarea, label, summary, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--fondo-pagina);
}
[data-fondo="1"] { --fondo-pagina: var(--fondo-1); }
[data-fondo="2"] { --fondo-pagina: var(--fondo-2); }
[data-fondo="3"] { --fondo-pagina: var(--fondo-3); }
[data-fondo="4"] { --fondo-pagina: var(--fondo-4); }
@keyframes pagina-fade-in {
    from {
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }
}
/* Transición entre páginas (@view-transition): DESACTIVADA. En iOS daba
   parpadeo al navegar (ver EFECTOS-CSS.md, bloque 2). Para volver a probarla:
   @view-transition { navigation: auto; } dentro de
   @media (prefers-reduced-motion: no-preference), con
   ::view-transition-old(root) / ::view-transition-new(root) a 150ms. */
/* Si los bloques aparecen con su propio fundido (js/revela.js), el fundido de
   entrada del body sobra: se sumarían y la página parpadearía al cargar. */
.con-revela body {
    animation: none;
}
h1, h2, h3, h4 {
    line-height: 1.25;
    font-family: var(--fuente-web);
    color: var(--titular);
    /* Tracking negativo: mismo tratamiento tipográfico "de impacto" que
       usa la landing de founding surfer en sus titulares. */
    letter-spacing: -0.02em;
}
p {
    margin: 0 0 12px 0;
}

/* =======================================================================
   Formularios: una única base para todos los input/select/textarea de la
   web, para que cada página no tenga que reinventar el espaciado.
======================================================================= */
label {
    display: block;
    font-size: var(--fs-titulo-sub); /* antes 1.4rem: más grande que los títulos de sección */
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 6px 0;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="file"],
select,
textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radio);
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea {
    resize: vertical;
    min-height: 96px;
}
/* input[type=file] de arriba pone display:block incondicionalmente, lo que
   pisa la regla nativa del navegador para [hidden] — sin esto, los inputs
   de archivo que se ocultan a propósito (para que un <label> haga de botón)
   se veían igualmente, con su cuadro nativo "Seleccionar archivo". */
input[type="file"][hidden] {
    display: none;
}
::placeholder {
    color: var(--text-muted);
    opacity: 0.75;
}
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    cursor: pointer;
    font-size: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237c93a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: none;
    border-color: var(--gradiente-inicio);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gradiente-inicio) 18%, transparent);
}
a:focus-visible,
button:focus-visible {
    border-radius: var(--radio);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gradiente-inicio) 18%, transparent);
}
.cabecera-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--espacio-3);
}
.cabecera-marca {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    min-width: 0;
}
.logo {
    display: block;
    height: 60px;
    width: auto;
    border: 0;
}
@media (max-width: 700px) {
    .logo {
        height: 46px;
    }
}
a.logo-link {
    display: flex;
    align-items: center;
    min-height: 52px;
    text-decoration: none;
}
.subtitulo {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
}
.pagina-titulo {
    margin: 0 0 var(--espacio-3) 0;
    font-size: var(--fs-titulo-pagina);
}
/* Visible solo para lectores de pantalla y buscadores: títulos de página que
   el diseño no muestra. */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Escala única de titulares por nivel: h1 = título de página (clases
   *-titulo), h2 = título de sección, h3 = subtítulo de tarjeta. Todos con
   color --titular; no fijar tamaños sueltos. */
h1 {
    font-size: var(--fs-titulo-pagina);
}
h2 {
    font-size: var(--fs-titulo-seccion);
}
h3,
h4 {
    font-size: var(--fs-titulo-sub);
}

/* =======================================================================
   Menú principal: botón hamburguesa + desplegable (igual en móvil y
   escritorio, ver components/layout.blade.php).
======================================================================= */
.menu-contenedor {
    position: relative;
}
.menu-hamburguesa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 52px;
    height: 52px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}
@media (hover: hover) {
    .menu-hamburguesa:hover {
        border-color: var(--accent);
    }
}
.menu-hamburguesa span {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-hamburguesa[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.menu-hamburguesa[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.menu-hamburguesa[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
.menu-desplegable {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    min-width: 220px;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radio-lg);
    box-shadow: var(--shadow-card);
    padding: 10px;
}
.menu-desplegable[hidden] {
    display: none;
}
.menu-desplegable:not([hidden]) {
    display: flex;
}
.menu-desplegable a,
.menu-fila-boton {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}
@media (hover: hover) {
    .menu-desplegable a:hover,
    .menu-fila-boton:hover {
        background: var(--bg);
    }
}
.menu-desplegable a.activa {
    background: var(--gradiente-marca);
    color: #fff;
}
.menu-separador {
    height: 1px;
    margin: 8px 4px;
    background: var(--border);
}

/* =======================================================================
   Menú fijo inferior, tipo app — solo en móvil. La hamburguesa de arriba
   se mantiene igual en todos los tamaños; este es un acceso rápido extra
   a las secciones principales (ver components/layout.blade.php).

   Está oculto (fuera de pantalla) y solo aparece al llegar al final del
   scroll: ver js/menu-inferior.js, que añade la clase .visible.
======================================================================= */
.nav-inferior-movil {
    display: none;
}
@media (max-width: 700px) {
    .nav-inferior-movil {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        justify-content: space-around;
        align-items: center;
        /* Rosa degradado, igual en claro y oscuro. */
        background: linear-gradient(180deg, #e6348b, #ad1457);
        border-radius: 20px 20px 0 0;
        padding: calc(6px + env(safe-area-inset-bottom) / 2) 0;
        transform: translateY(100%);
        pointer-events: none;
        transition: transform 0.25s ease;
    }
    .nav-inferior-movil.visible {
        transform: none;
        pointer-events: auto;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
    }
    /* Solo Safari de iOS: la franja de ~44px inferior de la pantalla la reserva
       Safari — un toque ahí hace reaparecer su barra y el enlace solo responde
       al segundo toque. Se sube el contenido de la barra por encima de esa
       franja (el fondo rosa sigue llegando al borde). No hace falta si la web
       está instalada en la pantalla de inicio (sin barra de Safari). */
    @supports (-webkit-touch-callout: none) {
        .nav-inferior-movil {
            padding: 12px 0 calc(44px + env(safe-area-inset-bottom) / 2);
        }
        /* Al reactivar: :root { --altura-nav-inferior: 112px; } aquí */
        @media (display-mode: standalone) {
            .nav-inferior-movil {
                padding: calc(6px + env(safe-area-inset-bottom) / 2) 0;
            }
            /* Al reactivar: :root { --altura-nav-inferior: 72px; } aquí */
        }
    }
    /* Con el teclado abierto (campo enfocado) la barra sobra: ver js/teclado-movil.js */
    html.escribiendo .nav-inferior-movil {
        display: none;
    }
    html.escribiendo body {
        padding-bottom: 0;
    }
}
.nav-inferior-movil a {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
}
/* Activo: blanco puro y en negrita (máximo contraste sobre el rosa); los
   inactivos quedan más tenues. */
.nav-inferior-movil a.activa {
    color: #fff;
    font-weight: 800;
}
.nav-inferior-movil svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-inferior-icono-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-inferior-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: #145a8a;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ad1457;
}
.nav-inferior-badge[hidden] {
    display: none;
}

/* =======================================================================
   Botón flotante del menú (solo móvil) + modal con los accesos principales.
   Sustituye de momento al menú inferior fijo (ver components/
   menu-flotante-movil.blade.php). Va por encima de la franja de ~44px que
   reserva Safari de iOS abajo (un toque ahí hace reaparecer su barra).
======================================================================= */
.fab-menu-movil,
.modal-menu-movil {
    display: none;
}
@media (max-width: 700px) {
    .fab-menu-movil {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 16px;
        bottom: calc(60px + env(safe-area-inset-bottom));
        z-index: 50;
        width: 52px;
        height: 52px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--gradiente-marca);
        color: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        opacity: 0;
        transform: scale(0.8);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .fab-menu-movil.visible {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .fab-menu-movil svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .modal-menu-movil {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background: rgba(0, 0, 0, 0.55);
    }
    .modal-menu-movil[hidden] {
        display: none;
    }
    .modal-menu-movil-caja {
        position: relative;
        width: 100%;
        padding: 52px 16px calc(20px + env(safe-area-inset-bottom));
        background: var(--bg-card);
        border-radius: 20px 20px 0 0;
    }
    .modal-menu-movil-lista {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .modal-menu-movil-lista a {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        border-radius: 14px;
        color: var(--text);
        font-size: 1.05rem;
        font-weight: 600;
        text-decoration: none;
    }
    .modal-menu-movil-lista a.activa {
        background: var(--gradiente-marca);
        color: #fff;
    }
    .modal-menu-movil-nombre {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .modal-menu-movil-lista .cuenta-badge-mensajes {
        margin-left: auto;
    }
    .modal-menu-movil-lista a.activa .cuenta-badge-mensajes {
        background: #fff;
        color: var(--accent2);
    }
    .modal-menu-movil-lista svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    /* Solo Safari de iOS: la franja inferior la reserva Safari y un toque ahí
       hace reaparecer su barra en vez de abrir el enlace. Se dejan ~60px
       libres bajo la lista y la franja se pinta con un degradado suave
       (oscuro abajo) para que se note que es una zona de "descanso". */
    @supports (-webkit-touch-callout: none) {
        .modal-menu-movil-caja {
            padding-bottom: calc(60px + env(safe-area-inset-bottom));
        }
        .modal-menu-movil-caja::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: calc(44px + env(safe-area-inset-bottom));
            background: linear-gradient(to bottom, var(--bg-card), var(--franja-safari));
            pointer-events: none;
        }
    }
    /* Con el teclado abierto (campo enfocado) el botón sobra: ver js/teclado-movil.js */
    html.escribiendo .fab-menu-movil {
        display: none;
    }
}

/* =======================================================================
   Footer — visible en todos los tamaños, con texto pequeño y en gris
   claro para que no compita con el contenido de la página.
======================================================================= */
.pie-pagina {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espacio-3);
    margin-top: var(--espacio-5);
    padding: var(--espacio-4) 0;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.78rem;
}
.pie-marca {
    display: flex;
    align-items: center;
    gap: 12px;
}
@media (max-width: 700px) {
    .pie-marca {
        display: none;
    }
    .pie-pagina {
        justify-content: center;
    }
}
.pie-instagram {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}
@media (hover: hover) {
    .pie-instagram:hover {
        color: var(--text);
        border-color: var(--text-muted);
    }
}
.pie-instagram svg {
    width: 16px;
    height: 16px;
}
.pie-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-4);
}
.pie-legal a {
    color: var(--text-muted);
    text-decoration: none;
}
@media (hover: hover) {
    .pie-legal a:hover {
        color: var(--text);
    }
}

.menu-desplegable svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.modal-amigo .modal-instagram-texto {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* Tabs de navegación entre páginas agrupadas (Previsiones/Mapas/Webcams),
   debajo del título de página — ver previsiones/index.blade.php. */
.pagina-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--espacio-4) 0;
}
.pagina-tabs a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}
@media (hover: hover) {
    .pagina-tabs a:hover {
        color: var(--gradiente-inicio);
    }
}
.pagina-tabs a.activa {
    background: var(--gradiente-marca);
    color: #fff;
}
.pagina-tabs svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Cabecera de las páginas internas de Tribe (components/tribe-cabecera):
   título y pestañas en la misma fila en escritorio; en móvil, las pestañas
   debajo del título repartidas a lo ancho y sin iconos. */
.tribe-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}
.tribe-cabecera .pagina-titulo {
    margin: 0;
}
.tribe-cabecera .pagina-tabs {
    margin: 0 0 0 auto;
}
/* Con el título oculto (solo lectores) las pestañas quedarían a la izquierda:
   en escritorio van siempre a la derecha. */
@media (min-width: 601px) {
    .tribe-cabecera .pagina-tabs {
        margin-left: auto;
    }
}
@media (max-width: 600px) {
    .tribe-cabecera {
        flex-direction: column;
        align-items: stretch;
        gap: var(--espacio-2);
    }
    .tribe-cabecera .pagina-tabs {
        margin-left: 0;
        flex-wrap: nowrap;
        gap: 4px;
    }
    .tribe-cabecera .pagina-tabs a {
        flex: 1;
        justify-content: center;
        padding: 8px 4px;
    }
    .tribe-cabecera .pagina-tabs svg {
        display: none;
    }
}

.selector {
    margin-bottom: 20px;
}
/* Fila superior de /previsiones: tabs a la izquierda, selector de zona
   flotando a la derecha en vez de en su propia línea. */
.previsiones-cabecera-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}
.previsiones-cabecera-superior .pagina-tabs {
    margin-bottom: 0;
}
.previsiones-cabecera-superior .selector {
    margin-bottom: 0;
    flex-shrink: 0;
}
.selector select {
    background-color: var(--bg-card);
    color: var(--text);
    border: 1.5px solid var(--border);
    padding: 10px 42px 10px 14px;
    border-radius: var(--radio);
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    max-width: 280px;
}
.proximamente {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-card);
    border-radius: var(--radio-lg);
    box-shadow: var(--shadow-card);
}
.proximamente .icono-grande {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
}
@media (max-width: 600px) {
    /* Selector de zona de Previsiones: a todo el ancho. */
    .previsiones-cabecera-superior .selector {
        width: 100%;
    }
    .previsiones-cabecera-superior .selector select {
        max-width: none;
    }
    body { padding: 16px 15px; padding-bottom: var(--altura-nav-inferior); }
    .subtitulo { font-size: 0.8rem; }
    .tabs a { padding: 8px 10px; font-size: 0.85rem; }
}