/* /mapa/ · cadena WH en falso 3D. Tokens y componentes en /tools/theme.css; paleta de las chapas = clases iso. */
.mp { max-width: 1200px; }
.mp-demo { display: flex; gap: .5rem; align-items: center; margin: 0 0 1rem; padding: .6rem .9rem; border: 1px solid var(--c-line); border-left: 3px solid var(--c-warn); border-radius: var(--r-sm); background: var(--c-bg-2); font-size: .92rem; }
.mp-demo .bx-ico { color: var(--c-warn); flex: none; }

.mp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .mp-grid { grid-template-columns: 1fr; } }

/* el mapa: panel oscuro con borde HUD */
.mp-mapa { position: relative; border: 1px solid var(--c-line-2); border-radius: var(--r); overflow: hidden; background: #05060A; }
.mp-mapa::before { content: ""; position: absolute; left: 14px; top: -1px; width: 28px; height: 3px; background: var(--c-red); border-radius: 0 0 2px 2px; z-index: 1; }
#mp-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 640; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#mp-svg:active { cursor: grabbing; }
#mp-svg:focus-visible { outline: 2px solid var(--c-red); outline-offset: -2px; }

/* textos del SVG: misma tipografía que las clases iso (mono en mayúsculas) */
#mp-svg text { font-family: var(--f-mono); text-anchor: middle; pointer-events: none; }
.mp-km { font-size: 13px; fill: #8C96A6; letter-spacing: .12em; }
.mp-wh { font-size: 12px; fill: #9FD9D3; letter-spacing: .08em; paint-order: stroke; stroke: #05060A; stroke-width: 4px; }
.mp-nombre { font-size: 15px; font-weight: 700; fill: #E8ECF2; letter-spacing: .1em; text-transform: uppercase; paint-order: stroke; stroke: #05060A; stroke-width: 4px; }
.mp-efecto { font-size: 12px; fill: #AEB6C2; letter-spacing: .06em; paint-order: stroke; stroke: #05060A; stroke-width: 4px; }
.mp-clase { font-weight: 800; letter-spacing: .02em; }
.mp-np { font-size: 12px; font-weight: 700; fill: #fff; }
.mp-alerta { font-size: 26px; font-weight: 900; fill: #E3262E; paint-order: stroke; stroke: #05060A; stroke-width: 4px; }
.mp-kills { font-size: 12px; font-weight: 700; fill: #F2B13C; paint-order: stroke; stroke: #05060A; stroke-width: 4px; }
.mp-kills.is-ahora { fill: #FF5A5F; font-size: 14px; }
.mp-kills-ahora { color: #FF8F93; }
.mp-chapa { cursor: pointer; }
.mp-chapa:hover .mp-rect { filter: brightness(1.15); }
.mp-chapa.is-amenaza .mp-rect { animation: mp-pulso 1.6s ease-in-out infinite; }
@keyframes mp-pulso { 50% { stroke-opacity: .25; } }
.mp-foco { animation: mp-giro 6s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mp-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mp-chapa.is-amenaza .mp-rect, .mp-foco { animation: none; } }

/* controles y leyenda sobre el mapa */
.mp-ctrl { position: absolute; right: .6rem; top: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.mp-btn { min-width: 44px; min-height: 44px; padding: 0 .7rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  background: rgba(22, 29, 40, .88); border: 1px solid var(--c-line-2); border-radius: var(--r-sm); color: var(--c-text); font: 600 1rem/1 var(--f-mono); cursor: pointer; }
.mp-btn:hover { border-color: var(--c-red); }
.mp-btn:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
.mp-leyenda { position: absolute; left: .6rem; bottom: .5rem; display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin: 0; padding: .4rem .6rem; list-style: none;
  background: rgba(5, 6, 10, .78); border: 1px solid var(--c-line); border-radius: var(--r-sm); font: 600 .66rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.mp-leyenda li { display: flex; align-items: center; gap: .35rem; }
.mp-sw { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.mp-sw--nos { background: #A34DF0; } .mp-sw--amenaza { background: #E3262E; } .mp-sw--neutral { background: #B8BEC8; }
.mp-ln { width: 22px; height: 0; border-top: 3px solid #4EC9C0; display: inline-block; }
.mp-ln--red { border-top-color: #FF7A1A; } .mp-ln--crit { border-top-color: #E3262E; } .mp-ln--eol { border-top-style: dashed; }
@media (max-width: 640px) {
  .mp-leyenda { position: static; border: 0; border-top: 1px solid var(--c-line); border-radius: 0; }
  .mp-ctrl { position: static; justify-content: space-between; padding: .5rem; border-top: 1px solid var(--c-line); }
  .mp-ctrl .mp-btn { flex: 1 1 0; }
  .mp-btn__t { display: none; }
}

/* columna lateral */
.mp-lado { display: grid; gap: 1rem; }
.mp [hidden] { display: none !important; }
/* selección en lote (Mayús + arrastrar): recuadro, marcas y barra de acciones */
.mp-caja { fill: rgba(255, 196, 0, .08); stroke: #FFC400; stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }
.mp-wh--vieja { fill: #F2B13C; }
.mp-hit { stroke: transparent; stroke-width: 16; cursor: pointer; }
.mp-mapa.is-modo-sel svg { cursor: crosshair; }
.mp-lote { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .8rem; padding: .55rem .7rem; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-card); font-size: .85rem; }
.mp-lote__t { margin-right: auto; color: var(--c-muted); }
.mp-lote__t b { color: #FFC400; }
.mp-lote .btn-eve { min-height: 40px; }
.mp-lote [aria-pressed="true"] { border-color: #FFC400; color: #FFC400; }
/* el halo, la sombra y el tallo de cada chapa no tapan los clics sobre las conexiones */
.mp-chapa ellipse, .mp-chapa line, .mp-chapa circle { pointer-events: none; }
/* editor de la cadena (fase 2) */
.mp-form { display: grid; gap: .6rem; }
.mp-f { display: grid; gap: .25rem; font-size: .8rem; color: var(--c-muted); font-weight: 600; min-width: 0; }
.mp-f input, .mp-f select { min-height: 40px; width: 100%; }
.mp-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mp-f3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.mp-check { display: flex; align-items: center; gap: .4rem; font-size: .85rem; min-height: 32px; }
.mp-acc { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.mp-x { border: 1px solid var(--c-line-2); background: transparent; color: var(--c-muted); border-radius: 3px; width: 26px; height: 26px; cursor: pointer; font-size: .8rem; vertical-align: middle; margin-left: .3rem; }
.mp-x:hover { border-color: var(--c-red); color: var(--c-red-txt); }
.mp-histl { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .8rem; color: var(--c-muted); }
.mp-histl b { color: var(--c-text); }
.mp-aqui { color: #3DE0B0; }
.mp-bases { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.mp-base { font-size: 11px; font-weight: 800; fill: #05060A; }
#mp-msg.is-error { border-left-color: var(--c-bad); }
.mp-card { position: relative; padding: 1rem 1.1rem; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r); }
.mp-card::before { content: ""; position: absolute; left: 14px; top: -1px; width: 28px; height: 3px; background: var(--c-red); border-radius: 0 0 2px 2px; }
.mp-card__t { margin: 0 0 .6rem; font: 600 .7rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.mp-ficha__t { margin: .2rem 0 .5rem; font: 700 1.35rem/1.2 var(--f-mono); letter-spacing: .06em; }
.mp-ficha__t small { font: 600 .65rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #C9A6FF; border: 1px solid #A34DF0; border-radius: 3px; padding: .15rem .35rem; vertical-align: middle; }
.mp-amenaza { margin: 0 0 .6rem; padding: .45rem .6rem; border-left: 3px solid var(--c-red); background: var(--c-red-a); color: var(--c-red-txt); font-weight: 600; }
.mp-dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; margin: 0; font-size: .92rem; }
.mp-dl dt { font: 600 .66rem/1.6 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.mp-dl dd { margin: 0; }
.mp-link { background: none; border: 0; padding: .1rem 0; min-height: 32px; color: var(--c-text); font: 700 .92rem/1.2 var(--f-mono); text-decoration: underline; text-decoration-color: var(--c-line-2); cursor: pointer; }
.mp-link:hover { text-decoration-color: var(--c-red); }

.mp-lista { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; max-height: 360px; overflow: auto; }
.mp-item { width: 100%; min-height: 44px; display: grid; grid-template-columns: auto 1fr; gap: 0 .5rem; align-items: baseline; text-align: left; padding: .4rem .6rem;
  background: var(--c-bg-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); color: var(--c-text); cursor: pointer; font: inherit; }
.mp-item b { font-family: var(--f-mono); letter-spacing: .04em; }
.mp-item span { color: var(--c-muted); font-size: .85rem; }
.mp-item i { grid-column: 1 / -1; font-style: normal; font: .72rem/1.4 var(--f-mono); color: var(--c-muted); letter-spacing: .06em; }
.mp-item:hover, .mp-item.is-on { border-color: #FFC400; }
.mp-item.is-amenaza { border-left: 3px solid #E3262E; }
.mp-item:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }

/* acceso a /olimpo/ desde la cabecera del mapa */
.mp-olimpo { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .8rem 0 0; font-size: .88rem; }