/* =========================================================================
   ECO · Mapas mentales
   =========================================================================
   Tres pantallas: la lista (dentro del portal), las páginas sueltas (info,
   compartir, esquema) y el editor a pantalla completa, que tiene maqueta
   propia. Los colores salen de la paleta del sitio (--eco-*); lo propio de
   esta herramienta lleva el prefijo --mm-.
   ========================================================================= */

/* ---------- Compartido -------------------------------------------------- */

.mm-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}
.mm-acciones-izq { justify-content: flex-start; }
.mm-btn-compacto { flex: none; padding: 0.55rem 1.1rem; }
.mm-insignia {
  display: inline-block;
  margin: 0 0.3rem 0.3rem 0;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--eco-border);
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--eco-text-soft);
  background: var(--eco-surface);
}
.mm-insignia-vinculo { border-color: var(--eco-border-strong); }
.mm-peligro { color: var(--eco-shani); border-color: color-mix(in srgb, var(--eco-shani) 45%, transparent); }
.mm-peligro:hover { color: var(--eco-shani); }

/* ---------- La lista ---------------------------------------------------- */

.mm-cabecera {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
@media (max-width: 575.98px) {
  .mm-cabecera { flex-direction: column; }
  .mm-cabecera .mm-btn-compacto { align-self: flex-end; }
}

.mm-nuevo { padding: 1rem 1.25rem; overflow: visible; }
.mm-nuevo > summary { cursor: pointer; list-style: none; font-weight: 600; }
.mm-nuevo > summary::-webkit-details-marker { display: none; }
.mm-nuevo > summary::before { content: '▸'; display: inline-block; width: 1.1em; transition: transform 0.2s var(--eco-ease); }
.mm-nuevo[open] > summary::before { transform: rotate(90deg); }
.mm-nuevo-form { margin-top: 1rem; }
.mm-nuevo fieldset { border: 0; padding: 0; margin: 0; }

.mm-plantillas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.6rem;
}
.mm-plantilla { position: relative; cursor: pointer; margin: 0; }
.mm-plantilla input { position: absolute; opacity: 0; pointer-events: none; }
.mm-plantilla-cara {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  height: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-sm);
  background: var(--eco-surface);
  transition: border-color 0.2s var(--eco-ease), box-shadow 0.2s var(--eco-ease);
}
.mm-plantilla:hover .mm-plantilla-cara { border-color: var(--eco-border-strong); }
.mm-plantilla input:checked + .mm-plantilla-cara {
  border-color: var(--eco-accent);
  box-shadow: 0 0 0 2px var(--eco-ring);
}
.mm-plantilla input:focus-visible + .mm-plantilla-cara { outline: 3px solid var(--eco-accent); outline-offset: 2px; }
.mm-plantilla-dibujo svg { width: 64px; height: 38px; fill: none; stroke: var(--eco-accent); stroke-width: 2; }
.mm-plantilla-dibujo rect { fill: color-mix(in srgb, var(--eco-accent) 18%, transparent); }
.mm-plantilla-nombre { font-weight: 600; font-size: 0.9rem; }
.mm-plantilla-desc { font-size: 0.78rem; color: var(--eco-text-soft); line-height: 1.35; }

.mm-importar > summary { cursor: pointer; color: var(--eco-text-soft); }
.mm-importar textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }

.mm-tarjetas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.9rem;
}
/* El menú «Más» se despliega por fuera de la tarjeta: sin `overflow: hidden`. */
.mm-tarjeta { padding: 1.1rem 1.15rem; overflow: visible; display: flex; flex-direction: column; }
.mm-tarjeta-titulo { font-size: 1.02rem; font-weight: 600; margin: 0 0 0.35rem; line-height: 1.3; }
.mm-tarjeta-titulo a { color: var(--eco-text); text-decoration: none; }
.mm-tarjeta-titulo a:hover { color: var(--eco-accent); }
.mm-tarjeta-insignias { min-height: 0.5rem; }
.mm-tarjeta-acciones {
  margin-top: auto;
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  align-items: center;
}

.mm-menu { position: relative; }
.mm-menu > summary { list-style: none; }
.mm-menu > summary::-webkit-details-marker { display: none; }
.mm-menu-hoja {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 230px;
  padding: 0.35rem;
  border: 1px solid var(--eco-border-strong);
  border-radius: var(--eco-radius-sm);
  background: var(--eco-surface-solid);
  box-shadow: var(--eco-shadow);
  display: flex;
  flex-direction: column;
}
.mm-menu-hoja a,
.mm-menu-hoja button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--eco-text);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
}
.mm-menu-hoja a:hover,
.mm-menu-hoja button:hover,
.mm-menu-hoja a:focus-visible,
.mm-menu-hoja button:focus-visible { background: var(--eco-glow); color: var(--eco-text); }
.mm-menu-hoja form { margin: 0; }

/* ---------- La página informativa (no aprobados) ------------------------ */

.mm-info-cabeza {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (max-width: 767.98px) { .mm-info-cabeza { grid-template-columns: 1fr; } }
.mm-info-dibujo svg { width: 100%; height: auto; max-height: 220px; }
.mm-info-ramas path { fill: none; stroke: var(--eco-accent); stroke-width: 2.5; stroke-linecap: round; opacity: 0.75; }
.mm-info-raiz { fill: var(--eco-accent); }
.mm-info-hoja { fill: var(--eco-surface-solid); stroke: var(--eco-border-strong); stroke-width: 1.5; }
.mm-info-lista { padding-left: 1.2rem; margin: 1.25rem 0 1.5rem; }
.mm-info-lista li { margin-bottom: 0.5rem; }
.mm-info-falta { padding: 1.25rem 1.4rem; }

/* ---------- Compartir --------------------------------------------------- */

.mm-personas { list-style: none; padding: 0; margin: 0; }
.mm-persona {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--eco-border);
}
.mm-persona:last-child { border-bottom: 0; }
.mm-persona-nombre { flex: 1 1 200px; font-weight: 500; }
.mm-persona form { margin: 0; }
.mm-persona-permiso { display: flex; gap: 0.4rem; align-items: center; }
.mm-persona-permiso select { width: auto; }

/* ---------- El esquema (página de lectura) ------------------------------ */

.mm-esquema, .mm-esquema ul { list-style: none; margin: 0; }
.mm-esquema { padding: 0; }
.mm-esquema ul { padding-left: 1.4rem; border-left: 2px solid var(--eco-border); margin-left: 0.45rem; }
.mm-esquema li { padding: 0.25rem 0 0.25rem 0.4rem; }
.mm-esquema > li > .mm-esquema-texto { font-size: 1.25rem; font-weight: 700; }
.mm-esquema-texto a { color: var(--eco-accent); text-decoration: none; }
.mm-esquema-texto a:hover { text-decoration: none; filter: brightness(1.15); }
.mm-esquema-nota {
  margin: 0.2rem 0 0.2rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.86rem;
  color: var(--eco-text-soft);
  border-left: 3px solid var(--eco-zahav);
  white-space: pre-wrap;
}
.mm-esquema-etiquetas { margin-left: 0.4rem; }
.mm-marca-impresa { display: none; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; padding-bottom: 0.6rem; border-bottom: 1px solid #d9d2c3; }
.mm-marca-impresa strong, .mm-marca-impresa span { display: block; line-height: 1.2; }
.mm-marca-impresa span { font-size: 0.85rem; color: #5b6675; }
@media print {
  .mm-marca-impresa { display: flex; }
  .kehila-barra, .kehila-lateral, .kehila-tabs, .mm-no-imprimir, .eco-reproductor { display: none !important; }
  .kehila-principal { margin: 0 !important; padding: 0 !important; }
}

/* =========================================================================
   El editor
   ========================================================================= */

.mm-editor {
  --mm-barra: 56px;
  --mm-paleta: 76px;
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--eco-bg);
  color: var(--eco-text);
  font-family: var(--eco-font-ui);
}
/* El editor no carga Bootstrap: sin esto los campos al 100 % se salen del panel. */
.mm-editor *, .mm-editor *::before, .mm-editor *::after { box-sizing: border-box; }
.mm-editor .visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.mm-saltar {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  background: var(--eco-accent);
  color: var(--eco-accent-contrast);
  text-decoration: none;
}
.mm-saltar:focus { top: 0.5rem; }
.mm-editor :focus-visible { outline: 3px solid var(--eco-accent); outline-offset: 2px; }
.mm-editor kbd {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--eco-border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--eco-surface-solid);
  color: var(--eco-text);
  font-family: inherit;
  font-size: 0.78em;
  white-space: nowrap;
}

/* ---------- Barra superior ---------- */
.mm-barra {
  flex: none;
  height: var(--mm-barra);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--eco-border);
  background: var(--eco-surface-solid);
  position: relative;
  z-index: 20;
}
.mm-barra-izq, .mm-barra-der { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.mm-barra-izq { flex: 1 1 auto; }
.mm-barra-der { flex: none; }
.mm-grupo { display: flex; align-items: center; gap: 0.25rem; }
.mm-grupo + .mm-grupo { padding-left: 0.5rem; border-left: 1px solid var(--eco-border); }

.mm-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 36px;
  height: 36px;
  padding: 0 0.55rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--eco-text);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s var(--eco-ease), border-color 0.15s var(--eco-ease);
}
.mm-boton:hover { background: var(--eco-glow); color: var(--eco-text); }
.mm-boton:disabled { opacity: 0.45; cursor: default; }
.mm-boton svg, .mm-boton .eco-icono { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm-barra-izq > .mm-boton .eco-icono { transform: rotate(180deg); }
.mm-contador {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--eco-accent); color: var(--eco-accent-contrast);
  font-size: 0.68rem; line-height: 18px; font-weight: 700;
}

.mm-titulo-caja { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mm-titulo {
  width: 100%;
  max-width: 36rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--eco-text);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-overflow: ellipsis;
}
.mm-titulo:hover:not([readonly]) { border-color: var(--eco-border); }
.mm-titulo:focus { border-color: var(--eco-accent); outline: none; background: var(--eco-surface); }
.mm-estado { padding-left: 0.45rem; font-size: 0.72rem; color: var(--eco-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-estado[data-estado="error"] { color: var(--eco-shani); font-weight: 600; }
.mm-estado[data-estado="cambios"]::before,
.mm-estado[data-estado="guardando"]::before { content: '● '; color: var(--eco-zahav); }
.mm-estado[data-estado="ok"]::before { content: '✓ '; color: #2e7d52; }

.mm-segmento { padding: 2px; border: 1px solid var(--eco-border); border-radius: 10px; }
.mm-grupo.mm-segmento + .mm-grupo { border-left: 0; }
.mm-seg {
  height: 30px;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--eco-text-soft);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.mm-seg[aria-pressed="true"] { background: var(--eco-accent); color: var(--eco-accent-contrast); font-weight: 600; }

.mm-menu-barra { position: relative; }
.mm-menu-barra > summary { list-style: none; }
.mm-menu-barra > summary::-webkit-details-marker { display: none; }
.mm-menu-barra .mm-menu-hoja { top: calc(100% + 8px); }

@media (max-width: 899.98px) {
  .mm-boton-etiqueta { display: none; }
}
/* En el móvil la barra va en dos filas: el título arriba (que se lea
   entero) y las herramientas debajo. */
@media (max-width: 599.98px) {
  .mm-barra { height: auto; flex-wrap: wrap; row-gap: 0.2rem; gap: 0.25rem; padding: 0.35rem 0.4rem; }
  .mm-barra-izq { flex: 1 1 100%; }
  .mm-barra-der { flex: 1 1 100%; justify-content: space-between; }
  .mm-grupo + .mm-grupo { padding-left: 0.2rem; }
  #mm-ayuda-abrir { display: none; }
  .mm-seg { padding: 0 0.45rem; }
}

.mm-franja {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--eco-border);
  background: color-mix(in srgb, var(--eco-zahav) 14%, var(--eco-surface-solid));
  font-size: 0.86rem;
}
.mm-franja form { margin: 0; }

/* ---------- Cuerpo: paleta + área ---------- */
.mm-cuerpo { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }

.mm-paleta {
  flex: none;
  position: relative;
  width: var(--mm-paleta);
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--eco-border);
  background: var(--eco-surface-solid);
  z-index: 15;
}
/* La lista se desplaza, pero sin barra: unas flechas avisan de que hay más. */
.mm-paleta-lista {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.5rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: stretch;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.mm-paleta-lista::-webkit-scrollbar { display: none; }
.mm-paleta-flecha {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 34px;
  border: 0;
  color: var(--eco-accent);
  font-size: 0.85rem;
  cursor: pointer;
}
.mm-paleta-flecha[hidden] { display: none; }
.mm-paleta-arriba { top: 0; background: linear-gradient(var(--eco-surface-solid) 55%, transparent); }
.mm-paleta-abajo { bottom: 0; background: linear-gradient(transparent, var(--eco-surface-solid) 45%); }
.mm-paleta-flecha:hover { color: var(--eco-accent); }

/* Si la pantalla es baja, la paleta va compacta: sólo iconos, y el nombre
   aparece a la derecha al pasar el ratón o con el foco (ver mapas-editor.js). */
@media (min-width: 768px) and (max-height: 860px) {
  .mm-editor { --mm-paleta: 58px; }
  .mm-paleta .mm-herr { padding: 0.5rem 0.2rem; }
  .mm-paleta .mm-herr-texto {
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important;
  }
}
.mm-paleta-etiqueta {
  position: fixed;
  z-index: 60;
  padding: 0.3rem 0.6rem;
  border-radius: 7px;
  background: var(--eco-text);
  color: var(--eco-bg);
  font-size: 0.78rem;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--eco-shadow-soft);
}
.mm-paleta-etiqueta[hidden] { display: none; }
.mm-herr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.2rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--eco-text);
  font: inherit;
  cursor: pointer;
}
.mm-herr:hover { background: var(--eco-glow); }
.mm-herr[aria-expanded="true"], .mm-herr[aria-pressed="true"] {
  background: color-mix(in srgb, var(--eco-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--eco-accent) 45%, transparent);
}
.mm-herr-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mm-herr-texto { font-size: 0.66rem; line-height: 1.15; text-align: center; color: var(--eco-text-soft); }
.mm-paleta-sep { height: 1px; margin: 0.3rem 0.4rem; background: var(--eco-border); }

/* En el móvil la paleta va abajo, en fila, donde llega el pulgar. */
@media (max-width: 767.98px) {
  .mm-cuerpo { flex-direction: column-reverse; }
  .mm-paleta {
    width: auto;
    flex-direction: row;
    border-right: 0;
    border-top: 1px solid var(--eco-border);
  }
  .mm-paleta-lista {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom));
  }
  .mm-paleta-flecha { display: none !important; }
  .mm-herr { flex: none; min-width: 62px; }
  .mm-paleta-sep { width: 1px; height: auto; margin: 0.3rem 0.1rem; }
}

/* ---------- Paneles ---------- */
.mm-paneles { position: absolute; left: calc(var(--mm-paleta) + 8px); top: 8px; z-index: 18; max-height: calc(100% - 16px); display: flex; }
.mm-panel {
  width: 300px;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--eco-border-strong);
  border-radius: 14px;
  background: var(--eco-surface-solid);
  box-shadow: var(--eco-shadow);
}
.mm-panel[hidden] { display: none; }
.mm-panel-cabeza {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.8rem 0.5rem 1rem;
  background: var(--eco-surface-solid);
  border-bottom: 1px solid var(--eco-border);
}
.mm-panel-cabeza h2 { margin: 0; font-size: 0.95rem; font-weight: 600; }
.mm-cerrar {
  width: 32px; height: 32px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--eco-text);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.mm-cerrar:hover { background: var(--eco-glow); }
.mm-panel-cuerpo { padding: 0.75rem 1rem 1rem; }
.mm-panel-vacio { display: none; padding: 0.9rem 1rem; margin: 0; color: var(--eco-text-soft); font-size: 0.88rem; }
.mm-panel.mm-sin-nodo .mm-panel-vacio { display: block; }
.mm-panel.mm-sin-nodo .mm-panel-cuerpo { display: none; }
.mm-panel-sub { margin: 0.9rem 0 0.4rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eco-text-soft); }
.mm-panel-sub:first-child { margin-top: 0; }
.mm-panel-ayuda { margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--eco-text-soft); }
.mm-panel .eco-input { width: 100%; font-size: 0.88rem; }
.mm-panel textarea.eco-input { resize: vertical; }
.mm-panel .form-label { display: block; margin-bottom: 0.25rem; }
.mm-panel .small { font-size: 0.8rem; }
.mm-panel .form-range { width: 100%; accent-color: var(--eco-accent); }
.mm-panel .form-check { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.4rem; }
.mm-panel .form-check-input { width: 18px; height: 18px; accent-color: var(--eco-accent); }
.mm-panel .text-danger { color: var(--eco-shani); }
.mm-panel .mt-1 { margin-top: 0.25rem; }
.mm-panel .mt-2 { margin-top: 0.5rem; }
.mm-panel .mb-0 { margin-bottom: 0; }

@media (max-width: 767.98px) {
  .mm-paneles { left: 8px; right: 8px; top: auto; bottom: 8px; max-height: 55%; }
  .mm-panel { width: 100%; }
}

.mm-formas, .mm-temas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
.mm-forma, .mm-tema, .mm-opcion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--eco-border);
  border-radius: 10px;
  background: transparent;
  color: var(--eco-text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
}
.mm-forma:hover, .mm-tema:hover, .mm-opcion:hover { border-color: var(--eco-border-strong); }
.mm-forma[aria-pressed="true"], .mm-tema[aria-pressed="true"], .mm-opcion[aria-pressed="true"] {
  border-color: var(--eco-accent);
  background: color-mix(in srgb, var(--eco-accent) 12%, transparent);
  font-weight: 600;
}
.mm-opciones { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mm-forma-dibujo { width: 34px; height: 20px; flex: none; border: 2px solid var(--eco-accent); background: color-mix(in srgb, var(--eco-accent) 12%, transparent); }
.mm-forma-redondeado { border-radius: 6px; }
.mm-forma-rectangulo { border-radius: 1px; }
.mm-forma-pildora { border-radius: 999px; }
.mm-forma-elipse { border-radius: 50%; }
.mm-forma-texto { border: 0; background: none; border-bottom: 2px solid var(--eco-accent); border-radius: 0; height: 14px; }

.mm-muestras { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mm-muestra {
  position: relative;
  width: 28px; height: 28px;
  border: 1px solid var(--eco-border-strong);
  border-radius: 8px;
  background: var(--mm-c, transparent);
  cursor: pointer;
  padding: 0;
}
.mm-muestra[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--eco-surface-solid), 0 0 0 4px var(--eco-accent); }
.mm-muestra-ninguna { background: linear-gradient(135deg, transparent 45%, var(--eco-shani) 45%, var(--eco-shani) 55%, transparent 55%); }
.mm-muestra-propia { display: inline-flex; overflow: hidden; background: conic-gradient(#a4262c, #c9a227, #2e7d52, #1f7a8c, #1e4d8b, #6b2f7a, #a4262c); }
.mm-muestra-propia input { opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.mm-muestra-propia:focus-within { outline: 3px solid var(--eco-accent); outline-offset: 2px; }

.mm-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 0.2rem; }
.mm-icono {
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.mm-icono[hidden] { display: none; }
.mm-icono:hover { background: var(--eco-glow); border-color: var(--eco-border); }
.mm-icono[aria-pressed="true"] { background: color-mix(in srgb, var(--eco-accent) 16%, transparent); border-color: var(--eco-accent); }
.mm-iconos-grupo[hidden] { display: none; }
.mm-iconos-grupo .mm-panel-sub { margin-top: 0.8rem; }
#mm-iconos-buscar { margin-bottom: 0.6rem; }
.mm-iconos-actuales { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-height: 2rem; padding: 0.45rem 0.55rem; border: 1px dashed var(--eco-border-strong); border-radius: 10px; }
.mm-iconos-actuales-tit { font-size: 0.78rem; color: var(--eco-text-soft); margin-right: 0.2rem; }
.mm-icono-puesto {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.15rem 0.45rem; border: 1px solid var(--eco-border-strong); border-radius: 999px;
  background: var(--eco-surface-solid); color: var(--eco-text); font-size: 1rem; cursor: pointer;
}
.mm-icono-puesto span { font-size: 0.85rem; color: var(--eco-text-soft); }
.mm-icono-puesto:hover { border-color: var(--eco-shani); }
.mm-icono-puesto:hover span { color: var(--eco-shani); }
.mm-iconos-aviso { margin-top: 0.4rem; color: var(--eco-shani); }

.mm-tema-muestra { display: flex; width: 30px; height: 22px; flex: none; overflow: hidden; border-radius: 6px; border: 1px solid var(--eco-border-strong); }
.mm-tema-muestra i { flex: 1; }
.mm-tema-eco .mm-tema-muestra i:nth-child(1) { background: #1e4d8b; }
.mm-tema-eco .mm-tema-muestra i:nth-child(2) { background: #c9a227; }
.mm-tema-eco .mm-tema-muestra i:nth-child(3) { background: #a4262c; }
.mm-tema-tekhelet .mm-tema-muestra i:nth-child(1) { background: #0d2748; }
.mm-tema-tekhelet .mm-tema-muestra i:nth-child(2) { background: #2f6fb3; }
.mm-tema-tekhelet .mm-tema-muestra i:nth-child(3) { background: #1f7a8c; }
.mm-tema-argaman .mm-tema-muestra i:nth-child(1) { background: #6b2f7a; }
.mm-tema-argaman .mm-tema-muestra i:nth-child(2) { background: #a4262c; }
.mm-tema-argaman .mm-tema-muestra i:nth-child(3) { background: #b03a5b; }
.mm-tema-jardin .mm-tema-muestra i:nth-child(1) { background: #1f5f3a; }
.mm-tema-jardin .mm-tema-muestra i:nth-child(2) { background: #5a7a1f; }
.mm-tema-jardin .mm-tema-muestra i:nth-child(3) { background: #8a6d10; }
.mm-tema-pergamino .mm-tema-muestra i:nth-child(1) { background: #5a3a1f; }
.mm-tema-pergamino .mm-tema-muestra i:nth-child(2) { background: #6b2f7a; }
.mm-tema-pergamino .mm-tema-muestra i:nth-child(3) { background: #8a5a1f; }
.mm-tema-noche .mm-tema-muestra i:nth-child(1) { background: #7a5f0c; }
.mm-tema-noche .mm-tema-muestra i:nth-child(2) { background: #c9a227; }
.mm-tema-noche .mm-tema-muestra i:nth-child(3) { background: #1e4d8b; }

/* ---------- Ambiente de la pantalla ----------
   Claro y oscuro son los del sitio (data-bs-theme). Beige es propio del
   editor: el papel de estudio, para quien lee mucho rato. */
html[data-mm-ambiente="beige"] {
  --eco-bg: #efe4cc;
  --eco-bg-deep: #e6d8b8;
  --eco-surface: rgba(255, 250, 240, 0.78);
  --eco-surface-solid: #fbf4e4;
  --eco-border: rgba(58, 48, 41, 0.16);
  --eco-border-strong: rgba(58, 48, 41, 0.3);
  --eco-text: #2a2016;
  --eco-text-soft: #6b5a48;
  --eco-glow: rgba(90, 58, 31, 0.08);
  --eco-ring: rgba(30, 77, 139, 0.25);
}
.mm-ambiente-caja { position: relative; }
.mm-ambiente-menu { right: 0; left: auto; top: calc(100% + 8px); min-width: 170px; }
.mm-ambiente-menu[hidden] { display: none; }
.mm-ambiente-op { display: flex !important; align-items: center; gap: 0.6rem; }
.mm-ambiente-op[aria-checked="true"] { font-weight: 600; }
.mm-ambiente-op[aria-checked="true"]::after { content: '✓'; margin-left: auto; color: var(--eco-accent); }
.mm-ambiente-muestra {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 22px; flex: none;
  border-radius: 6px; border: 1px solid var(--eco-border-strong);
  font-size: 0.72rem; font-weight: 700;
}
.mm-am-claro { background: #f4f6f9; color: #16202e; }
.mm-am-oscuro { background: #0b111d; color: #eef2f8; }
.mm-am-beige { background: #efe4cc; color: #2a2016; }

/* ---------- Área: lienzo, esquema y zoom ---------- */
.mm-area { flex: 1 1 auto; position: relative; min-width: 0; min-height: 0; }
/* Mind Elixir le pone `position: relative` en línea al contenedor: sin el
   !important el lienzo se encoge a la altura de su contenido. */
.mm-lienzo { position: absolute !important; inset: 0; outline: none; }
.mm-lienzo[hidden] { display: none; }
.mm-lienzo .map-container { font-family: var(--eco-font-ui); }
/* El foco del teclado en el lienzo se ve: un marco alrededor del área. */
.mm-lienzo .map-container:focus-visible { box-shadow: inset 0 0 0 2px var(--eco-accent); }
.mm-lienzo .map-container me-tpc { line-height: 1.35; }
.mm-lienzo .map-container me-root me-tpc { font-family: var(--eco-font-display); font-weight: 700; }
.mm-lienzo .map-container .selected { outline-width: 3px; outline-offset: 2px; }
/* Grosor y punteado de las líneas, elegidos en «Diseño». */
.mm-lienzo .map-container svg.lines path { stroke-width: calc(var(--mm-grosor, 2) * 1px + 1px); }
.mm-lienzo .map-container svg.subLines path { stroke-width: calc(var(--mm-grosor, 2) * 1px); }
.mm-lienzo.mm-punteada .map-container svg.lines path,
.mm-lienzo.mm-punteada .map-container svg.subLines path { stroke-dasharray: 7 5; }
/* Lo que propuso la IA, hasta que la persona lo toque. */
.mm-lienzo .map-container me-tpc[data-mm-ia] { outline: 2px dashed color-mix(in srgb, var(--eco-zahav) 80%, transparent); outline-offset: 2px; }
/* La insignia de la nota, en la esquina de la idea. */
.mm-lienzo .map-container me-tpc { position: relative; }
.mm-ind {
  position: absolute;
  top: -11px;
  right: -11px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--eco-zahav);
  color: #1a1408;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  pointer-events: all;
}
.mm-ind svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-ind:hover { transform: scale(1.12); }
/* El motor apaga los clics de todo lo que va dentro de una idea
   (`me-tpc > *`); la insignia de la nota tiene que poder tocarse. */
.mm-lienzo .map-container me-tpc > .mm-ind,
.mm-lienzo .map-container me-tpc > .mm-ind * { pointer-events: all; }

/* La nota abierta junto a su idea. */
.mm-nota-flotante {
  position: absolute;
  z-index: 16;
  width: min(340px, calc(100% - 24px));
  height: auto;
  max-height: 55%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--eco-border-strong);
  border-left: 4px solid var(--eco-zahav);
  border-radius: 12px;
  background: var(--eco-surface-solid);
  box-shadow: var(--eco-shadow);
}
.mm-nota-flotante[hidden] { display: none; }
/* Se estira desde la esquina de abajo; con «Ampliar», al 70 % del espacio. */
.mm-nota-flotante { resize: both; overflow: hidden; min-width: 260px; min-height: 140px; max-width: calc(100% - 24px); }
.mm-nota-flotante[style*="height"] { max-height: calc(100% - 24px); }
.mm-nota-flotante.mm-nota-amplia { width: 70%; height: 70%; max-height: calc(100% - 24px); z-index: 19; }
/* Ampliada, el texto ocupa todo el ancho de la ventana (y la barra, si hace
   falta, va en su borde derecho, no a media ventana). */
.mm-nota-flotante.mm-nota-amplia .mm-nota-texto { font-size: 1.05rem; line-height: 1.7; padding: 0.4rem 1.6rem 1rem; }
.mm-nota-botones { display: flex; gap: 0.15rem; flex: none; }
.mm-nota-ampliar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-nota-ampliar[aria-pressed="true"] { background: var(--eco-glow); }
.mm-nota-texto { flex: 1 1 auto; }
.mm-nota-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.6rem 0.3rem 0.9rem; }
.mm-nota-cabeza h2 { margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--eco-text-soft); }
.mm-nota-texto { margin: 0; padding: 0 0.9rem 0.6rem; min-height: 0; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; scrollbar-width: thin; }
.mm-nota-pie { display: flex; justify-content: flex-end; padding: 0 0.6rem 0.6rem; }
.mm-conectando .mm-lienzo .map-container { cursor: crosshair; }

.mm-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 12;
  display: flex;
  gap: 0.15rem;
  padding: 0.25rem;
  border: 1px solid var(--eco-border);
  border-radius: 12px;
  background: var(--eco-surface-solid);
  box-shadow: var(--eco-shadow-soft);
}
.mm-zoom[hidden] { display: none; }
.mm-zoom .mm-boton { min-width: 34px; height: 34px; font-size: 1.05rem; }
.mm-zoom-valor { min-width: 58px !important; font-size: 0.8rem !important; font-variant-numeric: tabular-nums; }

.mm-esquema-editor { position: absolute; inset: 0; overflow: auto; padding: 1.25rem clamp(1rem, 4vw, 3rem) 3rem; }
.mm-esquema-editor[hidden] { display: none; }
.mm-esquema-ayuda { max-width: 60rem; font-size: 0.8rem; color: var(--eco-text-soft); margin: 0 0 1rem; line-height: 1.9; }
#mm-arbol, #mm-arbol ul { list-style: none; margin: 0; padding: 0; }
#mm-arbol ul { padding-left: 1.5rem; margin-left: 0.55rem; border-left: 2px solid var(--eco-border); }
#mm-arbol [role="treeitem"] { outline: none; }
.mm-esq-fila {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  max-width: 60rem;
  padding: 0.32rem 0.55rem;
  border-radius: 8px;
  cursor: default;
}
#mm-arbol [role="treeitem"]:focus > .mm-esq-fila { box-shadow: 0 0 0 3px var(--eco-accent); }
#mm-arbol [aria-selected="true"] > .mm-esq-fila { background: color-mix(in srgb, var(--eco-accent) 12%, transparent); }
#mm-arbol > [role="treeitem"] > .mm-esq-fila .mm-esq-texto { font-family: var(--eco-font-display); font-size: 1.3rem; font-weight: 700; }
.mm-esq-flecha { flex: none; width: 1.1em; text-align: center; color: var(--eco-text-soft); cursor: pointer; }
.mm-esq-marca { font-size: 0.78rem; color: var(--eco-text-soft); }
.mm-esq-input {
  flex: 1 1 auto;
  min-width: 12rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--eco-accent);
  border-radius: 6px;
  background: var(--eco-surface-solid);
  color: var(--eco-text);
  font: inherit;
}

/* ---------- Diálogos ---------- */
.mm-dialogo {
  width: min(32rem, calc(100vw - 2rem));
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--eco-border-strong);
  border-radius: 16px;
  background: var(--eco-surface-solid);
  color: var(--eco-text);
  box-shadow: var(--eco-shadow);
}
.mm-dialogo::backdrop { background: rgba(4, 7, 13, 0.55); }
.mm-dialogo h2 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.mm-atajos { width: 100%; border-collapse: collapse; margin-bottom: 0.8rem; font-size: 0.86rem; }
.mm-atajos td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--eco-border); vertical-align: top; }
.mm-atajos td:first-child { white-space: nowrap; width: 1%; }
.mm-dialogo .small { font-size: 0.8rem; }
.mm-dialogo .eco-muted { color: var(--eco-text-soft); }

/* ---------- Preferencias de accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .mm-editor *, .mm-editor *::before { transition: none !important; animation: none !important; }
}
html[data-a11y-animaciones="off"] .mm-editor * { transition: none !important; animation: none !important; }
html[data-a11y-contraste="alto"] .mm-editor .mm-herr-texto,
html[data-a11y-contraste="alto"] .mm-editor .mm-estado { color: var(--eco-text); }
html[data-a11y-texto="120"] .mm-editor { font-size: 1.12rem; }
html[data-a11y-texto="140"] .mm-editor { font-size: 1.24rem; }
html[data-a11y-texto="160"] .mm-editor,
html[data-a11y-texto="180"] .mm-editor,
html[data-a11y-texto="200"] .mm-editor { font-size: 1.36rem; }

/* ---------- Panel de IA ---------- */
.mm-ia-resultado:not(:empty) { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--eco-border); }
.mm-ia-lista { list-style: none; padding: 0; margin: 0 0 0.6rem; }
.mm-ia-sug { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.35rem 0; font-size: 0.86rem; }
.mm-ia-sug input { margin-top: 0.2rem; width: 17px; height: 17px; flex: none; accent-color: var(--eco-accent); }
.mm-ia-nota { color: var(--eco-text-soft); }
.mm-ia-resumen { font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; }
.mm-ia-arbol, .mm-ia-arbol ul { margin: 0 0 0.6rem; padding-left: 1.1rem; font-size: 0.84rem; }
.mm-ia-error { color: var(--eco-shani); }
.mm-ia-invitacion { margin: 0.2rem 0 0.6rem; font-size: 0.82rem; }
.mm-ia-invitacion > summary { cursor: pointer; color: var(--eco-text-soft); }
.mm-ia-invitacion[open] > summary { margin-bottom: 0.4rem; }

/* ---------- Menú del clic derecho (el del motor, con la piel de ECO) ---------- */
.mm-lienzo .context-menu .menu-list { border-radius: 12px; padding: 0.3rem; background: var(--panel-bgcolor); border: 1px solid var(--panel-border-color); box-shadow: var(--eco-shadow); font-family: var(--eco-font-ui); }
.mm-lienzo .context-menu .menu-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  min-width: 250px; padding: 0.45rem 0.65rem; border: 0; border-radius: 8px; font-size: 0.88rem;
}
.mm-lienzo .context-menu .menu-list li:hover { filter: none; background: color-mix(in srgb, var(--accent-color) 14%, var(--panel-bgcolor)); }
.mm-lienzo .context-menu .menu-list li span:last-child { float: none; }
.mm-lienzo .context-menu .key {
  flex: none; padding: 0.05rem 0.4rem; border: 1px solid var(--panel-border-color); border-radius: 5px;
  background: transparent; color: var(--panel-color); opacity: 0.75; font-size: 0.7rem;
}

/* ---------- El botón ± de cada rama ----------
   El motor lo esconde (opacidad 0) hasta pasar el ratón, y así nadie lo
   encuentra. Aquí se ve siempre, más grande y con los colores de la casa. */
.mm-lienzo .map-container me-epd,
.mm-lienzo .map-container me-epd.minus {
  opacity: 1 !important;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: var(--main-bgcolor);
  box-shadow: 0 0 0 1.5px var(--accent-color);
  background-size: 18px;
  cursor: pointer;
}
.mm-lienzo .map-container me-epd:hover { transform: scale(1.15); }

/* El fondo de una idea con caja: el de las ideas normales, o el de la central
   si la idea ES la central (p. ej. al «enfocar esta rama»). */
.mm-lienzo .map-container { --mm-fondo-idea: var(--main-bgcolor); }
.mm-lienzo .map-container me-root { --mm-fondo-idea: var(--root-bgcolor); }

/* El botón ± de una idea secundaria CON CAJA va en el medio de su lado, como en
   las principales (no abajo, que es donde va cuando la idea es texto). */
.mm-lienzo .map-container me-parent:has(> me-tpc[data-mm-caja]) > me-epd { top: calc(50% - 10px); }
.mm-lienzo .map-container .rhs me-parent:has(> me-tpc[data-mm-caja]) > me-epd { right: calc(var(--node-gap-x) - 11px); }
.mm-lienzo .map-container .lhs me-parent:has(> me-tpc[data-mm-caja]) > me-epd { left: calc(var(--node-gap-x) - 11px); }

/* Una idea larga (hasta 200 caracteres) se ve en cuatro líneas como mucho y
   más estrecha: el mapa sigue siendo un mapa. El texto entero se lee al
   pasar el ratón (title) o al editarla. */
.mm-lienzo .map-container me-tpc { max-width: 22em; }
.mm-lienzo .map-container me-root me-tpc { max-width: 26em; }
.mm-lienzo .map-container me-tpc > .text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Traer de ECO ---------- */
.mm-panel.mm-panel-ancho { width: 360px; }
@media (max-width: 767.98px) { .mm-panel.mm-panel-ancho { width: 100%; } }
.mm-traer-tipos { margin: 0.55rem 0 0.4rem; }
.mm-traer-tipos .mm-opcion { padding: 0.3rem 0.55rem; font-size: 0.76rem; }
.mm-traer-destino { margin: 0.2rem 0 0.4rem; font-style: italic; }
.mm-traer-aviso { color: var(--eco-accent); font-weight: 600; }
.mm-traer-grupo .mm-panel-sub { margin-top: 0.9rem; }
.mm-traer-ul { list-style: none; margin: 0; padding: 0; }
.mm-traer-item { padding: 0.55rem 0; border-bottom: 1px solid var(--eco-border); }
.mm-traer-item:last-child { border-bottom: 0; }
.mm-traer-cabeza { display: flex; flex-direction: column; gap: 0.1rem; }
.mm-traer-titulo { color: var(--eco-text); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.mm-traer-titulo:hover { color: var(--eco-accent); }
.mm-traer-sub { font-size: 0.76rem; color: var(--eco-text-soft); }
.mm-traer-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; margin-top: 0.35rem; }

/* ---------- El lector (leer junto al mapa) ---------- */
.mm-lector {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 17;
  width: min(420px, calc(100% - 16px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--eco-border-strong);
  border-radius: 14px;
  background: var(--eco-surface-solid);
  box-shadow: var(--eco-shadow);
}
.mm-lector[hidden] { display: none; }
.mm-lector-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; padding: 0.7rem 0.8rem 0.4rem 1rem; border-bottom: 1px solid var(--eco-border); }
.mm-lector-tipo { margin: 0; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eco-text-soft); }
.mm-lector-cabeza h2 { margin: 0.1rem 0 0; font-size: 1rem; font-weight: 600; }
.mm-lector-barra { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; border-bottom: 1px solid var(--eco-border); }
.mm-lector-barra .eco-btn[disabled] { opacity: 0.45; cursor: default; }
.mm-lector-destino { margin: 0; font-size: 0.76rem; color: var(--eco-text-soft); font-style: italic; }
.mm-lector-cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 0.6rem 1rem 1.2rem; outline: none; }
.mm-lector-cuerpo a { color: var(--eco-accent); text-decoration: none; }
.mm-lector-sub { margin: 1rem 0 0.4rem; font-family: var(--eco-font-display); font-size: 1rem; }
.mm-lector-p { position: relative; margin: 0 0 0.7rem; padding-right: 2rem; font-size: 0.92rem; line-height: 1.6; user-select: text; -webkit-user-select: text; }
.mm-lector-p::selection, .mm-lector-p *::selection { background: color-mix(in srgb, var(--eco-zahav) 45%, transparent); }
.mm-lector-mas {
  position: absolute; top: 0; right: 0;
  width: 26px; height: 26px;
  border: 1px solid var(--eco-border-strong); border-radius: 999px;
  background: var(--eco-surface-solid); color: var(--eco-accent);
  font-size: 0.9rem; line-height: 1; cursor: pointer; opacity: 0.55;
}
.mm-lector-p:hover .mm-lector-mas, .mm-lector-mas:focus-visible { opacity: 1; }
.mm-lector-flotante {
  position: absolute; z-index: 2;
  padding: 0.35rem 0.75rem; border: 0; border-radius: 999px;
  background: var(--eco-accent); color: var(--eco-accent-contrast);
  font: inherit; font-size: 0.82rem; font-weight: 600; box-shadow: var(--eco-shadow-soft); cursor: pointer;
}
.mm-lector-flotante[hidden] { display: none; }
@media (max-width: 767.98px) {
  .mm-lector { top: auto; left: 8px; right: 8px; width: auto; height: 60%; }
}

/* ---------- Imágenes y videos en las ideas ---------- */
.mm-lienzo .map-container me-tpc > img { display: block; margin: 0 auto 6px; border-radius: 8px; }
.mm-lienzo .map-container me-tpc[data-mm-video]::after {
  content: '▶';
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px; line-height: 36px; text-align: center;
  border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.9rem; pointer-events: none;
}
.mm-img-actual { margin-bottom: 0.6rem; }
.mm-img-vista { display: block; max-width: 100%; max-height: 160px; margin: 0 auto 0.5rem; border-radius: 8px; border: 1px solid var(--eco-border); }
.mm-img-espacio { margin: 0.5rem 0 0.25rem; }
.mm-img-barra { height: 6px; border-radius: 999px; background: var(--eco-border); overflow: hidden; }
.mm-img-barra span { display: block; height: 100%; width: 0; background: var(--eco-accent); }
.mm-img-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.4rem; }
.mm-img-mini { position: relative; }
.mm-img-usar { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--eco-border); border-radius: 8px; overflow: hidden; background: var(--eco-glow); cursor: pointer; }
.mm-img-usar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-img-usar:hover { border-color: var(--eco-accent); }
.mm-img-borrar {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--eco-border-strong); border-radius: 999px;
  background: var(--eco-surface-solid); color: var(--eco-shani); font-size: 0.85rem; line-height: 1; cursor: pointer;
}
.mm-img-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.mm-img-fila .form-label { margin: 0; }
.mm-img-minuto { width: 5.5rem !important; }

.mm-ia-sub { margin: 0.2rem 0 0; padding-left: 1rem; font-size: 0.8rem; color: var(--eco-text-soft); }
.mm-traer-ia { border-color: color-mix(in srgb, var(--eco-zahav) 60%, transparent); }

/* ---------- El documento desde un mapa ---------- */
.mm-doc-form .eco-input { width: 100%; }
.mm-doc-form textarea { resize: vertical; line-height: 1.55; }
.mm-doc-seccion { margin: 1rem 0 0; padding: 1rem 1.1rem; border-radius: var(--eco-radius-sm); overflow: visible; }
.mm-doc-seccion legend { float: none; }
.mm-doc-lista { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.84rem; }
.mm-doc-lista li { padding: 0.2rem 0; }
.mm-doc-lista a { color: var(--eco-accent); text-decoration: none; }
.mm-ia-saldo { font-weight: 600; }

/* ---------- El visor de los mapas publicados (/mapas/<slug>) -----------
   Dentro de una página del sitio: una caja con su barra y el lienzo. A
   pantalla completa ocupa todo. Las piezas de mirar (nota, insignia, líneas)
   son las mismas del editor. */
.mm-visor {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--eco-border);
  border-radius: 16px;
  background: var(--eco-bg);
  overflow: hidden;
  box-shadow: var(--eco-shadow-soft);
}
.mm-visor-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--eco-border);
  background: var(--eco-surface-solid);
}
.mm-visor-barra .mm-boton[hidden] { display: none; }
.mm-visor-barra .mm-boton[aria-pressed="true"] { background: var(--eco-glow); }
.mm-visor-barra .mm-boton:focus-visible { outline: 3px solid var(--eco-accent); outline-offset: 2px; }
.mm-visor-sep { width: 1px; height: 22px; margin: 0 0.3rem; background: var(--eco-border); }
.mm-visor-area { height: clamp(420px, 70vh, 760px); }
.mm-visor:fullscreen, .mm-visor.mm-visor-completa { border-radius: 0; border: 0; }
.mm-visor:fullscreen .mm-visor-area, .mm-visor.mm-visor-completa .mm-visor-area { height: auto; flex: 1 1 auto; }
.mm-visor .mm-lienzo .map-container:focus-visible { box-shadow: inset 0 0 0 3px var(--eco-accent); }
.mm-visor-cargando {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--eco-text-soft);
  font-size: 0.92rem;
}
.mm-visor-cargando[hidden] { display: none; }
@media (max-width: 575.98px) {
  .mm-visor-area { height: 70vh; }
  .mm-visor-sep { display: none; }
}

/* La muestra de la insignia de nota, en el texto de ayuda. */
.mm-ind-muestra {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  border-radius: 999px;
  background: var(--eco-zahav);
  vertical-align: -0.12em;
}

/* Las ideas en lista, debajo del mapa. */
.mm-pub-esquema, .mm-pub-esquema ul { list-style: none; margin: 0; padding: 0; }
.mm-pub-esquema ul { padding-left: 1.25rem; margin-left: 0.4rem; border-left: 2px solid var(--eco-border); }
.mm-pub-esquema li { padding: 0.2rem 0 0.2rem 0.4rem; }
.mm-pub-esquema > li > span, .mm-pub-esquema > li > a { font-family: var(--eco-font-display); font-size: 1.2rem; font-weight: 700; }
.mm-pub-nota { margin: 0.15rem 0 0.35rem; max-width: 70ch; color: var(--eco-text-soft); font-size: 0.9rem; white-space: pre-line; }

/* Revisar lo que sugirió la IA (panel del editor). */
.mm-revisar-ia[hidden] { display: none; }
.mm-revisar-lista { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.mm-revisar-item { padding: 0.6rem 0; border-top: 1px solid var(--eco-border); }
.mm-revisar-item strong { display: block; margin-bottom: 0.2rem; }
.mm-revisar-nota { margin: 0 0 0.4rem; max-height: 9.5em; overflow-y: auto; font-size: 0.86rem; line-height: 1.45; color: var(--eco-text-soft); white-space: pre-wrap; }

/* El recuadro «Mapa mental» junto al material (lección, curso, estudio). */
.mm-junto-tarjeta .eco-card-title .eco-icono { width: 1.05em; height: 1.05em; vertical-align: -0.12em; }
.mm-junto-tarjeta .mm-visor-area { height: clamp(380px, 60vh, 620px); }
.mm-junto-visor[hidden] { display: none; }

/* ---------- Ver en grande: la imagen y la idea recortada ---------- */
.mm-lienzo .map-container me-tpc > .mm-ind-img { left: -11px; right: auto; }
.mm-lienzo .map-container me-tpc > .mm-ind-mas { top: auto; bottom: -11px; background: var(--eco-surface-solid); color: var(--eco-text); border: 1px solid var(--eco-border-strong); }
/* La idea abierta a lo largo: sin el recorte de cuatro líneas. */
.mm-lienzo .map-container me-tpc[data-mm-entera] > .text { display: block; -webkit-line-clamp: unset; overflow: visible; }

.mm-imagen-grande {
  max-width: min(96vw, 1600px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--eco-surface-solid, #fff);
  color: var(--eco-text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.mm-imagen-grande::backdrop { background: rgba(8, 12, 20, 0.78); }
.mm-imagen-grande figure { margin: 0; }
.mm-imagen-grande img { display: block; max-width: min(96vw, 1600px); max-height: calc(94vh - 3rem); object-fit: contain; margin: 0 auto; }
.mm-imagen-grande figcaption { padding: 0.55rem 1rem; font-size: 0.9rem; color: var(--eco-text-soft); }
.mm-imagen-grande figcaption:empty { display: none; }
.mm-imagen-cerrar { position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--eco-surface-solid, #fff); border-radius: 999px; }

/* ---------- Corregir la nota ahí mismo ---------- */
.mm-nota-editor {
  flex: 1 1 auto;
  width: calc(100% - 1.2rem);
  min-height: 8rem;
  margin: 0 0.6rem 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--eco-border-strong);
  border-radius: 8px;
  background: var(--eco-bg);
  color: var(--eco-text);
  font: inherit;
  white-space: pre-wrap;
  resize: none;
}
.mm-nota-flotante.mm-nota-amplia .mm-nota-editor { margin: 0.2rem 1.2rem 0.8rem; width: calc(100% - 2.4rem); }
.mm-nota-pie { gap: 0.4rem; }

/* ---------- El menú de una conexión ---------- */
.mm-flecha-menu {
  position: absolute;
  z-index: 17;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem;
  border: 1px solid var(--eco-border-strong);
  border-radius: 12px;
  background: var(--eco-surface-solid);
  box-shadow: var(--eco-shadow);
}
.mm-flecha-menu[hidden] { display: none; }
.mm-flecha-menu .mm-boton[aria-pressed="true"] { background: var(--eco-glow); font-weight: 600; }
.mm-flecha-color {
  width: 22px; height: 22px; margin: 0 2px;
  border: 2px solid var(--eco-surface-solid); border-radius: 999px;
  background: var(--mm-c, transparent); box-shadow: 0 0 0 1px var(--eco-border-strong);
  cursor: pointer;
}
.mm-flecha-sin { background: linear-gradient(135deg, transparent 45%, var(--eco-shani, #a4262c) 45%, var(--eco-shani, #a4262c) 55%, transparent 55%); }
.mm-flecha-color:focus-visible { outline: 3px solid var(--eco-accent); outline-offset: 2px; }

/* ---------- Numerar ---------- */
.mm-num { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- La lista plegable de la página de un mapa publicado ---------- */
.mm-pub-esquema summary { cursor: pointer; padding: 0.15rem 0; list-style-position: outside; }
.mm-pub-esquema summary::marker { color: var(--eco-text-soft); }
.mm-pub-esquema summary:focus-visible { outline: 3px solid var(--eco-accent); outline-offset: 2px; border-radius: 4px; }
.mm-pub-esquema > li > details > summary { font-family: var(--eco-font-display); font-size: 1.2rem; font-weight: 700; }
.mm-pub-nota > summary { font-size: 0.85rem; color: var(--eco-text-soft); }
.mm-pub-nota.mm-pub-hoja > summary { font-size: inherit; color: inherit; }
.mm-pub-nota > p { margin: 0.2rem 0 0.5rem 1rem; max-width: 70ch; color: var(--eco-text-soft); font-size: 0.92rem; white-space: pre-line; }
.mm-pub-hoja-sola { display: inline-block; padding: 0.15rem 0 0.15rem 1.1rem; }
.mm-franja-publicado { background: color-mix(in srgb, var(--eco-zahav) 14%, var(--eco-surface-solid)); }
.mm-franja-publicado .eco-btn[hidden] { display: none; }