/* ================================================================
   TRAVITUR — Mapa Interactivo v3
   ================================================================ */

.tv-wrap { position: relative; width: 100%; font-family: inherit; }

/* Mapa mundial */
#tvWorldMap { width: 100%; border-radius: 12px; overflow: hidden; }

/* ── Tooltip mapa mundial ── */
.tv-world-tip {
    position: fixed; z-index: 9000;
    background: rgba(12,18,32,.90); color: #fff;
    padding: 7px 14px; border-radius: 7px;
    font-size: 13px; font-weight: 600;
    pointer-events: none; white-space: nowrap;
    opacity: 0; transform: translateY(4px);
    transition: opacity .15s, transform .15s;
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
}
.tv-world-tip.visible { opacity: 1; transform: translateY(0); }

body.tv-no-scroll { overflow: hidden; }

/* ================================================================
   MODAL PRINCIPAL DEL TOUR
   ================================================================ */
.tv-tour-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(8,14,28,.72);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    /* flex-start + overflow permite que el modal empiece cerca del top y sea scrolleable */
    display: flex; align-items: flex-start; justify-content: center;
    padding: 60px 20px 20px;   /* 60px arriba = espacio para admin-bar + menú del tema */
    overflow-y: auto;
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
}
.tv-tour-overlay.open { opacity: 1; pointer-events: all; }

.tv-tour-modal {
    margin-top: 110px;
    position: relative;
    width: 100%; max-width: 1120px;
    /* No fijamos max-height; el overlay-scroll maneja el desbordamiento */
    background: #fff; border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    transform: translateY(22px) scale(.97);
    transition: transform .32s cubic-bezier(.34,1.56,.64,1);
    display: flex; flex-direction: column;
    flex-shrink: 0;            /* no se comprime dentro del overlay */
}
.tv-tour-overlay.open .tv-tour-modal { transform: translateY(0) scale(1); }

/* Botón cerrar */
.tv-tour-close {
    position: absolute; top: 14px; right: 16px; z-index: 5;
    background: rgba(255,255,255,.92); border: none;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #444;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: background .15s, transform .15s;
}
.tv-tour-close:hover { background: #fff; transform: scale(1.1); }

/* Cabecera — padding reducido para maximizar espacio del grid */
.tv-tour-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; padding: 22px 30px 16px; flex-shrink: 0;
    border-bottom: 1px solid #f0f2f5;
}
.tv-tour-badge {
    display: inline-block; color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; padding: 4px 12px; border-radius: 20px;
    margin-bottom: 10px;
}
.tv-tour-title {
    font-size: 24px !important; font-weight: 800 !important;
    color: #0f1729 !important; margin: 0 0 8px !important; line-height: 1.2 !important;
}
.tv-tour-desc { font-size: 14px; color: #5a6478; line-height: 1.65; margin: 0; max-width: 600px; }

.tv-tour-cta {
    flex-shrink: 0; display: inline-block; align-self: flex-start; margin-top: 4px;
    color: #fff !important; text-decoration: none !important;
    padding: 11px 24px; border-radius: 30px;
    font-size: 14px; font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 5px 18px rgba(0,0,0,.18);
    transition: transform .2s, filter .2s;
}
.tv-tour-cta:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* ================================================================
   GRID DE SILUETAS SVG
   ================================================================ */
.tv-dests-grid {
    display: grid;
    gap: 12px;
    padding: 18px 28px 24px;
    flex: 1;
}

/* 3 destinos (Indochina) */
.tv-dests-3 { grid-template-columns: repeat(3, 1fr); }

/* 5 destinos (China) */
.tv-dests-5 { grid-template-columns: repeat(5, 1fr); }

/* 6 destinos (Europa) — 3×2, tarjetas más compactas */
.tv-dests-6 { grid-template-columns: repeat(3, 1fr); }

/* Tarjeta */
.tv-dest-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 10px 10px;
    border-radius: 12px;
    border: 2px solid transparent;
    background: #f8f9fb;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
    min-width: 0;
}
.tv-dest-card:hover {
    background: color-mix(in srgb, var(--tour-color) 8%, #fff);
    border-color: var(--tour-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

/* Envoltorio del SVG */
.tv-dest-svg-wrap {
    width: 100%; flex: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 90px; max-height: 170px; overflow: hidden;
}
.tv-dest-svg-wrap svg {
    width: 100%; height: 100%;
    max-height: 160px;
    display: block;
    transition: filter .2s;
}

/* Europa: tarjetas más compactas para caber en pantalla */
.tv-dests-6 .tv-dest-svg-wrap { min-height: 70px; max-height: 130px; }
.tv-dests-6 .tv-dest-svg-wrap svg { max-height: 120px; }
.tv-dests-6 .tv-dest-card { padding: 10px 8px 8px; }

/* Color fill de los SVGs según tour */
.tv-dest-card[data-tour-key="indochina"] .tv-dest-svg-wrap .cls-1,
.tv-dest-card[data-tour-key="indochina"] .tv-dest-svg-wrap .cls-2,
.tv-dest-card[data-tour-key="indochina"] .tv-dest-svg-wrap path { fill: #e67e22; }

.tv-dest-card[data-tour-key="china"] .tv-dest-svg-wrap .cls-1,
.tv-dest-card[data-tour-key="china"] .tv-dest-svg-wrap .cls-2,
.tv-dest-card[data-tour-key="china"] .tv-dest-svg-wrap path { fill: #c0392b; }

.tv-dest-card[data-tour-key="europa"] .tv-dest-svg-wrap .cls-1,
.tv-dest-card[data-tour-key="europa"] .tv-dest-svg-wrap .cls-2,
.tv-dest-card[data-tour-key="europa"] .tv-dest-svg-wrap path { fill: #2980b9; }

/* Hover: luminosidad aumenta */
.tv-dest-card:hover .tv-dest-svg-wrap svg { filter: brightness(1.15) drop-shadow(0 2px 8px rgba(0,0,0,.18)); }

/* Nombre del destino */
.tv-dest-label {
    margin-top: 10px; font-size: 13px; font-weight: 700;
    color: #2a3347; text-align: center;
    transition: color .2s;
}
.tv-dest-card:hover .tv-dest-label { color: var(--tour-color); }

/* Placeholder si no hay SVG */
.tv-dest-svg-placeholder {
    width: 80px; height: 80px; border-radius: 50%;
    background: #e8ecf0;
}

/* ================================================================
   MODAL DE DESTINO (aparece en hover)
   ================================================================ */
.tv-dest-overlay {
    position: fixed; inset: 0; z-index: 10500;
    pointer-events: none;     /* el overlay en sí no bloquea */
}
.tv-dest-overlay.open { pointer-events: none; } /* solo el modal interno */

.tv-dest-modal {
    position: fixed; z-index: 10501;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.06);
    overflow: hidden;
    pointer-events: all;       /* sí recibe mouse */
    opacity: 0; transform: scale(.95) translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}
.tv-dest-overlay.open .tv-dest-modal {
    opacity: 1; transform: scale(1) translateY(0);
}

/* Botón cerrar del modal destino */
.tv-dest-close {
    position: absolute; top: 10px; right: 12px; z-index: 2;
    background: rgba(255,255,255,.9); border: none;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #555;
    box-shadow: 0 1px 6px rgba(0,0,0,.12);
    transition: background .15s;
}
.tv-dest-close:hover { background: #fff; }

/* Layout split: SVG | info */
.tv-dest-split { display: flex; height: 100%; min-height: 280px; }

/* Panel SVG (izquierdo) */
.tv-dest-svg-panel {
    flex: 0 0 42%;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 20px;
    border-right: 1px solid #f0f2f5;
}
.tv-dest-svg-panel svg {
    width: 100%; height: 100%;
    max-height: 240px; display: block;
}

/* SVG del modal: base gris — JS sobreescribe con style.fill las regiones de ciudad */
#tvDestSvgPanel .cls-1,
#tvDestSvgPanel .cls-2,
#tvDestSvgPanel path { fill: #dde3ed; }

/* Panel info (derecho) */
.tv-dest-info-panel {
    flex: 1; padding: 28px 26px 24px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
}

.tv-dest-tag {
    display: inline-block; align-self: flex-start;
    color: #fff; font-size: 10px; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px;
}

.tv-dest-name {
    font-size: 22px !important; font-weight: 800 !important;
    color: #0f1729 !important; margin: 0 !important; line-height: 1.2 !important;
}

.tv-dest-text {
    font-size: 13px; color: #5a6478; line-height: 1.65; margin: 0;
}

/* Lista de highlights */
.tv-dest-highlights {
    list-style: none; margin: 4px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.tv-dest-highlights li {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: #2a3347;
}
.tv-dest-highlights li::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--tour-color);
}

/* ================================================================
   MARCADORES DE CIUDAD (sobre el SVG en el modal de destino)
   ================================================================ */

/* Capa de marcadores, posicionada sobre el SVG con coordenadas absolutas calculadas en JS */
.tv-city-markers-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tv-city-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: all;
    cursor: default;
    z-index: 2;
}

/* Anillo de pulso animado */
.tv-city-pulse {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--tc, #e67e22);
    opacity: .35;
    animation: tvPulse 1.6s ease-out infinite;
}
@keyframes tvPulse {
    0%  { transform: scale(1);   opacity: .35; }
    100%{ transform: scale(2.6); opacity: 0;   }
}

/* Punto central */
.tv-city-dot {
    position: relative;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--tc, #e67e22);
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.3);
    z-index: 1;
}

/* Etiqueta del nombre */
.tv-city-name-lbl {
    margin-top: 5px;
    font-size: 10px; font-weight: 700;
    color: #1a1a2e;
    background: rgba(255,255,255,.92);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,.14);
    line-height: 1.4;
    pointer-events: none;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {
    .tv-dests-5 { grid-template-columns: repeat(3, 1fr); }
    .tv-dests-6 { grid-template-columns: repeat(3, 1fr); }
    .tv-tour-header { flex-direction: column; padding: 20px 24px 14px; gap: 12px; }
    .tv-tour-cta    { align-self: stretch; text-align: center; }
    .tv-dests-grid  { padding: 16px 20px 24px; }
    .tv-tour-modal  { margin-top: 60px; }
}

/* ── Móvil grande (≤ 680px) ── */
@media (max-width: 680px) {

    /* Mapa mundial: altura proporcional al ancho */
    #tvWorldMap { height: 54vw !important; min-height: 200px; max-height: 300px; border-radius: 8px; }

    /* Tooltip del mapa: sin sentido en táctil */
    .tv-world-tip { display: none; }

    /* Tour modal: hoja que sube desde abajo */
    .tv-tour-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .tv-tour-modal {
        margin-top: 0;
        border-radius: 22px 22px 0 0;
        max-height: 92vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tv-tour-overlay.open .tv-tour-modal { transform: translateY(0) scale(1); }

    /* Tirador visual (drag handle) */
    .tv-tour-modal::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: #d0d5de;
        border-radius: 2px;
        margin: 10px auto 0;
    }

    /* Cabecera compacta */
    .tv-tour-header { padding: 14px 18px 12px; gap: 10px; }
    .tv-tour-title  { font-size: 20px !important; }
    .tv-tour-desc   { font-size: 13px; }
    .tv-tour-cta    { padding: 10px 20px; font-size: 13px; }
    .tv-tour-close  { top: 10px; right: 14px; }

    /* Grid: 2 columnas para todos los tours */
    .tv-dests-3,
    .tv-dests-5,
    .tv-dests-6 { grid-template-columns: repeat(2, 1fr); }
    .tv-dests-grid { gap: 8px; padding: 12px 14px 22px; }

    /* Cards */
    .tv-dest-card         { padding: 10px 8px 8px; }
    .tv-dest-svg-wrap     { min-height: 80px; max-height: 140px; }
    .tv-dest-svg-wrap svg { max-height: 130px; }
    .tv-dest-label        { font-size: 12px; margin-top: 6px; }

    /* Europa: columnas 2×3 ya cubiertas, sin ajuste extra */
    .tv-dests-6 .tv-dest-svg-wrap     { min-height: 70px; max-height: 120px; }
    .tv-dests-6 .tv-dest-svg-wrap svg { max-height: 110px; }
    .tv-dests-6 .tv-dest-card         { padding: 8px 6px 8px; }

    /* Modal de destino: hoja desde abajo (bottom sheet) */
    .tv-dest-modal {
        left:   0    !important;
        right:  0    !important;
        bottom: 0    !important;
        top:    auto !important;
        width:  100% !important;
        border-radius: 22px 22px 0 0;
        max-height: 78vh;
        overflow: hidden;
    }
    .tv-dest-split {
        flex-direction: column;
        min-height: 0;
        height: auto;
    }
    .tv-dest-svg-panel {
        flex: 0 0 190px;
        border-right: none;
        border-bottom: 1px solid #f0f2f5;
        padding: 20px;
    }
    .tv-dest-svg-panel svg { max-height: 160px; }
    .tv-dest-info-panel {
        padding: 16px 20px 24px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tv-dest-name { font-size: 19px !important; }
}

/* ── Móvil pequeño (≤ 400px) ── */
@media (max-width: 400px) {
    #tvWorldMap { height: 58vw !important; }

    .tv-tour-title { font-size: 18px !important; }
    .tv-tour-header { padding: 12px 14px 10px; }
    .tv-dests-grid { gap: 6px; padding: 10px 10px 18px; }

    .tv-dest-svg-wrap     { min-height: 65px; max-height: 115px; }
    .tv-dest-svg-wrap svg { max-height: 105px; }
    .tv-dest-label        { font-size: 11px; }

    .tv-dest-svg-panel    { flex: 0 0 160px; }
    .tv-dest-svg-panel svg { max-height: 130px; }
    .tv-dest-name         { font-size: 17px !important; }
}