/*
 * Versión de ordenador (1024 px o más). Todo va dentro de la media query para
 * que el móvil y la tablet se queden exactamente como estaban.
 * Colores de la marca: azul #5DA9E9 (texto/realce #1F6FB2), naranja #F5A623,
 * arena #F5F1E9, texto #1E2A36, gris #4B5563, borde #EBE4D6.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

#ft-lateral { display: none; }

/* Sin «rebote» al tirar de la página más allá del principio o del final (móvil y ordenador) */
html, body { overscroll-behavior: none; }

/* Buscadores (type="search"): sin la cruz ni la lupa nativas del navegador */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Páginas ya rediseñadas (móvil y ordenador): fuente de la marca */
body.ft-pagina { font-family: Montserrat, system-ui, sans-serif; }

@media (min-width: 1024px) {
    html.ft-escritorio body {
        font-family: Montserrat, system-ui, sans-serif;
        color: #1E2A36;
        background: #F5F1E9;
        padding-left: 260px;
        margin-bottom: 0 !important;
    }

    /* Menú de arriba antiguo y barra inferior del móvil: fuera */
    html.ft-escritorio .ft-cab-antigua { display: none !important; }

    #ft-lateral {
        display: flex;
        flex-direction: column;
        gap: 28px;
        position: fixed;
        inset: 0 auto 0 0;
        width: 260px;
        box-sizing: border-box;
        padding: 28px 20px;
        background: #FFFFFF;
        box-shadow: 1px 0 0 #EBE4D6;
        z-index: 40;
        overflow-y: auto;
        font-family: Montserrat, system-ui, sans-serif;
    }
    /* El PNG del logo es cuadrado con mucho margen: se recorta a la altura del texto */
    .ft-lateral-logo { display: block; margin: 4px 0 8px 6px; }
    .ft-lateral-logo img { width: 158px; height: 56px; object-fit: cover; display: block; }
    .ft-lateral-nav { display: flex; flex-direction: column; gap: 4px; }
    .ft-lateral-enlace {
        display: flex; align-items: center; gap: 12px;
        padding: 11px 14px; border-radius: 9999px;
        color: #4B5563; font-size: 15px; font-weight: 600; text-decoration: none;
        transition: background-color .15s, color .15s;
    }
    .ft-lateral-enlace:hover { background: #F5F1E9; color: #1E2A36; }
    .ft-lateral-enlace.ft-activo { background: #EAF4FC; color: #1F6FB2; font-weight: 700; }
    .ft-lateral-nuevo {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 12px 16px; border-radius: 9999px;
        background: #F5A623; color: #2A2118; font-size: 15px; font-weight: 700; text-decoration: none;
        transition: background-color .15s;
    }
    .ft-lateral-nuevo:hover { background: #EEC077; }
    .ft-lateral-nuevo.ft-activo { box-shadow: 0 0 0 3px #FFF5E6; }

    /* Contenedor de contenido común */
    html.ft-escritorio .ft-contenido {
        box-sizing: border-box;
        padding: 32px 48px 48px !important;
        margin: 0 !important;
    }
    html.ft-escritorio .ft-titulo-pagina {
        font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.01em; color: #1E2A36;
    }
    html.ft-escritorio .ft-subtitulo-pagina {
        font-size: 15px; line-height: 22px; font-weight: 500; color: #4B5563;
    }
    /* Inicio: dos filas completas de mercadillos y el resto tras «Ver todos» (lo calcula home.html) */
    .ft-oculto-escritorio { display: none !important; }

    /* Ficha de actividad: fotos en mosaico en vez de carrusel */
    #carousel_actividad.ft-galeria {
        display: grid; gap: 12px; height: 372px !important;
        border-radius: 16px; overflow: hidden !important; white-space: normal;
        scroll-snap-type: none;
    }
    #carousel_actividad.ft-galeria > img { width: 100%; height: 100%; min-height: 0; }
    #carousel_actividad.ft-galeria > img:nth-child(n+6) { display: none; }
    .ft-galeria-1 { grid-template-columns: 1fr; }
    .ft-galeria-2 { grid-template-columns: 1fr 1fr; }
    .ft-galeria-3, .ft-galeria-4 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
    .ft-galeria-3 > img:first-child, .ft-galeria-4 > img:first-child { grid-row: span 2; }
    .ft-galeria-4 > img:nth-child(4) { display: none; }
    .ft-galeria-5 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }
    .ft-galeria-5 > img:first-child { grid-column: span 2; grid-row: span 2; }

    html.ft-escritorio .ft-tarjeta {
        background: #FFFFFF; border-radius: 16px;
        box-shadow: 0 4px 6px -1px rgba(30, 42, 54, .10);
    }
}

/* Móvil y app (webview): la cabecera azul llega hasta arriba y deja sitio a la barra de estado / isla */
@media (max-width: 1023px) {
    .ft-safe-top { padding-top: calc(env(safe-area-inset-top, 0px) + 10px) !important; }
    .ft-safe-pos { top: calc(env(safe-area-inset-top, 0px) + 8px) !important; }
}

/* Modo invitado (sin sesión) */
.ft-solo-invitado { display: none !important; }
html.ft-invitado .ft-solo-invitado { display: block !important; }
html.ft-invitado .ft-solo-usuario { display: none !important; }
@media (min-width: 1024px) { html.ft-invitado .ft-planifica { width: 100% !important; } }

/* =========================================================================
   Escala tipográfica única (todas las páginas con body.ft-pagina).
   Cada tamaño suelto se lleva al paso más cercano de la escala:
   11 etiqueta · 13 secundario · 14 texto · 15 texto destacado · 18 título de tarjeta
   · 20 sección · 26 titular grande · 32 título de página
   ========================================================================= */
.ft-pagina .text-\[10px\], .ft-pagina .text-\[11px\] { font-size: 11px; line-height: 14px; }
.ft-pagina .text-xs, .ft-pagina .text-\[12px\], .ft-pagina .text-\[13px\] { font-size: 13px; line-height: 18px; }
.ft-pagina .text-sm { font-size: 14px; line-height: 20px; }
.ft-pagina .text-\[15px\], .ft-pagina .text-base, .ft-pagina .text-\[16px\] { font-size: 15px; line-height: 22px; }
.ft-pagina .text-\[17px\], .ft-pagina .text-lg { font-size: 18px; line-height: 24px; }
.ft-pagina .text-xl, .ft-pagina .text-\[20px\], .ft-pagina .text-\[22px\] { font-size: 20px; line-height: 26px; }
.ft-pagina .text-2xl, .ft-pagina .text-\[26px\], .ft-pagina .text-\[28px\], .ft-pagina .text-\[30px\] { font-size: 26px; line-height: 32px; }
.ft-pagina .text-3xl, .ft-pagina .text-4xl, .ft-pagina .text-\[32px\], .ft-pagina .text-\[34px\] { font-size: 32px; line-height: 38px; }
.ft-pagina h1, .ft-pagina h2 { font-weight: 800; letter-spacing: -0.01em; }
@media (min-width: 1024px) {
    .ft-pagina .lg\:text-xs, .ft-pagina .lg\:text-\[13px\] { font-size: 13px; line-height: 18px; }
    .ft-pagina .lg\:text-sm { font-size: 14px; line-height: 20px; }
    .ft-pagina .lg\:text-\[15px\], .ft-pagina .lg\:text-base { font-size: 15px; line-height: 22px; }
    .ft-pagina .lg\:text-lg { font-size: 18px; line-height: 24px; }
    .ft-pagina .lg\:text-xl, .ft-pagina .lg\:text-\[20px\], .ft-pagina .lg\:text-\[22px\] { font-size: 20px; line-height: 26px; }
    .ft-pagina .lg\:text-2xl, .ft-pagina .lg\:text-\[26px\], .ft-pagina .lg\:text-\[28px\] { font-size: 26px; line-height: 32px; }
    .ft-pagina .lg\:text-\[34px\], .ft-pagina .lg\:text-3xl { font-size: 32px; line-height: 38px; }
    .ft-pagina .lg\:text-\[40px\], .ft-pagina .lg\:text-\[44px\] { font-size: 42px; line-height: 48px; }
}

/* =========================================================================
   Animaciones
   ========================================================================= */
/* Cambio de página: la nueva entra con un fundido suave; el menú lateral y la barra de abajo no se mueven */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ftSalir .16s ease-in both; }
::view-transition-new(root) { animation: ftEntrar .32s cubic-bezier(.2,.8,.2,1) both; }
#ft-lateral { view-transition-name: lateral; }
div.ft-cab-antigua.fixed { view-transition-name: menu-inferior; }
::view-transition-group(lateral), ::view-transition-group(menu-inferior) { animation: none; }
html.ft-sin-vt body { animation: ftEntrar .32s cubic-bezier(.2,.8,.2,1) both; }

@keyframes ftSalir { to { opacity: 0; } }
@keyframes ftEntrar { from { opacity: 0; transform: translateY(10px); } }
@keyframes ftFundido { from { opacity: 0; } }
@keyframes ftSubir { from { opacity: 0; transform: translateY(28px); } }
@keyframes ftZoom { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes ftDesplegar { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes ftAparecer { from { opacity: 0; transform: translateY(12px); } }

/* Ventanas emergentes: el fondo funde y la hoja sube (móvil) o aparece con un pequeño zoom (ordenador) */
:is(#ft-hoja-invitado, #popup_viaje, #popup, #popup_borrar, #verificationPopup) { animation: ftFundido .2s ease-out both; }
:is(#ft-hoja-invitado, #popup_viaje, #popup, #popup_borrar, #verificationPopup) > div { animation: ftSubir .34s cubic-bezier(.2,.9,.25,1.05) both; }
@media (min-width: 640px) {
    :is(#ft-hoja-invitado, #popup_viaje, #popup, #popup_borrar, #verificationPopup) > div { animation-name: ftZoom; }
}
/* Desplegables */
:is(#city-results, #sugerencias_pais, #actividad-results) { transform-origin: top center; animation: ftDesplegar .18s ease-out both; }
/* Avisos */
:is(#ruta_aviso, #cuenta_aviso) { animation: ftSubir .28s cubic-bezier(.2,.9,.25,1.05) both; }
#mundo_aviso { animation: ftFundido .2s ease-out both; }
/* Tarjetas que llegan en cascada */
:is(#activo, #lista-favoritos, #lista-gastos, #destinos-lista, .contenedor-actividades-destacadas, .contenedor-mercadillos, #lista-viajes) > * { animation: ftAparecer .45s cubic-bezier(.2,.8,.2,1) both; }
:is(#activo, #lista-favoritos, #lista-gastos, #destinos-lista, .contenedor-actividades-destacadas, .contenedor-mercadillos, #lista-viajes) > :nth-child(2) { animation-delay: .04s; }
:is(#activo, #lista-favoritos, #lista-gastos, #destinos-lista, .contenedor-actividades-destacadas, .contenedor-mercadillos, #lista-viajes) > :nth-child(3) { animation-delay: .08s; }
:is(#activo, #lista-favoritos, #lista-gastos, #destinos-lista, .contenedor-actividades-destacadas, .contenedor-mercadillos, #lista-viajes) > :nth-child(4) { animation-delay: .12s; }
:is(#activo, #lista-favoritos, #lista-gastos, #destinos-lista, .contenedor-actividades-destacadas, .contenedor-mercadillos, #lista-viajes) > :nth-child(5) { animation-delay: .16s; }
:is(#activo, #lista-favoritos, #lista-gastos, #destinos-lista, .contenedor-actividades-destacadas, .contenedor-mercadillos, #lista-viajes) > :nth-child(6) { animation-delay: .2s; }
:is(#activo, #lista-favoritos, #lista-gastos, #destinos-lista, .contenedor-actividades-destacadas, .contenedor-mercadillos, #lista-viajes) > :nth-child(n+7) { animation-delay: .24s; }
/* Botones que responden al pulsarlos (sin tocar los que ya llevan su propio transform) */
.ft-pagina :is(button, a[class*="rounded-full"]):not([class*="translate"]):not(.password-toggle):not(.ft-pin):not(.mapboxgl-marker) { transition: transform .12s ease, background-color .15s, box-shadow .2s, color .15s; }
.ft-pagina :is(button, a[class*="rounded-full"]):not([class*="translate"]):not(.password-toggle):not(.ft-pin):not(.mapboxgl-marker):not(:disabled):active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Cierre de ventanas: bajan y se desvanecen */
@keyframes ftDesvanecer { to { opacity: 0; } }
@keyframes ftBajar { to { opacity: 0; transform: translateY(32px); } }
@keyframes ftAlejar { to { opacity: 0; transform: translateY(6px) scale(.96); } }
.ft-saliendo { animation: ftDesvanecer .22s ease-in both !important; }
.ft-saliendo > div { animation: ftBajar .22s ease-in both !important; }
@media (min-width: 640px) { .ft-saliendo > div { animation-name: ftAlejar !important; } }

/* Vista previa sin cuenta (Tus viajes, Favoritos, Tu mundo): se ve pero no se toca */
html.ft-vista-previa .ft-contenido { pointer-events: none; user-select: none; }
html.ft-vista-previa .ft-contenido::after { content: ""; position: fixed; inset: auto 0 0 0; height: 46vh; pointer-events: none; z-index: 5;
    background: linear-gradient(to bottom, rgba(245,241,233,0), rgba(245,241,233,.92) 70%); }
@media (min-width: 1024px) { html.ft-vista-previa .ft-contenido::after { left: 260px; height: 38vh; } }
#ft-candado-previa { animation: ftSubir .4s .15s cubic-bezier(.2,.9,.25,1.05) both; }
div.ft-cab-antigua.fixed { z-index: 50; }

/* ===================== Guía de estilos (ver GUIA_ESTILOS.md) ===================== */
:root {
    --ft-tinta: #1E2A36; --ft-gris: #4B5563; --ft-gris-2: #6B7280;
    --ft-azul: #1F6FB2; --ft-cielo: #5DA9E9; --ft-celeste: #EAF4FC;
    --ft-naranja: #F5A623; --ft-naranja-hover: #EEC077; --ft-sobre-naranja: #2A2118;
    --ft-crema: #FFF5E6; --ft-ambar: #C47F0E; --ft-borde: #EBE4D6; --ft-arena: #F5F1E9;
}
.ft-h1 { font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -0.01em; color: var(--ft-tinta); }
.ft-h1-portada { font-size: 34px; line-height: 38px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.ft-h2 { font-size: 18px; line-height: 24px; font-weight: 800; color: var(--ft-tinta); }
.ft-h3 { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ft-tinta); }
.ft-sobretitulo { font-size: 11px; line-height: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ft-azul); }
.ft-p { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ft-gris); }
.ft-p-sm { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ft-gris); }
.ft-dato { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ft-gris); }
.ft-enlace { font-weight: 700; color: var(--ft-azul); text-decoration: none; }
.ft-enlace:hover { text-decoration: underline; }
@media (min-width: 1024px) {
    .ft-h1 { font-size: 32px; line-height: 38px; }
    .ft-h1-portada { font-size: 44px; line-height: 48px; }
    .ft-h2 { font-size: 22px; line-height: 28px; }
    .ft-h3 { font-size: 16px; line-height: 22px; }
    .ft-sobretitulo { font-size: 12px; line-height: 16px; }
}
.ft-btn, .ft-btn-2, .ft-btn-azul, .ft-btn-claro {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border-radius: 9999px; font-size: 15px; line-height: 20px;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.ft-btn { background: var(--ft-naranja); color: var(--ft-sobre-naranja); font-weight: 800; border: 0; }
.ft-btn:hover { background: var(--ft-naranja-hover); }
.ft-btn-2 { background: #fff; color: var(--ft-tinta); font-weight: 700; border: 1.5px solid var(--ft-borde); }
.ft-btn-2:hover { background: var(--ft-arena); }
.ft-btn-azul { background: var(--ft-azul); color: #fff; font-weight: 700; border: 0; }
.ft-btn-azul:hover { background: #185d96; }
.ft-btn-claro { background: rgba(255,255,255,.15); color: #fff; font-weight: 700; border: 1.5px solid rgba(255,255,255,.45); }
.ft-btn-claro:hover { background: rgba(255,255,255,.25); }
.ft-btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.ft-btn-icono { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; background: #fff; border: 1.5px solid var(--ft-borde); color: var(--ft-azul); }
.ft-btn-icono:hover { background: var(--ft-arena); }
:is(.ft-btn, .ft-btn-2, .ft-btn-azul, .ft-btn-claro, .ft-btn-icono):disabled { opacity: .4; cursor: default; }
.ft-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border-radius: 9999px; padding: 8px 14px; font-size: 13px; font-weight: 700; background: #fff; color: var(--ft-tinta); border: 1.5px solid var(--ft-borde); }
.ft-chip[aria-pressed="true"], .ft-chip.ft-activo { background: var(--ft-tinta); border-color: var(--ft-tinta); color: #fff; }
.ft-etiqueta { display: inline-block; font-size: 11px; line-height: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--ft-naranja); color: var(--ft-sobre-naranja); border-radius: 9999px; padding: 5px 10px; }