/* ============================================
   Camino del Sur — Estilos principales
   ============================================ */

/* --- Variables por modo --- */
:root {
    /* Paleta base */
    --celeste: #74B9D4;
    --azul-noche: #1A2D4A;
    --verde: #6B7C45;
    --violeta: #7D5DA8;
    --dorado: #8A6500;
    --rojo: #C0392B;
    --ocre: #C8956A;

    /* Modo normal (default) */
    --bg: #FFFFFF;
    --bg-card: #F8F9FA;
    --texto: #1A2D4A;
    --texto-secundario: #5A6B7D;
    --borde: #E2E8F0;
    --cta-bg: #4A98B5;
    --cta-texto: #FFFFFF;
    --header-bg: #1A2D4A;
    --header-texto: #FFFFFF;
    --link: #74B9D4;
    --link-hover: #5A9AB5;
    /* Botón CTA de productos afiliados: azul oscuro en claro, celeste en oscuro */
    --prod-cta-bg: #1A4F73;
    --prod-cta-texto: #FFFFFF;

    /* Scrollbar fino estilo Figma */
    --scroll-thumb: rgba(26, 45, 74, 0.18);
    --scroll-thumb-hover: rgba(26, 45, 74, 0.32);
}

body.modo-lectura {
    --bg: #FFF8E7;
    --bg-card: #FFF1D4;
    --texto: #3D2E1C;
    --texto-secundario: #6B5A48;
    --borde: #E8D5B8;
    --cta-bg: #5A9AB5;
    --cta-texto: #FFFFFF;
    --header-bg: #3D2E1C;
    --header-texto: #FFF8E7;
    --link: #C0392B;
    --link-hover: #A33025;
    --prod-cta-bg: #1A4F73;
    --prod-cta-texto: #FFFFFF;
    --scroll-thumb: rgba(61, 46, 28, 0.18);
    --scroll-thumb-hover: rgba(61, 46, 28, 0.32);
}

body.modo-dark {
    --bg: #1A2D4A;
    --bg-card: #223A5C;
    --texto: #E2E8F0;
    --texto-secundario: #94A3B8;
    --borde: #334E6F;
    --cta-bg: #74B9D4;
    --cta-texto: #1A2D4A;
    --header-bg: #0F1D30;
    --header-texto: #E2E8F0;
    --link: #74B9D4;
    --link-hover: #93CCE0;
    --prod-cta-bg: #74B9D4;
    --prod-cta-texto: #1A2D4A;
    --scroll-thumb: rgba(226, 232, 240, 0.18);
    --scroll-thumb-hover: rgba(226, 232, 240, 0.32);
}

/* --- Reset y base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: clip;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--texto);
    background-color: var(--bg);
    transition: background-color 0.3s ease, color 0.3s ease;
    min-width: 320px;
    overflow-x: clip;
}

/* --- Scrollbar fino estilo Figma --- */
html,
.bloque-tabla,
.tabla-grid,
.contenido-editor-wrap .contenido-editor-content,
.mobile-menu,
.bloques-modal-body,
.carr-picker-list,
.bloque-text-content pre,
.map-modal {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

html::-webkit-scrollbar,
.bloque-tabla::-webkit-scrollbar,
.tabla-grid::-webkit-scrollbar,
.contenido-editor-wrap .contenido-editor-content::-webkit-scrollbar,
.mobile-menu::-webkit-scrollbar,
.bloques-modal-body::-webkit-scrollbar,
.carr-picker-list::-webkit-scrollbar,
.bloque-text-content pre::-webkit-scrollbar,
.map-modal::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html::-webkit-scrollbar-track,
.bloque-tabla::-webkit-scrollbar-track,
.tabla-grid::-webkit-scrollbar-track,
.contenido-editor-wrap .contenido-editor-content::-webkit-scrollbar-track,
.mobile-menu::-webkit-scrollbar-track,
.bloques-modal-body::-webkit-scrollbar-track,
.carr-picker-list::-webkit-scrollbar-track,
.bloque-text-content pre::-webkit-scrollbar-track,
.map-modal::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
.bloque-tabla::-webkit-scrollbar-thumb,
.tabla-grid::-webkit-scrollbar-thumb,
.contenido-editor-wrap .contenido-editor-content::-webkit-scrollbar-thumb,
.mobile-menu::-webkit-scrollbar-thumb,
.bloques-modal-body::-webkit-scrollbar-thumb,
.carr-picker-list::-webkit-scrollbar-thumb,
.bloque-text-content pre::-webkit-scrollbar-thumb,
.map-modal::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 8px;
}

html::-webkit-scrollbar-thumb:hover,
.bloque-tabla::-webkit-scrollbar-thumb:hover,
.tabla-grid::-webkit-scrollbar-thumb:hover,
.contenido-editor-wrap .contenido-editor-content::-webkit-scrollbar-thumb:hover,
.mobile-menu::-webkit-scrollbar-thumb:hover,
.bloques-modal-body::-webkit-scrollbar-thumb:hover,
.carr-picker-list::-webkit-scrollbar-thumb:hover,
.bloque-text-content pre::-webkit-scrollbar-thumb:hover,
.map-modal::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-thumb-hover);
}

html::-webkit-scrollbar-corner {
    background: transparent;
}

a {
    color: var(--link);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--link-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4 {
    font-family: 'Lora', serif;
    font-weight: 700;
    line-height: 1.3;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header --- */
.site-header {
    background-color: rgba(26, 45, 74, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--header-texto);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1100;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
}

body.modo-lectura .site-header {
    background-color: rgba(61, 46, 28, 0.88);
}

body.modo-dark .site-header {
    background-color: rgba(15, 29, 48, 0.9);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 16px;
    max-width: 1620px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--header-texto);
    text-decoration: none;
    flex-shrink: 0;
}

.logo-icon {
    font-size: 24px;
}

.logo-text {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 20px;
}

/* Logo en imagen (svg/png/webp) — reemplaza al emoji+texto si hay logo cargado */
.logo-img {
    height: 38px;
    width: auto;
    max-width: 220px;
    display: block;
}
.logo-img--footer {
    height: 44px;
    max-width: 240px;
    margin-bottom: 8px;
}

/* --- Nav links in header --- */
.nav-main {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-main a {
    color: var(--header-texto);
    opacity: 0.75;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity 0.2s, background-color 0.2s;
}

.nav-main a:hover,
.nav-main a.active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.12);
}

.nav-sep {
    color: var(--header-texto);
    opacity: 0.25;
    font-size: 12px;
    user-select: none;
}

/* --- Site Layout (content + sidebar) --- */
.site-layout {
    min-height: calc(100vh - 64px);
    max-width: 1620px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Reserva el ancho de la sidebar colapsada (60px) para que ningún
   bloque quede tapado por ella en su estado por defecto. Si el usuario
   la expande, sí puede superponerse al contenido. */
@media (min-width: 769px) {
    .site-layout {
        padding-right: 60px;
    }
}

.site-layout > main {
    max-width: none;
    padding: 0;
    margin: 0;
}

/* --- Sidebar (right side) --- */
.sidebar {
    width: 210px;
    background: var(--bg-card);
    border-left: 1px solid var(--borde);
    padding: 10px 0 20px;
    position: fixed;
    right: 0;
    top: 64px;
    height: calc(100vh - 64px);
    z-index: 100;
    border-bottom-left-radius: 16px;
    transition: width 0.3s ease, background-color 0.3s, border-color 0.3s;
    overflow: hidden;
}

/* Botón colapsar dentro del sidebar */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 10px 8px auto;
    background: rgba(116, 185, 212, 0.1);
    border: 1px solid var(--borde);
    border-radius: 6px;
    cursor: pointer;
    color: var(--texto-secundario);
    transition: background-color 0.2s, color 0.2s, transform 0.3s;
}

.sidebar-collapse-btn:hover {
    background: rgba(116, 185, 212, 0.2);
    color: var(--texto);
}

/* Chevron apunta a la derecha cuando está colapsado */
.sidebar-chevron {
    transition: transform 0.3s ease;
}

.sidebar.is-collapsed .sidebar-chevron {
    transform: rotate(180deg);
}

/* Sidebar colapsada: barra angosta con iconos */
.sidebar.is-collapsed {
    width: 60px;
}

.sidebar.is-collapsed .sidebar-collapse-btn {
    margin: 0 auto 8px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px;
    white-space: nowrap;
}

.sidebar-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--texto-secundario);
    padding: 4px 10px 4px;
    overflow: hidden;
    transition: opacity 0.2s;
}

.sidebar.is-collapsed .sidebar-label {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--texto);
    transition: background-color 0.2s, color 0.2s;
}

.sidebar-link:hover {
    background: rgba(116, 185, 212, 0.1);
    color: var(--link);
}

.sidebar-link.active {
    background: rgba(116, 185, 212, 0.15);
    color: var(--link);
    font-weight: 600;
}

.sidebar-cat-icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}

.sidebar-cat-text {
    overflow: hidden;
    transition: opacity 0.2s;
}

.sidebar.is-collapsed .sidebar-cat-text {
    display: none;
}

.sidebar.is-collapsed .sidebar-link {
    justify-content: center;
    padding: 9px 4px;
}

.sidebar.is-collapsed .sidebar-nav {
    padding: 0 4px;
}

/* Search in header */
.nav-search {
    flex: 1;
    max-width: 320px;
    min-width: 0;
}

.nav-search-input {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--header-texto);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    width: 100%;
    transition: all 0.3s;
}

.nav-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.nav-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--celeste);
}

/* Search page */
.search-form {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 20px auto 0;
}

.search-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--bg);
    color: var(--texto);
    font-size: 15px;
    font-family: 'Inter', sans-serif;
}

.search-input:focus {
    outline: none;
    border-color: var(--celeste);
    box-shadow: 0 0 0 3px rgba(116, 185, 212, 0.2);
}

.search-btn {
    padding: 12px 24px;
    border-radius: 10px;
}

.modo-visual {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.modo-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--header-texto);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.modo-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.modo-btn.active {
    background: var(--celeste);
    border-color: var(--celeste);
}

/* --- Hero Carousel --- */
.hero-section {
    background: #0D1824;
    padding: 24px 0 40px;
    overflow: hidden;
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Carousel container */
.hero-carousel {
    position: relative;
    height: 380px;
    margin-top: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.hero-carousel:active {
    cursor: grabbing;
}

.hero-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Slide — wide banner aspect ratio */
.hero-slide {
    position: absolute;
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                filter 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                width 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.4s ease;
    will-change: transform, filter, width, height;
    top: 50%;
    left: 0;
}

.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #162940;
}

.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(13, 24, 36, 0) 20%,
        rgba(13, 24, 36, 0.5) 55%,
        rgba(13, 24, 36, 0.9) 100%
    );
}

.hero-slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 30px 28px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
    pointer-events: none;
}

.hero-slide.is-active .hero-slide-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero-slide-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-slide-title {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 1.45rem;
    color: #FFFFFF;
    line-height: 1.3;
    margin-bottom: 14px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hero-slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: #74B9D4;
    color: #1A2D4A;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.hero-slide-cta:hover {
    background: #93CCE0;
    transform: translateY(-1px);
    color: #1A2D4A;
}

.hero-slide-cta .flecha {
    transition: transform 0.2s;
}

.hero-slide-cta:hover .flecha {
    transform: translateX(3px);
}

/* Responsive carousel */
@media (max-width: 900px) {
    .hero-carousel {
        height: 300px;
    }

    .hero-slide {
        height: 260px;
    }

    .hero-slide-title {
        font-size: 1.15rem;
    }

    .hero-slide-content {
        padding: 16px 20px 20px;
    }

    .hero-slide-cta {
        padding: 7px 14px;
        font-size: 12px;
    }
}

@media (max-width: 500px) {
    .hero-carousel {
        height: 240px;
    }

    .hero-slide {
        height: 200px;
    }

    .hero-slide-title {
        font-size: 0.95rem;
    }

    .hero-slide-content {
        padding: 12px 16px 16px;
    }

    .hero-slide-cta {
        padding: 7px 12px;
        font-size: 11px;
    }

    .container {
        padding: 0 16px;
    }
}

/* --- Grid de artículos --- */
.seccion-titulo {
    font-size: 1.5rem;
    color: var(--texto);
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--celeste);
    display: inline-block;
}

.articulos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.articulo-card {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s;
    display: flex;
    flex-direction: column;
}

.articulo-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.articulo-card-img {
    width: 100%;
    height: 190px;
    background: linear-gradient(135deg, var(--celeste) 0%, var(--azul-noche) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.4);
    position: relative;
}

.articulo-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.articulo-card-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.articulo-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tag {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: 1px solid transparent;
}

/* Categoría tags — fondo tenue, texto coloreado */
.tag-trekking {
    background-color: rgba(107, 124, 69, 0.12);
    color: #6B7C45;
    border-color: rgba(107, 124, 69, 0.25);
}

.tag-cultura {
    background-color: rgba(125, 93, 168, 0.12);
    color: #7D5DA8;
    border-color: rgba(125, 93, 168, 0.25);
}

.tag-transporte {
    background-color: rgba(116, 185, 212, 0.12);
    color: #4A98B5;
    border-color: rgba(116, 185, 212, 0.25);
}

.tag-alojamiento {
    background-color: rgba(200, 149, 106, 0.12);
    color: #A07040;
    border-color: rgba(200, 149, 106, 0.25);
}

.tag-gastronomia {
    background-color: rgba(192, 57, 43, 0.10);
    color: #C0392B;
    border-color: rgba(192, 57, 43, 0.20);
}

.tag-consejos {
    background-color: rgba(138, 101, 0, 0.10);
    color: #8A6500;
    border-color: rgba(138, 101, 0, 0.20);
}

.tag-festividades {
    background-color: rgba(212, 118, 58, 0.12);
    color: #D4763A;
    border-color: rgba(212, 118, 58, 0.25);
}

/* Provincia tag */
.tag-provincia {
    background-color: rgba(26, 45, 74, 0.08);
    color: var(--azul-noche);
    border-color: rgba(26, 45, 74, 0.15);
}

/* Dark mode overrides */
body.modo-dark .tag-trekking {
    background-color: rgba(107, 124, 69, 0.2);
    color: #A3B87A;
    border-color: rgba(107, 124, 69, 0.35);
}

body.modo-dark .tag-cultura {
    background-color: rgba(125, 93, 168, 0.2);
    color: #B49FD4;
    border-color: rgba(125, 93, 168, 0.35);
}

body.modo-dark .tag-transporte {
    background-color: rgba(116, 185, 212, 0.2);
    color: #93CCE0;
    border-color: rgba(116, 185, 212, 0.3);
}

body.modo-dark .tag-alojamiento {
    background-color: rgba(200, 149, 106, 0.2);
    color: #D4B08A;
    border-color: rgba(200, 149, 106, 0.3);
}

body.modo-dark .tag-gastronomia {
    background-color: rgba(192, 57, 43, 0.2);
    color: #E07060;
    border-color: rgba(192, 57, 43, 0.3);
}

body.modo-dark .tag-consejos {
    background-color: rgba(138, 101, 0, 0.2);
    color: #D4A840;
    border-color: rgba(138, 101, 0, 0.3);
}

body.modo-dark .tag-festividades {
    background-color: rgba(212, 118, 58, 0.2);
    color: #E89A68;
    border-color: rgba(212, 118, 58, 0.35);
}

body.modo-dark .tag-provincia {
    background-color: rgba(116, 185, 212, 0.15);
    color: #93CCE0;
    border-color: rgba(116, 185, 212, 0.25);
}

/* Lectura mode overrides */
body.modo-lectura .tag-provincia {
    background-color: rgba(61, 46, 28, 0.08);
    color: #5A4530;
    border-color: rgba(61, 46, 28, 0.15);
}

.articulo-card-body h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    line-height: 1.4;
}

.articulo-card-body h3 a {
    color: var(--texto);
}

.articulo-card-body h3 a:hover {
    color: var(--link);
}

.articulo-card-body .extracto {
    color: var(--texto-secundario);
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 16px;
    flex-grow: 1;
}
.extracto-link {
    color: inherit;
    text-decoration: none;
    display: contents;
}

.articulo-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--link);
    margin-top: auto;
    transition: gap 0.2s ease, color 0.2s;
}

.articulo-card-link:hover {
    color: var(--link-hover);
    gap: 10px;
}

.articulo-card-link .flecha {
    transition: transform 0.2s ease;
    font-size: 16px;
}

.articulo-card-link:hover .flecha {
    transform: translateX(3px);
}

.articulo-card-fecha {
    color: var(--texto-secundario);
    font-size: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--borde);
}

/* --- Página de artículo individual --- */
.articulo-single {
    max-width: 1220px;
    margin: 0 auto;
    padding: 40px 0 60px;
}

.articulo-single-header {
    margin-bottom: 30px;
}

.articulo-single-header .meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.articulo-single-header h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.articulo-single-header .fecha {
    color: var(--texto-secundario);
    font-size: 15px;
}

.articulo-single-img {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, var(--celeste), var(--azul-noche));
    border-radius: 12px;
    margin-bottom: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.4);
}

.articulo-single-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.articulo-cuerpo,
.bloque-contenido {
    font-size: 17px;
    line-height: 1.8;
}

.articulo-cuerpo h2,
.bloque-contenido h2 {
    font-size: 1.5rem;
    margin: 32px 0 12px;
    color: var(--texto);
}

.articulo-cuerpo h3,
.bloque-contenido h3 {
    font-size: 1.2rem;
    margin: 24px 0 10px;
}

.articulo-cuerpo h4,
.bloque-contenido h4 {
    font-size: 1.05rem;
    margin: 20px 0 8px;
}

.articulo-cuerpo p,
.bloque-contenido p {
    margin-bottom: 16px;
}

.articulo-cuerpo ul, .articulo-cuerpo ol,
.bloque-contenido ul, .bloque-contenido ol {
    margin: 0 0 16px 24px;
}

.articulo-cuerpo li,
.bloque-contenido li {
    margin-bottom: 6px;
}

.articulo-cuerpo strong,
.bloque-contenido strong {
    color: var(--texto);
}

.articulo-cuerpo blockquote,
.bloque-contenido blockquote {
    position: relative;
    margin: 28px 0;
    padding: 18px 28px 18px 52px;
    border-left: 4px solid var(--celeste);
    background: rgba(116, 185, 212, 0.06);
    border-radius: 0 10px 10px 0;
    font-family: 'Lora', serif;
    font-weight: 500;
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--azul-noche);
}
.articulo-cuerpo blockquote::before,
.bloque-contenido blockquote::before {
    content: "\201C";
    position: absolute;
    left: 14px;
    top: 2px;
    font-family: 'Lora', serif;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--celeste);
    opacity: .55;
    font-style: normal;
}
.articulo-cuerpo blockquote p,
.bloque-contenido blockquote p {
    margin: 0;
}
.articulo-cuerpo blockquote + *,
.bloque-contenido blockquote + * {
    margin-top: 16px;
}
body.modo-dark .articulo-cuerpo blockquote,
body.modo-dark .bloque-contenido blockquote {
    background: rgba(116, 185, 212, 0.10);
    color: #E6EEF6;
}

.articulo-cuerpo a,
.bloque-contenido a {
    color: var(--celeste, #2980b9);
    text-decoration: underline;
}

/* Embeds (YouTube / Google Maps) en el bloque de texto enriquecido */
.articulo-cuerpo iframe,
.bloque-contenido iframe,
.bloque-text-content iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 8px;
    margin: 16px 0;
}

/* Editor de bloque "contenido" (dentro del modal) */
.contenido-editor-wrap .editor-toolbar {
    flex-wrap: wrap;
    border-radius: 10px 10px 0 0;
}
.contenido-editor-wrap .contenido-editor-content {
    min-height: 260px;
    max-height: 55vh;
    overflow-y: auto;
    border-radius: 0 0 10px 10px;
}
.contenido-editor-wrap .contenido-editor-html {
    min-height: 260px;
    max-height: 55vh;
}
.contenido-editor-wrap .editor-tool.active {
    background: var(--celeste, #2980b9);
    color: #fff;
}

/* --- Track / Mapa en artículo público --- */
.articulo-track {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 2px solid var(--borde);
}

.articulo-track h2 {
    font-size: 1.4rem;
    margin-bottom: 16px;
}

.articulo-map {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    border: 1px solid var(--borde);
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.articulo-track-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.articulo-track-help {
    font-size: 13px;
    color: var(--texto-secundario);
}

/* --- Listados (categoría / provincia) --- */
.listado-header {
    padding: 40px 0 20px;
    text-align: center;
}

.listado-header h1 {
    font-size: 2rem;
    margin-bottom: 8px;
}

.listado-header p {
    color: var(--texto-secundario);
    font-size: 1.05rem;
}

/* --- Provincias sidebar --- */
.provincias-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 20px 0 30px;
}

.provincias-lista a {
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--texto);
    transition: all 0.2s;
}

.provincias-lista a:hover,
.provincias-lista a.active {
    background: var(--celeste);
    color: var(--azul-noche);
    border-color: var(--celeste);
}

/* --- Botón CTA --- */
.btn {
    display: inline-block;
    padding: 10px 24px;
    background-color: var(--cta-bg);
    color: var(--cta-texto);
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: opacity 0.2s, transform 0.1s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: var(--cta-texto);
}

/* --- Mensaje vacío --- */
.mensaje-vacio {
    text-align: center;
    padding: 60px 20px;
    color: var(--texto-secundario);
}

.mensaje-vacio h2 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: var(--texto);
}

/* --- Página 404 --- */
.error-404 {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
    padding: 48px 20px 72px;
}
.error-404-art {
    position: relative;
    max-width: 480px;
    margin: 0 auto 8px;
}
.error-404-art svg {
    width: 100%;
    height: auto;
    display: block;
}
.error-404-code {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: clamp(48px, 11vw, 88px);
    color: var(--texto);
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.error-404 h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 10px;
    color: var(--texto);
}
.error-404 p {
    color: var(--texto-secundario);
    margin-bottom: 24px;
    line-height: 1.6;
}
.error-404-acciones {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-secundario {
    background: transparent;
    color: var(--link);
    border: 1px solid var(--borde);
}
.btn-secundario:hover {
    background: var(--bg-card);
    border-color: var(--link);
    color: var(--link);   /* sin esto, .btn:hover deja el texto claro sobre fondo claro (ilegible) */
    opacity: 1;
}

/* --- Footer --- */
.site-footer {
    background-color: var(--header-bg);
    color: var(--header-texto);
    padding: 40px 0 20px;
    margin-top: 60px;
}

.site-footer > .container {
    max-width: 1620px;
}

.footer-contenido {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 30px;
}

/* Evita el "grid blowout": permite que las columnas se achiquen en pantallas chicas */
.footer-contenido > * {
    min-width: 0;
}

.footer-marca .logo-text {
    font-size: 18px;
}

.footer-marca p {
    opacity: 0.7;
    font-size: 14px;
    margin-top: 8px;
}

.footer-nav h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.6;
    margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.footer-nav ul {
    list-style: none;
}

.footer-nav a {
    color: var(--header-texto);
    opacity: 0.8;
    font-size: 14px;
    line-height: 2;
}

.footer-nav a:hover {
    opacity: 1;
    color: var(--celeste);
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--header-texto);
    transition: background 0.2s, transform 0.2s;
}

.footer-social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--celeste);
    transform: translateY(-2px);
}

.footer-contacto {
    text-align: center;
}

.footer-contacto h4 {
    font-size: 15px;
    font-family: 'Lora', serif;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
    color: var(--header-texto);
    white-space: nowrap;
}

.footer-contacto p {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 16px;
    line-height: 1.5;
}

.footer-cta {
    display: inline-block;
    padding: 10px 24px;
    background: var(--celeste);
    color: var(--azul-noche);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.footer-cta:hover {
    background: #8CC8E0;
    color: var(--azul-noche);
    transform: translateY(-2px);
}

.footer-copy {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 13px;
    opacity: 0.5;
}

/* --- Responsive --- */
/* --- Mobile menu (hidden on desktop) --- */
.mobile-menu-btn {
    display: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--header-texto);
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    background: var(--bg-card);
    border-left: 1px solid var(--borde);
    z-index: 190;
    padding: 24px 20px 20px;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s;
    overflow-y: auto;
}

.mobile-menu.is-open {
    transform: translateX(0);
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 180;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.mobile-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-search {
    margin-bottom: 14px;
}

.mobile-menu-search input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--bg);
    color: var(--texto);
    font-size: 15px;
    font-family: 'Inter', sans-serif;
}

.mobile-menu-search input:focus {
    outline: none;
    border-color: var(--celeste);
}

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
}

.mobile-menu-nav a {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--texto);
    transition: background-color 0.2s;
}

.mobile-menu-nav a:hover {
    background: rgba(116, 185, 212, 0.1);
    color: var(--link);
}

.mobile-menu-nav a.active {
    background: rgba(116, 185, 212, 0.15);
    color: var(--link);
    font-weight: 600;
}

.mobile-menu-divider {
    height: 1px;
    background: var(--borde);
    margin: 8px 0;
}

.mobile-menu-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--texto-secundario);
    padding: 4px 12px;
}

.mobile-menu-modos {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding-top: 12px;
    border-top: 1px solid var(--borde);
}

.mobile-menu-modos .modo-btn {
    flex: 1;
    max-width: 80px;
    height: 38px;
    border-radius: 8px;
    font-size: 18px;
}

/* --- Breakpoint intermedio: tablet/desktop chico --- */
@media (max-width: 1100px) {
    .nav-search {
        max-width: 200px;
    }
}

@media (max-width: 960px) {
    .nav-main {
        display: none;
    }

    .nav-search {
        max-width: 260px;
    }

    .articulos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Sin .nav-main visible, el menú hamburguesa pasa a dar acceso a la navegación */
    .mobile-menu-btn {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }

    .mobile-menu-overlay {
        display: block;
    }
}

@media (max-width: 768px) {
    /* Mobile: alinear header, layout y container al mismo padding (16px ambos lados) */
    .site-header .container,
    .site-layout,
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .site-layout > main {
        padding-left: 0;
        padding-right: 0;
    }
    .articulo-single {
        padding-top: 24px;
    }

    /* Header simplificado en mobile */
    .site-header .container {
        height: 56px;
        gap: 10px;
    }

    .logo-text {
        font-size: 17px;
    }

    .nav-main,
    .nav-search,
    .modo-visual {
        display: none;
    }

    /* Sidebar oculta en mobile */
    .sidebar {
        display: none;
    }


    /* Hero mejorado en mobile */
    .hero-section {
        padding: 16px 0 28px;
    }

    .hero-carousel {
        height: 280px;
    }

    .hero-slide-title {
        font-size: 1.1rem;
    }

    .hero-slide-content {
        padding: 14px 18px 18px;
    }

    .hero-slide-tag {
        font-size: 10px;
        padding: 3px 8px;
        margin-bottom: 6px;
    }

    .hero-slide-cta {
        padding: 8px 16px;
        font-size: 12px;
    }

    .articulos-grid {
        grid-template-columns: 1fr;
    }

    .articulo-single-header h1 {
        font-size: 1.6rem;
    }

    .articulo-single-img {
        height: 250px;
    }

    .footer-contenido {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-contacto {
        text-align: left;
    }
}

/* --- Mobile chico (360px) --- */
@media (max-width: 480px) {
    /* Mantener el mismo 16px en todos los wrappers — coherencia visual */
    .container,
    .site-layout,
    .site-header .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mobile-menu {
        padding: 20px 16px 16px;
    }

    .logo-text {
        font-size: 15px;
    }

    .logo-icon {
        font-size: 20px;
    }

    .articulo-single {
        padding: 24px 0 40px;
    }

    .articulo-cuerpo, .bloque-contenido {
        font-size: 15px;
    }

    .footer-contenido {
        gap: 20px;
    }
}

/* ============================================
   Admin — Login, Modal, Dashboard
   ============================================ */

/* Footer admin link */
.admin-login-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    opacity: 0.25;
    color: var(--header-texto);
    transition: opacity 0.3s;
}
.admin-login-link:hover {
    opacity: 0.7;
    color: var(--celeste);
}

/* Login modal overlay */
.admin-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.admin-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    align-items: center;
}

/* Modal card */
.admin-modal {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 20px;
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
    position: relative;
    transform: translateY(100vh);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.admin-modal-overlay.is-visible .admin-modal {
    transform: translateY(0);
}

.admin-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--texto-secundario);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}
.admin-modal-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--texto);
}

/* Login page (standalone) */
.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--header-bg);
    padding: 20px;
}

.admin-login-card {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 20px;
    padding: 44px 36px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal / card header */
.admin-modal-header {
    text-align: center;
    margin-bottom: 28px;
}
.admin-modal-header .logo-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 6px;
}
.admin-modal-header .logo-text {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--texto);
}
.admin-login-subtitle {
    color: var(--texto-secundario);
    font-size: 14px;
    margin-top: 6px;
}

/* Form */
.admin-login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.admin-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
}

.admin-form-group input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--bg);
    color: var(--texto);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-form-group input:focus {
    outline: none;
    border-color: var(--celeste);
    box-shadow: 0 0 0 3px rgba(116, 185, 212, 0.25);
}

.admin-login-btn {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border-radius: 10px;
    margin-top: 4px;
    background-color: var(--celeste);
    color: var(--azul-noche);
}
.admin-login-btn:hover {
    background-color: #93CCE0;
    color: var(--azul-noche);
}

.admin-forgot-link {
    text-align: center;
    font-size: 13px;
    color: var(--texto-secundario);
    transition: color 0.2s;
}
.admin-forgot-link:hover {
    color: var(--link);
}

/* Form messages */
.admin-form-error {
    background: rgba(192, 57, 43, 0.1);
    border: 1px solid rgba(192, 57, 43, 0.25);
    color: #C0392B;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 8px;
}

.admin-form-success {
    background: rgba(107, 124, 69, 0.1);
    border: 1px solid rgba(107, 124, 69, 0.25);
    color: #6B7C45;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.6;
}

.admin-recovery-link {
    color: var(--link);
    word-break: break-all;
    font-size: 12px;
}

/* ============================================
   Admin — Dashboard
   ============================================ */

.admin-header {
    background-color: #0F1D30;
    color: #E2E8F0;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.admin-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.admin-badge {
    background: var(--celeste);
    color: var(--azul-noche);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 10px;
}

.admin-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-nav a {
    color: #E2E8F0;
    opacity: 0.7;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.2s, background 0.2s;
}

.admin-nav a:hover,
.admin-nav a.active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    color: #E2E8F0;
}

.admin-logout-link:hover {
    color: #C0392B !important;
}

.admin-main {
    padding-top: 32px;
    padding-bottom: 60px;
}

.admin-welcome {
    margin-bottom: 32px;
}

.admin-welcome h1 {
    font-size: 1.8rem;
    margin-bottom: 4px;
}

.admin-welcome p {
    color: var(--texto-secundario);
    font-size: 15px;
}

/* Stats cards */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}

.admin-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.admin-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.admin-stat-number {
    font-family: 'Lora', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--celeste);
}

.admin-stat-label {
    font-size: 13px;
    color: var(--texto-secundario);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Admin table */
.admin-section h2 {
    font-size: 1.3rem;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--celeste);
    display: inline-block;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 12px;
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid var(--borde);
}

.admin-table th {
    background: rgba(0, 0, 0, 0.04);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--texto-secundario);
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: rgba(116, 185, 212, 0.05);
}

.admin-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-published {
    background: rgba(107, 124, 69, 0.12);
    color: #6B7C45;
}

.status-draft {
    background: rgba(138, 101, 0, 0.12);
    color: #8A6500;
}

/* Welcome row with CTA */
.admin-welcome-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.admin-welcome-row .admin-welcome {
    margin-bottom: 0;
}

.btn-crear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: var(--celeste);
    color: var(--azul-noche);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.btn-crear:hover {
    background: #93CCE0;
    transform: translateY(-1px);
    color: var(--azul-noche);
}

.btn-crear-icon {
    font-size: 18px;
    line-height: 1;
}

/* Table actions */
.admin-table-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

.btn-action-edit {
    background: rgba(116, 185, 212, 0.12);
    color: #4A98B5;
    border-color: rgba(116, 185, 212, 0.25);
}
.btn-action-edit:hover {
    background: rgba(116, 185, 212, 0.25);
    color: #4A98B5;
}

.btn-action-publish {
    background: rgba(107, 124, 69, 0.12);
    color: #6B7C45;
    border-color: rgba(107, 124, 69, 0.25);
}
.btn-action-publish:hover {
    background: rgba(107, 124, 69, 0.25);
    color: #6B7C45;
}

.btn-action-unpublish {
    background: rgba(138, 101, 0, 0.12);
    color: #8A6500;
    border-color: rgba(138, 101, 0, 0.25);
}
.btn-action-unpublish:hover {
    background: rgba(138, 101, 0, 0.25);
    color: #8A6500;
}

.btn-action-delete {
    background: rgba(192, 57, 43, 0.08);
    color: #C0392B;
    border-color: rgba(192, 57, 43, 0.2);
}
.btn-action-delete:hover {
    background: rgba(192, 57, 43, 0.2);
    color: #C0392B;
}

/* Admin profile page */
.admin-profile-card {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: 32px;
    max-width: 600px;
}

.admin-profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--borde);
}

.admin-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--celeste), var(--azul-noche));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
}

.admin-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-profile-info h2 {
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.admin-profile-info p {
    color: var(--texto-secundario);
    font-size: 14px;
}

.admin-profile-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.admin-profile-form .admin-form-group input,
.admin-profile-form .admin-form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--bg);
    color: var(--texto);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.admin-profile-form .admin-form-group input:focus {
    outline: none;
    border-color: var(--celeste);
    box-shadow: 0 0 0 3px rgba(116, 185, 212, 0.25);
}

.admin-profile-form .btn-save {
    align-self: flex-start;
    padding: 10px 28px;
    background: var(--celeste);
    color: var(--azul-noche);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.admin-profile-form .btn-save:hover {
    background: #93CCE0;
}

.admin-file-input {
    font-size: 13px;
    color: var(--texto-secundario);
}

.admin-section-separator {
    border: none;
    border-top: 1px solid var(--borde);
    margin: 24px 0;
}

/* ============================================
   Admin — Editor de artículos
   ============================================ */

.editor-form {
    width: 100%;
}

.editor-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

/* Título input */
.editor-titulo-input {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-bottom: 2px solid var(--borde);
    background: transparent;
    font-family: 'Lora', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--texto);
    transition: border-color 0.2s;
}
.editor-titulo-input:focus {
    outline: none;
    border-color: var(--celeste);
}
.editor-titulo-input::placeholder {
    color: var(--texto-secundario);
    opacity: 0.5;
}

/* Slug row */
.editor-slug-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 8px 0 16px;
}

.editor-slug-prefix {
    font-size: 13px;
    color: var(--texto-secundario);
    font-family: monospace;
    flex-shrink: 0;
}

.editor-slug-input {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: 13px;
    font-family: monospace;
    color: var(--celeste);
    transition: border-color 0.2s, background 0.2s;
}
.editor-slug-input:focus {
    outline: none;
    border-color: var(--borde);
    background: var(--bg-card);
}

/* Toolbar */
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    flex-wrap: wrap;
}

.editor-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--texto);
    transition: background 0.15s;
    font-family: 'Inter', sans-serif;
}

.editor-tool:hover {
    background: rgba(116, 185, 212, 0.15);
}

.editor-tool.active {
    background: var(--celeste);
    color: var(--azul-noche);
}

.editor-tool-sep {
    width: 1px;
    height: 20px;
    background: var(--borde);
    margin: 0 4px;
}

/* Content area */
.editor-content {
    min-height: 400px;
    padding: 20px 24px;
    border: 1px solid var(--borde);
    border-radius: 0 0 10px 10px;
    background: var(--bg);
    color: var(--texto);
    font-size: 16px;
    line-height: 1.7;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}
.editor-content:focus {
    border-color: var(--celeste);
}

.editor-content h2 {
    font-family: 'Lora', serif;
    font-size: 1.4rem;
    margin: 20px 0 8px;
}
.editor-content h3 {
    font-family: 'Lora', serif;
    font-size: 1.15rem;
    margin: 16px 0 6px;
}
.editor-content p {
    margin-bottom: 12px;
}
.editor-content ul, .editor-content ol {
    margin: 0 0 12px 20px;
}
.editor-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 12px 0;
}

/* HTML view */
.editor-html-view {
    width: 100%;
    min-height: 400px;
    padding: 20px 24px;
    border: 1px solid var(--borde);
    border-radius: 0 0 10px 10px;
    background: #1a1a2e;
    color: #93CCE0;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    line-height: 1.6;
    resize: vertical;
}

/* Sidebar panels */
.editor-panel {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 12px;
    overflow: hidden;
}

.editor-panel + .editor-panel {
    margin-top: 16px;
}

.editor-panel h3 {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid var(--borde);
    color: var(--texto-secundario);
    margin: 0;
}

.editor-panel-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.editor-panel-body .admin-form-group {
    gap: 4px;
}

.editor-panel-body input[type="date"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--bg);
    color: var(--texto);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

.editor-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--bg);
    color: var(--texto);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    cursor: pointer;
}
.editor-select:focus {
    outline: none;
    border-color: var(--celeste);
}

/* Publish buttons */
.editor-panel-actions {
    display: flex;
    gap: 8px;
}

.btn-editor-save {
    flex: 1;
    padding: 9px 12px;
    background: var(--bg);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}
.btn-editor-save:hover {
    border-color: var(--celeste);
    color: var(--celeste);
}

.btn-editor-publish {
    flex: 1;
    padding: 9px 12px;
    background: var(--celeste);
    color: var(--azul-noche);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.2s;
}
.btn-editor-publish:hover {
    background: #93CCE0;
}

.editor-preview-link {
    text-align: center;
    font-size: 12px;
    color: var(--texto-secundario);
    transition: color 0.2s;
}
.editor-preview-link:hover {
    color: var(--celeste);
}

/* Image preview */
.editor-img-preview {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--celeste) 0%, var(--azul-noche) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.editor-img-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editor-img-placeholder {
    color: rgba(255,255,255,0.4);
    font-size: 13px;
}

/* File inputs */
.editor-file-label {
    display: inline-block;
    cursor: pointer;
}

.editor-file-btn {
    display: inline-block;
    padding: 7px 16px;
    background: var(--bg);
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--texto);
    cursor: pointer;
    transition: all 0.2s;
}
.editor-file-btn:hover {
    border-color: var(--celeste);
    color: var(--celeste);
}

.editor-file-input {
    display: none;
}

.editor-file-name {
    font-size: 12px;
    color: var(--texto-secundario);
    margin-left: 8px;
}

.editor-help-small {
    font-size: 11px;
    color: var(--texto-secundario);
    margin: 0;
}

/* Map & track section */
.editor-section {
    margin-top: 32px;
}

.editor-section h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-family: 'Lora', serif;
}

.editor-help {
    font-size: 13px;
    color: var(--texto-secundario);
    margin-bottom: 16px;
    line-height: 1.5;
}

.editor-map {
    width: 100%;
    height: 360px;
    border-radius: 12px;
    border: 1px solid var(--borde);
    margin-bottom: 16px;
    overflow: hidden;
}

.editor-track-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13px;
    flex-wrap: wrap;
}

/* Map modal */
.map-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    padding: 24px;
}
.map-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.map-modal {
    background: var(--bg);
    border-radius: 16px;
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 32px;
    transform: translateY(40px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}
.map-modal-overlay.is-visible .map-modal {
    transform: translateY(0);
}

.map-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.map-modal-header h2 {
    font-size: 1.4rem;
    margin: 0;
}

.map-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--texto-secundario);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s;
}
.map-modal-close:hover {
    background: rgba(0,0,0,0.06);
}

.map-modal-map {
    width: 100%;
    height: 500px;
    border-radius: 10px;
    border: 1px solid var(--borde);
    overflow: hidden;
}

.map-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
}

/* Metadata del recorrido (fecha / duración) dentro del modal del mapa */
.map-meta-bar {
    margin-top: 18px;
    padding: 14px 16px;
    background: rgba(116, 185, 212, 0.06);
    border: 1px solid rgba(116, 185, 212, 0.18);
    border-radius: 10px;
}
.map-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.map-meta-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 180px;
    min-width: 0;
}
.map-meta-field label {
    font: 600 12px 'Inter', sans-serif;
    color: var(--texto);
    letter-spacing: .3px;
    text-transform: uppercase;
}
.map-meta-hint {
    font-weight: 400;
    text-transform: none;
    color: var(--texto-secundario);
    letter-spacing: 0;
}
.map-meta-field input,
.map-meta-field select,
.map-meta-field textarea {
    padding: 8px 10px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font: 500 14px 'Inter', sans-serif;
    background: var(--fondo);
    color: var(--texto);
    resize: vertical;
}
.map-meta-field input:focus,
.map-meta-field select:focus,
.map-meta-field textarea:focus {
    outline: none;
    border-color: var(--celeste, #74B9D4);
    box-shadow: 0 0 0 2px rgba(116, 185, 212, 0.2);
}
#trackFromDif {
    flex: 0 0 auto;
    align-self: flex-end;
}
.map-meta-bar .editor-help-small {
    margin-top: 10px;
    margin-bottom: 0;
}

/* Map meta bar — mobile */
@media (max-width: 600px) {
    .map-meta-bar {
        padding: 12px;
    }
    .map-meta-row {
        gap: 10px;
    }
    .map-meta-field {
        flex-basis: 100%;
    }
    #trackFromDif {
        width: 100%;
        align-self: stretch;
    }
}

/* Modal de bloques en mobile — todas las grillas inline de 2 columnas
   colapsan a 1 columna así no quedan campos pisados. */
@media (max-width: 600px) {
    #bloquesModalBody [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .bloques-modal-body {
        padding: 16px;
        max-height: 65vh;
    }
}

/* Map toolbar icon in editor */
.editor-tool-map {
    position: relative;
}
.editor-tool-map svg {
    width: 16px;
    height: 16px;
}

/* Map indicator below toolbar */
.editor-map-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(116, 185, 212, 0.08);
    border: 1px solid rgba(116, 185, 212, 0.2);
    border-top: none;
    font-size: 13px;
    color: var(--celeste);
    font-weight: 500;
}
.editor-map-indicator svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: var(--celeste);
}
.map-indicator-edit {
    margin-left: auto;
    background: none;
    border: 1px solid var(--celeste);
    color: var(--celeste);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}
.map-indicator-edit:hover {
    background: var(--celeste);
    color: var(--azul-noche);
}

/* Fullscreen map modal (expand to fill screen) */
.map-modal-map.leaflet-fullscreen-on,
.map-modal-overlay .leaflet-fullscreen-on {
    z-index: 10000 !important;
}

/* Geoman toolbar styling */
.leaflet-pm-toolbar .leaflet-pm-icon-polyline { filter: hue-rotate(170deg); }

@media (max-width: 768px) {
    .map-modal {
        padding: 20px;
        max-height: 95vh;
    }
    .map-modal-map {
        height: 350px;
    }
}

/* Map tabs */
.map-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid var(--borde);
}

.map-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-secundario);
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

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

.map-tab.active {
    color: var(--celeste);
}

.map-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--celeste);
}

.map-tab-content {
    padding-top: 16px;
}

/* Map info bar */
.map-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-top: none;
    border-radius: 0 0 10px 10px;
    font-size: 13px;
}

.map-stats {
    color: var(--texto-secundario);
    font-weight: 500;
    font-size: 13px;
}

.map-info-btn {
    background: none;
    border: 1px solid rgba(192,57,43,0.3);
    color: #C0392B;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}
.map-info-btn:hover {
    background: rgba(192,57,43,0.08);
}

/* Route markers */
.route-marker {
    background: none;
    border: none;
}

.rm-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--celeste);
    color: var(--azul-noche);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    font-family: 'Inter', sans-serif;
}

.rm-start {
    background: #6B7C45;
    color: #fff;
}

/* Responsive editor */
@media (max-width: 900px) {
    .editor-layout {
        grid-template-columns: 1fr;
    }

    .editor-titulo-input {
        font-size: 1.4rem;
    }
}

/* ============================================
   Meta datos — Paneles del sidebar del editor
   ============================================ */

.editor-meta-panel {
    opacity: 0.6;
    transition: opacity 0.2s;
}

.editor-meta-panel.is-active {
    opacity: 1;
}

.editor-meta-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px !important;
    cursor: default;
    gap: 6px;
}

.editor-meta-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.editor-meta-icon {
    display: flex;
    align-items: center;
    color: var(--celeste);
    flex-shrink: 0;
}

.editor-meta-collapse {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--texto-secundario);
    padding: 2px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: background 0.15s, transform 0.2s;
    flex-shrink: 0;
}

.editor-meta-collapse:hover {
    background: rgba(116, 185, 212, 0.15);
}

.editor-meta-panel.is-collapsed .editor-meta-collapse svg {
    transform: rotate(-90deg);
}

/* Switch toggle */
.editor-meta-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.editor-meta-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.editor-meta-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--borde);
    border-radius: 20px;
    transition: background 0.2s;
}

.editor-meta-switch-slider::before {
    content: '';
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.editor-meta-switch input:checked + .editor-meta-switch-slider {
    background: var(--celeste);
}

.editor-meta-switch input:checked + .editor-meta-switch-slider::before {
    transform: translateX(16px);
}

/* Meta body fields */
.editor-meta-body {
    padding: 12px 14px !important;
}

.editor-meta-body .admin-form-group label {
    font-size: 12px;
    color: var(--texto-secundario);
}

.editor-meta-input,
.editor-meta-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--bg);
    color: var(--texto);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    transition: border-color 0.2s;
}

.editor-meta-input:focus,
.editor-meta-textarea:focus {
    outline: none;
    border-color: var(--celeste);
    box-shadow: 0 0 0 2px rgba(116, 185, 212, 0.15);
}

.editor-meta-textarea {
    resize: vertical;
    min-height: 60px;
}

/* Meta — selector de píldoras (Dificultad, etc.) */
.meta-select-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.meta-pill {
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border: 1.5px solid var(--borde);
    border-radius: 999px;
    background: var(--bg);
    color: var(--texto-secundario);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
    line-height: 1.2;
    user-select: none;
}

.meta-pill:hover {
    border-color: var(--celeste);
    color: var(--texto);
    background: var(--bg-card);
}

.meta-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(116, 185, 212, 0.3);
}

.meta-pill:active {
    transform: translateY(1px);
}

.meta-pill.is-active {
    background: var(--celeste);
    border-color: var(--celeste);
    color: #fff;
    box-shadow: 0 2px 6px rgba(116, 185, 212, 0.35);
}

/* Colores semánticos al estar activa según nivel */
.meta-pill.is-active[data-val="Baja"] {
    background: #2ecc71;
    border-color: #2ecc71;
    box-shadow: 0 2px 6px rgba(46, 204, 113, 0.35);
}
.meta-pill.is-active[data-val="Media"] {
    background: #f1c40f;
    border-color: #f1c40f;
    color: #3d2e1c;
    box-shadow: 0 2px 6px rgba(241, 196, 15, 0.35);
}
.meta-pill.is-active[data-val="Alta"] {
    background: #e67e22;
    border-color: #e67e22;
    box-shadow: 0 2px 6px rgba(230, 126, 34, 0.35);
}
.meta-pill.is-active[data-val="Muy alta"] {
    background: #e74c3c;
    border-color: #e74c3c;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.35);
}

/* Editor — botón disparador de previsualización */
.editor-preview-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
}

.btn-preview-trigger {
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border: 1.5px solid var(--celeste);
    border-radius: 8px;
    background: transparent;
    color: var(--celeste);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-preview-trigger::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center/contain no-repeat;
}

.btn-preview-trigger:hover {
    background: var(--celeste);
    color: #fff;
}

.btn-preview-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(116, 185, 212, 0.3);
}

.editor-preview-box {
    margin-top: 14px;
    padding: 14px;
    border: 1px dashed var(--borde);
    border-radius: 10px;
    background: var(--bg-card);
}

.editor-preview-title {
    margin: 0 0 10px;
    font: 600 14px/1.2 'Inter', sans-serif;
    color: var(--texto);
}

.editor-preview-empty {
    margin: 0;
    padding: 8px 4px;
    text-align: center;
    font-size: 13px;
    color: var(--texto-secundario);
}

/* ============================================
   Meta datos — Ficha visual en el frontend
   ============================================ */

.articulo-meta-ficha {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
/* Card sola o última impar: ocupa ancho completo */
.articulo-meta-ficha > .meta-ficha-card:only-child,
.articulo-meta-ficha > .meta-ficha-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
@media (max-width: 640px) {
    .articulo-meta-ficha {
        grid-template-columns: 1fr;
    }
}

.meta-ficha-card {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.meta-ficha-card:hover {}

.meta-ficha-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--celeste);
}

.meta-ficha-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(116, 185, 212, 0.12);
    color: var(--celeste);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meta-ficha-icon svg {
    width: 18px;
    height: 18px;
}

.meta-ficha-title {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--texto);
    margin: 0;
}

.meta-ficha-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meta-ficha-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.meta-ficha-label {
    color: var(--texto-secundario);
    font-size: 13px;
    flex-shrink: 0;
}

.meta-ficha-value {
    color: var(--texto);
    font-weight: 500;
    text-align: right;
}

.meta-ficha-value a {
    color: var(--celeste);
    font-weight: 600;
}

.meta-ficha-value a:hover {
    color: var(--link-hover);
}

/* Tip destacado en ficha */
.meta-ficha-tip {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(116, 185, 212, 0.08);
    border-left: 3px solid var(--celeste);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: var(--texto);
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.meta-ficha-tip-icon {
    color: var(--celeste);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Dificultad badges */
.meta-dificultad {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.meta-dificultad-baja {
    background: rgba(107, 124, 69, 0.12);
    color: #6B7C45;
}

.meta-dificultad-media {
    background: rgba(138, 101, 0, 0.12);
    color: #8A6500;
}

.meta-dificultad-alta {
    background: rgba(192, 57, 43, 0.12);
    color: #C0392B;
}

.meta-dificultad-muy-alta {
    background: rgba(192, 57, 43, 0.18);
    color: #9E2E23;
}

/* Dark mode adjustments */
body.modo-dark .meta-ficha-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
body.modo-dark .meta-ficha-hero-value,
body.modo-dark .meta-ficha-stat-value,
body.modo-dark .meta-ficha-route-end {
    color: var(--texto);
}

body.modo-dark .meta-dificultad-baja {
    background: rgba(107, 124, 69, 0.2);
    color: #A3B87A;
}

body.modo-dark .meta-dificultad-media {
    background: rgba(138, 101, 0, 0.2);
    color: #D4A840;
}

body.modo-dark .meta-dificultad-alta {
    background: rgba(192, 57, 43, 0.22);
    color: #E07060;
}

body.modo-dark .meta-dificultad-muy-alta {
    background: rgba(192, 57, 43, 0.3);
    color: #F08070;
}

/* Responsive admin */
@media (max-width: 768px) {
    .admin-login-card,
    .admin-modal {
        padding: 32px 24px;
        border-radius: 16px;
    }

    .admin-header .container {
        flex-wrap: wrap;
        height: auto;
        padding: 12px 20px;
        gap: 8px;
    }

    .admin-nav {
        width: 100%;
        justify-content: flex-end;
    }

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-table {
        font-size: 13px;
    }
}

/* ============================================
   Cafecito — botón de donación
   ============================================ */

.cafecito-card {
    position: relative;
    margin: 48px 0 24px;
    padding: 30px 26px 24px;
    background:
        linear-gradient(135deg, rgba(107, 124, 69, 0.10) 0%, rgba(107, 124, 69, 0) 55%),
        var(--bg-card);
    border: 1px solid var(--borde);
    border-top: 3px solid var(--verde);
    border-radius: 14px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 4px 18px rgba(26, 45, 74, 0.06);
    overflow: visible;
}

body.modo-dark .cafecito-card {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.cafecito-card-badge {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--verde);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: -42px;
    box-shadow: 0 6px 14px rgba(107, 124, 69, 0.35);
    border: 3px solid var(--bg);
    transform: rotate(-6deg);
    transition: transform 0.3s ease;
}

.cafecito-card-badge svg {
    display: block;
}

.cafecito-card:hover .cafecito-card-badge {
    transform: rotate(0deg) scale(1.05);
}

.cafecito-card-body {
    flex: 1;
    min-width: 0;
}

.cafecito-card-titulo {
    font-family: 'Lora', serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--texto);
    line-height: 1.3;
}

.cafecito-card-texto {
    font-size: 15px;
    color: var(--texto-secundario);
    margin: 0 0 18px;
    line-height: 1.6;
}

.cafecito-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    background: var(--verde);
    color: #fff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(107, 124, 69, 0.30);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    border: none;
    cursor: pointer;
    position: relative;
}

.cafecito-btn::after {
    content: '→';
    font-size: 16px;
    font-weight: 700;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.cafecito-btn:hover,
.cafecito-btn:focus {
    color: #fff;
    transform: translateY(-2px);
    background: #7b8d50;
    box-shadow: 0 8px 18px rgba(107, 124, 69, 0.40);
}

.cafecito-btn:hover::after {
    transform: translateX(3px);
}

.cafecito-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 124, 69, 0.35), 0 4px 12px rgba(107, 124, 69, 0.30);
}

.cafecito-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.95;
}

.cafecito-btn-icon svg {
    display: block;
}

.cafecito-btn--sm {
    padding: 9px 16px;
    font-size: 13px;
    gap: 8px;
}

.cafecito-btn--sm .cafecito-btn-icon svg {
    width: 16px;
    height: 16px;
}

/* Variante inline (footer) */
.cafecito-inline {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cafecito-inline-text {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.65;
    color: var(--header-texto);
}

@media (max-width: 600px) {
    .cafecito-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 36px;
    }
    .cafecito-card-badge {
        margin-top: -46px;
    }
    .cafecito-card-titulo {
        font-size: 20px;
    }
}

/* ====== BLOQUES MODAL ====== */
.bloques-modal-body {
    padding: 20px 24px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Bloques indicator */
.editor-bloques-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(125, 93, 168, 0.08);
    border: 1px solid rgba(125, 93, 168, 0.2);
    border-radius: 8px;
    font-size: 13px;
    color: #7D5DA8;
    margin-bottom: 12px;
}
.editor-bloques-indicator svg { opacity: 0.7; }

/* Bloque toolbar buttons */
.editor-tool-bloque {
    color: #7D5DA8 !important;
    border-color: rgba(125, 93, 168, 0.25) !important;
}
.editor-tool-bloque:hover {
    background: rgba(125, 93, 168, 0.1) !important;
}

/* Bloque tabs (inside modal) */
.bloque-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--borde);
    margin-bottom: 16px;
}
.bloque-tab {
    padding: 8px 18px;
    background: none;
    border: none;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: var(--texto-secundario);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}
.bloque-tab:hover { color: var(--texto); }
.bloque-tab.active {
    color: #7D5DA8;
    border-bottom-color: #7D5DA8;
    font-weight: 600;
}

/* Tabla editor */
.tabla-editor { }
.tabla-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.tabla-actions .btn-editor-save {
    font-size: 12px;
    padding: 4px 12px;
}
.tabla-grid { overflow-x: auto; }
.tabla-edit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tabla-edit-table th,
.tabla-edit-table td {
    padding: 0;
}
.tabla-edit-table input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--borde);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    background: var(--fondo);
    color: var(--texto);
}
.tabla-edit-table th input {
    font-weight: 600;
    background: rgba(116, 185, 212, 0.06);
}
.tabla-edit-table input:focus {
    outline: none;
    border-color: #74B9D4;
    box-shadow: 0 0 0 2px rgba(116, 185, 212, 0.15);
}
.tabla-row-del {
    width: 30px;
    text-align: center;
}
.tabla-row-del button {
    background: none;
    border: none;
    color: #C0392B;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.tabla-row-del button:hover { opacity: 1; }

/* Timeline editor */
.timeline-hito {
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--fondo);
}
.timeline-hito-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-secundario);
}
.timeline-hito-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.timeline-hito-fields input,
.timeline-hito-fields textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--borde);
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    background: var(--fondo);
    color: var(--texto);
}
.timeline-hito-fields input:focus,
.timeline-hito-fields textarea:focus {
    outline: none;
    border-color: #74B9D4;
}

/* Fauna editor */
.fauna-entry {
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--fondo);
}
.fauna-mes-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--texto-secundario);
    cursor: pointer;
}
.fauna-mes-label input:checked + span {
    color: #6B7C45;
    font-weight: 600;
}
.fauna-crop {
    margin-top: 8px;
    height: 160px;
    border: 1px dashed var(--borde);
    border-radius: 8px;
    background-color: rgba(26, 45, 74, 0.04);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: grab;
    position: relative;
    user-select: none;
    overflow: hidden;
}
.fauna-crop.is-dragging { cursor: grabbing; }
.fauna-crop-hint {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    background: rgba(26, 45, 74, 0.72);
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    pointer-events: none;
    opacity: .85;
}
.fauna-crop.is-empty .fauna-crop-hint {
    background: transparent;
    color: var(--texto-secundario);
    opacity: 1;
}
.fauna-crop.is-empty { cursor: default; }

/* Bloques manager */
.bloques-manager { padding: 4px 0; }
.bloques-list { display: flex; flex-direction: column; gap: 6px; }
.bloque-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo);
    transition: border-color 0.2s;
}
.bloque-item:hover { border-color: #7D5DA8; }
.bloque-item-icon {
    flex-shrink: 0;
    color: var(--texto-secundario);
}
.bloque-item-label {
    flex: 1;
    font-size: 13px;
    color: var(--texto);
}
.bloque-item-edit,
.bloque-item-del {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: 1px solid var(--borde);
    background: var(--fondo);
    transition: all 0.2s;
}
.bloque-item-edit {
    color: #74B9D4;
    border-color: rgba(116, 185, 212, 0.3);
}
.bloque-item-edit:hover {
    background: rgba(116, 185, 212, 0.1);
}
.bloque-item-del {
    color: #C0392B;
    border-color: rgba(192, 57, 43, 0.2);
}
.bloque-item-del:hover {
    background: rgba(192, 57, 43, 0.08);
}

/* ====== FRONTEND BLOQUES ====== */
.articulo-bloques {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bloque-title {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--texto);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bloque-title svg { color: #7D5DA8; flex-shrink: 0; }

.bloque-loading {
    color: var(--texto-secundario);
    font-size: 13px;
    font-style: italic;
    text-align: center;
    padding: 16px;
}

/* Tabla */
.bloque-tabla {
    border-radius: 10px;
    overflow: auto;                 /* scroll horizontal y vertical */
    max-height: 70vh;               /* tablas altas: la barra horizontal queda a la vista */
    border: 1px solid var(--borde);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* no arrastra el scroll de la página */
    cursor: grab;                   /* indica que se puede arrastrar */
}
.bloque-tabla.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.bloque-tabla-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.bloque-tabla-table th {
    background: #1A2D4A;
    color: #fff;
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
    font-size: 13px;
    position: sticky;       /* encabezado fijo al hacer scroll vertical */
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); /* separa el header del cuerpo */
}
.bloque-tabla-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--borde);
}
.bloque-tabla-table tr:last-child td { border-bottom: none; }
.bloque-tabla-table tr:nth-child(even) td { background: rgba(116, 185, 212, 0.04); }

/* Timeline — Swiper component */
.bloque-timeline {
    padding: 0;
}
.bloque-timeline .bloque-title {
    margin-bottom: 16px;
}

.tl-swiper {
    position: relative;
    width: 100%;
    height: 600px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--azul-noche);
    box-shadow: 0 6px 24px rgba(26, 45, 74, 0.18);
}

.tl-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--azul-noche);
    color: #fff;
}

/* Dark overlay — uniform tint over the whole slide like the reference */
.tl-slide-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 45, 74, 0.72);
    z-index: 1;
}

.tl-slide-content {
    position: absolute;
    left: 8%;
    right: 14%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 2;
    padding: 0 12px;
}

.tl-year {
    display: block;
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 34px;
    margin-bottom: 10px;
    color: var(--celeste);
    opacity: 0;
    transform: translate3d(24px, 0, 0);
    transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s;
}

.tl-title {
    font-family: 'Lora', serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 1.15;
    margin: 0 0 18px;
    color: #fff;
    opacity: 0;
    transform: translate3d(24px, 0, 0);
    transition: opacity 0.5s ease 0.50s, transform 0.5s ease 0.50s;
}

.tl-text {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    opacity: 0;
    transform: translate3d(24px, 0, 0);
    transition: opacity 0.5s ease 0.65s, transform 0.5s ease 0.65s;
}

.tl-swiper .swiper-slide-active .tl-year,
.tl-swiper .swiper-slide-active .tl-title,
.tl-swiper .swiper-slide-active .tl-text {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Year pagination — vertical on right */
.tl-pagination.swiper-pagination {
    position: absolute !important;
    right: 6% !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    padding-left: 14px;
    z-index: 3;
    transform: none !important;
}

.tl-pagination::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: rgba(255, 255, 255, 0.22);
}

.tl-pagination .swiper-pagination-bullet {
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    margin: 0 !important;
    position: relative;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 15px;
    padding: 2px 0 2px 0;
    cursor: pointer;
    transition: color 0.25s;
    border-radius: 0 !important;
}

.tl-pagination .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--celeste);
    transform: translateY(-50%) scale(0);
    transition: transform 0.25s;
}

.tl-pagination .swiper-pagination-bullet-active {
    color: var(--celeste);
}

.tl-pagination .swiper-pagination-bullet-active::before {
    transform: translateY(-50%) scale(1);
}

/* Arrows — stacked vertically on right edge, aligned with pagination */
.tl-arrow {
    position: absolute;
    right: calc(6% - 6px);
    background: none;
    border: none;
    color: var(--celeste);
    cursor: pointer;
    padding: 6px;
    z-index: 4;
    transition: transform 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tl-arrow:hover { opacity: 0.7; }

.tl-arrow-prev { top: 5%; }
.tl-arrow-prev:hover { transform: translateY(-3px); }

.tl-arrow-next { bottom: 5%; }
.tl-arrow-next:hover { transform: translateY(3px); }

.tl-arrow.swiper-button-disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

/* ---- Mobile: overlay abajo, contenido legible, controles en barra inferior ---- */
@media (max-width: 768px) {
    .tl-swiper {
        height: auto;
        min-height: 460px;
        border-radius: 12px;
    }

    /* Slide pasa a flex-column así el contenido fluye y nunca se solapa con la barra */
    .tl-swiper .swiper-slide {
        display: flex;
        flex-direction: column;
        min-height: 460px;
    }

    .tl-slide-overlay {
        background: linear-gradient(
            to top,
            rgba(26, 45, 74, 0.95) 0%,
            rgba(26, 45, 74, 0.82) 35%,
            rgba(26, 45, 74, 0.30) 80%,
            rgba(26, 45, 74, 0.00) 100%
        );
    }

    /* Contenido ya no es absolute: ocupa el slide y deja espacio para la barra de controles */
    .tl-slide-content {
        position: relative;
        right: auto;
        left: auto;
        top: auto;
        bottom: auto;
        transform: none;
        margin-top: auto;
        text-align: center;
        padding: 24px 22px 76px;
        max-width: none;
    }

    .tl-year {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .tl-title {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .tl-text {
        font-size: 13px;
        line-height: 1.55;
    }

    /* Barra inferior: flecha ← · dots con fechas · flecha → */
    .tl-pagination.swiper-pagination {
        right: 56px !important;
        left: 56px !important;
        top: auto !important;
        bottom: 16px !important;
        height: auto !important;
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding-left: 0 !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tl-pagination.swiper-pagination::-webkit-scrollbar { display: none; }
    .tl-pagination::before { display: none; }

    /* Cada bullet vuelve a mostrar la fecha (Swiper ya la inserta vía renderBullet) */
    .tl-pagination .swiper-pagination-bullet {
        background: rgba(255, 255, 255, 0.10) !important;
        color: rgba(255, 255, 255, 0.75) !important;
        width: auto !important;
        height: auto !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 5px 10px !important;
        font-family: 'Lora', serif;
        font-style: italic;
        font-size: 12px !important;
        line-height: 1;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, 0.18);
        flex: 0 0 auto;
        transition: background-color .2s, color .2s, border-color .2s;
    }
    .tl-pagination .swiper-pagination-bullet::before { display: none; }
    .tl-pagination .swiper-pagination-bullet-active {
        background: var(--celeste) !important;
        color: #fff !important;
        border-color: var(--celeste) !important;
        font-weight: 700;
    }

    /* Flechas: re-mostrar y posicionar a los costados de la barra */
    .tl-arrow {
        display: flex;
        position: absolute;
        top: auto;
        bottom: 14px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fff;
        z-index: 5;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .tl-arrow svg { width: 18px; height: 18px; transition: transform .2s; }
    .tl-arrow-prev { left: 12px; right: auto; transform: none; }
    .tl-arrow-prev svg { transform: rotate(-90deg); }
    .tl-arrow-next { right: 12px; left: auto; transform: none; }
    .tl-arrow-next svg { transform: rotate(-90deg); }
    .tl-arrow:hover { background: rgba(255, 255, 255, 0.22); opacity: 1; }
    .tl-arrow:active { background: var(--celeste); border-color: var(--celeste); }
}

/* ---- Legacy timeline (hidden — replaced by Swiper) ---- */
.timeline-track {
    position: relative;
    padding-left: 28px;
    display: none;
}
.timeline-track::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(to bottom, #74B9D4, #7D5DA8);
    border-radius: 2px;
}
.timeline-node {
    position: relative;
    margin-bottom: 24px;
}
.timeline-node:last-child { margin-bottom: 0; }
.timeline-dot {
    position: absolute;
    left: -24px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #74B9D4;
    border: 2px solid var(--fondo);
    box-shadow: 0 0 0 2px #74B9D4;
}
.timeline-content { padding-left: 8px; }
.timeline-fecha {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #7D5DA8;
    background: rgba(125, 93, 168, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 4px;
}
.timeline-titulo {
    display: block;
    font-size: 15px;
    color: var(--texto);
    margin-bottom: 4px;
}
.timeline-desc {
    font-size: 14px;
    color: var(--texto-secundario);
    margin: 0;
    line-height: 1.5;
}
.timeline-img {
    display: block;
    margin-top: 12px;
    width: 100%;
    max-width: 520px;
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.10);
    cursor: zoom-in;
    transition: transform 0.2s, box-shadow 0.2s;
    object-fit: cover;
}
.timeline-img:hover {
    transform: scale(1.015);
    box-shadow: 0 6px 24px rgba(0,0,0,0.16);
}

/* Lightbox */
.tl-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.88);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.tl-lightbox.is-open {
    display: flex;
}
.tl-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    object-fit: contain;
    animation: lbIn 0.2s ease;
}
@keyframes lbIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.tl-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.15s;
    padding: 4px 10px;
}
.tl-lightbox-close:hover { opacity: 1; }

/* PDF */
.bloque-pdf {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: rgba(192, 57, 43, 0.03);
    border-left: 4px solid #C0392B;
}
.bloque-pdf-icon {
    flex-shrink: 0;
    color: #C0392B;
}
.bloque-pdf-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bloque-pdf-info strong {
    font-size: 15px;
    color: var(--texto);
}
.bloque-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #C0392B;
    text-decoration: none;
    transition: opacity 0.2s;
}
.bloque-pdf-btn:hover { opacity: 0.75; }

/* Infografia */
.bloque-infografia {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--borde);
}
.bloque-infografia img {
    width: 100%;
    display: block;
}
.bloque-infografia figcaption {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--texto-secundario);
    text-align: center;
    background: var(--fondo);
    border-top: 1px solid var(--borde);
}

/* Clima */
.bloque-clima {
    padding: 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(116, 185, 212, 0.08), rgba(125, 93, 168, 0.05));
    border: 1px solid rgba(116, 185, 212, 0.2);
}
.clima-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.clima-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: 8px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    transition: border-color 0.2s;
}
.clima-day:hover { border-color: #74B9D4; }
.clima-dia {
    font-size: 12px;
    font-weight: 600;
    color: var(--texto-secundario);
    text-transform: uppercase;
}
.clima-icon { font-size: 22px; }
.clima-temp {
    font-size: 13px;
    color: var(--texto);
}
.clima-temp strong { color: #C0392B; }
.clima-rain {
    font-size: 11px;
    color: #74B9D4;
    font-weight: 600;
}

/* Fauna */
.bloque-fauna { }
.fauna-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}
.fauna-grid:has(.fauna-card:only-child) {
    grid-template-columns: 1fr;
}
.fauna-grid:has(.fauna-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}
.fauna-card {
    border: 1px solid var(--borde);
    border-radius: 10px;
    overflow: hidden;
    background: var(--fondo);
    transition: box-shadow 0.2s;
}
.fauna-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.fauna-card-img {
    height: 160px;
    overflow: hidden;
}
.fauna-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fauna-card-body {
    padding: 12px 14px;
}
.fauna-card-body h4 {
    margin: 0 0 8px 0;
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--texto);
}
.fauna-card-body p {
    font-size: 13px;
    color: var(--texto-secundario);
    margin: 8px 0 0 0;
    line-height: 1.5;
}
.fauna-meses-bar {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}
.fauna-mes {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--borde);
    color: var(--texto-secundario);
}
.fauna-mes.active {
    background: #6B7C45;
    color: #fff;
    font-weight: 600;
}

/* Estado de rutas */
.bloque-estado-rutas {
    border: 1px solid var(--borde);
    border-radius: 10px;
    overflow: hidden;
}
.bloque-estado-rutas .bloque-title {
    padding: 16px 20px 0;
}
.estado-rutas-result {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.estado-rutas-result thead th {
    background: #1A2D4A;
    color: #fff;
    font-weight: 600;
    padding: 8px 14px;
    text-align: left;
    font-size: 12px;
}
.estado-rutas-result td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--borde);
}
.estado-rutas-result tr:last-child td { border-bottom: none; }
.estado-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.estado-habilitada {
    background: rgba(107, 124, 69, 0.12);
    color: #6B7C45;
}
.estado-parcial {
    background: rgba(200, 149, 106, 0.15);
    color: #8A6500;
}
.estado-total {
    background: rgba(192, 57, 43, 0.1);
    color: #C0392B;
}

/* Eventos del mes */
.bloque-eventos-mes {
    padding: 20px;
    border-radius: 10px;
    background: rgba(138, 101, 0, 0.04);
    border: 1px solid rgba(138, 101, 0, 0.15);
}

/* Eventos del mes items */
.eventos-mes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.evento-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid rgba(138, 101, 0, 0.1);
}
.evento-item:last-child { border-bottom: none; }
.evento-fecha {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #8A6500;
    background: rgba(138, 101, 0, 0.08);
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.evento-info strong {
    font-size: 14px;
    color: var(--texto);
}
.evento-lugar {
    font-size: 13px;
    color: var(--texto-secundario);
}
.evento-tipo {
    display: inline-block;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 8px;
    background: rgba(125, 93, 168, 0.08);
    color: #7D5DA8;
    margin-left: 6px;
}
.evento-info p {
    font-size: 13px;
    color: var(--texto-secundario);
    margin: 4px 0 0;
    line-height: 1.4;
}

/* Responsive bloques */
@media (max-width: 900px) {
    .fauna-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .clima-days {
        grid-template-columns: repeat(4, 1fr);
    }
    .fauna-grid,
    .fauna-grid:has(.fauna-card:nth-child(2):last-child) {
        grid-template-columns: 1fr;
    }
    .bloque-pdf {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   Editor de bloques — canvas, tarjetas, picker
   ============================================ */
.bloques-canvas-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.bloques-canvas {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bloques-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    border: 2px dashed var(--borde);
    border-radius: 10px;
    color: var(--texto-secundario);
    text-align: center;
    background: var(--bg-card);
}
.bloques-empty svg { opacity: 0.45; }
.bloques-empty p { font-size: 14px; max-width: 320px; }

.btn-add-bloque {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    padding: 10px 22px;
    background: var(--azul-noche);
    color: #fff;
    border: none;
    border-radius: 999px;
    font: 600 14px 'Inter', sans-serif;
    cursor: pointer;
    transition: background .2s, transform .1s;
    box-shadow: 0 2px 6px rgba(26, 45, 74, 0.15);
}
.btn-add-bloque:hover { background: #11233E; transform: translateY(-1px); }
.btn-add-bloque-plus {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}

/* --- Tarjeta de bloque --- */
.bloque-card {
    display: grid;
    grid-template-columns: 28px 1fr 34px;
    align-items: stretch;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.bloque-card:hover {
    border-color: #B9CEE5;
    box-shadow: 0 1px 4px rgba(26, 45, 74, 0.06);
}
.bloque-card.is-dragging {
    opacity: 0.45;
    border-style: dashed;
}
.bloque-card.drop-before {
    box-shadow: 0 -3px 0 0 var(--celeste) inset;
}
.bloque-card.drop-after {
    box-shadow: 0 3px 0 0 var(--celeste) inset;
}

.bloque-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--texto-secundario);
    background: rgba(26, 45, 74, 0.03);
    user-select: none;
    border-right: 1px solid var(--borde);
}
.bloque-handle:active { cursor: grabbing; }
.bloque-handle:hover { color: var(--azul-noche); background: rgba(116, 185, 212, 0.10); }

.bloque-body {
    padding: 10px 14px;
    min-width: 0;
}

.bloque-del-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--texto-secundario);
    cursor: pointer;
    border-left: 1px solid var(--borde);
    transition: background .15s, color .15s;
}
.bloque-del-btn:hover {
    background: rgba(192, 57, 43, 0.10);
    color: var(--rojo);
}

/* --- Summary para bloques no inline --- */
.bloque-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}
.bloque-summary-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    color: var(--texto);
}
.bloque-summary-title strong {
    font: 600 14px 'Inter', sans-serif;
}
.bloque-summary-icon {
    display: flex;
    color: var(--violeta);
    flex-shrink: 0;
}
.bloque-summary-hint {
    font-size: 12px;
    color: var(--texto-secundario);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.bloque-summary-edit {
    padding: 6px 14px;
    background: transparent;
    color: var(--azul-noche);
    border: 1px solid var(--borde);
    border-radius: 6px;
    font: 500 12px 'Inter', sans-serif;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.bloque-summary-edit:hover {
    background: var(--celeste);
    color: #fff;
    border-color: var(--celeste);
}

/* --- Editor inline de texto enriquecido --- */
.bloque-text-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bloque-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px;
    background: var(--bg);
    border: 1px solid var(--borde);
    border-radius: 6px;
    align-items: center;
}
.bloque-text-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: transparent;
    color: var(--texto);
    border: 1px solid transparent;
    border-radius: 4px;
    font: 500 13px 'Inter', sans-serif;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.bloque-text-tool:hover {
    background: var(--bg-card);
    border-color: var(--borde);
}
.bloque-text-tool b, .bloque-text-tool i, .bloque-text-tool u {
    font-family: 'Lora', serif;
    font-size: 14px;
}
.bloque-text-sep {
    width: 1px;
    height: 20px;
    background: var(--borde);
    margin: 0 4px;
}
.bloque-text-content {
    min-height: 80px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--borde);
    border-radius: 6px;
    font: 400 15px/1.6 'Inter', sans-serif;
    color: var(--texto);
    outline: none;
    transition: border-color .15s;
}
.bloque-text-content:focus { border-color: var(--celeste); }
.bloque-text-content h2 { font: 700 22px/1.3 'Lora', serif; margin: 10px 0 6px; }
.bloque-text-content h3 { font: 700 18px/1.3 'Lora', serif; margin: 8px 0 4px; }
.bloque-text-content p { margin: 6px 0; }
.bloque-text-content ul, .bloque-text-content ol { margin: 6px 0 6px 22px; }
.bloque-text-content blockquote {
    position: relative;
    border-left: 4px solid var(--celeste);
    padding: 12px 18px 12px 44px;
    margin: 14px 0;
    color: var(--azul-noche);
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.5;
    background: rgba(116, 185, 212, 0.06);
    border-radius: 0 8px 8px 0;
}
.bloque-text-content blockquote::before {
    content: "\201C";
    position: absolute;
    left: 10px;
    top: -2px;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--celeste);
    opacity: .55;
    font-style: normal;
}
.bloque-text-content pre {
    background: var(--azul-noche);
    color: #E2E8F0;
    padding: 10px;
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    overflow: auto;
}
.bloque-text-content a { color: var(--link); text-decoration: underline; }
.bloque-text-content img { max-width: 100%; height: auto; border-radius: 4px; margin: 6px 0; }

/* --- Picker de bloques (dentro del modal) --- */
.block-picker {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 0;
}
.block-picker-cat h4 {
    font: 700 13px 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-secundario);
    margin-bottom: 8px;
}
.block-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.block-picker-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 8px;
    color: var(--texto);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
    text-align: center;
}
.block-picker-btn:hover {
    background: #fff;
    border-color: var(--celeste);
    transform: translateY(-1px);
}
.block-picker-icon {
    display: flex;
    color: var(--violeta);
}
.block-picker-label {
    font: 500 12px 'Inter', sans-serif;
    line-height: 1.3;
}

/* ============================================
   Meta cards en frontend (bloques meta_*)
   ============================================ */
.bloque-meta-card {
    margin: 0 0 20px 0;
}
.bloque-meta-card + .bloque-meta-card {
    margin-top: -4px;
}
.meta-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 20px 0;
}
.meta-cards-grid > .bloque-meta-card,
.meta-cards-grid > .bloque-meta-card + .bloque-meta-card {
    flex: 1 1 calc(33.333% - 11px);
    min-width: 0;
    margin: 0;
    height: auto;
}
@media (max-width: 900px) {
    .meta-cards-grid > .bloque-meta-card,
    .meta-cards-grid > .bloque-meta-card + .bloque-meta-card {
        flex-basis: calc(50% - 8px);
    }
}
@media (max-width: 600px) {
    .meta-cards-grid > .bloque-meta-card,
    .meta-cards-grid > .bloque-meta-card + .bloque-meta-card {
        flex-basis: 100%;
    }
}
.bloque-meta-card .meta-ficha-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Hero (valor destacado grande) */
.meta-ficha-hero {
    text-align: center;
    padding: 6px 0 2px;
}
.meta-ficha-hero-value {
    display: block;
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--azul-noche);
    line-height: 1.2;
}
.meta-ficha-hero-sub {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--texto-secundario);
    letter-spacing: .3px;
    text-transform: uppercase;
}
.meta-ficha-ref {
    margin: 4px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--texto-secundario);
}

/* Dificultad XL */
.meta-dificultad-xl {
    font-size: 15px;
    padding: 6px 18px;
    letter-spacing: .3px;
}
.meta-dificultad-hero {
    text-align: center;
    padding: 4px 0 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    transition: background-color .2s;
}
.meta-dificultad-hero .meta-dificultad-value {
    display: block;
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1.15;
    letter-spacing: .2px;
}
.meta-dificultad-hero.meta-dificultad-baja {
    background: rgba(107, 124, 69, 0.08);
}
.meta-dificultad-hero.meta-dificultad-baja .meta-dificultad-value { color: #6B7C45; }
.meta-dificultad-hero.meta-dificultad-media {
    background: rgba(138, 101, 0, 0.08);
}
.meta-dificultad-hero.meta-dificultad-media .meta-dificultad-value { color: #8A6500; }
.meta-dificultad-hero.meta-dificultad-alta {
    background: rgba(192, 57, 43, 0.08);
}
.meta-dificultad-hero.meta-dificultad-alta .meta-dificultad-value { color: #C0392B; }
.meta-dificultad-hero.meta-dificultad-muy-alta {
    background: rgba(192, 57, 43, 0.14);
}
.meta-dificultad-hero.meta-dificultad-muy-alta .meta-dificultad-value { color: #9E2E23; }

body.modo-dark .meta-dificultad-hero.meta-dificultad-baja .meta-dificultad-value { color: #A3B87A; }
body.modo-dark .meta-dificultad-hero.meta-dificultad-media .meta-dificultad-value { color: #D4A840; }
body.modo-dark .meta-dificultad-hero.meta-dificultad-alta .meta-dificultad-value { color: #E07060; }
body.modo-dark .meta-dificultad-hero.meta-dificultad-muy-alta .meta-dificultad-value { color: #F08070; }

/* Alojamiento extras */
.meta-ficha-ref-k {
    color: var(--texto-secundario);
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.meta-ficha-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-left: 3px solid var(--violeta);
    background: rgba(125, 93, 168, 0.06);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--texto);
}
.meta-ficha-tip svg {
    flex: 0 0 auto;
    color: var(--violeta);
    margin-top: 2px;
}

/* Stats (km / hs) */
.meta-ficha-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    align-items: stretch;
}
.meta-ficha-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 8px;
    background: rgba(116, 185, 212, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(116, 185, 212, 0.18);
}
.meta-ficha-stat-value {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--azul-noche);
    line-height: 1;
}
.meta-ficha-stat-unit {
    font-size: 12px;
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Route (origen → destino) */
.meta-ficha-route {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 8px;
    background: rgba(125, 93, 168, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(125, 93, 168, 0.15);
    font-family: 'Lora', serif;
    font-weight: 600;
    color: var(--texto);
}
.meta-ficha-route-end {
    font-size: 1rem;
    color: var(--azul-noche);
    text-align: center;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.meta-ficha-route-arrow {
    color: var(--violeta);
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Fecha (día + mes) para evento */
.meta-ficha-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(138, 101, 0, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(138, 101, 0, 0.18);
    min-width: 110px;
    align-self: center;
}
.meta-ficha-date-day {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--dorado, #8A6500);
}
.meta-ficha-date-mon {
    margin-top: 2px;
    font-size: 12px;
    color: var(--texto-secundario);
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Borde de acento por variante */
.meta-variant-dificultad   .meta-ficha-header { border-bottom-color: var(--dorado, #8A6500); }
.meta-variant-dificultad   .meta-ficha-icon   { background: rgba(138, 101, 0, 0.10); color: var(--dorado, #8A6500); }
.meta-variant-distancia    .meta-ficha-header { border-bottom-color: var(--celeste); }
.meta-variant-precio       .meta-ficha-header { border-bottom-color: var(--verde, #6B7C45); }
.meta-variant-precio       .meta-ficha-icon   { background: rgba(107, 124, 69, 0.10); color: var(--verde, #6B7C45); }
.meta-variant-alojamiento  .meta-ficha-header { border-bottom-color: var(--violeta); }
.meta-variant-alojamiento  .meta-ficha-icon   { background: rgba(125, 93, 168, 0.10); color: var(--violeta); }
.meta-variant-transporte   .meta-ficha-header { border-bottom-color: var(--violeta); }
.meta-variant-transporte   .meta-ficha-icon   { background: rgba(125, 93, 168, 0.10); color: var(--violeta); }
.meta-variant-evento       .meta-ficha-header { border-bottom-color: var(--dorado, #8A6500); }
.meta-variant-evento       .meta-ficha-icon   { background: rgba(138, 101, 0, 0.10); color: var(--dorado, #8A6500); }
.meta-variant-gastronomia  .meta-ficha-header { border-bottom-color: var(--ocre, #C8956A); }
.meta-variant-gastronomia  .meta-ficha-icon   { background: rgba(200, 149, 106, 0.14); color: #A07040; }
/* ============================================
   Bloque Afiliado — mismo lenguaje visual que la card de cafecito,
   con acento violeta. Badge con icono de link y la imagen del afiliado
   ocupa una columna a la derecha.
   ============================================ */
.bloque-afiliado-card {
    position: relative;
    margin: 48px 0 24px;
    padding: 30px 26px 24px;
    background:
        linear-gradient(135deg, rgba(125, 93, 168, 0.12) 0%, rgba(125, 93, 168, 0) 55%),
        var(--bg-card);
    border: 1px solid var(--borde);
    border-top: 3px solid var(--violeta, #7D5DA8);
    border-radius: 14px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 4px 18px rgba(26, 45, 74, 0.06);
    overflow: visible;
}
body.modo-dark .bloque-afiliado-card {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.bloque-afiliado-badge {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--violeta, #7D5DA8);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: -42px;
    box-shadow: 0 6px 14px rgba(125, 93, 168, 0.40);
    border: 3px solid var(--bg);
    transform: rotate(-6deg);
    transition: transform 0.3s ease;
}
.bloque-afiliado-badge svg { display: block; }
.bloque-afiliado-card:hover .bloque-afiliado-badge {
    transform: rotate(0deg) scale(1.05);
}

.bloque-afiliado-body {
    flex: 1 1 0;
    min-width: 0;
}
.bloque-afiliado-titulo {
    font-family: 'Lora', serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--texto);
    line-height: 1.3;
}
.bloque-afiliado-texto {
    font-size: 15px;
    color: var(--texto-secundario);
    margin: 0 0 18px;
    line-height: 1.6;
}

/* Imagen al costado derecho */
.bloque-afiliado-media {
    flex: 0 0 32%;
    max-width: 280px;
    align-self: stretch;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(125, 93, 168, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bloque-afiliado-media img {
    width: 100%;
    height: 100%;
    max-height: 180px;
    object-fit: contain;
    display: block;
}

.bloque-afiliado-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    background: var(--violeta, #7D5DA8);
    color: #fff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(125, 93, 168, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    border: none;
    cursor: pointer;
    position: relative;
}
.bloque-afiliado-btn::after {
    content: '→';
    font-size: 16px;
    font-weight: 700;
    margin-left: 2px;
    transition: transform 0.2s ease;
}
.bloque-afiliado-btn:hover,
.bloque-afiliado-btn:focus {
    color: #fff;
    transform: translateY(-2px);
    background: #6B4F92;
    box-shadow: 0 8px 18px rgba(125, 93, 168, 0.45);
}
.bloque-afiliado-btn:hover::after { transform: translateX(3px); }
.bloque-afiliado-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(125, 93, 168, 0.40), 0 4px 12px rgba(125, 93, 168, 0.30);
}

/* Tablet: imagen un poco más chica */
@media (max-width: 900px) {
    .bloque-afiliado-media { flex-basis: 28%; max-width: 220px; }
    .bloque-afiliado-media img { max-height: 150px; }
}

/* Mobile: stack vertical, imagen full-width arriba del texto */
@media (max-width: 600px) {
    .bloque-afiliado-card {
        flex-wrap: wrap;
        padding: 28px 18px 20px;
    }
    .bloque-afiliado-body {
        flex-basis: calc(100% - 76px);
        order: 2;
    }
    .bloque-afiliado-media {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 160px;
        order: 3;
        margin-top: 4px;
    }
    .bloque-afiliado-media img { max-height: 160px; }
    .bloque-afiliado-titulo { font-size: 19px; }
    .bloque-afiliado-texto  { font-size: 14px; margin-bottom: 14px; }
    .bloque-afiliado-btn    { padding: 10px 18px; font-size: 14px; }
}

/* ============================================
   Meta cards en dashboard (editor de bloques)
   ============================================ */
.bloque-meta-summary {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 2px 0;
}
.bloque-meta-summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(125, 93, 168, 0.10);
    color: var(--violeta);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bloque-meta-summary-icon svg {
    width: 20px;
    height: 20px;
}
.bloque-meta-summary-body {
    min-width: 0;
}
.bloque-meta-summary-label {
    font: 600 13px 'Inter', sans-serif;
    color: var(--texto);
    margin-bottom: 3px;
    letter-spacing: .2px;
}
.bloque-meta-summary-preview {
    font: 500 14px 'Lora', serif;
    color: var(--azul-noche);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    line-height: 1.3;
    min-width: 0;
}
.bloque-meta-summary-preview .is-empty {
    color: var(--texto-secundario);
    font-style: italic;
    font-weight: 400;
}
.bloque-meta-summary-preview .pv-sep {
    color: var(--borde);
}
.bloque-meta-summary-preview .pv-k {
    color: var(--texto-secundario);
    font: 500 12px 'Inter', sans-serif;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.bloque-meta-summary-preview .pv-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font: 600 12px 'Inter', sans-serif;
}

/* Acentos por variante en dashboard */
.bloque-card[data-tipo="meta_dificultad"]   .bloque-meta-summary-icon { background: rgba(138, 101, 0, 0.10); color: var(--dorado, #8A6500); }
.bloque-card[data-tipo="meta_precio"]       .bloque-meta-summary-icon { background: rgba(107, 124, 69, 0.10); color: var(--verde, #6B7C45); }
.bloque-card[data-tipo="meta_distancia"]    .bloque-meta-summary-icon { background: rgba(116, 185, 212, 0.14); color: var(--celeste); }
.bloque-card[data-tipo="meta_evento"]       .bloque-meta-summary-icon { background: rgba(138, 101, 0, 0.10); color: var(--dorado, #8A6500); }
.bloque-card[data-tipo="meta_gastronomia"]  .bloque-meta-summary-icon { background: rgba(200, 149, 106, 0.14); color: #A07040; }

/* ============================================
   Carrusel de productos afiliados (front)
   ============================================ */
.cds-carrusel {
    margin: 32px 0;
}
.cds-carrusel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.cds-carrusel-titulo {
    font: 700 22px 'Lora', Georgia, serif;
    color: var(--texto);
    margin: 0;
    line-height: 1.2;
}
.cds-carrusel-desc {
    font: 400 14px 'Inter', sans-serif;
    color: var(--texto-secundario);
    margin: 4px 0 0;
}
.cds-carrusel-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.cds-carrusel-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--borde);
    background: var(--bg);
    color: var(--texto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.cds-carrusel-arrow:hover {
    background: var(--cta-bg);
    border-color: var(--cta-bg);
    color: var(--cta-texto);
}
.cds-carrusel-arrow:active { transform: scale(0.94); }
.cds-carrusel-arrow.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    background: var(--bg);
    border-color: var(--borde);
    color: var(--texto);
}

.cds-carrusel-swiper { overflow: hidden; }
.cds-carrusel-swiper .swiper-slide { height: auto; }

.cds-prod-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.cds-prod-card:hover {
    border-color: var(--celeste);
}
.cds-prod-media {
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    background: #fff;
    overflow: hidden;
}
.cds-prod-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}
.cds-prod-card:hover .cds-prod-media img {
    transform: scale(1.06);
}
.cds-prod-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}
.cds-prod-titulo {
    font: 600 15px 'Inter', sans-serif;
    color: var(--texto);
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cds-prod-desc {
    font: 400 13px 'Inter', sans-serif;
    color: var(--texto-secundario);
    margin: 6px 0 0;
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cds-prod-cta {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--prod-cta-bg);
    color: var(--prod-cta-texto);
    font: 600 13px 'Inter', sans-serif;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: filter .15s ease;
}
.cds-prod-cta:hover { filter: brightness(1.10); }

@media (max-width: 520px) {
    .cds-carrusel-titulo { font-size: 19px; }
}

/* ============================================
   Panel admin — Productos afiliados
   ============================================ */
.prod-add-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr auto;
    gap: 14px;
    align-items: end;
}
.prod-add-form .editor-meta-textarea { min-height: 38px; resize: vertical; }
.prod-table th, .prod-table td { vertical-align: middle; }
.prod-thumb-cell { width: 56px; }
.prod-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--borde);
    display: block;
}
.prod-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    color: var(--texto-secundario);
}
.prod-link-mini {
    font: 400 12px 'Inter', sans-serif;
    color: var(--link);
    margin-left: 6px;
    text-decoration: none;
}
.prod-desc-cell {
    max-width: 280px;
    font-size: 13px;
    color: var(--texto-secundario);
}
.prod-check-date {
    display: block;
    font-size: 11px;
    color: var(--texto-secundario);
    margin-top: 2px;
}
.prod-badge-off {
    display: inline-block;
    font: 600 11px 'Inter', sans-serif;
    color: var(--rojo, #C0392B);
    background: rgba(192,57,43,0.10);
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 6px;
}
.prod-inactivo { opacity: 0.55; }
.prod-orden-cell { white-space: nowrap; }
.prod-edit-row > td { background: var(--bg-card); padding: 16px 18px; }
.prod-edit-form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.prod-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.prod-edit-actions { display: flex; gap: 10px; margin-top: 4px; }

/* Selector de productos en el editor del bloque carrusel */
.carr-picker-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 6px;
}
.carr-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}
.carr-picker-item:hover { background: var(--bg-card); }
.carr-picker-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--borde);
    flex-shrink: 0;
}
.carr-picker-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    color: var(--texto-secundario);
}
.carr-picker-title { font-size: 14px; color: var(--texto); }
.carr-picker-warn {
    font: 600 11px 'Inter', sans-serif;
    color: var(--rojo, #C0392B);
    margin-left: 6px;
}
@media (max-width: 720px) {
    .prod-add-grid { grid-template-columns: 1fr; }
}