:root {
    --map-bg: #0a0e14;
    --map-panel: #161b22;
    --map-soft: #0d1117;
    --map-border: #30363d;
    --map-text: #e6edf3;
    --map-muted: #8b949e;
    --map-accent: #58a6ff;
    --map-origin: #ff9f43;
    --map-dest: #22d3ee;
    --map-ok: #3fb950;
    --map-partial: #d29922;
    --map-noresponse: #f0883e;
    --map-blocked: #f85149;
}
* { box-sizing: border-box; }
body.page-mapa-operativo { margin: 0; padding: 20px; background: var(--bg-main, var(--map-bg)); color: var(--text, var(--map-text)); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.page-mapa-operativo .container { width: min(100%, 1240px); max-width: 1240px; margin: 0 auto; background: var(--bg-panel, var(--map-panel)); border: 1px solid var(--border, var(--map-border)); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 42px rgba(0,0,0,.72); }
.map-page { padding: 24px; }
.map-hero { border: 1px solid rgba(var(--accent-rgb, 88,166,255),.18); background: linear-gradient(135deg, rgba(var(--accent-rgb, 88,166,255),.08), rgba(34,211,238,.03)); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
.map-eyebrow { margin: 0 0 8px; color: var(--accent, var(--map-accent)); text-transform: uppercase; letter-spacing: 1.7px; font-size: .75rem; font-weight: 900; }
.map-hero h2 { margin: 0; font-size: clamp(1.6rem, 2.8vw, 2.35rem); color: var(--text-strong, var(--map-text)); }
.map-hero p { max-width: 930px; margin: 9px 0 0; color: var(--muted, var(--map-muted)); line-height: 1.55; }
.map-disclaimer { margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; max-width: 920px; padding: 9px 11px; border: 1px solid rgba(var(--accent-rgb,88,166,255),.16); border-radius: 10px; background: rgba(var(--accent-rgb,88,166,255),.045); color: var(--muted, var(--map-muted)); font-size: .76rem; line-height: 1.45; }
.map-disclaimer strong { color: var(--text, var(--map-text)); }
.map-disclaimer-icon { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--accent-rgb,88,166,255),.14); color: var(--accent,var(--map-accent)); font-size: .92rem; font-weight: 900; }
.ops-summary-grid { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.ops-kpi { min-height: 92px; padding: 14px; border: 1px solid rgba(var(--border-rgb,48,54,61),.9); border-radius: 13px; background: rgba(var(--soft-rgb,13,17,23),.72); }
.ops-kpi span { display: block; color: var(--muted, var(--map-muted)); text-transform: uppercase; font-size: .63rem; letter-spacing: 1px; font-weight: 900; }
.ops-kpi strong { display: block; margin-top: 8px; font-size: 1.45rem; color: var(--text-strong, var(--map-text)); }
.ops-kpi.completed strong { color: var(--map-ok); }
.ops-kpi.partial strong { color: var(--map-partial); }
.ops-kpi.noresponse strong { color: var(--map-noresponse); }
.ops-kpi.blocked strong { color: var(--map-blocked); }
.ops-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: end; padding: 14px; margin-bottom: 16px; border: 1px solid rgba(var(--border-rgb,48,54,61),.9); border-radius: 14px; background: rgba(var(--soft-rgb,13,17,23),.68); }
.ops-field { display: grid; gap: 6px; min-width: 0; }
.ops-field span { color: var(--muted, var(--map-muted)); font-size: .67rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.ops-field select, .ops-button { width: 100%; min-height: 40px; border: 1px solid var(--border, var(--map-border)); border-radius: 9px; background: var(--bg-soft, var(--map-soft)); color: var(--text, var(--map-text)); padding: 0 11px; font: inherit; font-weight: 700; }
.ops-button { cursor: pointer; min-width: 0; }
.ops-toolbar-actions { grid-column: 1 / -1; display: flex; justify-content: flex-start; gap: 10px; }
.ops-toolbar-actions .ops-button { width: auto; min-width: 150px; }
.ops-button:hover { border-color: var(--accent, var(--map-accent)); }
.ops-button.live { color: var(--map-ok); }
.ops-button.paused { color: var(--map-partial); }

.ops-button.map-layer-toggle { color: var(--muted, var(--map-muted)); transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; }
.ops-button.map-layer-toggle.active { color: var(--text-strong, var(--map-text)); border-color: rgba(var(--accent-rgb,88,166,255),.58); background: rgba(var(--accent-rgb,88,166,255),.12); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb,88,166,255),.08), 0 0 16px rgba(var(--accent-rgb,88,166,255),.10); }
#showOriginsToggle.active { border-color: rgba(255,159,67,.72); background: rgba(255,159,67,.11); box-shadow: inset 0 0 0 1px rgba(255,159,67,.08), 0 0 16px rgba(255,159,67,.10); }
#showDestinationsToggle.active { border-color: rgba(34,211,238,.72); background: rgba(34,211,238,.10); box-shadow: inset 0 0 0 1px rgba(34,211,238,.08), 0 0 16px rgba(34,211,238,.10); }
.map-shell { position: relative; height: clamp(430px, 50vh, 560px); min-height: 430px; margin-bottom: 16px; overflow: hidden; border: 1px solid rgba(var(--accent-rgb,88,166,255),.26); border-radius: 16px; background: #101923; box-shadow: inset 0 0 42px rgba(0,0,0,.82), 0 16px 34px rgba(0,0,0,.34); cursor: grab; user-select: none; touch-action: none; }
.map-shell.dragging { cursor: grabbing; }
#tileLayer, #worldMap { position: absolute; inset: 0; width: 100%; height: 100%; }
#tileLayer { z-index: 1; background: radial-gradient(circle at center, rgba(var(--accent-rgb,88,166,255),.10), transparent 62%), #101923; filter: saturate(.92) contrast(1.02) brightness(.98); }
#tileLayer img { position: absolute; display: block; width: 256px; height: 256px; pointer-events: none; user-select: none; -webkit-user-drag: none; }
#tileLayer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--accent-rgb,88,166,255),.035) 1px, transparent 1px), linear-gradient(0deg, rgba(var(--accent-rgb,88,166,255),.035) 1px, transparent 1px), radial-gradient(circle at 50% 45%, transparent 64%, rgba(4,8,13,.09) 100%); background-size: 96px 96px,96px 96px,100% 100%; pointer-events: none; }
#worldMap { z-index: 2; pointer-events: none; }
.map-tip, .map-attribution, .map-live-hud { position: absolute; z-index: 7; background: rgba(8,13,20,.84); border: 1px solid rgba(168,190,214,.36); backdrop-filter: blur(8px); color: #e6edf3; }
.map-tip { left: 13px; top: 12px; border-radius: 999px; padding: 6px 10px; font-size: .67rem; }
.map-attribution { right: 12px; top: 10px; border-radius: 999px; padding: 5px 9px; font-size: .65rem; }
.map-live-hud { left: 14px; bottom: 14px; border-radius: 12px; padding: 11px 13px; display: grid; gap: 5px; min-width: 238px; }
.map-live-hud strong { color: #f0f6fc; font-size: .77rem; }
.map-live-hud span { color: #a9b8c8; font-size: .7rem; }
.map-live-hud b { color: #e6edf3; }
.map-filter-reset { position: absolute; left: 13px; top: 49px; z-index: 8; min-height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(168,190,214,.42); background: rgba(8,13,20,.86); color: #e6edf3; cursor: pointer; font: inherit; font-size: .7rem; font-weight: 900; backdrop-filter: blur(8px); }
.map-filter-reset:hover { border-color: var(--map-accent); color: #fff; }
.map-controls { position: absolute; right: 13px; top: 44px; z-index: 8; display: grid; gap: 6px; }
.map-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(168,190,214,.42); background: rgba(8,13,20,.86); color: #e6edf3; cursor: pointer; font-weight: 900; }
.map-legend { position: absolute; right: 14px; bottom: 14px; z-index: 7; width: 224px; padding: 11px 12px; border: 1px solid rgba(168,190,214,.36); border-radius: 12px; background: rgba(8,13,20,.86); backdrop-filter: blur(8px); color: #e6edf3; }
.map-legend-title { color: #9fb0c2; text-transform: uppercase; letter-spacing: 1px; font-size: .64rem; font-weight: 900; margin-bottom: 7px; }
.map-legend-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: .7rem; color: #dbe7f3; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.legend-dot.origin { background: var(--map-origin); box-shadow: 0 0 10px var(--map-origin); }
.legend-dot.dest { background: var(--map-dest); box-shadow: 0 0 10px var(--map-dest); }
.legend-dot.dns { background: var(--map-ok); box-shadow: 0 0 10px var(--map-ok); }
.legend-line { width: 22px; height: 3px; border-radius: 99px; background: linear-gradient(90deg,var(--map-origin),var(--map-dest)); }
.detail-stack, .quality-panel, .log-panel { margin-bottom: 16px; }
.ops-panel { border: 1px solid rgba(var(--border-rgb,48,54,61),.92); border-radius: 15px; overflow: hidden; background: rgba(var(--soft-rgb,13,17,23),.72); }
.ops-panel-full { width: 100%; }
.ops-panel-head { padding: 15px 17px; border-bottom: 1px solid rgba(var(--border-rgb,48,54,61),.82); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.ops-panel-head h2 { margin: 0; font-size: 1rem; }
.ops-panel-head p { margin: 4px 0 0; color: var(--muted, var(--map-muted)); font-size: .76rem; }
.ops-panel-body { padding: 17px; }
.detail-empty { color: var(--muted, var(--map-muted)); line-height: 1.6; }
.detail-empty-state { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: start; padding: 8px 0; color: var(--muted,var(--map-muted)); }
.detail-empty-state > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--accent-rgb,88,166,255),.10); color: var(--accent,var(--map-accent)); font-weight: 900; }
.detail-empty-state p { margin: 1px 0 2px; color: var(--text,var(--map-text)); font-weight: 800; }
.detail-empty-state small { line-height: 1.5; }
.detail-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.detail-title-row h3 { margin: 0; font-size: 1.2rem; }
.detail-sub { color: var(--muted, var(--map-muted)); font-size: .76rem; margin-top: 4px; line-height: 1.55; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 5px 9px; font-size: .68rem; font-weight: 900; white-space: nowrap; border: 1px solid currentColor; }
.status-badge.completed { color: var(--map-ok); }
.status-badge.partial { color: var(--map-partial); }
.status-badge.no_response { color: var(--map-noresponse); }
.status-badge.blocked { color: var(--map-blocked); }
.detail-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-bottom: 13px; }
.detail-metric { padding: 11px; border: 1px solid rgba(var(--border-rgb,48,54,61),.8); border-radius: 10px; background: rgba(0,0,0,.13); }
.detail-metric span { display: block; color: var(--muted, var(--map-muted)); font-size: .62rem; text-transform: uppercase; letter-spacing: .8px; font-weight: 900; }
.detail-metric strong { display: block; margin-top: 6px; font-size: 1rem; }
.hop-chart { display: grid; gap: 8px; margin-top: 13px; }
.hop-row { display: grid; grid-template-columns: 34px minmax(120px,1fr) 74px 58px minmax(160px,1fr); gap: 8px; align-items: center; font-size: .72rem; padding: 8px 10px; border: 1px solid rgba(var(--border-rgb,48,54,61),.58); border-radius: 10px; background: rgba(255,255,255,.015); }
.hop-bar { height: 9px; background: rgba(var(--accent-rgb,88,166,255),.10); border-radius: 99px; overflow: hidden; }
.hop-bar span { display: block; height: 100%; background: linear-gradient(90deg,var(--map-accent),var(--map-dest)); border-radius: inherit; }
.hop-row.loss .hop-bar span { background: linear-gradient(90deg,var(--map-partial),var(--map-blocked)); }
.hop-loc { color: var(--muted,var(--map-muted)); font-size: .68rem; }
.dns-node-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.dns-node { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid rgba(var(--border-rgb,48,54,61),.75); border-radius: 9px; font-size: .72rem; }
.dns-node.ok strong { color: var(--map-ok); }
.dns-node.fail strong { color: var(--map-blocked); }
.quality-panel-body { display: grid; gap: 16px; }
.quality-filter { min-width: 220px; }
.quality-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.quality-stat { padding: 13px; border: 1px solid rgba(var(--border-rgb,48,54,61),.78); border-radius: 12px; background: rgba(255,255,255,.02); }
.quality-stat span { display: block; color: var(--muted,var(--map-muted)); font-size: .64rem; font-weight: 900; text-transform: uppercase; letter-spacing: .9px; }
.quality-stat strong { display: block; margin-top: 8px; font-size: 1.15rem; }
.quality-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.compare-card { border: 1px solid rgba(var(--border-rgb,48,54,61),.78); border-radius: 14px; background: rgba(255,255,255,.02); overflow: hidden; }
.compare-card-head { padding: 14px 15px; border-bottom: 1px solid rgba(var(--border-rgb,48,54,61),.68); }
.compare-card-head h3 { margin: 0; font-size: .96rem; }
.compare-card-head p { margin: 4px 0 0; color: var(--muted,var(--map-muted)); font-size: .72rem; }
.compare-card-body { padding: 14px 15px; display: grid; gap: 12px; }
.compare-row { display: grid; grid-template-columns: minmax(110px,.9fr) minmax(0,1fr) 52px; gap: 10px; align-items: center; }
.compare-label { font-size: .75rem; font-weight: 700; }
.compare-bar { height: 12px; border-radius: 999px; overflow: hidden; background: rgba(var(--accent-rgb,88,166,255),.09); }
.compare-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(88,166,255,.88), rgba(34,211,238,.96)); }
.compare-bar.alt span { background: linear-gradient(90deg, rgba(63,185,80,.88), rgba(34,211,238,.94)); }
.compare-bar.warn span { background: linear-gradient(90deg, rgba(210,153,34,.88), rgba(248,81,73,.92)); }
.compare-score { text-align: right; font-weight: 900; font-size: .76rem; }
.quality-ranking { display: grid; gap: 9px; }
.quality-section-title { margin: 0 0 9px; color: var(--muted,var(--map-muted)); font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .9px; }
.quality-status { margin: 10px 0 0; color: var(--muted,var(--map-muted)); font-size: .7rem; line-height: 1.5; }
.quality-method { margin-top: 6px; border-top: 1px solid rgba(var(--border-rgb,48,54,61),.68); padding-top: 10px; }
.quality-method summary { cursor: pointer; color: var(--accent,var(--map-accent)); font-size: .72rem; font-weight: 800; }
.quality-method p { margin: 8px 0 0; color: var(--muted,var(--map-muted)); font-size: .7rem; line-height: 1.55; }
.rank-row { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid rgba(var(--border-rgb,48,54,61),.78); border-radius: 11px; background: rgba(0,0,0,.13); }
.rank-pos { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--accent-rgb,88,166,255),.13); color: var(--accent,var(--map-accent)); font-weight: 900; }
.rank-main strong { display: block; }
.rank-main span { color: var(--muted,var(--map-muted)); font-size: .68rem; }
.rank-score { font-size: 1.08rem; font-weight: 900; }
.country-focus-grid { display: grid; grid-template-columns: minmax(260px,.9fr) minmax(0,1fr); gap: 14px; }
.country-quality-card { padding: 14px; border-radius: 12px; background: rgba(var(--accent-rgb,88,166,255),.07); border: 1px solid rgba(var(--accent-rgb,88,166,255),.18); }
.country-quality-card h3 { margin: 0 0 10px; font-size: 1rem; }
.country-quality-card p { margin: 0; }
.log-panel { border: 1px solid rgba(var(--border-rgb,48,54,61),.92); border-radius: 15px; overflow: hidden; background: rgba(var(--soft-rgb,13,17,23),.74); }
.log-head { padding: 15px 17px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid rgba(var(--border-rgb,48,54,61),.85); }
.log-head h2 { margin: 0; font-size: 1rem; }
.log-head p { margin: 4px 0 0; color: var(--muted,var(--map-muted)); font-size: .73rem; }
.log-count { flex: 0 0 auto; border: 1px solid rgba(var(--accent-rgb,88,166,255),.25); border-radius: 999px; padding: 6px 10px; background: rgba(var(--accent-rgb,88,166,255),.07); color: var(--accent,var(--map-accent)); font-size: .7rem; font-weight: 900; }
.table-wrap { max-height: 420px; overflow: auto; scrollbar-gutter: stable; }
.ops-table { width: 100%; border-collapse: collapse; min-width: 980px; }
.ops-table th, .ops-table td { padding: 11px 12px; border-bottom: 1px solid rgba(var(--border-rgb,48,54,61),.65); text-align: left; vertical-align: top; font-size: .75rem; }
.ops-table th { position: sticky; top: 0; z-index: 2; color: var(--muted,var(--map-muted)); background: var(--bg-soft,var(--map-soft)); font-size: .63rem; text-transform: uppercase; letter-spacing: .9px; box-shadow: 0 1px 0 rgba(var(--border-rgb,48,54,61),.75); }
.ops-table tbody tr { cursor: pointer; }
.ops-table tbody tr:hover, .ops-table tbody tr.selected { background: rgba(var(--accent-rgb,88,166,255),.08); }
.ops-table .mono { font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.ops-table .mini { color: var(--muted,var(--map-muted)); font-size: .66rem; margin-top: 3px; }
.empty { text-align: center!important; padding: 24px!important; color: var(--muted,var(--map-muted)); }
@media (prefers-color-scheme: dark) { #tileLayer { filter: saturate(.78) contrast(1.05) brightness(.62); } }
html[data-theme="dark"] #tileLayer { filter: saturate(.78) contrast(1.05) brightness(.62); }
@media (max-width: 1160px) {
    .ops-summary-grid { grid-template-columns: repeat(4,1fr); }
    .ops-toolbar { grid-template-columns: repeat(auto-fit,minmax(185px,1fr)); }
    .quality-chart-grid, .country-focus-grid { grid-template-columns: 1fr; }
}
@media (max-width: 840px) {
    .detail-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .quality-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ops-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ops-toolbar-actions { justify-content: flex-start; }
    .ops-toolbar-actions .ops-button { flex: 0 1 190px; }
    .compare-row { grid-template-columns: 1fr; }
    .compare-score { text-align: left; }
}
@media (max-width: 720px) {
    body.page-mapa-operativo { padding: 0; }
    .page-mapa-operativo .container { border-radius: 0; border-left: 0; border-right: 0; }
    .map-page { padding: 14px; }
    .map-hero { padding: 16px; }
    .ops-summary-grid { grid-template-columns: repeat(2,1fr); }
    .ops-toolbar { grid-template-columns: 1fr; }
    .ops-toolbar-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; }
    .ops-toolbar-actions .ops-button { width: 100%; min-width: 0; }
    .map-shell { min-height: 420px; height: 52vh; }
    .map-tip { max-width: calc(100% - 78px); border-radius: 10px; }
    .map-filter-reset { top: 58px; }
    .map-legend { width: calc(100% - 28px); right: 14px; bottom: 82px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
    .map-legend-title { grid-column: 1 / -1; }
    .map-live-hud { right: 14px; min-width: 0; }
    .ops-panel-head { align-items: flex-start; flex-direction: column; }
    .quality-filter { width: 100%; min-width: 0; }
    .detail-metrics, .quality-summary-grid { grid-template-columns: 1fr; }
    .dns-node-grid { grid-template-columns: 1fr; }
    .hop-row { grid-template-columns: 30px minmax(80px,1fr) 60px 48px; }
    .hop-loc { grid-column: 1 / -1; }
    .log-head { align-items: flex-start; }
    .log-count { margin-top: 2px; }
    .table-wrap { max-height: 390px; }
}

.detail-stack[hidden] { display: none !important; }

/* V2.14: nodo que ejecuta realmente pruebas iniciadas por el usuario. */
.legend-dot.executor {
    background: #58a6ff;
    box-shadow: 0 0 10px rgba(88,166,255,.9);
}
