.mapa-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: visible;
    background-color: #e2e8f0; /* Fondo claro por defecto */
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3); /* Sombra interna para profundidad */
}

.svg-map-container {
    width: 100%;
    max-width: 1000px;
    height: auto;
    min-height: 400px; /* Altura mínima de seguridad */
    display: flex;
    justify-content: center;
    align-items: center;
}

.dark .mapa-image-wrapper {
    background-color: #0f172a; /* Fondo oscuro en modo oscuro */
}

.mexico-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.mexico-svg path {
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 0.8;
    stroke-linejoin: round;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-box: fill-box;
    transform-origin: center;
    cursor: pointer;
    fill: #374151; /* Gris oscuro para modo claro */
}

.dark .mexico-svg path {
    fill: #f3f4f6; /* Gris claro para modo oscuro */
    stroke: rgba(255, 255, 255, 0.2);
}

/* Colores base por estado (Sustituye la lógica de JS) */
.mexico-svg path[data-state-id="CDMX"] { 
    fill: #000000 !important; 
    stroke: #fbbf24 !important; /* Borde dorado para que CDMX no se pierda en el fondo oscuro */
    stroke-width: 1.5;
}

.mexico-svg path[data-state-id="GUA"] { fill: #DC2626 !important; }

/* Delegaciones (Azul) */
.mexico-svg path[data-state-id="MEX"], .mexico-svg path[data-state-id="COA"],
.mexico-svg path[data-state-id="VER"], .mexico-svg path[data-state-id="MIC"],
.mexico-svg path[data-state-id="CHH"], .mexico-svg path[data-state-id="NLE"],
.mexico-svg path[data-state-id="YUC"], .mexico-svg path[data-state-id="DUR"],
.mexico-svg path[data-state-id="GRO"], .mexico-svg path[data-state-id="HID"],
.mexico-svg path[data-state-id="CHP"], .mexico-svg path[data-state-id="TAB"],
.mexico-svg path[data-state-id="BCN"], .mexico-svg path[data-state-id="TLA"],
.mexico-svg path[data-state-id="BCS"], .mexico-svg path[data-state-id="MOR"] {
    fill: #2563EB !important;
}

.mexico-svg path.hovered {
    transform: scale(1.02);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
    stroke: #374151;
    stroke-width: 1.5;
    fill: #FACC15 !important; /* Amarillo brillante al pasar el mouse */
    z-index: 10;
}

/* Hover específico para estados con delegación (Azul, Rojo, Negro) */
.mexico-svg path.active-region.hovered {
    fill: #FACC15 !important; /* Amarillo brillante */
    stroke: #A16207; /* Borde amarillo oscuro para definición */
}

/* Tooltip */
.tooltip {
    position: absolute;
    background: rgba(31, 41, 55, 0.95);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    animation: tooltipFadeIn 0.2s ease;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de palpitación para Guanajuato */
@keyframes pulse-guanajuato {
    0% {
        fill: #DC2626;
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(220, 38, 38, 0));
    }
    50% {
        fill: #ef4444;
        transform: scale(1.05);
        filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
    }
    100% {
        fill: #DC2626;
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(220, 38, 38, 0));
    }
}

.mexico-svg path[data-state-id="GUA"] {
    animation: pulse-guanajuato 2s infinite ease-in-out;
    transform-origin: center;
}

.mexico-svg path[data-state-id="GUA"].hovered {
    animation: none;
}