/* Sirena — editor de diagramas Mermaid */

:root {
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface-2: #eef3f4;
  --border: #d3dde0;
  --text: #17262b;
  --text-soft: #5a6d75;
  --accent: #0c7585;
  --accent-soft: #e0f1f3;
  --danger: #b3261e;
  --danger-soft: #fdecea;
  --shadow: 0 1px 3px rgba(9, 32, 38, .12);
  --radius: 8px;
  --toolbar-h: 40px;
}

html[data-theme="dark"] {
  --bg: #10181b;
  --surface: #172227;
  --surface-2: #1e2c32;
  --border: #2c3d44;
  --text: #e6eef0;
  --text-soft: #9db0b7;
  --accent: #4fc3d4;
  --accent-soft: #1d3339;
  --danger: #ff8a80;
  --danger-soft: #3a1f1d;
  --shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.sprite { display: none; }

svg use, .tb svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Barra superior --- */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { flex: none; }
.brand-text h1 { margin: 0; font-size: 19px; letter-spacing: .3px; }
.brand-text p { margin: 0; font-size: 12px; color: var(--text-soft); }

.toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: auto;
}

.tb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.tb:hover { background: var(--accent-soft); border-color: var(--border); }
.tb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tb svg { width: 20px; height: 20px; }
.tb-tag { font-size: 12px; font-weight: 600; letter-spacing: .4px; }
.tb-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }

.tb-select {
  height: 34px;
  max-width: 190px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.menu-wrap { position: relative; }

.menu {
  position: absolute;
  overflow: visible;
  right: 0;
  top: 38px;
  z-index: 30;
  min-width: 150px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.menu button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.menu button:hover { background: var(--accent-soft); }
.menu-ancho { min-width: 280px; }

.menu-ajustes {
  min-width: 300px;
  padding: 12px;
  overflow: visible;
}

/* El rótulo va encima del selector: así no se parte en dos líneas y el
   desplegable del navegador tiene todo el ancho para mostrar sus opciones. */
.ajuste {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
}

.ajuste > span {
  display: block;
  margin-bottom: 4px;
  color: var(--text-soft);
  font-size: 12px;
}

/* En el menú de aspecto cada ajuste lleva su icono delante del rótulo,
   para reconocerlo de un vistazo; el selector ocupa todo el ancho. */
.menu-ajustes > .ajuste {
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 8px;
  align-items: center;
}

.menu-ajustes > .ajuste > svg {
  width: 16px;
  height: 16px;
  margin-bottom: 4px;
  color: var(--text-soft);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-ajustes > .ajuste > select { grid-column: 1 / -1; }

.ajuste select {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.colores-propios {
  margin: -6px 0 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.color-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12.5px;
}

.color-fila input[type="color"] {
  flex: 0 0 64px;
  height: 26px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
}

.ajuste-nota { margin: 0; color: var(--text-soft); font-size: 11px; }

/* Los ajustes del PNG van al pie del menú de descargas, separados de los
   formatos para que no parezcan una opción más de la lista. */
.menu-ajustes-pie {
  margin-top: 6px;
  padding: 10px 10px 2px;
  border-top: 1px solid var(--border);
}

.menu-ajustes-pie .ajuste { margin-bottom: 10px; }
.menu-ancho button { padding: 8px 10px; }
.menu-ancho strong { display: block; font-size: 13.5px; font-weight: 600; }
.menu-ancho small { display: block; color: var(--text-soft); font-size: 11.5px; line-height: 1.35; }

/* Cada opción con su icono, para reconocerla de un vistazo. */
.menu-iconos button {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

.menu-iconos button svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu button[aria-current="true"] { color: var(--accent); font-weight: 600; }

/* --- Barra de herramientas del editor --- */

/* Tres grupos: el tipo de diagrama, la orientación y el color del elemento.
   Solo aparece cada grupo cuando el tipo de diagrama lo admite. */
.editor-tools {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  /* Cuantos botones hagan falta: la barra crece en filas. */
  flex-wrap: wrap;
  row-gap: 3px;
}

.editor-tools .tb { height: 28px; min-width: 28px; padding: 0 5px; flex: none; }
.editor-tools .tb svg { width: 17px; height: 17px; }
.editor-tools .tb-sep { margin: 0 1px; }
.editor-tools .menu-wrap { flex: none; }
.editor-tools .tb-fin { margin-left: auto; }
.editor-tools .tb:disabled { opacity: .35; cursor: default; }
.editor-tools .tb:disabled:hover { background: transparent; border-color: transparent; }
/* Un botón que es interruptor se ve encendido cuando está puesto. */
.editor-tools .tb[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--border); }

.tb-texto { gap: 6px; padding: 0 9px 0 7px; font-size: 13px; white-space: nowrap; }
.tb-texto span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }

.menu-direccion { min-width: 200px; white-space: nowrap; }
.menu-opciones { min-width: 160px; white-space: nowrap; }
.menu-opciones .menu-titulo { margin: 4px 10px 6px; }
.menu-motores { min-width: 300px; }
.menu-tamano { min-width: 200px; }
.menu-seccion-ancho { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
#font-options button { font-size: 14px; }

/* Menú del botón derecho sobre el diagrama: las opciones del objeto señalado. */
.menu-contextual {
  position: fixed;
  right: auto;
  top: auto;
  z-index: 60;
  min-width: 230px;
  max-width: 280px;
  padding: 8px;
}
.menu-contextual { overflow-y: auto; }
.menu-contextual .menu-titulo { margin: 2px 2px 8px; }
.menu-contextual .segmentos { margin-bottom: 8px; flex-wrap: wrap; }
#line-arrow-type .segmentos { flex-wrap: wrap; }
.ajuste-flechas { margin: 6px 0 2px; }
.menu-ajustes { max-height: calc(100vh - 120px); overflow-y: auto; }
.accion-menu-ajustes { grid-column: 1 / -1; margin-top: 4px; }
#pie-colores { grid-column: 1 / -1; }
#pie-colores .color-fila span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-ayuda { grid-column: 1 / -1; margin: -4px 0 10px; color: var(--text-soft); font-size: 11.5px; }

/* Lista de tipos de línea o de puntas: cada fila con su dibujo y su nombre. */
.lista-flechas { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0 0 6px 18px; }
.menu-contextual .lista-flechas, #context-submenu .lista-flechas { margin-left: 0; }

/* Fila que pliega y despliega una lista, con el valor actual dibujado a la derecha. */
.menu button.pliegue {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.menu button.pliegue > span:first-of-type { flex: 1; }
.ajuste-flechas, #line-arrow-type { grid-column: 1 / -1; }
.menu button.pliegue:hover { background: var(--accent-soft); color: var(--accent); }
.pliegue .chev { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-90deg); transition: transform .15s; }
.pliegue[aria-expanded="true"] .chev { transform: rotate(0); }
.pliegue-actual { display: inline-flex; margin-left: auto; color: var(--text-soft); font-size: 12px; }
.pliegue-actual svg { width: 40px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pliegue-actual svg .relleno { fill: currentColor; stroke: none; }
.menu .lista-flechas button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.menu .lista-flechas button:hover { background: var(--accent-soft); color: var(--accent); }
.menu .lista-flechas button[aria-current="true"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.lista-flechas svg { flex: none; width: 40px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lista-flechas svg .relleno { fill: currentColor; stroke: none; }
.menu-contextual .tamano-propio { margin: 0 2px 8px; padding-top: 0; border-top: 0; }
.menu-contextual .swatches { margin-bottom: 8px; }
.menu-contextual hr { margin: 8px 0; border: 0; border-top: 1px solid var(--border); }
.menu-contextual .menu-grupo { margin: 2px 2px 4px; }
.menu-contextual .accion-menu { display: flex; align-items: center; gap: 8px; }
.menu-contextual .accion-menu svg { width: 16px; height: 16px; flex: none; color: var(--text-soft); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-contextual .accion-menu .chevron { margin-left: auto; color: var(--text-soft); }
.menu-contextual .accion-menu[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }

/* El submenú cuelga al lado de su opción, como en cualquier menú de escritorio. */
.menu-cascada { min-width: 240px; max-width: min(380px, 92vw); }
.menu-cascada .submenu-cabecera { margin-bottom: 8px; }
.menu-cascada .swatches { margin-bottom: 10px; }
.menu-cascada .swatch-propio { margin: 0 2px 8px; }
.menu-cascada .swatches button[aria-current="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-contextual .accion-menu .marca { margin-left: auto; color: var(--accent); display: inline-flex; }
.menu-contextual .accion-menu .marca svg { width: 15px; height: 15px; color: var(--accent); }
.menu-contextual .accion-menu[aria-pressed="true"] { color: var(--accent); font-weight: 600; }

/* Cabecera de un submenú, con el paso atrás. */
.submenu-cabecera { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.menu .submenu-volver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.submenu-volver svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.submenu-cabecera strong { font-size: 13px; }

/* Un menú de la barra prestado al menú contextual: se muestra sin su marco. */
.menu.prestado {
  position: static;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: 60vh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-y: auto;
}
.menu.prestado .menu-seccion:first-child { margin-top: 0; }
.modal-formas { max-width: 620px; }
.segmentos-menu { margin: 0 0 10px; }
.menu-ajustes .color-elemento .tamano-propio { margin: 0 0 6px; padding-top: 0; border-top: 0; }

/* Las formas van en rejilla: icono encima del nombre, cuatro por fila. */
.formas-rejilla button:hover { background: var(--accent-soft); }
.formas-rejilla button[aria-current="true"] { color: var(--accent); font-weight: 600; }
.formas-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 0 4px 4px; }
.formas-rejilla button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: auto;
  padding: 6px 4px;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}
.formas-rejilla .forma-nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: normal; max-width: 100%; }
.forma-icono { display: inline-flex; width: 44px; height: 26px; flex: none; align-items: center; justify-content: center; color: var(--accent); }
.forma-icono svg { width: 44px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6px; stroke-linejoin: round; stroke-linecap: round; }
.forma-icono svg * { vector-effect: non-scaling-stroke; }
.forma-icono svg text { stroke: none; }
#shape-grid .menu-titulo { margin: 0 0 10px; }
#shape-grid .menu-grupo { margin: 14px 2px 4px; color: var(--text-soft); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
#shape-grid .menu-grupo:first-of-type { margin-top: 6px; }
.tamano-propio {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 10px 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-soft);
}
.tamano-propio input {
  width: 58px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: right;
}
.menu-motores button[aria-current="true"] strong { color: var(--accent); }
.modal-aviso { color: var(--accent); }
.menu-direccion button { align-items: center; }

/* Los menús de esta barra cuelgan por la izquierda, que es donde están sus botones. */
.menu-izq { right: auto; left: 0; top: 34px; }

.menu-tipos { min-width: 300px; max-height: min(70vh, 520px); overflow-y: auto; }
.menu-tipos button { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; white-space: nowrap; }
.menu-tipos .menu-grupo {
  margin: 6px 10px 2px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.menu-tipos .menu-grupo:first-child { margin-top: 4px; }
.menu-tipos code { color: var(--text-soft); font-size: 11.5px; }

.menu-seccion {
  margin: 0 0 8px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.color-elemento { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.menu-titulo { margin: 0 0 8px; color: var(--text-soft); font-size: 12px; line-height: 1.4; }
.segmentos { display: flex; gap: 4px; margin-bottom: 8px; }
.segmentos button {
  flex: 1;
  width: auto;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}
.segmentos button[aria-current="true"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.menu-titulo code { color: var(--accent); }
.swatches { display: flex; gap: 6px; margin-bottom: 8px; }
.swatches button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--swatch-border, transparent);
  border-radius: 50%;
}
.swatches button:hover { transform: scale(1.1); }
.swatch-propio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  cursor: pointer;
}
.swatch-propio input { width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: none; cursor: pointer; }
.color-elemento > button { color: var(--text-soft); font-size: 12.5px; }
.color-elemento[data-sin-objetivo="true"] .segmentos,
.color-elemento[data-sin-objetivo="true"] #line-widths,
.color-elemento[data-sin-objetivo="true"] .swatches,
.color-elemento[data-sin-objetivo="true"] .swatch-propio,
.color-elemento[data-sin-objetivo="true"] > button { display: none; }

/* Para medir el diagrama, Mermaid lo dibuja antes en un elemento temporal que
   añade al final de la página. Se saca del flujo para que no empuje el
   contenido durante las décimas de segundo que tarda en retirarlo. */
body > div[id^="dsirena-diagram-"] {
  position: absolute !important;
  left: -10000px;
  top: 0;
  /* Con el ancho del panel donde se va a ver: algunos diagramas (el de
     Gantt) se dibujan según el ancho disponible, y así salen a su medida. */
  width: var(--ancho-medida, 100vw);
  pointer-events: none;
}

/* Al medir un rótulo con fórmula, Mermaid lo arma como una fila que no salta
   de línea, y la caja sale tan ancha como el texto entero. Aquí se le deja
   partir, de modo que la medida respete el ancho de corte (wrappingWidth). */
body > div[id^="dsirena-diagram-"] .label > span > div,
body > div[id^="dsirena-diagram-"] .nodeLabel > div {
  display: block !important;
  white-space: normal !important;
}

/* Puntos de anclaje de una caja: salen al pasar el ratón y de ellos se
   arrastra para trazar una flecha nueva. */
.anclas { position: fixed; z-index: 50; pointer-events: none; }

.ancla {
  position: absolute;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  padding: 0;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  cursor: crosshair;
  pointer-events: auto;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
}

.anclas:not([hidden]) .ancla { opacity: 1; transform: none; }
.ancla:hover { transform: scale(1.25); }

/* La caja a la que se va a conectar se resalta mientras se arrastra. */
.trazando .node.destino > :is(rect, polygon, circle, ellipse, path) {
  stroke: var(--accent) !important;
  stroke-width: 3px !important;
}

.trazando { cursor: crosshair; }

/* Línea guía del arrastre. */
.guia { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 49; pointer-events: none; }
.guia line { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 5; }

@media (prefers-reduced-motion: reduce) {
  .ancla { transition: none; }
}

/* Botones de formato que acompañan al campo de escritura sobre el dibujo. */
.editor-sitio-barra {
  position: fixed;
  z-index: 56;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.editor-sitio-barra button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.editor-sitio-barra button:hover { background: var(--accent-soft); color: var(--accent); }
.editor-sitio-barra svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Campo para escribir el texto encima del propio elemento del diagrama. */
.editor-sitio {
  position: fixed;
  z-index: 55;
  margin: 0;
  padding: 2px 4px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  line-height: 1.2;
  text-align: center;
  resize: none;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Aviso flotante sobre el lienzo: cuenta lo del botón derecho hasta que se
   usa por primera vez. Va encima del dibujo, sin desplazar nada. */
.pista {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(420px, calc(100% - 28px));
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  cursor: pointer;
  animation: pista-entra .45s ease both .6s;
}

.pista > svg { width: 17px; height: 17px; flex: none; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pista button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}

.pista button:hover { background: var(--accent-soft); color: var(--text); }
.pista button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

@keyframes pista-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.pista.saliendo { animation: pista-sale .3s ease both; }

@keyframes pista-sale {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .pista, .pista.saliendo { animation: none; }
}

/* --- Pestañas en pantalla pequeña --- */

.tabs { display: none; background: var(--surface); border-bottom: 1px solid var(--border); }

.tabs .tab {
  flex: 1;
  padding: 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  cursor: pointer;
}

.tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* --- Espacio de trabajo --- */

.workspace {
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 10px;
  gap: 0;
}

.pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pane-editor { flex: 0 0 var(--editor-width, 38%); }
.pane-preview { flex: 1; }

.editor-wrap {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.gutter {
  flex: none;
  width: 44px;
  padding: 12px 6px 12px 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-soft);
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  text-align: right;
  user-select: none;
}

.gutter span { display: block; }

.gutter .line-error {
  color: #fff;
  background: var(--danger);
  border-radius: 3px;
  padding-right: 4px;
  margin-right: -4px;
  font-weight: 600;
}

#editor {
  flex: 1;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  tab-size: 2;
}

#editor:focus { outline: none; }
/* Con el teclado, el editor muestra que tiene el foco. */
#editor:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

.editor-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 12px;
  min-height: 26px;
}

.doc-name {
  max-width: 55%;
  overflow: hidden;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.doc-name:hover { background: var(--accent-soft); border-color: var(--border); }

.lista-docs {
  max-height: 46vh;
  margin: 12px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.lista-docs li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius);
}

.lista-docs li:hover { background: var(--surface-2); }
.lista-docs li[aria-current="true"] { background: var(--accent-soft); }
.lista-docs input[type="checkbox"], .marca-todos input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* Marcar diagramas de uno en uno o todos, y borrar los marcados de una vez. */
.lista-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding: 0 8px;
}
.marca-todos { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.btn-peligro { display: inline-flex; align-items: center; gap: 6px; }
.btn-peligro svg { width: 16px; height: 16px; }
.btn-peligro:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.btn-peligro:disabled { opacity: .5; cursor: default; }
.lista-cabecera + .lista-docs { margin-top: 6px; }

/* El máximo de diagramas guardados, al pie de la lista. */
#ajuste-limite {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

#ajuste-limite > span { margin: 0; }
#ajuste-limite select { width: auto; margin-left: auto; }

.doc-abrir {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.doc-abrir strong { display: block; font-size: 13.5px; font-weight: 600; }
.doc-abrir small { color: var(--text-soft); font-size: 11.5px; }

.doc-accion {
  flex: none;
  display: inline-flex;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}

.doc-accion:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
.doc-accion svg { width: 16px; height: 16px; }

.splitter {
  flex: none;
  width: 10px;
  cursor: col-resize;
  background: transparent;
}

.splitter::after {
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--border);
}

.splitter:hover::after, .splitter:focus-visible::after { background: var(--accent); }

.preview-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.zoom-value {
  min-width: 62px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

.zoom-value:hover { background: var(--accent-soft); border-color: var(--border); color: var(--text); }
.zoom-value:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.preview-tools .btn-full { margin-left: auto; }

.preview-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  background-color: var(--surface);
  cursor: grab;
  /* El gesto es nuestro: sin esto, el navegador del móvil se queda el
     desplazamiento y el arrastre va a tirones. */
  touch-action: none;
  overscroll-behavior: contain;
}

.preview-viewport.dragging { cursor: grabbing; }

/* Al arrastrar el lienzo no debe seleccionarse el texto del diagrama ni
   arrancar el arrastre de imagen del navegador. */
.preview-viewport, .preview-canvas, .preview-canvas * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.preview-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  padding: 16px;
}

.preview-canvas svg { display: block; max-width: none; height: auto; }

.preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-soft);
  text-align: center;
}

.error-box {
  max-height: 34%;
  overflow: auto;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
}

.error-box strong { display: block; margin-bottom: 4px; }
.error-box.clickable { cursor: pointer; }
.error-box.clickable:hover { filter: brightness(.97); }
.error-box pre { margin: 0; white-space: pre-wrap; font-size: 12px; }

/* --- Pie --- */

.footer {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 12px;
  text-align: center;
}

.footer-line { margin: 0; }
.footer a { color: var(--accent); }

/* --- Ventana de ayuda --- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(9, 32, 38, .5);
}

.modal {
  max-width: 560px;
  width: 100%;
  padding: 22px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}

.modal { max-height: 86vh; overflow: auto; }
.modal h2 { margin-top: 0; font-size: 18px; }

.syntax h3 { margin: 18px 0 4px; font-size: 15px; }
.syntax > p { margin: 0 0 8px; color: var(--text-soft); font-size: 12px; }

.syntax-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.syntax-row:hover { background: var(--accent-soft); border-color: var(--border); }

.syntax-row code {
  flex: 0 0 46%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--accent);
}

.syntax-row span { flex: 1; font-size: 13px; color: var(--text-soft); }

@media (max-width: 620px) {
  .syntax-row { flex-direction: column; gap: 2px; }
  .syntax-row code { flex: none; width: 100%; }
}
.modal a { color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-actions-repartidas { justify-content: space-between; }
.acciones-izq { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 620px) {
  .modal-actions-repartidas { flex-direction: column; align-items: stretch; }
  .acciones-izq > .btn { flex: 1; }
}
.modal-help { color: var(--text-soft); font-size: 13px; }

.campo { display: block; margin-top: 14px; }
.campo > span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-soft); }

.campo input, .campo textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.btn {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

/* Va después de .btn: si no, el fondo del botón principal lo pisa. */
.btn-secundario { background: transparent; color: var(--text); }

/* --- Aviso emergente --- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 60;
  transform: translateX(-50%);
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface);
  font-size: 13px;
  box-shadow: var(--shadow);
}

/* --- Pantalla pequeña --- */

@media (max-width: 900px) {
  /* En pantalla estrecha la barra del editor se desplaza en horizontal; sus
     menús son fijos (como los demás) y no los recorta. */
  .editor-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  /* En pantalla estrecha los menús se anclan a la ventana, no al botón, para
     que no se salgan por un lado. */
  .menu {
    position: fixed;
    left: 8px;
    right: auto;
    top: auto;
    min-width: 0;
    width: calc(100vw - 16px);
    max-width: 360px;
    max-height: 70vh;
    overflow: auto;
  }

  .topbar { gap: 8px; padding: 8px 10px; }
  .brand-text p { display: none; }
  .toolbar { width: 100%; margin-left: 0; justify-content: flex-start; }
  .tabs { display: flex; }
  .workspace { padding: 8px; }
  .splitter { display: none; }
  .pane-editor, .pane-preview { flex: 1 1 auto; }
  body[data-pane="editor"] .pane-preview { display: none; }
  body[data-pane="preview"] .pane-editor { display: none; }
}

@media print {
  .topbar, .tabs, .preview-tools, .footer, .splitter, .pane-editor, .error-box { display: none !important; }
  .pane-preview { border: 0; box-shadow: none; }
  .preview-viewport { overflow: visible; background: none; }
}

/* Los elementos ocultos mandan sobre display: flex */
[hidden] { display: none !important; }

/* --- Modo visor: solo el diagrama, para incrustar en otra página --- */

body.viewer { background: var(--surface); }
body.viewer .topbar,
body.viewer .tabs,
body.viewer .footer,
body.viewer .splitter,
body.viewer .pane-editor { display: none !important; }

body.viewer .workspace { padding: 0; }

body.viewer .pane-preview {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.viewer .preview-viewport { background-image: none; }

/* En un marco estrecho se aplican las reglas de pantalla pequeña, que ocultan
   uno de los dos paneles. En el modo visor el diagrama debe verse siempre. */
body.viewer .pane-preview { display: flex !important; flex: 1 1 auto; }

.viewer-link {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 11px;
  text-decoration: none;
  opacity: .55;
}

.viewer-link:hover { opacity: 1; color: var(--accent); }

/* Al arrastrar un archivo sobre la ventana se marca el editor, que es donde va
   a caer el contenido. */
.arrastrando .editor-wrap { outline: 2px dashed var(--accent); outline-offset: -3px; }

/* Temas: cada opción dibujada con sus colores, en lista vertical. */
.menu-temas { min-width: 230px; }
.lista-temas { display: grid; gap: 2px; }
.lista-temas hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--border); }
.menu .lista-temas button { display: flex; align-items: center; gap: 10px; padding: 5px 8px; }
.menu .lista-temas button[aria-current="true"] { background: var(--accent-soft); }
.muestra-tema { flex: none; width: 38px; height: 20px; }
.menu-temas .colores-propios { margin-top: 8px; }

/* Menú de colores: el elemento del cursor y, debajo, el fondo de los rótulos.
   La raya solo separa los dos apartados cuando se ven los dos. */
#color-menu > .color-elemento { margin-top: 0; padding-top: 0; border-top: 0; }
#node-color-box:not([hidden]) + #fondo-rotulos-box { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
#fondo-rotulos > .accion-menu { color: var(--text-soft); font-size: 12.5px; }
#fondo-rotulos > .accion-menu svg { display: none; }
.muestra-trazo { flex: none; width: 38px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

/* Submenús homogéneos: los ajustes con botones a la vista en lugar de un
   desplegable, un solo estilo para los títulos de apartado y la opción
   actual marcada igual en todas las listas. */
.menu-ajustes > .ajuste > .segmentos-ajuste { grid-column: 1 / -1; margin: 0; flex-wrap: wrap; }
.menu-ajustes > .ajuste > .segmentos-ajuste button { flex: 1 0 auto; }
.menu-contextual .menu-grupo { margin: 4px 2px 6px; color: var(--text-soft); font-size: 12px; }
.menu-contextual .accion-menu[aria-current="true"] { color: var(--accent); font-weight: 600; }
.menu-contextual .accion-menu[aria-current="true"] svg { color: var(--accent); }
.menu-contextual .lista-flechas { margin-bottom: 6px; }

/* El aviso va en líneas cortas: dónde vale y qué hace cada gesto. */
#pista-formato-texto { white-space: pre-line; }
#pista-formato { border-radius: 16px; }
#pista-formato-texto::first-line { font-weight: 600; }
.pista-cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pista #pista-no-mostrar {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-soft);
  font: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  cursor: pointer;
}
.pista #pista-no-mostrar:hover { background: none; color: var(--accent); }