/* Atracción de Talento · mapa territorial operativo 2.2.0 */
.krn-at-territory-map,
.krn-at-territory-map * { box-sizing: border-box; }
.krn-at-territory-map {
    --map-surface: rgba(255,255,255,.86);
    --map-ink: #241b38;
    --map-muted: #766e86;
    --map-line: rgba(83,55,126,.16);
    --map-accent: #7c36dd;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--map-line);
    border-radius: 22px;
    color: var(--map-ink);
    background:
        radial-gradient(circle at 14% 8%, rgba(223,47,178,.10), transparent 30%),
        radial-gradient(circle at 86% 4%, rgba(68,103,232,.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,244,252,.92));
    box-shadow: 0 18px 42px rgba(57,34,94,.09);
}
.krn-at-territory-map.is-dragging [data-at-map-canvas] { cursor: grabbing; }
.krn-at-map-toolbar {
    min-height: 48px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--map-line);
    background: rgba(255,255,255,.58);
    backdrop-filter: blur(16px);
}
.krn-at-map-toolbar strong { display: block; font-size: 12px; }
.krn-at-map-toolbar small { display: block; margin-top: 2px; color: var(--map-muted); font-size: 10px; }
.krn-at-map-controls { display: flex; gap: 5px; }
.krn-at-map-controls button {
    width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
    border: 1px solid var(--map-line); border-radius: 10px; color: var(--map-ink);
    background: rgba(255,255,255,.82); font: inherit; font-size: 17px; font-weight: 850; cursor: pointer;
}
.krn-at-map-controls button:hover,
.krn-at-map-controls button:focus-visible { border-color: rgba(124,54,221,.50); outline: 3px solid rgba(124,54,221,.12); }
.krn-at-map-stage { position: relative; min-height: 360px; overflow: hidden; }
.krn-at-map-stage svg { display: block; width: 100%; min-height: 360px; max-height: 560px; touch-action: none; cursor: grab; background: linear-gradient(180deg, rgba(237,245,251,.58), rgba(244,239,249,.62)); }
.krn-at-map-zone {
    fill: color-mix(in srgb, var(--zone-color) 30%, white);
    stroke: color-mix(in srgb, var(--zone-color) 80%, #271b3a);
    stroke-width: 1.6;
    fill-rule: evenodd;
    cursor: pointer;
    transition: fill .16s ease, opacity .16s ease, filter .16s ease, stroke-width .16s ease;
}
.krn-at-map-zone:hover,
.krn-at-map-zone:focus-visible { fill: color-mix(in srgb, var(--zone-color) 48%, white); filter: drop-shadow(0 5px 8px rgba(47,28,79,.18)); outline: none; }
.krn-at-map-zone.is-selected { fill: color-mix(in srgb, var(--zone-color) 74%, white); stroke-width: 3.2; filter: drop-shadow(0 7px 9px rgba(48,28,83,.24)); }
.krn-at-map-reference { fill: none; stroke: rgba(37,28,56,.78); stroke-width: 2.5; stroke-dasharray: 6 5; pointer-events: none; }
.krn-at-map-label { fill: #231b35; paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: 4; stroke-linejoin: round; text-anchor: middle; dominant-baseline: middle; font: 800 13px/1 Inter, ui-sans-serif, sans-serif; }
.krn-at-map-site circle:first-child { fill: #fff; stroke: #5f2fc0; stroke-width: 2.5; }
.krn-at-map-site circle:nth-child(2) { fill: #df2fb2; pointer-events: none; }
.krn-at-map-selection {
    padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-top: 1px solid var(--map-line); background: rgba(255,255,255,.70);
}
.krn-at-map-selection span { color: var(--map-muted); font-size: 11px; }
.krn-at-map-selection strong { font-size: 12px; text-align: right; }
.krn-at-map-legend { padding: 10px 13px 12px; display: flex; flex-wrap: wrap; gap: 7px 12px; border-top: 1px solid var(--map-line); color: var(--map-muted); font-size: 10px; }
.krn-at-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.krn-at-map-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--legend-color, #8a41e8); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
html[data-theme="dark"] .krn-at-territory-map,
html.dark .krn-at-territory-map,
body.dark .krn-at-territory-map,
body.krn-dark .krn-at-territory-map,
[data-appearance="dark"] .krn-at-territory-map {
        --map-surface: rgba(27,20,45,.90); --map-ink: #f5f0ff; --map-muted: #b9b0ca; --map-line: rgba(220,205,255,.14);
        background: radial-gradient(circle at 14% 8%, rgba(223,47,178,.14), transparent 32%), radial-gradient(circle at 86% 4%, rgba(68,103,232,.15), transparent 32%), linear-gradient(180deg, rgba(28,20,47,.96), rgba(17,12,30,.94));
}
html[data-theme="dark"] .krn-at-map-toolbar, html[data-theme="dark"] .krn-at-map-selection,
html.dark .krn-at-map-toolbar, html.dark .krn-at-map-selection, body.dark .krn-at-map-toolbar, body.dark .krn-at-map-selection, body.krn-dark .krn-at-map-toolbar, body.krn-dark .krn-at-map-selection, [data-appearance="dark"] .krn-at-map-toolbar, [data-appearance="dark"] .krn-at-map-selection { background: rgba(26,18,43,.70); }
html[data-theme="dark"] .krn-at-map-controls button, html.dark .krn-at-map-controls button, body.dark .krn-at-map-controls button, body.krn-dark .krn-at-map-controls button, [data-appearance="dark"] .krn-at-map-controls button { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .krn-at-map-stage svg, html.dark .krn-at-map-stage svg, body.dark .krn-at-map-stage svg, body.krn-dark .krn-at-map-stage svg, [data-appearance="dark"] .krn-at-map-stage svg { background: linear-gradient(180deg, rgba(17,23,39,.82), rgba(26,17,39,.82)); }
html[data-theme="dark"] .krn-at-map-zone, html.dark .krn-at-map-zone, body.dark .krn-at-map-zone, body.krn-dark .krn-at-map-zone, [data-appearance="dark"] .krn-at-map-zone { fill: color-mix(in srgb, var(--zone-color) 28%, #171022); stroke: color-mix(in srgb, var(--zone-color) 78%, white); }
html[data-theme="dark"] .krn-at-map-zone:hover, html[data-theme="dark"] .krn-at-map-zone:focus-visible, html.dark .krn-at-map-zone:hover, body.dark .krn-at-map-zone:hover, body.krn-dark .krn-at-map-zone:hover, [data-appearance="dark"] .krn-at-map-zone:hover { fill: color-mix(in srgb, var(--zone-color) 43%, #171022); }
html[data-theme="dark"] .krn-at-map-zone.is-selected, html.dark .krn-at-map-zone.is-selected, body.dark .krn-at-map-zone.is-selected, body.krn-dark .krn-at-map-zone.is-selected, [data-appearance="dark"] .krn-at-map-zone.is-selected { fill: color-mix(in srgb, var(--zone-color) 62%, #21132e); }
html[data-theme="dark"] .krn-at-map-reference, html.dark .krn-at-map-reference, body.dark .krn-at-map-reference, body.krn-dark .krn-at-map-reference, [data-appearance="dark"] .krn-at-map-reference { stroke: rgba(255,255,255,.74); }
html[data-theme="dark"] .krn-at-map-label, html.dark .krn-at-map-label, body.dark .krn-at-map-label, body.krn-dark .krn-at-map-label, [data-appearance="dark"] .krn-at-map-label { fill: #fff; stroke: rgba(20,13,32,.92); }
@media (max-width: 640px) {
    .krn-at-map-stage, .krn-at-map-stage svg { min-height: 310px; }
    .krn-at-map-toolbar { align-items: flex-start; }
    .krn-at-map-toolbar small { max-width: 220px; }
    .krn-at-map-label { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .krn-at-territory-map * { transition-duration: .01ms !important; }
}