/* Interactive Germany Map Styles - Arte-Q Premium Edition */
.map-container {
    position: relative;
    width: 100%;
    max-width: 650px;
    aspect-ratio: 1 / 1; /* Estabiliza el CLS reservando el espacio antes de cargar el mapa */
    min-height: 300px; /* Asegura un mínimo visible en cualquier dispositivo */
    margin: 2rem auto;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f8fafc 100%);
    padding: 2.5rem;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.8);
}

.germany-svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.04));
    display: block;
}

/* State Styling */
.state {
    fill: #f59e0b; /* Corporate Amber */
    stroke: #ffffff;
    stroke-width: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.state:hover {
    fill: #d97706; /* Darker amber */
    transform: translateY(-5px);
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.15));
}

/* Primary focus: Hessen */
.hessen {
    fill: #2563eb !important; /* Corporate Blue */
}

.hessen:hover {
    fill: #1d4ed8 !important;
}

/* Expansion areas (Neighboring states) */
.expansion-area {
    fill: #93c5fd !important; /* Light blue (Corporate blue with more lightness) */
}

.expansion-area:hover {
    fill: #60a5fa !important;
}

/* Darmstadt Marker */
.pin-circle {
    fill: #ffffff;
    stroke: #2563eb;
    stroke-width: 3;
    animation: pin-pulse 2s infinite ease-in-out;
}

.pin-shadow {
    fill: rgba(37, 99, 235, 0.4);
    animation: pin-shadow-pulse 2s infinite ease-in-out;
}

.pin-label-bg {
    fill: #2563eb;
    rx: 6;
}

.pin-label-text {
    fill: #ffffff;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}

/* Tooltip (Floating State Names) */
#map-tooltip {
    position: fixed;
    padding: 10px 16px;
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
    transform: translate(-50%, -100%);
    margin-top: -15px;
}

@keyframes pin-pulse {
    0% { r: 6; stroke-opacity: 1; }
    50% { r: 8; stroke-opacity: 0.6; }
    100% { r: 6; stroke-opacity: 1; }
}

@keyframes pin-shadow-pulse {
    0% { r: 8; opacity: 0.6; }
    50% { r: 16; opacity: 0; }
    100% { r: 8; opacity: 0.6; }
}

.map-info {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    color: #475569;
}

.map-info-item {
    display: flex;
    align-items: center;
}

.map-info strong {
    color: #1e293b;
}

.legend-hessen {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #2563eb;
    border-radius: 4px;
    margin-right: 8px;
    box-shadow: 0 2px 4px rgba(37,99,235,0.3);
}

.legend-expansion {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #93c5fd;
    border-radius: 4px;
    margin-right: 8px;
    box-shadow: 0 2px 4px rgba(147,197,253,0.3);
}

@media (max-width: 768px) {
    .map-container {
        padding: 1.5rem;
        margin-bottom: 3rem;
    }
}