.vr-map-app {
    --vr-free: #356f9f;
    --vr-current: #79a8c9;
    --vr-eu: #356f9f;
    --vr-eea: #0047ab;
    --vr-swiss: #1974d2;
    --vr-trans-tasman: #356f9f;
    --vr-india-nepal: #356f9f;
    --vr-union-state: #356f9f;
    --vr-gcc: #356f9f;
    --vr-unknown: #dce3e8;
    --vr-published: #356f9f;
    --vr-guide-available: #e4b73f;
    --vr-border: #d9dee4;
    --vr-bg: #f7f9fb;
    --vr-text: #1f2937;
    --vr-muted: #6b7280;
    width: 100%;
    margin-top: 22px;
    color: var(--vr-text);
    font-family: inherit;
}

/* Identidad del mapa de Destinos populares. Los tonos activos forman una
   escala basada en el azul de la silueta de Venezuela. */
.vr-map-app[data-map-mode="published"] {
    --vr-published: #4f98df;
    --vr-unknown: #667381;
    --vr-map-active-1: #8bc5f0;
    --vr-map-active-2: #70b5ea;
    --vr-map-active-3: #5fa8e5;
    --vr-map-active-4: #4f98df;
    --vr-map-active-5: #408bd8;
    --vr-map-active-6: #347fcf;
    --vr-map-active-7: #367bd7;
    --vr-map-active-8: #477fd0;
    --vr-map-active-9: #5a8fcb;
    --vr-map-active-10: #76a6d6;
    --vr-map-gray-1: #46515e;
    --vr-map-gray-2: #566270;
    --vr-map-gray-3: #667381;
    --vr-map-gray-4: #778492;
    --vr-map-gray-5: #8995a1;
}

.origin-circulation-section .origin-circulation-intro {
    margin-bottom: 0;
}

.vr-map-toolbar {
    display: flex;
    gap: 16px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.vr-map-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vr-map-buttons button {
    min-height: var(--control-height, 44px);
    padding: 8px 14px;
    border: 1px solid var(--vr-border);
    border-radius: 10px;
    background: #fff;
    color: var(--vr-text);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
}

.vr-map-buttons button:hover { background: #f2f4f7; }
.vr-map-buttons button:focus-visible { outline: 2px solid #356f9f; outline-offset: 2px; }

.vr-map-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 14px;
}

.vr-map-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.vr-map-legend > span[hidden] { display: none; }

.vr-color {
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 4px;
}

.vr-current { background: var(--vr-current); }
.vr-free { background: var(--vr-free); }
.vr-eu { background: var(--vr-eu); }
.vr-eea { background: var(--vr-eea); }
.vr-swiss { background: var(--vr-swiss); }
.vr-trans-tasman { background: var(--vr-trans-tasman); }
.vr-india-nepal { background: var(--vr-india-nepal); }
.vr-union-state { background: var(--vr-union-state); }
.vr-gcc { background: var(--vr-gcc); }
.vr-unknown { background: var(--vr-unknown, #dce3e8); }
.vr-published { background: var(--vr-published, #356f9f); }
.vr-guide-available { background: var(--vr-guide-available, #e4b73f); }

/* Muestras de la leyenda del mapa editorial: cada cuadro resume cuatro
   colores que realmente aparecen en los países disponibles y no disponibles. */
.countries-map-key .vr-color-mosaic {
    overflow: hidden;
    border-color: rgba(220, 235, 244, .5);
    background-size: 100% 100%;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        0 2px 6px rgba(0, 19, 46, .2);
}

.countries-map-key .vr-published-mosaic {
    background: conic-gradient(
        from 90deg,
        #8bc5f0 0 25%,
        #4f98df 25% 50%,
        #347fcf 50% 75%,
        #5a8fcb 75% 100%
    );
}

.countries-map-key .vr-unknown-mosaic {
    background: conic-gradient(
        from 90deg,
        #46515e 0 25%,
        #667381 25% 50%,
        #778492 50% 75%,
        #8995a1 75% 100%
    );
}

.vr-map-app[data-map-mode="mobility-guides"] .vr-country.is-guide-available {
    cursor: pointer;
    transition: filter .16s ease, opacity .16s ease;
}

.vr-map-app[data-map-mode="mobility-guides"] .vr-country.is-guide-available:hover,
.vr-map-app[data-map-mode="mobility-guides"] .vr-country.is-guide-available:focus {
    filter: brightness(1.08);
}

.vr-map-app[data-map-mode="published"] .vr-country.is-published {
    cursor: pointer;
    transition: filter .16s ease, opacity .16s ease;
}

.vr-map-app[data-map-mode="published"] .vr-country.is-published:hover,
.vr-map-app[data-map-mode="published"] .vr-country.is-published:focus {
    filter: brightness(1.12);
}

.vr-map-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--vr-border);
    border-radius: 16px;
    background: var(--vr-bg);
    touch-action: none;
}

.vr-map-app[data-map-mode="published"] .vr-map-frame {
    border-color: rgba(74, 139, 199, .34);
    background: radial-gradient(ellipse at center, #0b3158 0%, #00132e 100%);
    box-shadow:
        inset 0 0 0 1px rgba(87, 177, 224, .07),
        0 18px 46px rgba(0, 19, 46, .18);
}

.vr-map-app[data-map-mode="published"] .vr-loading {
    color: #b7c9d8;
}

.vr-loading {
    padding: 40px 20px;
    text-align: center;
    color: var(--vr-muted);
}

.vr-world-map {
    display: none;
    width: 100%;
    height: auto;
    min-height: 320px;
    cursor: grab;
}

.vr-world-map:active { cursor: grabbing; }

.vr-world-map:focus-visible {
    outline: 3px solid rgba(53, 111, 159, .72);
    outline-offset: -3px;
}

.vr-map-app .vr-map-frame .vr-map-zoom-help {
    position: absolute;
    z-index: 8;
    right: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    margin: 0;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 4px 14px rgba(20, 48, 70, .1);
    color: #496276;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.1 !important;
    pointer-events: none;
    opacity: .72;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: opacity .2s ease, background-color .2s ease, transform .2s ease;
}

.vr-map-app .vr-map-frame .vr-map-zoom-help.is-active {
    background: rgba(255, 255, 255, .96);
    opacity: 1;
    transform: translateY(-2px);
}

.vr-map-app[data-map-mode="published"] .vr-map-frame .vr-map-zoom-help {
    background: rgba(4, 32, 59, .82);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
    color: #bcd8e8;
}

.vr-map-app[data-map-mode="published"] .vr-map-frame .vr-map-zoom-help.is-active {
    background: rgba(8, 45, 78, .96);
}

.vr-map-touch-help {
    display: none;
}

.vr-country {
    stroke: #fff;
    stroke-width: .7;
    vector-effect: non-scaling-stroke;
    outline: none;
}

.vr-map-app[data-map-mode="published"] .vr-country,
.vr-map-app[data-map-mode="published"] .vr-island-marker {
    stroke: none;
    stroke-width: 0;
}

.vr-map-app[data-map-mode="published"] .vr-continent-silhouette {
    fill: #00132e;
    stroke: none;
    pointer-events: none;
}

.vr-country.is-free,
.vr-country.is-eu,
.vr-country.is-eea,
.vr-country.is-swiss,
.vr-country.is-trans-tasman,
.vr-country.is-india-nepal,
.vr-country.is-union-state,
.vr-country.is-gcc,
.vr-country.is-current,
.vr-country.is-linked { cursor: pointer; }

.vr-island-marker {
    cursor: pointer;
    stroke: #fff;
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    outline: none;
    transition: filter .15s ease, stroke-width .15s ease;
}

.vr-island-marker.is-hovered {
    stroke-width: 1.6;
    filter: drop-shadow(0 1px 1.5px rgba(16, 37, 61, .65));
}

.vr-island-marker.is-outside-eu {
    cursor: default;
}
.vr-tooltip {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    max-width: 260px;
    padding: 8px 10px;
    border: 1px solid var(--vr-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .1);
    font-size: 14px;
}

.origin-circulation-section .vr-map-note {
    margin: 12px 0 0;
    color: var(--vr-muted);
    font-size: 14px;
}

.vr-map-app.is-unavailable .vr-map-frame,
.vr-map-app.is-unavailable .vr-map-legend,
.vr-map-app.is-unavailable .vr-map-buttons { display: none; }

/* El atajo de teclado y rueda solo es útil en escritorio. */
@media (max-width: 1180px) {
    .vr-map-app .vr-map-frame .vr-map-zoom-help {
        display: none !important;
    }

    .vr-map-app .vr-map-frame .vr-map-touch-help {
        position: absolute;
        z-index: 8;
        right: 10px;
        bottom: 10px;
        display: grid;
        width: 54px;
        height: 54px;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(121, 168, 201, .52);
        border-radius: 15px;
        background: rgba(248, 250, 252, .9);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .92),
            0 6px 18px rgba(0, 19, 46, .24);
        pointer-events: none;
        opacity: .94;
        transform: translateY(0);
        transition: opacity .36s ease, transform .36s ease;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .vr-map-app .vr-map-frame .vr-map-touch-help img {
        display: block;
        width: 44px;
        height: 44px;
    }

    .vr-map-app .vr-map-frame .vr-map-touch-help.is-dismissed {
        opacity: 0;
        transform: translateY(7px);
    }
}

@media (max-width: 700px) {
    .vr-map-toolbar { align-items: stretch; }
    .vr-map-buttons { width: 100%; }
    .vr-map-buttons button { flex: 1; }
    .vr-world-map { min-height: 250px; }
    .vr-map-app .vr-map-frame .vr-map-zoom-help {
        right: 8px;
        bottom: 8px;
        max-width: calc(100% - 16px);
        padding: 4px 7px;
        border-radius: 999px;
        font-size: 14px !important;
    }

    .vr-map-app .vr-map-frame .vr-map-touch-help {
        right: 8px;
        bottom: 8px;
        width: 48px;
        height: 48px;
        border-radius: 13px;
    }

    .vr-map-app .vr-map-frame .vr-map-touch-help img {
        width: 39px;
        height: 39px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vr-map-app .vr-map-frame .vr-map-zoom-help,
    .vr-map-app .vr-map-frame .vr-map-touch-help { transition: none; }
}
