/*
 * Mapa Global Interactivo - Estilos
 * Diseño minimalista con colores: cian, azul, púrpura y verde.
 */

.mgi-map-container {
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
    position: relative;
    background: transparent;
    padding: 20px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.mgi-map-svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.05));
    transition: filter 0.3s ease;
}

/* Base region styles - minimal light gray fallback */
.mgi-region, .pais, .mgi-map-svg path[id], .mgi-map-svg g[id] {
    fill: #99A693CC !important; /* Color base general del mapa */
    stroke: #ffffff;
    stroke-width: 1.5px;
    stroke-linejoin: round;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modificadores de estado interactivo */
.mgi-map-svg .mgi-configured {
    cursor: pointer;
}
.mgi-map-svg .mgi-unconfigured {
    cursor: default !important;
    pointer-events: none !important; /* Deshabilita clicks y hover en países no configurados */
    filter: blur(0.5px) !important; /* Difuminar los países sin modal */
}

/* Colores específicos para Latinoamérica y el Caribe (gradiente doble color para repetidos) */
.mgi-map-svg #mx, .mgi-map-svg #mx path,
.mgi-map-svg #pe, .mgi-map-svg #pe path,
.mgi-map-svg #pr, .mgi-map-svg #pr path,
.mgi-map-svg #py, .mgi-map-svg #py path,
.mgi-map-svg #ht, .mgi-map-svg #ht path,
.mgi-map-svg #jm, .mgi-map-svg #jm path,
.mgi-map-svg #ag, .mgi-map-svg #ag path,
.mgi-map-svg #ar, .mgi-map-svg #ar path,
.mgi-map-svg #ve, .mgi-map-svg #ve path,
.mgi-map-svg #vc, .mgi-map-svg #vc path,
.mgi-map-svg #kn, .mgi-map-svg #kn path,
.mgi-map-svg #uy, .mgi-map-svg #uy path,
.mgi-map-svg #bb, .mgi-map-svg #bb path,
.mgi-map-svg #ni, .mgi-map-svg #ni path,
.mgi-map-svg #hn, .mgi-map-svg #hn path,
.mgi-map-svg #gy, .mgi-map-svg #gy path,
.mgi-map-svg #bs, .mgi-map-svg #bs path,
.mgi-map-svg #lc, .mgi-map-svg #lc path,
.mgi-map-svg #bz, .mgi-map-svg #bz path,
.mgi-map-svg #cl, .mgi-map-svg #cl path,
.mgi-map-svg #ec, .mgi-map-svg #ec path,
.mgi-map-svg #sv, .mgi-map-svg #sv path,
.mgi-map-svg #do, .mgi-map-svg #do path,
.mgi-map-svg #gd, .mgi-map-svg #gd path,
.mgi-map-svg #cu, .mgi-map-svg #cu path,
.mgi-map-svg #tt, .mgi-map-svg #tt path,
.mgi-map-svg #gt, .mgi-map-svg #gt path,
.mgi-map-svg #co, .mgi-map-svg #co path,
.mgi-map-svg #sr, .mgi-map-svg #sr path,
.mgi-map-svg #bo, .mgi-map-svg #bo path,
.mgi-map-svg #cr, .mgi-map-svg #cr path {
    fill: url(#gradient-dual) !important;
}

/* Brasil se mantiene con el primer color (ya que no se repitió en la segunda lista) */
.mgi-map-svg #br, .mgi-map-svg #br path {
    fill: #e7a3ec !important;
}    

/* Colores específicos para Europa, Norte de África, Medio Oriente y Asia (China) */
.mgi-map-svg #al, .mgi-map-svg #al path,
.mgi-map-svg #de, .mgi-map-svg #de path,
.mgi-map-svg #ad, .mgi-map-svg #ad path,
.mgi-map-svg #at, .mgi-map-svg #at path,
.mgi-map-svg #be, .mgi-map-svg #be path,
.mgi-map-svg #by, .mgi-map-svg #by path,
.mgi-map-svg #ba, .mgi-map-svg #ba path,
.mgi-map-svg #bg, .mgi-map-svg #bg path,
.mgi-map-svg #va, .mgi-map-svg #va path,
.mgi-map-svg #hr, .mgi-map-svg #hr path,
.mgi-map-svg #cy, .mgi-map-svg #cy path,
.mgi-map-svg #dk, .mgi-map-svg #dk path,
.mgi-map-svg #sk, .mgi-map-svg #sk path,
.mgi-map-svg #si, .mgi-map-svg #si path,
.mgi-map-svg #es, .mgi-map-svg #es path,
.mgi-map-svg #ee, .mgi-map-svg #ee path,
.mgi-map-svg #fi, .mgi-map-svg #fi path,
.mgi-map-svg #fr, .mgi-map-svg #fr path,
.mgi-map-svg #ge, .mgi-map-svg #ge path,
.mgi-map-svg #gr, .mgi-map-svg #gr path,
.mgi-map-svg #nl, .mgi-map-svg #nl path,
.mgi-map-svg #hu, .mgi-map-svg #hu path,
.mgi-map-svg #ie, .mgi-map-svg #ie path,
.mgi-map-svg #it, .mgi-map-svg #it path,
.mgi-map-svg #lv, .mgi-map-svg #lv path,
.mgi-map-svg #li, .mgi-map-svg #li path,
.mgi-map-svg #lt, .mgi-map-svg #lt path,
.mgi-map-svg #lu, .mgi-map-svg #lu path,
.mgi-map-svg #mk, .mgi-map-svg #mk path,
.mgi-map-svg #mt, .mgi-map-svg #mt path,
.mgi-map-svg #md, .mgi-map-svg #md path,
.mgi-map-svg #mc, .mgi-map-svg #mc path,
.mgi-map-svg #me, .mgi-map-svg #me path,
.mgi-map-svg #no, .mgi-map-svg #no path,
.mgi-map-svg #pl, .mgi-map-svg #pl path,
.mgi-map-svg #pt, .mgi-map-svg #pt path,
.mgi-map-svg #gb, .mgi-map-svg #gb path,
.mgi-map-svg #cz, .mgi-map-svg #cz path,
.mgi-map-svg #ro, .mgi-map-svg #ro path,
.mgi-map-svg #sm, .mgi-map-svg #sm path,
.mgi-map-svg #rs, .mgi-map-svg #rs path,
.mgi-map-svg #se, .mgi-map-svg #se path,
.mgi-map-svg #ch, .mgi-map-svg #ch path,
.mgi-map-svg #tr, .mgi-map-svg #tr path,
.mgi-map-svg #ua, .mgi-map-svg #ua path,
.mgi-map-svg #dz, .mgi-map-svg #dz path,
.mgi-map-svg #ly, .mgi-map-svg #ly path,
.mgi-map-svg #tn, .mgi-map-svg #tn path,
.mgi-map-svg #sa, .mgi-map-svg #sa path,
.mgi-map-svg #sy, .mgi-map-svg #sy path,
.mgi-map-svg #iq, .mgi-map-svg #iq path,
.mgi-map-svg #ir, .mgi-map-svg #ir path,
.mgi-map-svg #il, .mgi-map-svg #il path,
.mgi-map-svg #jo, .mgi-map-svg #jo path,
.mgi-map-svg #lb, .mgi-map-svg #lb path,
.mgi-map-svg #kw, .mgi-map-svg #kw path,
.mgi-map-svg #ae, .mgi-map-svg #ae path,
.mgi-map-svg #am, .mgi-map-svg #am path,
.mgi-map-svg #tm, .mgi-map-svg #tm path,
.mgi-map-svg #uz, .mgi-map-svg #uz path,
.mgi-map-svg #cn, .mgi-map-svg #cn path {
    fill: #d46862 !important;
}

/* Colores específicos para subset de Europa */
.mgi-map-svg #gb, .mgi-map-svg #gb path,
.mgi-map-svg #de, .mgi-map-svg #de path,
.mgi-map-svg #fr, .mgi-map-svg #fr path,
.mgi-map-svg #pt, .mgi-map-svg #pt path,
.mgi-map-svg #es, .mgi-map-svg #es path,
.mgi-map-svg #ch, .mgi-map-svg #ch path,
.mgi-map-svg #be, .mgi-map-svg #be path,
.mgi-map-svg #nl, .mgi-map-svg #nl path,
.mgi-map-svg #ie, .mgi-map-svg #ie path,
.mgi-map-svg #it, .mgi-map-svg #it path,
.mgi-map-svg #at, .mgi-map-svg #at path {
    fill: #a77d94 !important;
}

/* Colores específicos para África del Norte Occidental */
.mgi-map-svg #tn, .mgi-map-svg #tn path,
.mgi-map-svg #dz, .mgi-map-svg #dz path {
    fill: #d76860 !important;
}

/* Brasil, al no repetirse, se queda con el primer color puro */
.mgi-map-svg #br, .mgi-map-svg #br path {
    fill: #9929EA !important;
}

/* Actualización de colores para Latinoamérica y Caribe repetidos (degradado) */
.mgi-map-svg #mx, .mgi-map-svg #mx path,
.mgi-map-svg #pe, .mgi-map-svg #pe path,
.mgi-map-svg #pr, .mgi-map-svg #pr path,
.mgi-map-svg #py, .mgi-map-svg #py path,
.mgi-map-svg #ht, .mgi-map-svg #ht path,
.mgi-map-svg #jm, .mgi-map-svg #jm path,
.mgi-map-svg #ag, .mgi-map-svg #ag path,
.mgi-map-svg #ar, .mgi-map-svg #ar path,
.mgi-map-svg #ve, .mgi-map-svg #ve path,
.mgi-map-svg #vc, .mgi-map-svg #vc path,
.mgi-map-svg #kn, .mgi-map-svg #kn path,
.mgi-map-svg #uy, .mgi-map-svg #uy path,
.mgi-map-svg #bb, .mgi-map-svg #bb path,
.mgi-map-svg #ni, .mgi-map-svg #ni path,
.mgi-map-svg #hn, .mgi-map-svg #hn path,
.mgi-map-svg #gy, .mgi-map-svg #gy path,
.mgi-map-svg #bs, .mgi-map-svg #bs path,
.mgi-map-svg #lc, .mgi-map-svg #lc path,
.mgi-map-svg #bz, .mgi-map-svg #bz path,
.mgi-map-svg #cl, .mgi-map-svg #cl path,
.mgi-map-svg #ec, .mgi-map-svg #ec path,
.mgi-map-svg #sv, .mgi-map-svg #sv path,
.mgi-map-svg #do, .mgi-map-svg #do path,
.mgi-map-svg #gd, .mgi-map-svg #gd path,
.mgi-map-svg #cu, .mgi-map-svg #cu path,
.mgi-map-svg #tt, .mgi-map-svg #tt path,
.mgi-map-svg #gt, .mgi-map-svg #gt path,
.mgi-map-svg #co, .mgi-map-svg #co path,
.mgi-map-svg #sr, .mgi-map-svg #sr path,
.mgi-map-svg #bo, .mgi-map-svg #bo path,
.mgi-map-svg #cr, .mgi-map-svg #cr path {
    fill: url(#gradient-dual) !important;
}

/* Permitimos que las partes pequeñas de un país hereden su color padre */
.mgi-map-svg g[id] path {
    fill: inherit;
}

/* Colores específicos para los países africanos solicitados (#f6bd4a) */
.mgi-map-svg #ma, .mgi-map-svg #ma path,
.mgi-map-svg #ml, .mgi-map-svg #ml path,
.mgi-map-svg #eh, .mgi-map-svg #eh path,
.mgi-map-svg #mr, .mgi-map-svg #mr path,
.mgi-map-svg #sn, .mgi-map-svg #sn path,
.mgi-map-svg #gw, .mgi-map-svg #gw path,
.mgi-map-svg #gn, .mgi-map-svg #gn path,
.mgi-map-svg #sl, .mgi-map-svg #sl path,
.mgi-map-svg #lr, .mgi-map-svg #lr path,
.mgi-map-svg #ci, .mgi-map-svg #ci path,
.mgi-map-svg #gh, .mgi-map-svg #gh path,
.mgi-map-svg #bj, .mgi-map-svg #bj path,
.mgi-map-svg #ng, .mgi-map-svg #ng path,
.mgi-map-svg #cm, .mgi-map-svg #cm path,
.mgi-map-svg #gq, .mgi-map-svg #gq path,
.mgi-map-svg #ga, .mgi-map-svg #ga path,
.mgi-map-svg #cg, .mgi-map-svg #cg path,
.mgi-map-svg #cf, .mgi-map-svg #cf path,
.mgi-map-svg #ao, .mgi-map-svg #ao path,
.mgi-map-svg #cd, .mgi-map-svg #cd path,
.mgi-map-svg #zm, .mgi-map-svg #zm path,
.mgi-map-svg #bw, .mgi-map-svg #bw path,
.mgi-map-svg #eg, .mgi-map-svg #eg path,
.mgi-map-svg #et, .mgi-map-svg #et path,
.mgi-map-svg #so, .mgi-map-svg #so path,
.mgi-map-svg #ug, .mgi-map-svg #ug path,
.mgi-map-svg #ke, .mgi-map-svg #ke path,
.mgi-map-svg #rw, .mgi-map-svg #rw path,
.mgi-map-svg #bi, .mgi-map-svg #bi path,
.mgi-map-svg #tz, .mgi-map-svg #tz path,
.mgi-map-svg #mw, .mgi-map-svg #mw path,
.mgi-map-svg #zw, .mgi-map-svg #zw path,
.mgi-map-svg #mg, .mgi-map-svg #mg path,
.mgi-map-svg #mz, .mgi-map-svg #mz path,
.mgi-map-svg #sz, .mgi-map-svg #sz path,
.mgi-map-svg #ls, .mgi-map-svg #ls path,
.mgi-map-svg #za, .mgi-map-svg #za path {
    fill: #f6bd4a !important;
}

/* Interactivity map regions */
.mgi-region:hover, .pais:hover, .mgi-map-svg path[id]:hover, .mgi-map-svg g[id]:hover {
    filter: brightness(0.95);
    stroke-width: 2px;
    transform: translateY(-2px);
    z-index: 10;
}

/* 
 * Specific Custom Colors
 */

.mgi-region-cyan {
    fill: #06b6d4; /* Cian minimalista */
}
.mgi-region-cyan:hover {
    fill: #0891b2;
    filter: drop-shadow(0 4px 6px rgba(6, 182, 212, 0.3));
}

.mgi-region-blue {
    fill: #3b82f6; /* Azul minimalista */
}
.mgi-region-blue:hover {
    fill: #2563eb;
    filter: drop-shadow(0 4px 6px rgba(59, 130, 246, 0.3));
}

.mgi-region-purple {
    fill: #8b5cf6; /* Púrpura minimalista */
}
.mgi-region-purple:hover {
    fill: #7c3aed;
    filter: drop-shadow(0 4px 6px rgba(139, 92, 246, 0.3));
}

.mgi-region-green {
    fill: #10b981; /* Verde minimalista */
}
.mgi-region-green:hover {
    fill: #059669;
    filter: drop-shadow(0 4px 6px rgba(16, 185, 129, 0.3));
}

/* Tooltip styles */
.mgi-map-tooltip {
    position: absolute;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 8px;
    padding: 10px 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(10px);
    z-index: 50;
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
}

.mgi-map-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ====================================
 * Modal Styles
 * ==================================== */

.mgi-modal-container {
    position: absolute; /* Relativo al .mgi-map-container */
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translate(-50%, calc(-100% - 15px)) scale(0.95); /* Centro horizontal, arriba del punto */
}

.mgi-modal-container.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, calc(-100% - 15px)) scale(1);
}

.mgi-modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 320px;
    max-width: 90vw;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Flecha del globo apuntando hacia abajo */
.mgi-modal-content::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: calc(50% + var(--arrow-shift, 0px));
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    display: block;
    width: 0;
    transition: left 0.2s ease;
}

/* Modificadores para mostrar hacia abajo si se sale por arriba */
.mgi-modal-container.mgi-modal-bottom {
    transform: translate(-50%, 15px) scale(0.95);
}
.mgi-modal-container.active.mgi-modal-bottom {
    transform: translate(-50%, 15px) scale(1);
}

/* Flecha apuntando hacia arriba cuando el modal está invertido */
.mgi-modal-container.mgi-modal-bottom .mgi-modal-content::after {
    bottom: auto;
    top: -10px;
    border-width: 0 10px 10px;
    border-color: transparent transparent #ffffff transparent;
}

.mgi-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
}

.mgi-modal-close:hover {
    color: #0f172a;
}

.mgi-modal-title {
    margin-top: 0;
    margin-bottom: 12px;
    color: #0f172a;
    font-size: 22px;
}

.mgi-modal-body {
    color: #475569;
    font-size: 15px;
    line-height: 1.6;
}

/* Actualización de colores (#E13F7C) */
.mgi-map-svg #cu, .mgi-map-svg #cu path,
.mgi-map-svg #do, .mgi-map-svg #do path,
.mgi-map-svg #ht, .mgi-map-svg #ht path,
.mgi-map-svg #jm, .mgi-map-svg #jm path,
.mgi-map-svg #bs, .mgi-map-svg #bs path,
.mgi-map-svg #tt, .mgi-map-svg #tt path,
.mgi-map-svg #bb, .mgi-map-svg #bb path,
.mgi-map-svg #ag, .mgi-map-svg #ag path,
.mgi-map-svg #dm, .mgi-map-svg #dm path,
.mgi-map-svg #gd, .mgi-map-svg #gd path,
.mgi-map-svg #lc, .mgi-map-svg #lc path,
.mgi-map-svg #vc, .mgi-map-svg #vc path,
.mgi-map-svg #kn, .mgi-map-svg #kn path,
.mgi-map-svg #bz, .mgi-map-svg #bz path,
.mgi-map-svg #gy, .mgi-map-svg #gy path,
.mgi-map-svg #sr, .mgi-map-svg #sr path,
.mgi-map-svg #ve, .mgi-map-svg #ve path,
.mgi-map-svg #sv, .mgi-map-svg #sv path,
.mgi-map-svg #ni, .mgi-map-svg #ni path,
.mgi-map-svg #pa, .mgi-map-svg #pa path,
.mgi-map-svg #gt, .mgi-map-svg #gt path,
.mgi-map-svg #hn, .mgi-map-svg #hn path {
    fill: #E13F7C !important;
}

/* Color para Estados Unidos (#FF70BF) */
.mgi-map-svg #us, .mgi-map-svg #us path {
    fill: #FF70BF !important;
}

/* ====================================
 * Mobile Optimizations
 * ==================================== */

.mapa-mundi-contenedor {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 15px; /* Espacio para el scroll horizontal */
}

/* Evitar que el mapa se haga diminuto e in-clickeable */
@media (max-width: 768px) {
    .mgi-map-svg {
        min-width: 700px; /* Tamaño mínimo para mobile */
    }
    
    .mgi-map-container {
        padding: 5px;
    }

    .mgi-modal-content {
        max-width: calc(100vw - 32px);
        width: 300px;
        padding: 16px;
    }
    
    .mgi-modal-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .mgi-modal-body {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Ocultar el cursor con tooltip en pantallas táctiles ya que no hay hover real y choca con el modal */
    .mgi-map-tooltip {
        display: none !important;
    }
}

/* En dispositivos táctiles (hover: none) también aseguramos ocultar el tooltip pequeño */
@media (hover: none) and (pointer: coarse) {
    .mgi-map-tooltip {
        display: none !important;
    }
}