/* ══════════════════════════════════════════════
   Colombia Interactive Map v3.0 — Frontend CSS
   ══════════════════════════════════════════════ */

/* Variables (fallbacks) */
.cmb-wrap {
    --cmb-hover:       #2e7d32;
    --cmb-active:      #1b5e20;
    --cmb-border:      #efefef;
    --cmb-bw:          0.75px;
    --cmb-popup-bg:    #ffffff;
    --cmb-popup-text:  #333333;
    --cmb-popup-title: #1a1a1a;
    --cmb-overlay:     rgba(0,0,0,.55);
    --cmb-radius:      14px;
    --cmb-font:        inherit;
    --cmb-title-sz:    22px;
    --cmb-desc-sz:     15px;
    --cmb-tt-bg:       #1a1a1a;
    --cmb-tt-text:     #fff;
    --cmb-max-w:       750px;
    --cmb-padding:     0px;

    position: relative;
    max-width: var(--cmb-max-w);
    width: 100%;
    font-family: var(--cmb-font);
    box-sizing: border-box;
}

/* ─── Título del mapa ───────────────────────── */
.cmb-map-title {
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
    padding: 0;
}

/* ─── Barra de controles ────────────────────── */
.cmb-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
    gap: 6px;
}

.cmb-btn-fullscreen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 6px;
    cursor: pointer;
    color: #444;
    transition: background .15s, color .15s;
    padding: 0;
}
.cmb-btn-fullscreen:hover {
    background: rgba(0,0,0,.14);
    color: #000;
}

/* ─── Pantalla completa ─────────────────────── */
.cmb-wrap.cmb-fullscreen {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.cmb-wrap.cmb-fullscreen .cmb-svg,
.cmb-wrap.cmb-fullscreen .cmb-map-area .cmb-svg {
    max-height: 90vh;
    width: auto;
}

/* ─── SVG ───────────────────────────────────── */
.cmb-wrap .cmb-svg {
    width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
    padding: var(--cmb-padding);
}

/* Fallback: preservar colores originales del SVG si los estilos internos no aplican */
.cmb-wrap .cmb-svg .st32,
.cmb-wrap .cmb-svg .st33 {
    fill: #a6cdb2;
}
.cmb-wrap .cmb-svg .st31,
.cmb-wrap .cmb-svg .st34 {
    fill: #3870b2;
}

/* Preservar colores originales — hover/active con filter+fill */
.cmb-wrap path[id] {
    stroke: var(--cmb-border) !important;
    stroke-width: var(--cmb-bw) !important;
    cursor: pointer;
    transition: filter .18s ease, fill .18s ease, transform .18s ease;
}

.cmb-wrap path[id]:hover {
    fill: var(--cmb-hover);
    filter: saturate(1.2) drop-shadow(0 2px 5px rgba(0,0,0,0.25));
}

/* Activo: usa el color configurable SOLO cuando está seleccionado */
.cmb-wrap path[id].cmb-active {
    fill: var(--cmb-active) !important;
    filter: none;
}

/* Desactivado: sin interacción pero con color original del SVG */
.cmb-wrap path[id].cmb-disabled {
    pointer-events: none;
    cursor: default;
}
.cmb-wrap path[id].cmb-disabled:hover {
    filter: none;
}

/* ─── Tooltip ───────────────────────────────── */
.cmb-tooltip {
    position: fixed;
    display: none;
    background: var(--cmb-tt-bg);
    color: var(--cmb-tt-text);
    padding: 5px 11px;
    border-radius: 5px;
    font-size: 13px;
    pointer-events: none;
    z-index: 99998;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    font-family: var(--cmb-font);
}

/* ─── Modal centrado ────────────────────────── */
.cmb-overlay {
    position: fixed;
    inset: 0;
    background: var(--cmb-overlay);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cmb-overlay[hidden] { display: none !important; }

.cmb-modal {
    position: relative;
    background: var(--cmb-popup-bg);
    color: var(--cmb-popup-text);
    max-width: 520px;
    width: 100%;
    border-radius: var(--cmb-radius);
    padding: 28px 30px 24px;
    box-shadow: 0 12px 48px rgba(0,0,0,.25);
    animation: cmb-pop .2s ease;
    max-height: 90vh;
    overflow-y: auto;
    font-family: var(--cmb-font);
}

/* ─── Panel lateral ─────────────────────────── */
.cmb-layout-side .cmb-side-container {
    display: flex;
    align-items: flex-start;
}
.cmb-layout-side .cmb-map-area {
    flex: 1 1 0;
    min-width: 0;
}
.cmb-side-panel {
    width: 270px;
    min-width: 200px;
    flex-shrink: 0;
    background: var(--cmb-popup-bg);
    color: var(--cmb-popup-text);
    border-radius: 0 var(--cmb-radius) var(--cmb-radius) 0;
    padding: 24px 20px;
    box-shadow: -2px 0 18px rgba(0,0,0,.1);
    position: relative;
    animation: cmb-slide .2s ease;
    font-family: var(--cmb-font);
}
.cmb-side-panel[hidden] { display: none !important; }

@media (max-width: 600px) {
    .cmb-layout-side .cmb-side-container { flex-direction: column; }
    .cmb-side-panel { width: 100%; border-radius: 0 0 var(--cmb-radius) var(--cmb-radius); }
}

/* ─── Botón cerrar ──────────────────────────── */
.cmb-close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 17px;
    cursor: pointer;
    color: var(--cmb-popup-text);
    line-height: 1;
    padding: 4px 8px;
    border-radius: 50%;
    transition: background .15s;
    opacity: .7;
}
.cmb-close-btn:hover { background: rgba(0,0,0,.08); opacity: 1; }

/* ─── Contenido popup ───────────────────────── */
.cmb-popup-img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 14px;
    object-fit: cover;
    max-height: 200px;
    display: block;
}
.cmb-popup-title {
    font-size: var(--cmb-title-sz);
    color: var(--cmb-popup-title);
    margin: 0 0 10px;
    line-height: 1.2;
    font-family: var(--cmb-font);
    font-weight: 700;
}
.cmb-popup-desc {
    font-size: var(--cmb-desc-sz);
    color: var(--cmb-popup-text);
    margin: 0 0 12px;
    line-height: 1.6;
    font-family: var(--cmb-font);
}
.cmb-popup-extras { margin-top: 10px; }
.cmb-extra-row {
    font-size: 13px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0,0,0,.07);
    color: var(--cmb-popup-text);
    font-family: var(--cmb-font);
}
.cmb-extra-row:last-child { border-bottom: none; }
.cmb-extra-row strong { color: var(--cmb-popup-title); margin-right: 5px; }

/* ─── Animaciones ───────────────────────────── */
@keyframes cmb-pop {
    from { opacity:0; transform: scale(.95) translateY(8px); }
    to   { opacity:1; transform: scale(1)   translateY(0); }
}
@keyframes cmb-slide {
    from { opacity:0; transform: translateX(18px); }
    to   { opacity:1; transform: translateX(0); }
}