/* ═══════════════════════════════════════════════════════════════════════════
   v1.132 · el mapa conceptual o mental (js/regions/mapa-region.js)
   El SVG trae sus colores como atributos (así se ve igual fuera del
   programa); aquí se repintan con los tokens del tema para que el claro y el
   oscuro lean bien, y al imprimir se fuerza el papel blanco.
   ═══════════════════════════════════════════════════════════════════════════ */
.esci-region.esci-mapa { min-width: 200px; }
.esci-mapa > .esci-body { padding: 10px; }
.esci-mapa-lienzo { display: flex; justify-content: center; }
.esci-mapa-svg { display: block; max-width: 100%; height: auto; overflow: visible; user-select: none; }
.esci-mapa-nota { margin-top: 4px; text-align: right; font: 11.5px/1.3 var(--sans); color: var(--ink-3); }
.esci-mapa-nota.is-chica { color: var(--warn-ink); }

/* el tema: fondo y letra del papel; las ramas, de su paleta */
.esci-mapa-svg .mp-nodo.is-raiz rect { fill: var(--ink); }
.esci-mapa-svg .mp-nodo.is-raiz text { fill: var(--paper); }
.esci-mapa-svg .mp-nodo.is-caja rect { fill: var(--surface); }
.esci-mapa-svg .mp-nodo.is-caja text, .esci-mapa-svg .mp-nodo.is-tinte text { fill: var(--ink); }
.esci-mapa-svg .mp-enlace rect { fill: var(--paper); }
.esci-mapa-svg .mp-etq { fill: var(--ink-2); }
.esci-mapa-svg .mp-arista.is-neutra { stroke: var(--ink-3); }
/* en oscuro, un azul cobalto sobre el grafito se pierde (2,3:1): las líneas
   y los bordes se aclaran con blanco (t501 mide que pasen de 3:1) */
:root[data-theme="dark"] .esci-mapa-svg .mp-arista:not(.is-neutra) { stroke: color-mix(in srgb, var(--r) 55%, #ffffff); }
:root[data-theme="dark"] .esci-mapa-svg .mp-flecha { fill: color-mix(in srgb, var(--r) 55%, #ffffff); }
:root[data-theme="dark"] .esci-mapa-svg .mp-nodo.is-caja rect,
:root[data-theme="dark"] .esci-mapa-svg .mp-nodo.is-tinte rect { stroke: color-mix(in srgb, var(--r) 55%, #ffffff); }
:root[data-theme="dark"] .esci-mapa-svg .mp-nodo.is-tinte rect { fill-opacity: 0.22; }

/* el esquema con errores: se dice, no se adivina */
.esci-mapa-error { border: 1px solid var(--bad); background: var(--bad-soft); border-radius: var(--r-sm); padding: 10px 12px; font: 13px/1.45 var(--sans); color: var(--ink); }
.esci-mapa-error-t { font-weight: 600; color: var(--bad); margin-bottom: 4px; }
.esci-mapa-error ul { margin: 0; padding-left: 18px; }
.esci-mapa-pista { margin-top: 6px; color: var(--ink-3); font-size: 12px; }

@media print {
  .esci-mapa-nota { display: none !important; }
  .esci-mapa-svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .esci-mapa-svg .mp-nodo.is-raiz rect { fill: #16202B !important; }
  .esci-mapa-svg .mp-nodo.is-raiz text { fill: #FFFFFF !important; }
  .esci-mapa-svg .mp-nodo.is-caja rect { fill: #FFFFFF !important; stroke: var(--r) !important; }
  .esci-mapa-svg .mp-nodo.is-tinte rect { stroke: var(--r) !important; fill-opacity: 0.13 !important; }
  .esci-mapa-svg .mp-nodo.is-caja text, .esci-mapa-svg .mp-nodo.is-tinte text { fill: #16202B !important; }
  .esci-mapa-svg .mp-enlace rect { fill: #FFFFFF !important; }
  .esci-mapa-svg .mp-etq { fill: #3F4E5F !important; }
  .esci-mapa-svg .mp-arista { stroke: var(--r) !important; }
  .esci-mapa-svg .mp-arista.is-neutra { stroke: #5A6A7E !important; }
  .esci-mapa-svg .mp-flecha { fill: var(--r) !important; }
}

/* ── la ventana ─────────────────────────────────────────────────────────── */
.esci-modal.esci-mpe-modal { width: min(1180px, 96vw); max-width: 96vw; }
.esci-mpe { display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(320px, 1.15fr); gap: 16px; height: min(74vh, 720px); }
.esci-mpe-izq, .esci-mpe-der { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.esci-mpe-formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.esci-mpe-forma { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font: 12px/1.2 var(--sans); cursor: pointer; }
.esci-mpe-forma i { font-size: 17px; color: var(--ink-3); }
.esci-mpe-forma:hover { border-color: var(--line-strong); }
.esci-mpe-forma.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); box-shadow: 0 0 0 1px var(--accent) inset; }
.esci-mpe-forma.is-on i { color: var(--accent); }
.esci-mpe-forma:focus-visible, .esci-mpe-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.esci-mpe-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esci-mpe-tit { font-weight: 600; font-size: 13px; color: var(--ink); }
.esci-mpe-herr { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.esci-mbtn.esci-mpe-b { height: 30px; padding: 0 9px; font-size: 12px; }
/* tres clases: `.esci-modal-body textarea` no debe ganarle (CLAUDE.md §9) */
.esci-modal-body .esci-mpe .esci-mpe-txt { flex: 1 1 auto; min-height: 180px; width: 100%; resize: none; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: 13.5px/1.55 var(--mono); tab-size: 2; white-space: pre; overflow: auto; }
.esci-modal-body .esci-mpe .esci-mpe-txt:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.esci-mpe-estado { font: 12.5px/1.4 var(--sans); color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; min-height: 18px; }
.esci-mpe-ok { color: var(--ok); }
.esci-mpe-aviso { color: var(--warn-ink); }
.esci-mpe-err { text-align: left; border: 1px solid var(--bad); background: var(--bad-soft); color: var(--ink); border-radius: var(--r-xs); padding: 4px 8px; font: 12.5px/1.35 var(--sans); cursor: pointer; }
.esci-mpe-err:hover { background: var(--surface); }
.esci-mpe-ayuda { font: 12.5px/1.45 var(--sans); color: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 4px 10px; }
.esci-mpe-ayuda summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 2px 0; }
.esci-mpe-ayuda dl { margin: 6px 0; display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; }
.esci-mpe-ayuda dt { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.esci-mpe-ayuda dd { margin: 0; }
.esci-mpe-muestra { margin: 4px 0 6px; padding: 6px 8px; background: var(--sunk); border-radius: var(--r-xs); font: 12px/1.45 var(--mono); color: var(--ink); white-space: pre; }
.esci-mpe-campo { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-3); }
.esci-mpe-sel { height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); padding: 0 8px; font: 13px var(--sans); }
.esci-mpe-vista { flex: 1 1 auto; min-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); padding: 12px; }
.esci-mpe-vista .mp-nodo { cursor: pointer; }
.esci-mpe-opc { display: flex; flex-direction: column; gap: 8px; }
.esci-mpe-sub { font-size: 12px; color: var(--ink-3); }
.esci-mpe-pal { display: flex; flex-wrap: wrap; gap: 6px; }
.esci-mpe-sw { width: 44px; height: 26px; border-radius: var(--r-sm); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.esci-mpe-sw.is-on { box-shadow: 0 0 0 2px var(--accent); }
.esci-mpe-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.esci-mpe-chk { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.esci-mpe-chk[hidden] { display: none; }
@media (max-width: 860px) { .esci-mpe { grid-template-columns: 1fr; height: auto; } .esci-modal-body .esci-mpe .esci-mpe-txt { min-height: 200px; } .esci-mpe-vista { min-height: 260px; } }