:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #6b6b6b;
  --border: #dcdcdc;
  --card-bg: #fafafa;
  --accent: #4a6da8;
  --accent-contrast: #ffffff;
  --warn-bg: #fff4e5;
  --warn-fg: #7a4a00;
  --ok: #1f8a3c;
  --bad: #a85c52;
  /* 30/08/2026, pedido de Javi sobre el diagrama de Aprendizaje: "utiliza
     más colores (diferentes) para destacar contenidos" — un tinte suave
     y distinto para cada fase del diagrama (ver .learn-flow-band--tint-N
     en la sección del diagrama, más abajo). Tonos muy claros a propósito,
     para que el texto siga leyéndose sin esfuerzo encima. */
  --phase-tint-0: #f6f1e6;
  --phase-tint-1: #e9f1f9;
  --phase-tint-2: #f4edf8;
  --phase-tint-3: #edf6ec;
  --phase-tint-4: #fbebf1;
  --phase-tint-5: #eaf7f4;
  /* 30/08/2026, pedido de Javi: "es necesaria una opción para añadir
     carriles" — color de reserva para un 4º carril (los 3 primeros,
     Usuario/Ground/IA, reutilizan --muted/--ok/--accent, que ya existían).
     Ver LEARN_FLOW_LANE_COLORS en app.js. */
  --lane-color-3: #8a4fa8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #14161a;
    --fg: #e9e9ea;
    --muted: #9a9ea6;
    --border: #2c2f36;
    --card-bg: #1c1f26;
    --accent: #8aa3d6;
    --accent-contrast: #0b0d10;
    --warn-bg: #2b230f;
    --warn-fg: #e2b464;
    --ok: #4fce76;
    --bad: #d98b82;
    --phase-tint-0: #262219;
    --phase-tint-1: #1a2129;
    --phase-tint-2: #221c27;
    --phase-tint-3: #1a2420;
    --phase-tint-4: #271a20;
    --phase-tint-5: #1a2624;
    --lane-color-3: #b28ad6;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
}

/* Cabecera + menú fijos al hacer scroll (28/08/2026, pedido de Javi: que
   se queden siempre visibles, arriba o abajo del todo). Un solo
   contenedor "sticky" envolviendo topbar+tabs en vez de los dos por
   separado — así no hace falta calcular a mano la altura del uno para
   colocar el otro justo debajo. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.salir-btn {
  margin-top: 0;
  background: transparent;
  color: var(--muted, #6b7280);
  border: 1px solid var(--border);
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
}

.badge {
  font-size: 0.8rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.badge-ok {
  color: var(--ok);
  border-color: var(--ok);
}

.badge-bad {
  color: var(--bad);
  border-color: var(--bad);
}

.badge-unknown {
  color: var(--muted);
}

#active-universe-label {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Nombre de la organización de Atlas Núcleo (14/09/2026, pedido de Javi)
   -- un poco más discreto que "Universo activo", que es lo que de verdad
   importa a la hora de actuar. */
.organizacion-label {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding-right: 0.75rem;
  border-right: 1px solid var(--border);
}

/* Banner arriba del todo en Aprendizaje: qué universo se verá afectado por
   ingesta/interpretar/reprocesar/embeddings — pedido de Javi, 27/08/2026,
   porque el label del topbar es pequeño y puede pasar desapercibido antes
   de una acción con coste o destructiva. */
.active-universe-banner {
  margin: 0.75rem 0;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid var(--border);
}

.active-universe-banner--set {
  background: var(--card-bg);
  border-color: var(--accent);
  color: var(--accent);
}

.active-universe-banner--none {
  background: var(--warn-bg);
  border-color: var(--warn-fg);
  color: var(--warn-fg);
}

.tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.tab-button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  cursor: pointer;
}

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

/* Menú "Herramientas" (28/08/2026, pedido de Javi: Esquema y Editor
   agrupados aparte, a la derecha de una línea divisoria) — separa las
   pestañas del flujo normal (Inicio/Aprendizaje/Consulta) de las
   utilidades sueltas. */
.tabs-divider {
  width: 1px;
  align-self: stretch;
  margin: 0.4rem 0.25rem;
  background: var(--border);
}

.tabs-dropdown {
  position: relative;
  /* Empuja el menú al extremo derecho de la barra en vez de dejarlo
     pegado a "Consulta". */
  margin-left: auto;
}

.tabs-dropdown-toggle {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  cursor: pointer;
}

/* Se marca como "activo" mientras Esquema o Editor sean la pestaña
   actual, aunque el propio botón no sea una pestaña — ver activateTab()
   en app.js. */
.tabs-dropdown-toggle.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.tabs-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  margin-top: 0.25rem;
  padding: 0.35rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* El "display: flex" de arriba tiene la misma prioridad que la regla del
   navegador para el atributo hidden (display: none) y va después en la
   hoja de estilos, así que la pisaba y el menú se veía siempre abierto
   (28/08/2026, "está siempre abierto aunque no se haya tocado"). Este
   selector es más específico (dos condiciones en vez de una) y gana
   siempre, toque el orden que toque. */
.tabs-dropdown-menu[hidden] {
  display: none;
}

.tabs-dropdown-menu .tab-button {
  text-align: left;
  border-bottom: none;
  border-radius: 5px;
  padding: 0.5rem 0.6rem;
}

.tabs-dropdown-menu .tab-button:hover {
  background: var(--bg);
}

.tabs-dropdown-menu .tab-button.active {
  color: var(--accent);
  font-weight: 600;
}

main {
  /* Antes 780px: en una pantalla ancha eso dejaba franjas enormes en
     blanco a los dos lados en TODAS las pestañas, no solo en Esquema
     (28/08/2026, "el problema de los grandes espacios en blanco... sucede
     en todas las páginas"). 1200px aprovecha mucho más el ancho real sin
     que un <input> suelto de un formulario se estire de forma absurda —
     eso se controla aparte, ver form input/select más abajo. */
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* Esquema es un diagrama, no texto para leer — le viene bien todavía más
   ancho que el resto de pestañas para que el lienzo tenga margen de
   sobra (28/08/2026, "la ampliación de la ventana... tiene un límite
   pequeño"). app.js añade esta clase a <main> solo mientras la pestaña
   activa es Esquema. */
main.is-wide-tab {
  max-width: 1700px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

h1 {
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}

/* 30/08/2026, pedido de Javi: "los títulos de todos los paneles más
   llamativos que el resto del panel" — antes un h2 apenas se distinguía
   del texto normal (mismo color, tamaño parecido). Ahora usa el color de
   acento y más peso/tamaño, para que destaque de un vistazo en cualquier
   tarjeta de la app. */
h2 {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.01em;
  margin-top: 0;
}

.hint {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  /* Con main más ancho (28/08/2026) un párrafo suelto estirado a todo el
     ancho de la tarjeta se hace incómodo de leer — 70 caracteres por
     línea es la referencia habitual para texto corrido. La tarjeta en sí
     sigue ocupando todo el ancho disponible; solo el texto se limita. */
  max-width: 70ch;
}

.warning {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: 0.88rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 1rem 0;
}

.notice {
  color: var(--muted);
}

form label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.5rem 0 0.25rem;
}

form input:not([type="checkbox"]),
form select,
form textarea {
  width: 100%;
  /* Con main más ancho (28/08/2026) un campo de una sola línea ocupando
     el 100% de una tarjeta ancha queda absurdamente largo — un textarea
     sí aprovecha bien el ancho extra, así que este tope no le aplica
     (ver "form textarea" más abajo, que lo anula). */
  max-width: 480px;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.9rem;
  font-family: inherit;
  /* Altura de línea en unidad absoluta (no un multiplicador del propio
     font-size) para que los botones puedan tener letra más pequeña y aun
     así medir exactamente lo mismo de alto que esta caja (27/08/2026). */
  line-height: 1.25rem;
}

form textarea {
  resize: vertical;
  /* A diferencia de un input de una línea, un textarea SÍ aprovecha bien
     el ancho extra de main (28/08/2026) — anula el tope de arriba. */
  max-width: none;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.inline-form label {
  flex: 1 1 130px;
  margin: 0;
}

button {
  margin-top: 0.75rem;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid transparent;
  border-radius: 6px;
  /* Compacto: alto ajustado (poco relleno vertical) y ancho ajustado al
     propio texto (poco relleno horizontal, sin width ni flex-grow en
     ningún sitio) — pedido de Javi, 27/08/2026. */
  padding: 0.28rem 0.65rem;
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 1.1rem;
  cursor: pointer;
  width: auto;
  /* 18/09/2026, pedido de Javi: el botón "Buscar" de Consulta se veía sin
     el azul de fondo -- Safari (y algún otro navegador) puede pintar su
     propio estilo nativo de <button> por encima del "background" si no
     se le pide explícitamente que no lo haga. */
  appearance: none;
  -webkit-appearance: none;
}

button:hover {
  opacity: 0.9;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

.message {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.list .universe-row,
.list .source-root-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

/* Sin línea de separación entre fuentes (25/08/2026) — la lista de fuentes
   se ve más limpia sin ella, sobre todo ahora que el meta-dato de abajo
   solo aparece al abrir cada una. */
.list .source-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

/* Agrupado por carpeta de origen, como el Finder (15/09/2026, pedido de
   Javi): la carpeta como cabecera, y sus ficheros indentados debajo. */
.source-root-header {
  font-weight: 600;
  margin-top: 0.75rem;
  padding: 0.25rem 0;
}

.source-root-header:first-child {
  margin-top: 0;
}

.list .source-row--indented {
  padding-left: 1.5rem;
}

.universe-row .universe-name {
  font-weight: 600;
}

.universe-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.back-link {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.back-link:hover {
  text-decoration: underline;
}

/* 18/09/2026, pedido de Javi: "Volver a universos" y "Volver al diagrama"
   salían pegados cuando coinciden los dos en la misma vista. */
.back-link + .back-link {
  margin-left: 1.25rem;
}

.universe-row-actions button,
.source-root-row button,
.source-row button {
  margin-top: 0;
}

button.danger {
  background: var(--bad);
}

.root-path,
.source-path {
  font-weight: 400;
  word-break: break-all;
}

/* 30/08/2026, pedido de Javi: "los nombres de las fuentes irán precedidas
   de dos checkbox" — "seleccionada" (a mano, decide qué fuentes entran en
   depurar/interpretar/embeddings/tratamiento completo; icono 🧹 porque
   depurar = limpiar) y "tratada" (de solo lectura: se marca sola en cuanto
   la fuente ya tiene versión depurada; icono 💧 porque ya se ha lavado — a
   juego con la 🧹 de "seleccionada"). Javi pidió icono en vez de dejarlos en
   blanco, "si es significativo" — de ahí la elección ligada al propio
   significado de cada checkbox, no decorativa.
   Ampliado el mismo día tras preguntar "¿aparecerán otros checks?": dos
   checkboxes de solo lectura más, mismo patrón — "interpretada" (🧠, ya se
   extrajeron sus objetos de conocimiento) y "vectorizada" (🔎, ya tiene
   embeddings, buscable "por significado" en Consulta).
   30/08/2026, segunda vuelta: el icono original de "tratada" era ✅, pero
   Javi señaló que un check verde JUNTO a una casilla real confundía — parecía
   que la casilla ya estaba marcada aunque no lo estuviera. Cambiado a 🧼
   (un icono que no se parece a un estado de "marcado") para que la única
   marca de check visible sea la casilla de verdad.
   31/08/2026, tercera vuelta: 🧼 tampoco funcionó — Javi no lo distinguía
   bien (se ve como una mancha verde borrosa en muchas fuentes/tamaños).
   Se le ofrecieron varias opciones (🧽/⭐/💧/🟢/📦) y eligió 💧 — nítida a
   cualquier tamaño, sigue la idea de "limpieza" a juego con 🧹, y no se
   parece a ningún estado de "marcado". */
.source-row-checks {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.source-check-label {
  /* 15/09/2026, pedido de Javi: los checks en línea con el nombre del
     fichero (no apilados encima, que añadía altura a la fila), y su
     etiqueta de texto oculta salvo al pasar el ratón por encima. */
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.source-check-icon {
  font-size: 0.85rem;
  line-height: 1;
}

/* Etiqueta visible junto al icono (15/09/2026, pedido de Javi): antes solo
   se explicaba en el title (tooltip al pasar el ratón), así que a simple
   vista los iconos no decían nada. */
.source-check-text {
  /* 15/09/2026, pedido de Javi: ya no se ve siempre -- aparece como una
     pequeña etiqueta flotante encima del check solo al pasar el ratón por
     encima de ese check en concreto. */
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.2rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: var(--panel-bg, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
  z-index: 5;
}

.source-check-label:hover .source-check-text {
  opacity: 1;
}

.source-row-checks input[type='checkbox'] {
  accent-color: var(--ok);
  cursor: pointer;
}

.source-check-tratada,
.source-check-interpretada,
.source-check-vectorizada {
  cursor: help;
}

.source-check-seleccionada:disabled {
  cursor: not-allowed;
}

.source-check-label:has(.source-check-tratada),
.source-check-label:has(.source-check-interpretada),
.source-check-label:has(.source-check-vectorizada) {
  cursor: help;
}

.source-check-label:has(.source-check-seleccionada:disabled) {
  cursor: not-allowed;
}

/* 30/08/2026, pedido de Javi: "se ve recargado" — con dos checkboxes
   nuevos delante del nombre, "Quitar" pasa de botón con texto a icono
   pequeño y discreto (mismo sitio, menos ancho). */
.icon-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.95rem;
  line-height: 1;
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
}

.icon-btn.danger {
  background: none;
  color: var(--bad);
  border-color: var(--bad);
}

.icon-btn.danger:hover {
  background: var(--bad);
  color: var(--accent-contrast);
}

.root-status {
  color: var(--muted);
  font-size: 0.8rem;
  display: block;
}

/* El meta-dato (estado, fragmentos, origen) solo se ve al abrir la fuente
   (25/08/2026) — en la lista solo se muestra el nombre. */
.source-meta {
  color: var(--muted);
  font-size: 0.8rem;
  display: none;
}

.source-row.is-open .source-meta {
  display: block;
}

.root-status.muted {
  font-style: italic;
}

/* Las filas de fuentes pueden crecer mucho al abrir el detalle — que el
   botón "Quitar" se quede arriba en vez de centrarse con toda la fila. */
.list .source-row {
  align-items: flex-start;
}

.source-row-main {
  min-width: 0;
  flex: 1 1 auto;
}

.source-row-summary {
  cursor: pointer;
}

.source-row-summary:not(.is-static):hover .source-path {
  text-decoration: underline;
}

/* 15/09/2026: una fuente "pending" no se puede abrir (no tiene contenido
   todavía) -- no debe parecer clicable. */
.source-row-summary.is-static {
  cursor: default;
}

/* 15/09/2026: una fuente pendiente nunca se puede "abrir" (no hay detalle
   que mostrar), así que su estado tiene que verse siempre, no solo al
   abrir como el resto (ver regla .source-row.is-open .source-meta). */
.source-row--pending .source-meta {
  display: block;
}

.source-detail {
  margin-top: 0.5rem;
}

.source-detail p {
  margin: 0 0 0.4rem;
}

.source-content {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  margin: 0;
}

.source-detail-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
}

.source-turns {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.source-turn {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  background: var(--bg);
}

.source-turn-noise {
  opacity: 0.6;
  border-style: dashed;
}

.source-turn-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.source-turn-content {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}

/* 15/09/2026, pedido de Javi: se quitó el panel del explorador de ficheros
   ad-hoc (navegaba el sistema de ficheros del servidor, no el Mac de Javi
   -- ver comentario en app.js/index.html). Reglas CSS eliminadas con él. */

/* --- Selector de carpeta al subir una fuente (15/09/2026) --------------- */

.folder-picker-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.75rem;
  background: var(--bg);
}

.folder-picker-name {
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.folder-picker-select-all {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.folder-picker-files {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0;
}

.folder-picker-file-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.folder-picker-file-row:hover {
  background: var(--card-bg);
}

.folder-picker-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.folder-picker-actions button {
  margin-top: 0;
}

/* --- Capturado al vuelo (28/08/2026) ------------------------------------ */

.capture-thread {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 2.5rem;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  margin: 0.6rem 0;
}

.capture-thread:empty::before {
  content: 'Escribe algo abajo para empezar.';
  color: var(--muted);
  font-size: 0.85rem;
}

.capture-message {
  max-width: 80%;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.capture-message-text {
  white-space: pre-wrap;
}

.capture-message--user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-contrast);
}

.capture-message--assistant {
  align-self: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--border);
}

.capture-citations {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  opacity: 0.85;
}

.capture-citations a {
  color: inherit;
}

/* Fuera de .inline-form a propósito (28/08/2026, pedido de Javi: "la caja
   para escribir, el micrófono y el botón de enviar en la línea siguiente
   para que la caja se pueda hacer más ancha") — como label de un form es
   un bloque normal (display:block, ver "form label" más arriba), esto ya
   ocupa toda la línea por sí solo, sin depender de ningún flex-basis. */
.capture-input-row {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}

.capture-input-row textarea {
  flex: 1 1 auto;
}

.capture-input-row button {
  flex: 0 0 auto;
  margin-top: 0;
  align-self: stretch;
}

.capture-mic-btn:disabled {
  opacity: 0.35;
}

.capture-mic-btn.capture-mic-active {
  background: var(--bad);
  color: var(--accent-contrast);
}

.capture-voice-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 220px;
}

.capture-voice-toggle input {
  width: auto;
}

#capture-new-conversation {
  background: var(--ok);
}

/* --- Chat del grafo (Consulta, 30/08/2026) — reutiliza .capture-thread/
   .capture-message/.capture-input-row tal cual, mismo look que "Capturado
   al vuelo". Solo el botón de nueva conversación necesita su propio color,
   igual que #capture-new-conversation de arriba. ------------------------- */

#graph-chat-clear {
  background: var(--ok);
}

/* --- Criterios de construcción de Conocimiento (30/08/2026) ------------- */
/* Las cajas viven sueltas dentro de .card (no dentro de <form>), así que no
   heredan el ancho/padding de "form textarea" de más arriba — se repite
   aquí lo mínimo para que se vean igual de bien. */

.criteria-textarea {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.35;
  resize: vertical;
  margin: 0.4rem 0;
}

/* 19/09/2026, pedido de Javi: mismo color que "Guardar" -- sin esta
   regla, "Restaurar" ya usa el botón azul por defecto igual que Guardar
   (ver el intento anterior, revertido: quedaba blanco sobre casi blanco). */

/* --- Ventana de progreso en vivo (Aprendizaje) -------------------------- */

/* 23/09/2026, pedido de Javi: icono con movimiento mientras el proceso
   sigue en marcha, para que no parezca colgado -- desaparece en cuanto
   termina (ver stopSpinner() en createProgressLog, app.js). */
.progress-spinner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--warn-fg);
  margin: 0.6rem 0 0;
}

.progress-spinner-icon {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--border);
  border-top-color: var(--warn-fg);
  border-radius: 50%;
  animation: progress-spin 0.8s linear infinite;
}

@keyframes progress-spin {
  to {
    transform: rotate(360deg);
  }
}

.progress-log {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  height: 240px;
  min-height: 120px;
  max-height: 80vh;
  overflow-y: auto;
  resize: vertical;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  margin: 0.6rem 0 0.5rem;
}

.progress-line.progress-final {
  font-weight: 600;
  margin-top: 0.2rem;
}

.progress-line {
  white-space: pre-wrap;
  padding: 0.08rem 0;
}

.progress-line.progress-ok {
  color: var(--ok);
}

.progress-line.progress-error {
  color: var(--bad);
}

.progress-line.warning-line {
  color: var(--warn-fg);
}

.result {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.result table {
  border-collapse: collapse;
  width: 100%;
}

.result td {
  padding: 0.15rem 0.5rem 0.15rem 0;
  vertical-align: top;
}

.result td:first-child {
  color: var(--muted);
  white-space: nowrap;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
}

.stat {
  text-align: center;
}

.stat .stat-value {
  /* 29/09/2026, pedido de Javi: contadores más discretos */
  font-size: 0.95rem;
  font-weight: 700;
}

.stat .stat-label {
  color: var(--muted);
  font-size: 0.7rem;
}

.object-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
  background: var(--card-bg);
}

.object-card .object-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.object-type-badge {
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-size: 0.72rem;
}

.object-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.object-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

pre.json-output {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  overflow-x: auto;
  font-size: 0.8rem;
}

/* --- Catálogo de tipos y sugerencias (ahora en Herramientas → Tablas,
   18/09/2026: se sacaron de Consulta y se apilan a todo el ancho en vez
   de en fila, para que la casilla de renombrar tenga sitio de sobra) --- */

/* 31/08/2026, pedido de Javi ("haz los botones más pequeños y
   discretos"): en vez del azul de acento sólido que llevan por defecto
   (pensado para el botón principal de un formulario), en Consulta pasan a
   un estilo secundario — borde fino, fondo neutro, más pequeños — para no
   competir visualmente con el contenido (catálogos, grafo, resultados de
   búsqueda). Los de "Quitar" (.danger) se quedan como estaban: siguen
   necesitando destacar por ser una acción destructiva. */
#tab-consulta button:not(.danger) {
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--border);
}

#tab-consulta button:not(.danger):hover {
  background: var(--bg);
  opacity: 1;
}

#tab-consulta button.danger {
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
}

/* 18/09/2026, pedido de Javi: el botón "Buscar" de Consulta recupera el
   azul de acento -- es la acción principal del panel, a diferencia de los
   botones discretos de arriba (Quitar, flechas del grafo...). */
#tab-consulta button.primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid transparent;
}

#tab-consulta button.primary:hover {
  background: var(--accent);
  opacity: 0.9;
}

/* Los campos "Nombre del tipo nuevo" / "Nombre del tipo de relación
   nuevo" usan el estilo genérico de "form input" (0.45rem de padding +
   1.25rem de line-height, pensado para el resto de la app) — aquí al
   lado de un botón ya achicado se veían más altos que él. Mismo ajuste
   que .type-row-label-input: igualar a la altura real del botón. */
#type-create-form input,
#relation-type-create-form input {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  line-height: 1.1rem;
}

/* 31/08/2026: quitado el <h3>Catálogo</h3> que encabezaba cada lista (era
   ruido — el <h2> de la tarjeta ya dice de qué catálogo se trata) y
   apretado el espaciado entre líneas, para que la lista de tipos
   aproveche mejor el hueco que deja el título de menos. */
.type-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0;
}

/* El botón por defecto lleva margin-top: 0.75rem (para separarse de lo
   que venga encima en un formulario normal) — dentro de .type-row eso
   descuadra el "align-items: center" de la fila: el margen asimétrico
   (solo arriba) hace que el centrado se calcule sobre una caja más alta
   por arriba, y el botón queda visualmente más bajo que la cajita de
   texto de al lado. Quitado aquí, igual que ya se hacía en
   .universe-row-actions/.source-root-row/.source-row (31/08/2026, visto
   por Javi). */
.type-row button {
  margin-top: 0;
}

.type-color-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.type-row-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  min-width: 7rem;
}

.type-row-label-input {
  flex: 1 1 auto;
  min-width: 0;
  /* Vive fuera de un <form>, así que no le llega el estilo de
     "form input" — se repite aquí a mano para que se vea igual (misma
     caja que el resto de campos de texto de la app).
     31/08/2026, pedido de Javi ("iguala la altura de las cajas de datos
     siendo los botones la referencia de altura correcta"): padding
     vertical y line-height ajustados para medir EXACTAMENTE lo mismo de
     alto que "#tab-consulta button:not(.danger)" (0.2rem + 1.1rem +
     0.2rem + el mismo borde de 1px en ambos). */
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.1rem;
}

/* 19/09/2026, pedido de Javi: fila de descripción por tipo (el tooltip
   del filtro de tipos del grafo), debajo de la fila de renombrar/quitar
   -- un poco separada y con un borde inferior tenue para distinguir
   dónde termina cada tipo en la lista. */
.type-entry {
  padding-bottom: 0.4rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.type-entry:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.type-row-description {
  padding-top: 0;
}

.type-row-description-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.82rem;
  font-family: inherit;
  line-height: 1.1rem;
}

#type-suggestions-card {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

#type-suggestions-card h3 {
  margin-top: 0;
}

.type-suggestion-row {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.type-suggestion-row:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.type-suggestion-row p {
  margin: 0 0 0.4rem;
}

/* --- Grafo de conocimiento (Consulta) ------------------------------- */

.graph-controls {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.graph-controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-end;
}

.inline-form label.graph-checkbox-label {
  /* 17/09/2026: con flex-shrink (antes 0 1 auto) esta etiqueta se
     comprimía cuando no cabía junto al botón, y su texto se partía en
     dos líneas de forma rara (el check arriba, el texto suelto abajo).
     flex-shrink:0 + nowrap mantienen el check y el texto "Vincular..."
     siempre juntos, en una sola línea, sea cual sea el ancho -- si no
     cabe con el botón, se van los dos a la línea siguiente en bloque.
     (Selector con la misma forma que ".inline-form label" para ganarle
     en especificidad -- si no, esa regla seguía mandando en `flex`.) */
  flex: 0 0 auto;
  white-space: nowrap;
  flex-direction: row !important;
  align-items: center;
  gap: 0.4rem;
}

/* 17/09/2026: caja de "Fragmentos a reprocesar" a la cuarta parte de su
   ancho anterior (pedido de Javi) -- misma técnica de especificidad que
   .graph-checkbox-label de arriba. La etiqueta se ajusta a su contenido
   (ya no crece con flex-grow) y el input queda con un ancho fijo, en
   vez del 100% que heredaba de la regla general de formularios. */
.inline-form label.reprocess-limit-label {
  flex: 0 0 auto;
}

.reprocess-limit-label input[name="limit"] {
  width: 4.5rem;
}

/* El checkbox en sí no debe heredar el "width: 100%" de los inputs de
   formulario normales -- eso lo estiraba a todo el ancho de la etiqueta,
   dejando su icono pegado a la izquierda y el texto "Vincular..." a la
   derecha, con un hueco enorme en medio. */
.graph-checkbox-label input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
}

/* Captura 2, pedido de Javi: que quepan 8 dígitos sin que se quede
   apretado. */
input[type="number"] {
  min-width: 6rem;
}

/* 19/09/2026: selector de operación booleana en "Crear grafo complejo"
   -- a diferencia de .graph-checkbox-label (pensada para etiquetas
   cortas en una sola línea), aquí el texto explicativo es largo y debe
   poder partirse en varias líneas, con el radio alineado arriba. */
.graph-operation-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.graph-operation-label input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  margin-top: 0.2rem;
}

/* 19/09/2026, pedido de Javi: etiqueta encima de las casillas de tipo,
   para que quede claro que eso filtra los TIPOS de objeto (Afirmación,
   Entidad, Hecho...), no las relaciones -- cada casilla trae además su
   propia descripción en el title (ver populateGraphTypeFilter en app.js). */
.graph-type-filter-label {
  margin: 0.3rem 0 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.graph-type-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
}

.graph-type-filter label {
  flex-direction: row !important;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: normal;
}

/* 20/09/2026, pedido de Javi: desplegable de clase (valor, creencia,
   error...) pegado a la casilla de "característica" -- mismo tamaño de
   letra que las etiquetas de al lado para que no desentone. */
.graph-characteristic-kind-filter {
  font-size: 0.82rem;
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: inherit;
}

.graph-star-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--card-bg);
  font-size: 0.85rem;
}

.graph-star-banner button {
  margin-top: 0;
  flex-shrink: 0;
}

/* 18/09/2026, pedido de Javi: un poco de aire entre la fila de botones
   de la cámara (Actualizar/Centrar/Fondo/Colorear/Salir de estrella) y el
   lienzo del grafo -- se veían pegados. */
#graph-camera-row {
  margin-bottom: 0.75rem;
}

#graph-wrap {
  position: relative;
}

#graph-container {
  width: 100%;
  height: 560px;
  border: 1px solid var(--border);
  border-radius: 8px;
  /* Fondo oscuro fijo (no depende del tema claro/oscuro de la app): la
     propia escena 3D pinta este color de fondo vía JS (backgroundColor de
     3d-force-graph) — se fija también aquí para que no haya un parpadeo
     claro antes de que WebGL termine de inicializar. */
  background: #0b1220;
}

.graph-camera-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.6rem;
}

.graph-pan-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.graph-pan-row {
  display: flex;
  gap: 0.25rem;
}

/* Con #tab-consulta delante para ganarle en especificidad a la regla
   "#tab-consulta button:not(.danger)" de más abajo (botones pequeños y
   discretos) — si no, esas flechas perderían su ancho fijo/centrado. */
#tab-consulta .graph-pan-buttons button {
  width: 2.1rem;
  padding: 0.28rem 0;
  text-align: center;
}

/* 19/09/2026, pedido de Javi: "Visualizar objetos" -- lista de texto de
   los objetos visibles en el grafo, debajo de él. Filas con las cinco
   columnas pedidas (nombre, tipo, confianza, estado, nº de relaciones),
   clicables y con foco de teclado (Intro abre el mismo panel que un clic
   en el nodo del grafo, ver renderGraphObjectsList en app.js). */
.graph-objects-panel {
  margin-top: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 0.6rem 0.75rem;
}

.graph-objects-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.graph-objects-panel-header h3 {
  margin: 0;
  font-size: 0.95rem;
}

.graph-objects-panel-header button {
  margin-top: 0;
}

.graph-objects-list {
  margin-top: 0.5rem;
  max-height: 260px;
  overflow-y: auto;
}

/* 19/09/2026, pedido de Javi: cabeceras para las columnas -- con flex no
   había garantía de que la fila de cabecera alineara con las de datos
   (columnas de ancho "natural", no fijo). Con grid y las mismas 5
   columnas en cabecera y en cada fila, alinean siempre igual. */
.graph-object-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 90px 90px 100px 90px;
  align-items: baseline;
  gap: 0 0.75rem;
  padding: 0.32rem 0.4rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}

.graph-object-row:hover,
.graph-object-row:focus {
  background: var(--bg);
  outline: none;
}

.graph-object-row-header {
  cursor: default;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
  margin-bottom: 0.15rem;
}

.graph-object-row-header:hover {
  background: none;
}

/* 19/09/2026, pedido de Javi: cada cabecera ordena por su columna al
   pulsarla -- flechita (▲/▼, vía ::after) en la que esté activa ahora
   mismo (ver updateGraphObjectsSortIndicators en app.js). */
.graph-object-row-header-cell {
  cursor: pointer;
  user-select: none;
}

.graph-object-row-header-cell:hover {
  color: var(--fg);
}

.graph-object-row-header-cell.sort-asc::after {
  content: ' ▲';
}

.graph-object-row-header-cell.sort-desc::after {
  content: ' ▼';
}

.graph-objects-sort-label {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: normal;
  margin-left: auto;
}

.graph-objects-sort-label select {
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.82rem;
  font-family: inherit;
}

.graph-object-row-title {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graph-object-row-type,
.graph-object-row-confidence,
.graph-object-row-status,
.graph-object-row-degree {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.graph-node-info {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 300px;
  max-height: calc(100% - 1.5rem);
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 0.85rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.graph-node-info h4 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

.graph-node-info dt {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 0.4rem;
}

.graph-node-info dd {
  margin: 0;
  white-space: pre-wrap;
}

.graph-star-actions {
  margin-top: 0.6rem;
}

.graph-star-actions button {
  margin-top: 0;
  margin-right: 0.4rem;
}

.d-status-select {
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.82rem;
  font-family: inherit;
  line-height: 1.15rem;
}

.d-status-feedback {
  margin-left: 0.4rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.graph-node-info .provenance-entry {
  padding: 0.3rem 0;
  font-size: 0.78rem;
  white-space: normal;
}

.graph-node-info .hint {
  font-size: 0.72rem;
  margin-top: 0.6rem;
}

.graph-node-info button {
  margin-top: 0.6rem;
}

/* Panel explicativo de Aprendizaje (26/08/2026): a la izquierda, vertical,
   redimensionable con el tirador nativo del navegador (resize: both) para
   hacerlo mas o menos alto/ancho segun haga falta. */
.aprendizaje-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Panel horizontal (26/08/2026): antes era una barra lateral estrecha y
   alta, que desaprovechaba el ancho de pantalla. Ahora va en una fila junto
   al gráfico del pipeline — reparte los tres pasos en columnas, mas corto,
   mas equilibrado. Sigue siendo redimensionable (el tirador de la esquina)
   por si Javi quiere verlo mas alto o mas ancho. */
.aprendizaje-top-row {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
  flex-wrap: wrap;
}

/* 18/09/2026, pedido de Javi: "Progreso del pipeline" ya no comparte fila
   con el diagrama (sube a debajo del título, ver .pipeline-panel--horizontal
   más abajo) -- el diagrama usa él solo todo el ancho liberado. */
.aprendizaje-diagram-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

#learn-diagram-card {
  flex: 1 1 100%;
  min-width: 320px;
  margin: 0;
}

.explainer-panel {
  flex: 2 1 380px;
  min-width: 260px;
  height: 220px;
  min-height: 120px;
  max-height: 70vh;
  overflow: auto;
  resize: both;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  box-sizing: border-box;
}

.explainer-panel h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.explainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem 1.5rem;
}

.explainer-grid h3 {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}

.explainer-grid p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}



/* Gráfico pequeño del pipeline (26/08/2026): Fuentes - Lotes (fragmentos
   interpretados) - Fragmentos - Vectores, a la derecha del panel
   explicativo. Cada etapa con "pendiente" real conocido (todas menos
   Fragmentos, que es el total de referencia) lleva su barra de progreso. */
.pipeline-panel {
  flex: 1 1 220px;
  min-width: 200px;
  height: auto;
  overflow: visible;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  box-sizing: border-box;
}

/* 18/09/2026: versión de "Progreso del pipeline" a todo el ancho, debajo
   del título -- las etapas se reparten en fila con más aire entre ellas. */
.pipeline-panel--horizontal {
  margin-bottom: 1.25rem;
  padding: 1.5rem 1.75rem;
}

.pipeline-panel--horizontal .pipeline-stages {
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 90px;
}

.pipeline-panel--horizontal .pipeline-stage {
  flex: 1 1 0;
}

.pipeline-panel--horizontal .pipeline-value {
  font-size: 1.8rem;
}

.pipeline-panel--horizontal .pipeline-label {
  font-size: 0.85rem;
}

/* 18/09/2026, pedido de Javi: cabecera del diagrama con el botón nuevo
   "Ejecutar todo" a la derecha del título. */
.learn-diagram-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.learn-diagram-header h2 {
  margin: 0;
}

.learn-flow-run-all-btn {
  font-family: inherit;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  /* 18/09/2026, pedido de Javi: verde (de la propia gama, var(--ok)) en
     vez del azul de --accent, para distinguirlo de las píldoras de fase. */
  background: var(--ok);
  color: var(--accent-contrast);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}

.learn-flow-run-all-btn:hover {
  filter: brightness(1.1);
}

.learn-flow-run-all-btn:active {
  filter: brightness(0.95);
}

.learn-flow-run-all-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.pipeline-panel h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.pipeline-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
}

/* 17/09/2026, pedido de Javi: mismo aspecto que "Estado del universo
   activo" (número grande arriba, etiqueta pequeña debajo, en fila) --
   pero sin perder la barra de progreso, el pendiente ni el coste
   estimado de cada etapa, así que cada .pipeline-stage sigue siendo una
   columna, solo que ahora se reordena visualmente con `order` para que
   el número quede primero. */
.pipeline-stage {
  flex: 1 1 130px;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pipeline-label {
  order: 2;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.pipeline-value {
  order: 1;
  font-size: 1.4rem;
  font-weight: 700;
}

.pipeline-pending {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.65rem;
  display: block;
}

.pipeline-bar {
  order: 3;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-top: 0.35rem;
}

.pipeline-bar-fill {
  height: 100%;
  background: var(--accent);
}

.pipeline-cost {
  order: 4;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--muted);
  margin-top: 0.15rem;
}

.aprendizaje-main {
  min-width: 0;
}

.card h2 .badge {
  margin-left: 0.5rem;
  vertical-align: middle;
  font-weight: 400;
}

.cost-estimate {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.35rem 0 0.75rem;
}

/* Diagrama del proceso de Aprendizaje (28/08/2026, pedido de Javi, versión
   2 tras ver un ejemplo de referencia — "más gráfico, más visual"): un
   diagrama tipo carril/swimlane con posiciones ABSOLUTAS y fijas en px
   (no calculadas por JS, es un lienzo estático — todas las coordenadas de
   abajo, en el HTML y en el SVG, están pensadas para encajar entre sí a
   mano). Dos carriles verticales: "Tú decides" (config) a la izquierda y
   "Ground ejecuta" (acciones reales) a la derecha, con seis franjas de
   fase apiladas (0, 1, 1b, 2, 2b, 3), círculos de inicio/fin, y flechas
   discontinuas con "puertos" (los puntitos en el borde de cada caja,
   igual que el ejemplo) conectando todo. El SVG de líneas va DEBAJO de
   las cajas HTML — por eso cada trazo para unos 12px antes de tocar la
   caja de destino (si no, la caja opaca tapa la punta de flecha, el mismo
   bug que ya se arregló una vez en el diagrama de Esquema); los puntos de
   "puerto" sí se dibujan justo en el borde de la caja a propósito, para
   que la mitad quede tapada y la mitad visible, como en el ejemplo.
   Verde (--ok) sigue marcando las ACCIONES — las únicas cajas de este
   diagrama que hacen algo de verdad. */
.learn-flow-wrap {
  /* 29/08/2026, pedido de Javi: zoom con la rueda del ratón y tamaño de
     cada tarea a mano — el lienzo ya no tiene un tamaño fijo (900×1382),
     lo calcula JS cada vez (ver computeLearnFlowLayout en app.js), así que
     aquí solo hace falta un contenedor con scroll en los dos sentidos y un
     tope de alto para que no se coma la página entera.
     "position: relative" (29/08/2026, arreglo: "las flechas de unión
     están desplazadas") es IMPRESCINDIBLE — sin él, #learn-flow-svg
     (position:absolute) no tiene ningún ancestro con posición propia
     entre medias y acaba colocándose respecto a la página entera, muy
     lejos del diagrama. #learn-flow (el div con las cajas) no tenía este
     problema porque él mismo ya era "position:relative". */
  position: relative;
  overflow: auto;
  max-height: 640px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
}

.learn-flow {
  position: relative;
  font-size: 0.78rem;
  transform-origin: 0 0;
}

/* Leyenda fija (29/08/2026, pedido de Javi: "¿qué significan las
   etiquetas con líneas de puntos?") — antes solo se explicaba al pasar el
   ratón por encima de cada píldora; ahora queda a la vista todo el rato,
   sin tener que descubrirlo tarea a tarea. */
.learn-flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.4rem 0 0.6rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.learn-flow-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.learn-flow-legend-swatch {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

.learn-flow-legend-swatch--accion {
  border: 2px solid var(--ok);
}

.learn-flow-legend-swatch--tu {
  border: 2px solid var(--bad);
}

.learn-flow-legend-swatch--optional {
  border: 2px dashed var(--accent);
}

/* Barra de descripción (29/08/2026, pedido de Javi: "todas las tareas
   deben tener una pequeña descripción al pasar el ratón por encima, no
   solo un símbolo de interrogación") — antes la única pista era el
   cursor de ayuda (?) y el tooltip nativo del navegador, que tarda en
   aparecer y algunos navegadores lo recortan. Ahora cada elemento
   describible lleva también un atributo "data-desc" (ver renderLearnFlow
   en app.js) y un solo listener delegado (setupLearnFlowDescBar) lo
   vuelca aquí al instante, sin esperas. El title nativo se deja además,
   como refuerzo de accesibilidad. */
.learn-flow-desc-bar {
  margin-top: 0.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font-size: 0.8rem;
  color: var(--fg);
  min-height: 1.3em;
}

.learn-flow-procbar {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  cursor: help;
}

.learn-flow-lane-bg {
  /* 30/08/2026, pedido de Javi: "los bordes de los carriles no están
     claros" — antes este borde de 1px casi no se notaba, y encima el
     fondo opaco (var(--card-bg)) que llevaba aquí tapaba por completo el
     tinte de color de cada fase (ver .learn-flow-band--tint-N) allí donde
     coincidían — por eso ahora este elemento va SIN relleno propio (solo
     borde) y se pinta DESPUÉS de las bandas de fase en renderLearnFlow()
     (app.js), así su borde queda siempre por encima, bien visible, en
     vez de escondido debajo. El borde grueso de color a la izquierda ya
     no es una clase distinta por carril (30/08/2026: con "es necesaria
     una opción para añadir carriles" el número de carriles ya no es fijo)
     — lo pone `renderLearnFlow()` como estilo en línea, a juego con el
     color de la cabecera de ESE carril (ver LEARN_FLOW_LANE_COLORS en
     app.js), sea cual sea. Aquí solo queda un color de reserva por si
     algo fallara al ponerlo en línea. */
  position: absolute;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 8px;
  background: none;
}

.learn-flow-lane-header {
  /* Igual que arriba: el color de fondo (a juego con el borde del
     carril) lo pone renderLearnFlow() en línea, no una clase por carril
     — un carril nuevo no necesita CSS propio para tener color. */
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 700;
  color: var(--accent-contrast);
  cursor: help;
}

.learn-flow-band {
  /* 30/08/2026, arreglo: Javi preguntó "¿qué significan las etiquetas con
     líneas de puntos?" porque TODAS las bandas de fase llevaban borde
     discontinuo (solo cambiaba el color) — la leyenda decía "discontinuo
     = opcional" pero eso no era verdad en el dibujo. Ahora el discontinuo
     es EXCLUSIVO de las fases opcionales (ver --optional más abajo); una
     fase normal lleva un borde fino y sólido, de simple agrupación. */
  position: absolute;
  left: 14px;
  width: 862px;
  border: 1px solid var(--border);
  border-radius: 10px;
  pointer-events: none;
}

.learn-flow-band--optional {
  border: 2px dashed var(--accent);
}

/* Tinte de fondo por fase (30/08/2026, pedido de Javi: "utiliza más
   colores (diferentes) para destacar contenidos") — rota entre 6 colores
   suaves (ver LEARN_FLOW_PHASE_TINT_COUNT en app.js), uno distinto por
   fase, para que se distinga de un vistazo dónde acaba una y empieza la
   siguiente. El borde de discontinuo/sólido (optional o no) manda igual
   encima de esto. */
.learn-flow-band--tint-0 { background: var(--phase-tint-0); }
.learn-flow-band--tint-1 { background: var(--phase-tint-1); }
.learn-flow-band--tint-2 { background: var(--phase-tint-2); }
.learn-flow-band--tint-3 { background: var(--phase-tint-3); }
.learn-flow-band--tint-4 { background: var(--phase-tint-4); }
.learn-flow-band--tint-5 { background: var(--phase-tint-5); }

.learn-flow-pill {
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  font-size: 0.74rem;
  line-height: 1.25;
  text-align: center;
  cursor: help;
  z-index: 1;
  /* 17/09/2026, pedido de Javi: los títulos largos ("Extracción de
     Objetos y Relaciones de Conocimiento según criterios") se salían de
     su caja y pisaban la etiqueta de al lado -- ahora cada etiqueta mide
     como mucho lo que mide la caja que tiene debajo (ver createLearn-
     FlowBandAndBox en app.js, que le pone su ancho en línea) y el texto
     se reparte en dos o más líneas en vez de desbordar. */
  white-space: normal;
}

/* 17/09/2026, pedido de Javi: las fases con engranaje se pueden lanzar
   directamente desde el diagrama (de momento solo Vectorización, como
   prueba) -- son un <button>, no un <span>, así que hace falta resetear
   los estilos por defecto del navegador para que se vean igual que
   antes, más un hover sutil para que se note que son pulsables. */
.learn-flow-pill {
  font-family: inherit;
  border: none;
  /* 17/09/2026: un <button> con "appearance" nativo del navegador trae su
     propia altura mínima de control (independiente del padding/line-height
     que le pongamos), así que sin esto queda más alto que la medición y
     se monta sobre la fase siguiente. */
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  margin: 0;
  height: auto;
  min-height: 0;
  vertical-align: top;
}

.learn-flow-pill--action:hover {
  filter: brightness(1.1);
}

.learn-flow-pill--action:active {
  filter: brightness(0.95);
}

.learn-flow-pill-count {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  font-weight: 700;
}

.learn-flow-pill--optional {
  background: var(--card-bg);
  border: 2px dashed var(--accent);
  color: var(--accent);
}

.learn-flow-svg {
  position: absolute;
  top: 0;
  left: 0;
  /* Ancho/alto ya no van aquí (29/08/2026): renderLearnFlow() en app.js
     los pone en línea, iguales a los del lienzo de al lado, cada vez que
     recalcula el diagrama. pointer-events:none para que el tirador de
     redimensionar de una tarea (que vive por encima, en el HTML) no quede
     nunca tapado por esta capa de líneas.
     z-index (30/08/2026, arreglo: "las líneas de flujo no se muestran
     completas") — el SVG es hermano de #learn-flow (el div con las
     cajas), colocado ANTES que él en el HTML, así que sin z-index propio
     quedaba por debajo de TODO lo de #learn-flow: el fondo opaco de cada
     carril (.learn-flow-lane-bg) y de cada banda de fase (.learn-flow-band)
     tapaba el trazo entero, y solo se veía el trocito que caía en el
     hueco vacío entre carriles. z-index:1 lo sube por encima de esos
     fondos (que no tienen z-index propio, valen 0) pero lo deja empatado
     con las cajas/círculos/píldoras (que también valen 1) — en un empate,
     gana quien va después en el HTML, o sea las cajas, así que el trocito
     de puerto que toca el borde de una caja se sigue viendo medio tapado
     a propósito, como estaba pensado. */
  z-index: 1;
  pointer-events: none;
  transform-origin: 0 0;
}

.learn-flow-conn {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-dasharray: 5, 4;
}

/* Punta de flecha (30/08/2026, arreglo: "las líneas de flujo deben tocar
   la línea perimetral del objeto de entrada y de salida"). Ya no es un
   <marker> de SVG con la línea acortada antes de llegar — es un triángulo
   calculado a mano en drawLearnFlowConnections (app.js): la PUNTA toca
   exactamente el borde de la caja de destino (igual que la propia línea)
   y es la BASE del triángulo la que queda un poco por detrás, hacia el
   hueco abierto — así el triángulo entero cae fuera de la caja (nunca
   tapado por su fondo opaco) sin que la línea deje de tocar el borde. */
.learn-flow-arrowhead {
  fill: var(--muted);
}

/* Solo en el extremo de SALIDA (30/08/2026): el de llegada ya lo marca la
   punta de flecha, que toca ese mismo borde — un segundo punto ahí solo
   añadía ruido visual sin aportar nada nuevo. */
.learn-flow-dot {
  fill: var(--fg);
}

.learn-flow-event {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card-bg);
  font-size: 0.68rem;
  line-height: 1.1;
  text-align: center;
  cursor: help;
  z-index: 1;
}

.learn-flow-event--start {
  border: 2px solid var(--accent);
  color: var(--accent);
}

.learn-flow-event--end {
  border: 2px solid var(--bad);
  color: var(--bad);
}

.learn-flow-box {
  position: absolute;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 0.15rem 0.5rem;
  background: var(--bg);
  cursor: help;
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.learn-flow-box--tu {
  border: 2px solid var(--bad);
}

.learn-flow-box--accion {
  border: 2px solid var(--ok);
}

.learn-flow-box.is-resizing {
  z-index: 5;
}

/* Tirador de la esquina inferior derecha de cada tarea (29/08/2026,
   pedido de Javi: "todas las tareas puedan modificar su tamaño") — mismo
   dibujo a rayas que el de las tarjetas de Esquema, para que se reconozca
   de un vistazo que hace lo mismo. */
.learn-flow-box-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  z-index: 3;
  background:
    linear-gradient(135deg, transparent 0 40%, var(--muted) 40% 55%, transparent 55% 100%),
    linear-gradient(135deg, transparent 0 65%, var(--muted) 65% 80%, transparent 80% 100%);
}

.learn-flow-box-title {
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.15;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 17/09/2026, pedido de Javi: la caja ya no repite el título (ver
   createLearnFlowBandAndBox en app.js, lo hace la etiqueta de arriba) --
   solo se queda el check de "acción real", centrado en la caja. */
.learn-flow-box--accion::before {
  content: '✓';
  color: var(--ok);
  font-weight: 700;
}

.learn-flow-box-list {
  margin: 0;
  padding-left: 1rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.learn-flow-action-steps {
  display: flex;
  flex-direction: column;
  margin-top: 0.75rem;
}

.learn-flow-action-step {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.learn-flow-action-step-marker {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
}

.learn-flow-action-step-text {
  padding-top: 0.22rem;
  line-height: 1.4;
}

.learn-flow-action-step-connector {
  width: 1.7rem;
  text-align: center;
  color: var(--muted);
  line-height: 1.1;
}

/* Edición del diagrama (30/08/2026, pedido de Javi: "permite editar el
   diagrama, mover situación, añadir o eliminar tareas, líneas de flujo y
   eventos de inicio y fin, y editar textos"). El diagrama sigue siendo de
   ajuste automático (fases/carriles se recalculan solos, ver
   computeLearnFlowLayout) — "mover" una tarea aquí es cambiarla de fase o
   de carril desde el formulario, o subirla/bajarla dentro de su columna
   con ▲/▼, no arrastrarla a un punto libre; así no se pierde el reajuste
   automático que Javi ya pidió y le gustó. Todo se guarda en
   localStorage del navegador (state.learnFlow.doc) — no toca la base de
   datos ni el servidor, es solo la vista de este diagrama. */
.learn-flow-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 0.6rem;
}

.learn-flow-toolbar button {
  margin-top: 0;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
}

.learn-flow-toolbar button.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

/* Mini barra ✏️/▲/▼/🗑️ en la esquina superior derecha de cada tarea en
   modo edición — la esquina inferior derecha ya la ocupa el tirador de
   redimensionar, por eso esta va arriba. */
.learn-flow-node-toolbar {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 2px;
  z-index: 3;
}

.learn-flow-node-toolbar button {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  font-size: 0.65rem;
  line-height: 1;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  cursor: pointer;
}

.learn-flow-node-toolbar button:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}

.learn-flow-phase-add {
  position: absolute;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  z-index: 2;
}

.learn-flow-phase-add:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}

.learn-flow-new-phase-btn {
  position: absolute;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  margin: 0;
}

.learn-flow-new-phase-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Modo "nueva conexión" activo: el cursor avisa de que el próximo clic en
   una tarea la usa como origen o destino, en vez de no hacer nada. */
.learn-flow.is-connect-mode .learn-flow-box,
.learn-flow.is-connect-mode .learn-flow-event {
  cursor: crosshair;
}

.learn-flow-box.is-connect-source,
.learn-flow-event.is-connect-source {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

/* Botón de borrar una conexión, en el punto medio de su línea (solo en
   modo edición). pointer-events:auto reactiva los clics en este grupo
   aunque el SVG entero los tenga desactivados (ver .learn-flow-svg). */
.learn-flow-edge-delete {
  pointer-events: auto;
  cursor: pointer;
}

.learn-flow-edge-delete-bg {
  fill: var(--bad);
  opacity: 0.85;
}

.learn-flow-edge-delete-x {
  fill: #fff;
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

.learn-flow-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.learn-flow-form-row label {
  font-weight: 600;
  font-size: 0.8rem;
}

.learn-flow-form-row input[type='text'],
.learn-flow-form-row textarea,
.learn-flow-form-row select {
  width: 100%;
  box-sizing: border-box;
}

.learn-flow-form-row textarea {
  min-height: 3.5rem;
  resize: vertical;
}

.learn-flow-form-inline {
  display: flex;
  gap: 0.75rem;
}

.learn-flow-form-inline > .learn-flow-form-row {
  flex: 1;
  margin-top: 0.75rem;
}

.learn-flow-step-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.4rem;
}

.learn-flow-step-row input {
  flex: 1;
}

.learn-flow-step-remove {
  margin-top: 0;
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
}

.learn-flow-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.learn-flow-form-actions-right {
  display: flex;
  gap: 0.5rem;
}

.learn-flow-form-actions button {
  margin-top: 0;
}

/* Sin esta línea, el atributo hidden no hace nada: una hoja de estilos
   propia (esta) siempre gana a la regla por defecto del navegador. */
[hidden] { display: none !important; }

/* Editor de index.html (28/08/2026, pedido de Javi: "botón de guardar +
   revisar sintaxis"; sub-pestañas Textos/HTML añadidas el mismo día tras
   ver el HTML crudo con &quot; por todas partes). */
.editor-subtabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.editor-subtab-button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 0.45rem 0.7rem;
  font-size: 0.88rem;
  cursor: pointer;
}

.editor-subtab-button.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* Una tarjeta por texto editable — misma base visual que .card para no
   inventar un lenguaje visual nuevo solo para esto. */
.editor-descriptions-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.editor-description-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 1rem;
}

.editor-description-card > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.editor-description-card textarea {
  width: 100%;
  min-height: 4.5rem;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.88rem;
  font-family: inherit;
  line-height: 1.4;
  resize: vertical;
}

/* Se marca en cuanto Javi toca una tarjeta, para que quede claro qué
   textos se van a guardar con "Guardar todo" (28/08/2026). */
.editor-description-card.is-dirty {
  border-color: var(--accent);
}

/* Etiquetas editables de tabla/columna en "Etiquetas y notas" (28/08/2026,
   pedido de Javi: "poder modificar también las etiquetas de las columnas
   y campos"). El input de etiqueta va antes que la nota, para que quede
   claro que es lo primero que se lee; visualmente más compacto que un
   textarea porque es solo una línea. */
.editor-label-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
}

/* Cabecera de cada tabla dentro de "Etiquetas y notas" — antes era un
   <h3> de solo texto (schema-domain-heading); ahora es un input para
   poder editar el nombre de la tabla igual que el de cada columna, pero
   conserva el aspecto de cabecera (letra más grande, sin caja visible
   hasta que se toca). */
.editor-table-label-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0.6rem 0 0.3rem;
  padding: 0.2rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
}

.editor-table-label-input:hover,
.editor-table-label-input:focus {
  border-color: var(--border);
  background: var(--card-bg);
  outline: none;
}

.editor-table-label-input:first-child {
  margin-top: 0;
}

/* Nombre técnico real de la tabla, junto a su etiqueta editable — para
   que Javi siempre sepa a qué tabla física corresponde aunque le haya
   puesto un nombre distinto. */
.editor-table-key-note {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 400;
  margin-left: 0.4rem;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.editor-toolbar button {
  margin-top: 0;
}

.editor-status {
  font-size: 0.85rem;
  color: var(--muted);
}

.editor-status.is-ok {
  color: var(--ok);
}

.editor-status.is-error {
  color: var(--bad);
}

.editor-issues {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
}

.editor-issues p {
  margin: 0 0 0.3rem;
  font-weight: 600;
}

.editor-issues ul {
  margin: 0;
  padding-left: 1.2rem;
}

.editor-textarea {
  width: 100%;
  min-height: 60vh;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--fg);
  resize: vertical;
  tab-size: 2;
}

/* Botón "Subir" (28/08/2026, pedido de Javi: fijo, visible siempre haya
   scroll o no — a diferencia de otros sitios donde solo aparece al
   bajar). Flotante en la esquina, por encima de todo lo demás. */
.scroll-top-button {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 20;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.scroll-top-button:hover {
  background: var(--bg);
}

/* --- Síntesis (31/08/2026) ------------------------------------------------
   Historial de versiones (lista de botones, un clic abre la vista previa)
   + tarjeta de vista previa con índice y descargas. Reutiliza .card,
   .hint, .warning, .result ya existentes — solo lo específico de esta
   pestaña vive aquí. */

.sintesis-version-row {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}

.sintesis-version-row:last-child {
  border-bottom: none;
}

.sintesis-version-open {
  width: 100%;
  text-align: left;
  background: none;
  color: var(--fg);
  border: none;
  margin-top: 0;
  padding: 0.3rem 0.1rem;
  font-size: 0.88rem;
}

.sintesis-version-open:hover {
  color: var(--accent);
  opacity: 1;
}

.sintesis-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sintesis-preview-actions {
  display: flex;
  gap: 0.5rem;
}

.sintesis-download-link {
  font-size: 0.8rem;
  padding: 0.28rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  text-decoration: none;
}

.sintesis-download-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.sintesis-preview-body {
  max-width: 70ch;
  margin-top: 0.75rem;
}

.sintesis-preview-body h3 {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.sintesis-index {
  list-style: disc;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.sintesis-preview-body p {
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Bloqueo de acceso (09/09/2026, "menú + bloqueo real") — ver
   #acceso-denegado en index.html y comprobarAcceso() en app.js. */
.acceso-denegado {
  max-width: 32rem;
  margin: 4rem auto;
  padding: 2rem;
  text-align: center;
}

.acceso-denegado h1 {
  margin-bottom: 1rem;
}


/* 17/09/2026, pedido de Javi: el texto explicativo bajo "Diagrama del
   proceso" estaba siempre visible y ocupaba sitio -- ahora solo aparece
   al pasar el ratón por encima del título, como el resto de ayudas del
   diagrama. */
#learn-diagram-title {
  cursor: help;
}

#learn-diagram-hint,
.learn-flow-legend {
  display: none;
}

#learn-diagram-title:hover + #learn-diagram-hint,
#learn-diagram-title:hover ~ .learn-flow-legend {
  display: flex;
}

#learn-diagram-title:hover + #learn-diagram-hint {
  display: block;
}


/* 17/09/2026, pedido de Javi: la descripción de "Captura al vuelo" ya no
   está siempre visible debajo del título -- aparece al pasar el ratón por
   encima, igual que "Diagrama del proceso", y con letra más grande que el
   tooltip nativo del navegador (que además tardaba en aparecer). */
#capture-title {
  cursor: help;
}

#capture-hint {
  display: none;
  font-size: 0.95rem;
}

#capture-title:hover + #capture-hint {
  display: block;
}


/* 17/09/2026, pedido de Javi: las ayudas con fondo sepia (avisos de coste
   o de acción destructiva) ya no están siempre visibles debajo del
   título -- pasan a la ayuda del propio título, igual que en el resto de
   la app (Diagrama del proceso, Captura al vuelo...). */
.help-title {
  cursor: help;
}

.help-title ~ .warning,
.help-title ~ .cost-estimate,
.help-title ~ .hint {
  display: none;
}

.help-title:hover ~ .warning,
.help-title:hover ~ .cost-estimate,
.help-title:hover ~ .hint {
  display: block;
}

/* Las etiquetas de los pasos que tienen coste real se pintan en el mismo
   tono sepia que sus avisos, para distinguirlas de un vistazo de los
   pasos gratis (Cargar fuentes / Segmentación). */
.cost-title {
  color: var(--warn-fg);
}

/* 17/09/2026, pedido de Javi: en la tarjeta "1b" el botón de acción sube
   a la misma línea que el título, en vez de quedar suelto al final tras
   los textos de ayuda (que están ocultos hasta hover). Grid con el h2 y
   el form explícitamente en la fila 1; el resto de hijos (avisos, coste,
   pista, resultado) ocupan su propia fila a todo lo ancho, en el mismo
   orden en que ya estaban en el HTML -- no cambia nada visualmente para
   ellos, solo para el título y el botón. */
.card-header-inline {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  align-items: start;
}

.card-header-inline > h2 {
  grid-column: 1;
  grid-row: 1;
}

.card-header-inline > .inline-form {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.card-header-inline > .warning,
.card-header-inline > .cost-estimate,
.card-header-inline > .hint,
.card-header-inline > .result {
  grid-column: 1 / -1;
}


/* 17/09/2026, pedido de Javi: estos botones sueltos (sin checkbox
   delante) pasan a la derecha en vez de a la izquierda. */
.btn-right {
  display: block;
  margin-left: auto;
}

.pattern-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  margin: 0.5rem 0;
}
.pattern-group p {
  margin: 0.2rem 0;
}

/* --- Mesa de mezclas (23/09/2026) ------------------------------------------
   Vista dentro del detalle de una fuente de audio de tipo "musica" (mismo
   patrón que "ver objetos"/"ver segmentación"). Cabecera con el análisis +
   un canal por instrumento con volumen/mute/graves-agudos/balance +
   partitura ABC. Minimalista: reutiliza .card/.hint/.border ya existentes,
   solo lo específico de esta vista vive aquí. */

.mezclas-header {
  /* 05/10/2026 (pedido de Javi): la cabecera en UNA sola línea */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.2rem;
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  margin-bottom: 0.75rem;
}

.mezclas-header-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}
.mezclas-header-field select { padding: 0.15rem 0.3rem !important; }
.mezclas-header-inst { min-width: 0; flex: 1 1 auto; }
.mezclas-header-inst > span { overflow: hidden; text-overflow: ellipsis; }

.mezclas-header-field label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mezclas-header-field select {
  font: inherit;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}

.mezclas-original {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.mezclas-original audio {
  flex: 1;
  min-width: 0;
}

.mezclas-transport {
  display: flex;
  align-items: center;
}

.mezclas-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.mezclas-channel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mezclas-channel-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mezclas-channel-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.mezclas-channel-row input[type="range"] {
  width: 100%;
}

.mezclas-channel-mute {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--fg);
}

.mezclas-abc {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem;
  background: var(--card-bg);
}

/* 28/09/2026: Herramientas → Modelos → Oído de audio */
.oido-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem 1rem; margin: 0.8rem 0; }
.oido-grid label, .oido-listas label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.oido-listas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem 1rem; }
.oido-listas textarea { font-family: inherit; font-size: 0.85rem; }
#oido-resultados table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.9rem; }
#oido-resultados td, #oido-resultados th { border-bottom: 1px solid var(--border, #ddd); padding: 0.35rem 0.5rem; text-align: left; vertical-align: top; }
#oido-resultados details { font-size: 0.8rem; }

/* 28/09/2026: mesa de mezclas — posición, Solo/Mute, canal apagado */
.mezclas-posicion { width: 100%; margin: 0.4rem 0 0.8rem; }
.mezclas-tiempo { font-variant-numeric: tabular-nums; min-width: 6.5rem; }
.mezclas-master { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.mezclas-channel-botones { display: inline-flex; gap: 0.25rem; }
.mezclas-channel-botones button { min-width: 2rem; padding: 0.1rem 0.4rem; font-weight: 700; }
.mezclas-btn-mute.activo { background: #c0392b; color: #fff; border-color: #c0392b; }
.mezclas-btn-solo.activo { background: #e1a100; color: #fff; border-color: #e1a100; }
.mezclas-channel.apagado { opacity: 0.45; }

.mezclas-reanalizar { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 0; }

/* 28/09/2026: partitura con sonido */
.mezclas-ver-partitura { display: block; margin: 0.8rem 0 0.4rem; }
.mezclas-abc-audio { margin: 0.4rem 0 0.6rem; }
.mezclas-abc .abcjs-nota-sonando { fill: #c0392b; stroke: #c0392b; }

/* 28/09/2026: Herramientas → Instrumentos */
.inst-tabla-wrap { overflow-x: auto; }
.inst-tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.inst-tabla th, .inst-tabla td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border, #ddd); vertical-align: middle; }
.inst-color { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; }
.inst-juegos { font-weight: 700; }
.inst-dialogo { border: 1px solid var(--border, #ccc); border-radius: 12px; padding: 1.2rem; width: min(760px, 94vw); }
.inst-dialogo::backdrop { background: rgba(0,0,0,0.35); }
.inst-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem 1rem; margin-bottom: 0.8rem; }
.inst-campos label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.inst-campos .inst-ancho { grid-column: 1 / -1; }

/* 28/09/2026: sistema de 12 líneas en la mesa de mezclas (boceto "Mesa de mezclas — Ground", v16) */
.mz-ctrl-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8a8577; }
.mz-notacion { display: flex; align-items: center; gap: 14px; margin: 0.6rem 0 0.9rem; flex-wrap: wrap; }
.mz-seg { display: flex; }
.mz-seg button { border: 1px solid #ddd9d0; background: #ffffff; color: #4a463e; font-size: 13px; font-weight: 600; padding: 8px 16px; cursor: pointer; border-radius: 0; margin: 0; }
.mz-seg button:first-child { border-radius: 8px 0 0 8px; }
.mz-seg button:last-child { border-radius: 0 8px 8px 0; }
.mz-seg button + button { border-left: none; }
.mz-seg button.active { background: #e8a33d; color: #1a1200; border-color: #e8a33d; font-weight: 700; }
.mz-seg button:disabled { opacity: .45; cursor: not-allowed; }
.mezclas-abc-texto { border: 1px solid #ddd9d0; border-radius: 8px; padding: 0.6rem; background: #f6f5f3; overflow-x: auto; font-size: 12px; }

.mz12-top { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0.9rem; }
.mz12-leyenda { background: #f6f5f3; border: 1px solid #ddd9d0; border-radius: 12px; padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.mz12-leyenda-fila { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.mz12-leyenda-fila > span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: #6b6659; }
.mz12-leyenda-fila i { display: block; height: 15px; border-radius: 4px; background: #b0aa9a; }
.mz12-posicion { position: relative; background: #f6f5f3; border: 1px solid #ddd9d0; border-radius: 8px; cursor: pointer; touch-action: none; }
.mz12-banda { position: absolute; top: 3px; bottom: 3px; left: 0; width: 10%; background: #e8a33d; opacity: .35; border: 1px solid #e8a33d; border-radius: 5px; }

/* con 12 líneas, cada canal pasa a ser una fila: controles a la izquierda, líneas a la derecha */
.mz12-on .mezclas-channels { display: flex; flex-direction: column; }
.mz12-on .mezclas-channel { grid-auto-flow: row dense; column-gap: 12px; row-gap: 0; background: #f6f5f3; border: 1px solid #ddd9d0; }
.mz12-on .mezclas-channel > *:not(.mz12-zona) { grid-column: 1; margin-bottom: 6px; } /* 06/10: sin huecos de filas vacías (altura = lo más alto de las dos columnas) */
.mz12-on .mezclas-channel > .mz12-zona { grid-column: 2; }
.mz12-cab { display: flex; flex-direction: column; gap: 4px; }
.mz12-inst { display: flex; align-items: center; gap: 8px; }
.mz12-inicial { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #14161a; flex-shrink: 0; }
.mz12-plegar { margin-left: auto; width: 30px; height: 30px; border-radius: 7px; border: 1px solid #ddd9d0; background: #fff; color: #4a463e; cursor: pointer; padding: 0; }
.mz12-badge { font-size: 9px; font-weight: 700; color: #e8a33d; }
.mz12-zona { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mz12-zona.plegada > * { display: none; }
.mz12-grupo { font-size: 13px; font-weight: 700; color: #1a5fd0; text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.mz12-fila { display: flex; gap: 12px; }
.mz12-etiquetas { width: 26px; flex-shrink: 0; background: #ffffff; border: 1px solid #ddd9d0; border-radius: 8px; }
.mz12-etiquetas div { position: absolute; right: 8px; transform: translateY(-50%); font-size: 10px; color: #6b6659; font-family: 'SFMono-Regular', Menlo, monospace; }
.mz12-lienzo { overflow: hidden; background: #ffffff; border: 1px solid #ddd9d0; border-radius: 8px; flex-grow: 1; }
.mz12-lienzo svg { display: block; width: 100%; height: 150px; }
.mz12-linea { stroke-width: 1; }
.mz12-linea.iluminada, .mz12-linea.sonando { stroke-width: 2; }
.mz12-nota { cursor: default; }
.mz12-nota.marcada rect, .mz12-nota.sonando rect { stroke: #e8a33d; stroke-width: 2.5; }
.mz12-t1 { fill: #14161a; font-weight: 700; text-anchor: middle; font-family: 'SFMono-Regular', Menlo, monospace; pointer-events: none; }
.mz12-t2 { fill: #14161a; text-anchor: middle; font-family: 'SFMono-Regular', Menlo, monospace; opacity: .7; pointer-events: none; }
.mz12-cabezal { stroke: #e8a33d; stroke-width: 1.5; opacity: .8; }

/* 28/09/2026: cada aplicación (Texto / Música) enseña solo lo suyo */
body.tipo-sonido .solo-texto, body.tipo-texto .solo-sonido { display: none !important; }

/* 30/09/2026 (multitenant): los tipos de objeto y de relación solo los
   cambia el administrador de la organización -- el resto solo los ve. */
body.no-admin #type-create-form,
body.no-admin #relation-type-create-form,
body.no-admin .type-row-rename,
body.no-admin .type-row-delete,
body.no-admin .type-row-description-save,
body.no-admin .s-adopt { display: none; }
body.no-admin .type-row-label-input,
body.no-admin .type-row-description-input { pointer-events: none; border-color: transparent; background: transparent; }
.selector-catalogo { display: block; margin: 0 0 10px; }
.selector-catalogo select { margin-left: 6px; }
/* 30/09/2026: la cabecera lleva entorno · org · usuario · email · tipo;
   si no cabe, se recorta con "…" (el texto completo sale al pasar el ratón). */
.organizacion-label { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==== Herramientas → Escalas y modos (03/10/2026) ==== */
.esc-btn-ayuda { font-size: 0.85rem; margin-left: 0.6rem; vertical-align: middle; }
.esc-btn-ayuda.esc-activo { background: var(--accent); color: var(--accent-contrast); }
.esc-ayuda dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; font-size: 0.9rem; }
.esc-ayuda dt { font-weight: 600; }
.esc-ayuda dd { margin: 0; color: var(--fg); line-height: 1.45; }
.esc-layout { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 1rem; align-items: start; }
.esc-layout > .card { margin: 0; }
.esc-lista-card { position: sticky; top: 0.5rem; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; gap: 0.5rem; }
.esc-lista-cab { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.esc-lista { overflow-y: auto; flex: 1; }
.esc-grupo { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0.8rem 0 0.2rem; }
.esc-grupo span { font-weight: 400; }
.esc-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 0.3rem 0.45rem; cursor: pointer; color: var(--fg); }
.esc-item:hover { background: var(--border); }
.esc-item-sel { background: var(--accent); color: var(--accent-contrast); }
.esc-item-sel .esc-item-f { color: inherit; opacity: 0.85; }
.esc-item-n { display: block; font-size: 0.92rem; }
.esc-item-f { display: block; font-size: 0.75rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.esc-grado { display: inline-block; min-width: 1.4em; margin-right: 0.3rem; color: var(--accent); }
.esc-item-sel .esc-grado { color: inherit; }
.esc-cab { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; }
.esc-cab label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--muted); }
.esc-cab .esc-ancho { flex: 1 1 260px; }
.esc-cab input, .esc-cab select { font-size: 0.95rem; }
.esc-q { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; border-radius: 50%; font-size: 0.7rem; background: var(--border); color: var(--fg); margin-left: 0.2rem; }
.esc-barra { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.9rem 0 0.6rem; }
.esc-resumen { font-size: 0.88rem; color: var(--muted); }
.esc-resumen strong { color: var(--fg); font-family: ui-monospace, Menlo, monospace; }
.esc-doce-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.esc-doce { border-collapse: collapse; width: 100%; }
.esc-doce tr { height: 2.1rem; }
.esc-doce tr td, .esc-doce tr th { border-bottom: 1px solid var(--border); padding: 0 0.25rem; }
.esc-doce tr.esc-alterada { background: rgba(127, 127, 127, 0.08); }
.esc-doce th { width: 6.5rem; text-align: left; font-weight: 400; }
.esc-doce td { text-align: center; min-width: 3.4rem; }
.esc-linea { display: flex; align-items: center; gap: 0.35rem; width: 100%; background: none; border: 0; padding: 0.15rem 0.2rem; cursor: pointer; color: var(--fg); border-radius: 4px; }
.esc-linea:hover { background: var(--border); }
.esc-linea-n { font-weight: 600; min-width: 1.8em; font-family: ui-monospace, Menlo, monospace; }
.esc-linea-r { color: var(--muted); font-size: 0.8rem; min-width: 1.8em; }
.esc-linea-x { margin-left: auto; color: var(--muted); font-size: 0.9rem; opacity: 0; }
.esc-linea:hover .esc-linea-x { opacity: 1; }
.esc-en .esc-linea-n { color: var(--accent); }
.esc-nota { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.45rem; border-radius: 6px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--fg); cursor: pointer; font-size: 0.85rem; white-space: nowrap; }
.esc-nota-acorde { background: color-mix(in srgb, var(--accent) 32%, var(--bg)); }
.esc-nota-sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.esc-nota-n { font-weight: 600; font-family: ui-monospace, Menlo, monospace; }
.esc-nota-r { color: var(--muted); font-size: 0.75rem; }
.esc-nota-fantasma { border-style: dashed; background: none; cursor: default; color: var(--muted); }
.esc-nota-ms { display: inline-flex; gap: 0.1rem; }
.esc-m { display: inline-block; font-style: normal; font-size: 0.68rem; line-height: 1; padding: 0.12rem 0.22rem; border-radius: 3px; font-weight: 700; }
.esc-m-acorde { background: #2f6fb0; color: #fff; }
.esc-m-car { background: #c08a12; color: #fff; }
.esc-m-dist { background: #7a4fa8; color: #fff; }
.esc-m-evitar { background: #b0473a; color: #fff; }
.esc-inter th { font-size: 0.8rem; color: var(--muted); }
.esc-inter td { text-align: right; }
.esc-int { display: inline-block; transform: translateX(50%); font-size: 0.8rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.esc-panel-nota { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center; margin: 0.7rem 0; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; }
.esc-panel-nota label { display: inline-flex; align-items: center; gap: 0.3rem; }
.esc-pista { margin: 0.6rem 0; }
.esc-botones { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.8rem; }
.esc-pendiente { background: var(--accent); color: var(--accent-contrast); }
.esc-peligro { color: var(--bad); }
.esc-familia h3 { font-size: 0.95rem; margin: 1.1rem 0 0.4rem; }
.esc-modos { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.esc-modos li b { display: inline-block; min-width: 1.5em; color: var(--accent); }
.esc-modos li .esc-item-f { display: inline; margin-left: 0.4rem; }
.esc-modos li.esc-yo { font-weight: 600; }
.esc-enlace { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; font: inherit; }
@media (max-width: 860px) { .esc-layout { grid-template-columns: 1fr; } .esc-lista-card { position: static; max-height: 50vh; } }

/* ==== Herramientas → Acordes (03/10/2026) — usa también las clases esc-* ==== */
.aco-f-E { background: #2f6fb0; color: #fff; }
.aco-f-S { background: #3a8a5c; color: #fff; }
.aco-f-T { background: #c08a12; color: #fff; }
.aco-f-A { background: #b0473a; color: #fff; }
.aco-doce tr { height: 1.75rem; }
.aco-doce tr.aco-corte td, .aco-doce tr.aco-corte th { border-bottom: 2px solid var(--muted); }
.aco-oct { font-size: 0.7rem; color: var(--muted); min-width: 1.4em; }
.aco-int { font-size: 0.8rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.aco-calc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.aco-chip { font-size: 0.82rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.aco-chip.aco-si { color: var(--fg); border-color: var(--accent); }
.aco-octavas { display: flex; gap: 0.5rem; margin: 0 0 0.4rem; }
.aco-octavas button { font-size: 0.8rem; }
.aco-escalas { line-height: 1.7; font-size: 0.9rem; }

/* 03/10/2026: grupos plegables en las listas de Escalas y Acordes, y «?» con clic */
.esc-grupo-btn { cursor: pointer; user-select: none; border-radius: 4px; padding: 0.15rem 0.2rem; }
.esc-grupo-btn:hover { background: var(--border); }
.esc-flecha { display: inline-block; width: 1em; }
.esc-plegable-items { display: none; }
.esc-plegable.esc-abierto .esc-plegable-items { display: block; }
.esc-q { position: relative; cursor: pointer; }
.esc-burbuja { position: absolute; z-index: 50; top: 1.5em; left: 0; width: max-content; max-width: 22rem; white-space: normal; text-align: left;
  background: var(--fg); color: var(--bg); font-size: 0.82rem; line-height: 1.35; padding: 0.45rem 0.6rem; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); font-weight: 400; }
.esc-lab { display: inline-flex; align-items: center; gap: 0.15rem; }

/* 03/10/2026: dibujo de 12 líneas compartido (D12) — solo 12 líneas; la octava es la profundidad */
.d12-barra { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0 0 0.4rem; }
.d12-barra button { font-size: 0.8rem; }
.d12-nota { background: color-mix(in srgb, var(--accent) var(--d12, 30%), var(--bg)); }
.d12-oscura, .d12-oscura .esc-nota-r { color: #fff; }
.d12-oct { font-size: 0.7em; margin-left: 0.05em; color: inherit; opacity: 0.85; }
.d12-leyenda { display: inline-flex; gap: 0.25rem; align-items: center; font-size: 0.8rem; color: var(--muted); }
.d12-chip { display: inline-block; min-width: 1.8em; text-align: center; padding: 0.05rem 0.3rem; border-radius: 4px; border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) var(--d12, 30%), var(--bg)); color: var(--fg); font-family: ui-monospace, Menlo, monospace; }
.esc-doce td.esc-alterada, .esc-doce th.esc-alterada { background: rgba(127, 127, 127, 0.08); }
.d12-columnas th, .d12-columnas td { text-align: center; width: auto; min-width: 3.2rem; border-right: 1px solid var(--border); }
.d12-columnas tr { height: 2.3rem; }
.d12-columnas .esc-linea { flex-direction: column; gap: 0; padding: 0.2rem 0; }
.d12-columnas .esc-linea-x { margin-left: 0; }
.d12-columnas .esc-int { transform: translateY(50%); }
.d12-columnas .d12-extra { min-width: 4rem; font-size: 0.8rem; color: var(--muted); }
.aco-mover { display: inline-flex; align-items: center; gap: 0.3rem; }
.aco-mover button { padding: 0.1rem 0.45rem; }
.mant-aviso { margin: -0.3rem 0 0.9rem; padding: 0.5rem 0.8rem; border-left: 4px solid #c08a12; background: color-mix(in srgb, #c08a12 10%, var(--bg)); border-radius: 4px; font-size: 0.9rem; }

/* 03/10/2026: 12 líneas de la mesa con nuestra codificación + escalas y acordes */
.mz12-teoria { border-radius: 12px; }
.mz12-teoria label { display: inline-flex; align-items: center; gap: 6px; }
.mz12-teoria select { max-width: 16rem; }
.mz12-etq-12 { width: 56px; }
.mz12-etq-12 div { right: 6px; font-size: 7.5px; line-height: 1; white-space: nowrap; color: #8a8577; }
.mz12-etq-12 div b { color: #14161a; font-weight: 700; }
.mz12-etq-12 div.fuera-escala { opacity: .35; }
.mz12-etq-12 div.en-acorde b { color: #2f6fb0; }
.mz12-etq-12 div.es-raiz b { text-decoration: underline; }
.mz12-linea.en-escala { stroke-width: 1.5; }
.mz12-linea.fuera-escala { stroke-dasharray: 2 3; }
.mz12-linea.en-acorde { stroke-width: 2; opacity: .55; }
.mz12-linea.es-raiz { stroke-width: 2.5; }
.mz12-nota.fuera rect { stroke: #b0473a; stroke-width: 2; stroke-dasharray: 3 2; }
.mz12-acorde-compas { font-size: 8px; fill: #2f6fb0; font-weight: 700; font-family: 'SFMono-Regular', Menlo, monospace; }

/* 03/10/2026: controles de la fuente en filas + mesa de mezclas en su propia página + zoom */
.sd-fila { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 8px 12px; margin: 6px 0; border: 1px solid var(--border, #ddd9d0); border-radius: 10px; background: var(--bg, #fff); }
.sd-titulo { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); min-width: 4.5rem; }
.sd-sub { opacity: .8; font-size: 0.9em; }
.pagina-mesa { position: fixed; inset: 0; z-index: 900; background: var(--bg, #fff); }
.pagina-mesa-cab { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; background: var(--bg, #fff); border-bottom: 1px solid var(--border, #ddd9d0); }
.pagina-mesa-cab h1 { margin: 0; flex: 1; }
.pagina-mesa-cab h1 .hint { font-size: 0.85rem; font-weight: 400; margin-left: 0.5rem; }
body.con-pagina-mesa { overflow: hidden; }
.mz12-zoom { display: flex; align-items: center; gap: 8px; }
.mz12-zoom button { padding: 2px 10px; }
.mz12-zoom-val { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; min-width: 3em; text-align: center; }
/* 03/10/2026: «Sonido: Notas» en la mesa */
.mz12-sonido { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 10px; border: 1px solid #e8a33d; border-radius: 8px; background: #fdf6ea; width: 100%; }
.mz12-sonido label { display: inline-flex; align-items: center; gap: 4px; }
.mz12-inst-sel { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: var(--muted); }
.mz12-inst-sel select { max-width: 14rem; }

/* ===== Herramientas → Ritmos (04/10/2026) ===== */
.rit-ac { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em; border-radius: 50%; font-weight: 700; font-size: 0.8rem; color: #fff; }
.rit-F { background: #d9480f; } .rit-S { background: #e9a23b; color: #222; } .rit-N { background: #aeb7c3; }
.rit-cab-num { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end; margin: 0.6rem 0; }
.rit-cab-num label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.rit-cab-num input[type=number] { width: 5em; }
.rit-suma { font-size: 0.85rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, #2b8a3e 14%, var(--bg)); }
.rit-suma.rit-mal { background: color-mix(in srgb, #c92a2a 16%, var(--bg)); }
.rit-rejilla-wrap { overflow-x: auto; margin: 0.6rem 0; }
.rit-rejilla { position: relative; min-width: 520px; padding-top: 1.3rem; }
.rit-fila { display: flex; gap: 3px; height: 74px; position: relative; z-index: 1; }
.rit-div { flex-basis: 0; min-width: 0; border: 1px solid var(--border, #d3d9e1); border-radius: 6px; background: color-mix(in srgb, var(--fg, #18202b) 5%, var(--bg)); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; font: inherit; color: inherit; }
.rit-div:hover { border-color: #2f5bea; }
.rit-div.rit-sel { outline: 2px solid #2f5bea; outline-offset: 1px; }
.rit-div.rit-suena { background: color-mix(in srgb, #2f5bea 22%, var(--bg)); }
.rit-dot { border-radius: 50%; display: block; }
.rit-dot.rit-F { width: 22px; height: 22px; } .rit-dot.rit-S { width: 16px; height: 16px; } .rit-dot.rit-N { width: 9px; height: 9px; }
.rit-dlab { font-size: 0.7rem; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rit-lineas { position: absolute; inset: 0; pointer-events: none; }
.rit-lineas i { position: absolute; top: 1rem; bottom: 0; border-left: 1px dashed color-mix(in srgb, var(--fg, #18202b) 25%, transparent); }
.rit-lineas i.rit-barra { border-left: 2px solid color-mix(in srgb, var(--fg, #18202b) 70%, transparent); }
.rit-lineas b { position: absolute; top: 0; font-size: 0.7rem; font-weight: 600; opacity: 0.7; transform: translateX(3px); }
.rit-panel { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; padding: 0.6rem 0.8rem; border-radius: 8px; background: color-mix(in srgb, #2f5bea 7%, var(--bg)); margin: 0.4rem 0; }
.rit-panel .rit-acs button { min-width: 2.4em; }
.rit-panel .rit-acs button.esc-activo { outline: 2px solid #2f5bea; }
.rit-rellenar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.85rem; margin: 0.3rem 0; }
.rit-metro { border: 1px solid var(--border, #d3d9e1); border-radius: 10px; padding: 0.8rem 1rem; margin: 0.8rem 0; display: flex; flex-direction: column; gap: 0.7rem; }
.rit-metro h3 { margin: 0; font-size: 1rem; }
.rit-metro-fila { display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; align-items: center; }
.rit-metro-fila label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.rit-bpm { font-size: 1.1rem; width: 4.5em; font-variant-numeric: tabular-nums; }
.rit-tocar { font-size: 1.05rem; font-weight: 700; padding: 0.45rem 1.2rem; border-radius: 999px; background: #d9480f; color: #fff; border: 0; cursor: pointer; }
.rit-tocar.rit-sonando { background: #495057; }
.rit-cuenta { display: flex; gap: 1.4rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.rit-cuenta span { font-size: 0.8rem; opacity: 0.7; } .rit-cuenta b { font-size: 2rem; line-height: 1; margin-left: 0.3rem; }
.rit-cuenta .rit-previa { color: #d9480f; font-weight: 700; }
.rit-info { font-size: 0.8rem; opacity: 0.75; }
/* Ritmos: misma altura para los tres tamaños de círculo (las etiquetas quedan alineadas) */
.rit-dot.rit-S { margin: 3px; } .rit-dot.rit-N { margin: 6.5px; }
.esc-item-sel:hover { background: var(--accent); color: var(--accent-contrast); }
/* 04/10/2026: 12 líneas — barras de compás numeradas, doble barra final y rejilla de pulsos */
.mz12-pulso { stroke-dasharray: 3 3; }
.mz12-barra-fin { stroke-width: 3; }
.mz12-num-compas { font-weight: 700; font-family: 'SFMono-Regular', Menlo, monospace; }
.mz12-compas-ctl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.mz12-compas-ctl button { padding: 0 0.35rem; }
.mz12-acorde-compas { cursor: pointer; }
.mz12-acorde-compas:hover { fill: #d9480f; }
.mz12-acorde-compas.sonando { fill: #d9480f; }
/* 04/10/2026: 🎨 intensidad de los colores (no se pone filtro si es 1, para no tocar nada) */
.con-intensidad main > .tab-panel, .con-intensidad .pagina-mesa-cuerpo { filter: saturate(var(--intensidad, 1)); }
.intensidad-ctl { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; }
.intensidad-ctl input { width: 90px; }
/* 04/10/2026: «◐ líneas» — oscurece líneas, barras y rejilla de las 12 líneas (variable --mz12-t, 0–100 %) */
.mz12-linea { stroke: color-mix(in srgb, #3f3a2e var(--mz12-t, 35%), #ece9e2); }
.mz12-linea.en-escala { stroke: color-mix(in srgb, #3f3a2e var(--mz12-t, 35%), #cfc8b6); }
.mz12-linea.fuera-escala { stroke: color-mix(in srgb, #3f3a2e calc(var(--mz12-t, 35%) * 0.6), #f3f1ec); }
.mz12-linea.en-acorde { stroke: #2f6fb0; }
.mz12-linea.iluminada, .mz12-linea.sonando { stroke: #e8a33d; }
.mz12-pulso { stroke: color-mix(in srgb, #2e2a22 var(--mz12-t, 35%), #c9c2b2); stroke-width: 1; }
.mz12-barra { stroke: color-mix(in srgb, #1f1c17 var(--mz12-t, 35%), #a8a294); stroke-width: 1.6; }
.mz12-barra-fin { stroke: color-mix(in srgb, #000 var(--mz12-t, 35%), #6f6a5e); }
.mz12-num-compas { font-size: 8px; fill: color-mix(in srgb, #1f1c17 var(--mz12-t, 35%), #8a8577); }
/* 04/10/2026: acentos del ritmo en las 12 líneas */
.mz12-ac-F { fill: #d9480f; } .mz12-ac-S { fill: #e9a23b; }
/* 04/10/2026: estructura del tema en la mesa de mezclas */
.mz12-estructura { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.6rem 0.8rem; margin: 0.6rem 0; border: 1px solid #ddd6c4; border-radius: 8px; background: #fbfaf6; }
.mz12-est-cab, .mz12-est-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.mz12-parte, .mz12-orden { gap: 0.25rem; padding: 0.15rem 0.4rem; border-radius: 6px; border: 2px solid var(--pc); background: color-mix(in srgb, var(--pc) 8%, #fff); }
.mz12-parte b, .mz12-orden b { color: var(--pc); font-size: 1rem; }
.mz12-orden button, .mz12-parte button { padding: 0 0.3rem; }
.mz12-flecha { opacity: 0.5; }
.mz12-letra-parte { font-size: 9px; font-weight: 800; font-family: 'SFMono-Regular', Menlo, monospace; }
/* 04/10/2026: cuadrar compases — silencios (volumen 0) y ligaduras */
.mz12-silencio rect { fill: none; stroke: #8f8877; stroke-width: 1.3; stroke-dasharray: 3 2; }
.mz12-silencio text { fill: #8f8877; }
.mz12-silencio-compas rect { fill: #8f8877; fill-opacity: .25; stroke-dasharray: none; }
.mz12-liga { fill: none; stroke: #5c574b; stroke-width: 1.2; }

/* 05/10/2026: ayudas de vista de la mesa de mezclas (lupa y contraste) */
.mz-vista-ayudas { display: inline-flex; gap: 6px; align-items: center; margin-right: 10px; }
.mz-vista-ayudas button.activo { background: #1f6f3a; color: #fff; box-shadow: inset 0 0 0 2px #0d3d1e; }
.mz-lupa { position: fixed; width: 260px; height: 260px; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 9999;
  background: #fff; border: 3px solid #1f6f3a; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.mz-lupa[hidden] { display: none; }
.mezclas-mesa-raiz.mz-alto-contraste { filter: contrast(1.45) saturate(1.25); }
.mezclas-mesa-raiz.mz-alto-contraste .mz-vista-ayudas { filter: none; }

/* 05/10/2026: estructura del tema al final y botones flotantes de la página de la mesa */
.mz12-estructura-final { margin-top: 1.2rem; }
.pagina-mesa-flotantes { position: fixed; right: 18px; bottom: 22px; z-index: 50; display: flex; flex-direction: column; gap: 8px; }
.pagina-mesa-flotantes button { width: 46px; height: 46px; border-radius: 50%; font-size: 1.3rem; padding: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,.25); }

/* 05/10/2026: título del tema en la cabecera de la mesa */
.pagina-mesa-tema { color: #1a5fd0; font-weight: 700; font-size: 1.15em; }

/* 05/10/2026: título centrado: «Mesa de mezclas» y debajo la pieza + su estilo */
.pagina-mesa-titulo { flex: 1; display: flex; }
.pagina-mesa-titulo h1 { flex: none !important; }
.pagina-mesa-tema-fila { display: flex; align-items: center; gap: 14px; }
.pagina-mesa-tema { margin-left: 0 !important; }
.pm-estilo-hueco .mezclas-header-field { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.pm-estilo-hueco label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; }
.pm-estilo-hueco select { padding: 0.15rem 0.3rem; }

/* 05/10/2026 (pedido de Javi): en la página de la mesa queda fijo todo lo de arriba (cabecera, notación,
   original, controles, zoom, posición y reproducir); la rueda del ratón solo mueve los instrumentos. */
.pagina-mesa { display: flex; flex-direction: column; overflow: hidden !important; }
.pagina-mesa-cab { flex: none; }
.pagina-mesa-cuerpo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0.5rem !important; }
.pagina-mesa-cuerpo > .source-mezclas { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pagina-mesa-cuerpo > .source-mezclas > * { flex: none; }
.pagina-mesa-cuerpo > .source-mezclas > .mezclas-desplazable { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; }

/* 05/10/2026: Hoja de acordes sonora */
.mz-hoja { margin: 4px 0 16px; }
.mz-hoja-ctl { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 10px; border: 1px solid #e8a33d; border-radius: 8px; background: #fdf6ea; margin-bottom: 10px; }
.mz-hoja-filas { display: flex; flex-direction: column; gap: 6px; }
.mz-hoja-fila { display: grid; gap: 0; }
.mz-hoja-compas { position: relative; border-left: 2px solid #3f3a2e; padding: 4px 10px 8px; min-height: 64px; cursor: pointer; background: #fff; }
.mz-hoja-compas:hover { background: #f6f3ec; }
.mz-hoja-num { position: absolute; top: 2px; right: 6px; font-size: 10px; color: #a39d8c; }
.mz-hoja-acorde { font-weight: 700; color: #1a5fd0; font-size: 1.05rem; margin-bottom: 4px; }
.mz-hoja-letra { font-size: 1rem; line-height: 1.5; color: #3f3a2e; }
.mz-hoja-palabra { padding: 0 2px; border-radius: 4px; transition: background .1s; }
.mz-hoja-palabra.dicha { color: #8a8577; }
.mz-hoja-palabra.activa { background: #e8a33d; color: #fff; }

/* 05/10/2026: grupos propios de fuentes y título editable */
.fg-cab { display: flex; align-items: center; gap: 8px; color: #1a5fd0; }
.fg-cab .fg-acciones { margin-left: auto; display: inline-flex; gap: 4px; }
.fg-cab.fg-sobre { background: #e3eefc; outline: 2px dashed #1a5fd0; border-radius: 6px; }
.fg-sin { color: #6b6658; }
.fg-sub { font-size: .9em; padding-left: 1.2rem; opacity: .8; }
.fuente-titulo-btn { font-size: .8em; opacity: .5; margin-left: 4px; }
.source-row:hover .fuente-titulo-btn { opacity: 1; }
.fuente-titulo-input { font: inherit; min-width: 24em; padding: 2px 6px; }
.source-row[draggable="true"] { cursor: grab; }

/* 06/10/2026: «⚙️ Ocultar controles» de las 12 líneas */
.mz-controles-ocultos .mz12-teoria, .mz-controles-ocultos .mz12-zoom, .mz-controles-ocultos .mz12-leyenda { display: none !important; }
.mz-btn-controles { margin-left: auto; }

/* 06/10/2026: controles de cada instrumento compactos (etiqueta y deslizador en la misma línea)
   para que quepan en la altura de su grupo de 12 líneas; efectos plegables */
.mezclas-channel .mezclas-channel-row { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); align-items: center; column-gap: 6px; flex-direction: row; }
.mezclas-ctrl-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* 12 líneas: la columna de controles mide lo mismo que sus grupos de 12 líneas (si no cabe, se desplaza dentro) */
.mz12-on .mezclas-channel { grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto; }
.mz12-on .mezclas-channel > .mezclas-ctrl-col { grid-column: 1; grid-row: 1; height: 0; min-height: 100%; overflow-y: auto; overflow-x: hidden; margin-bottom: 0; padding-right: 4px; }
.mz12-on .mezclas-channel > .mz12-zona { grid-row: 1; }
.mz12-on .mezclas-channel:has(.mz12-zona.plegada) > .mezclas-ctrl-col { height: auto; min-height: 0; }
.mz12-on .mezclas-channel { align-items: start; }
.mezclas-efectos { font-size: 0.85rem; color: var(--muted); }
.mezclas-efectos summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.mezclas-efectos[open] summary { margin-bottom: 4px; }

/* 06/10/2026: barra de la partitura (zoom, vista del ABC, descargas) y vista «Tabla» del ABC */
.mz-partitura-barra { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0.3rem 0; }
.mz-partitura-barra button.active { background: #e0a54b; color: #222; }
.mezclas-abc { overflow-x: auto; }
.mezclas-abc-tabla { border: 1px solid #ddd9d0; border-radius: 8px; padding: 0.6rem; background: #fbfaf8; overflow-x: auto; font-family: ui-monospace, Menlo, monospace; }
.abc-cabecera { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; color: #6b665c; }
.abc-sistema { border-collapse: collapse; margin: 0 0 12px; }
.abc-sistema caption { text-align: left; font-size: 0.75em; color: #9a948a; padding-bottom: 2px; }
.abc-sistema th { text-align: right; padding: 3px 8px; color: #555; font-weight: 600; white-space: nowrap; font-family: system-ui, sans-serif; }
.abc-sistema td { border-left: 2px solid #8a8478; padding: 3px 10px; white-space: nowrap; vertical-align: top; }
.abc-sistema tr:nth-child(even) td { background: #f3f1ec; }
.abc-sistema .abc-letra td { font-family: system-ui, sans-serif; color: #2b6a3e; white-space: normal; border-left: none; }
.abc-ac { color: #1a5fd0; font-weight: 700; }
.abc-sil { color: #b5afa4; }
.abc-nota { color: #222; }
.abc-alt { color: #c2255c; font-weight: 700; }

/* 06/10/2026: el reproductor propio de la partitura no se ve: se usa «▶ Reproducir mezcla» */
.mezclas-abc-audio { display: none; }
/* 06/10/2026: selector de Sonido en la barra de reproducción */
.mezclas-sonido { display: inline-flex; align-items: center; gap: 8px; padding: 2px 10px; border: 1px solid #e0c48a; border-radius: 8px; background: #fff6e6; margin-right: 8px; }
.mezclas-sonido label { display: inline-flex; align-items: center; gap: 3px; }
/* 06/10/2026: «Escuchar» de la barra solo cuando no se ve el de los controles de arriba (Clásica, ABC o controles ocultos) */

/* 07/10/2026: marcas de la partitura de la base en las 12 líneas */
.mz12-pedal line { stroke: #b4541a; stroke-width: 3; }
.mz12-pedal text { font-size: 11px; fill: #b4541a; font-style: italic; font-weight: 700; }
.mz12-marca { font-size: 11px; font-weight: 700; }
.mz12-partitura-ctl select { font-weight: 600; }
/* 07/10/2026: el instrumento se elige en el título del canal (una sola vez) */
.mz12-inst-titulo { font-size: 1.05em; font-weight: 700; max-width: 13em; border: 1px solid #c9c3b4; border-radius: 6px; padding: 2px 4px; background: #fff; }
.mz12-inst { justify-content: space-between; }
.mz12-pedal-cambio { fill: none; stroke: #b4541a; stroke-width: 2; }
/* 07/10/2026: comparador codificada ↔ partitura original */
.mz12-nota.cmp-ok rect { fill: #2f9e44 !important; }
.mz12-nota.cmp-oct rect { fill: #f08c00 !important; }
.mz12-nota.cmp-sobra rect { fill: #e03131 !important; }
.mz12-nota.cmp-falta rect { fill: #adb5bd !important; opacity: 0.55; }
.mz12-cmp { font-size: 11px; font-weight: 700; }
.mz12-cmp-alto { fill: #2f9e44; } .mz12-cmp-medio { fill: #f08c00; } .mz12-cmp-bajo { fill: #e03131; }
.mz12-cmp-oido { margin-top: 6px; padding: 6px; border: 1px dashed #c9a227; border-radius: 6px; background: #fff8e6; display: flex; flex-direction: column; gap: 4px; font-size: .9em; } .mz12-cmp-bal input { width: 8em; }
.oido-version { font-size: .78em; padding: 1px 6px; border-radius: 9px; margin-left: 6px; white-space: nowrap; } .oido-ultima { background: #d3f9d8; color: #2b8a3e; } .oido-vieja { background: #eceae4; color: #868e96; }

/* 08/10/2026: líneas extra (otras octavas) de las 12 líneas */
.mz12-linea.mz12-linea-extra { stroke-dasharray: none; stroke-width: .8 !important; opacity: .55; }
.mz12-etiquetas .mz12-etq-extra { opacity: 1 !important; font-style: normal; font-size: 10px !important; font-weight: 700 !important; color: #5a5446 !important; right: 4px !important; display: flex; white-space: nowrap; }
.mz12-etiquetas .mz12-etq-extra .mz12-ex-n { display: inline-block; width: 2.1em; text-align: right; }
.mz12-etiquetas .mz12-etq-extra .mz12-ex-o { display: inline-block; width: 2em; text-align: left; padding-left: 3px; font-size: 8px; font-weight: 600; color: #8a8577; }
.mz-btn-revisar.activo { background: #e8590c !important; }
/* 11/10/2026 (Javi): el grupo de 12 central se distingue (fondo y marco) cuando hay líneas extra */
.mz12-banda-central { fill: rgba(232,163,61,.07); stroke: rgba(232,163,61,.45); stroke-width: 1; }
.mz12-etiquetas .mz12-etq-marco { position: absolute; left: 1px; right: 1px; border: 1.5px solid rgba(232,163,61,.7); border-radius: 6px; background: rgba(232,163,61,.07); pointer-events: none; transform: none !important; }
/* 08/10/2026 (Javi: «solo veo los grupos de 12 líneas cuando pulso ocultar controles»): si los controles de
   arriba ocupan casi toda la pantalla, la zona de instrumentos se quedaba en 120 px. Ahora siempre tiene al
   menos un 60 % de la altura de la ventana y, si no cabe todo, la página entera se desplaza para verla. */
.pagina-mesa-cuerpo { overflow-y: auto; }
.pagina-mesa-cuerpo > .source-mezclas > .mezclas-desplazable { min-height: 60vh; }

/* 08/10/2026: buscador de fuentes */
.fuentes-buscador { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.fuentes-buscar { flex: 0 1 34em; padding: 6px 10px; border: 1px solid #ddd9d0; border-radius: 8px; font: inherit; }

/* 08/10/2026: grupos y carpetas de fuentes plegables */
.fg-plegada-oculta { display: none !important; }
.source-root-header[data-plegable] { cursor: pointer; user-select: none; }
.source-root-header .fg-flecha { display: inline-block; width: 1.1em; color: #8a8577; }
.source-root-header.fg-cerrada { opacity: .8; }

.source-root-header .fg-ren-carpeta, .source-root-header .fg-mover-carpeta { opacity: .35; margin-left: 6px; font-size: .85em; }
.source-root-header:hover .fg-ren-carpeta, .source-root-header:hover .fg-mover-carpeta:not(:disabled) { opacity: 1; }

/* 08/10/2026: fuentes seleccionadas para arrastrar varias */
.source-row.fila-sel { background: #e3eefc !important; box-shadow: inset 3px 0 0 #1a5fd0; border-radius: 6px; }

/* 08/10/2026: ficha de una canción en apartados plegables */
.sd-ficha-musica { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.sd-resumen { font-size: 1.02rem; color: #3f3a2e; padding: 6px 10px; background: #fff; border: 1px solid #ddd9d0; border-radius: 8px; }
.sd-sec { border: 1px solid #ddd9d0; border-radius: 8px; background: #fff; }
.sd-sec > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; color: #3f3a2e; list-style: revert; }
.sd-sec[open] > summary { border-bottom: 1px solid #eee9df; }
.sd-sec-cuerpo { padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.sd-sub { background: #fbfaf8; }
.sd-sub > summary { font-weight: 500; }
.sd-pre { white-space: pre-wrap; margin: 0; max-height: 320px; overflow: auto; font-family: ui-monospace, Menlo, monospace; font-size: .9rem; }
.sd-acciones .sd-fila { margin: 0; }

/* 08/10/2026: universos de sonido sin la lista de subidas («Carpetas de las fuentes») */
/* (la lista va plegada al final en «📦 Subidas»; fuera de sonido se ve siempre abierta, como antes) */
.subidas-plegadas:not(.activo) > summary { display: none; }
.subidas-plegadas { margin-top: 12px; }
.subidas-plegadas.activo > summary { cursor: pointer; color: #6b6659; font-weight: 600; }

/* 08/10/2026: Papelera única */
.papelera { margin-top: 14px; border: 1px dashed #c9c2b2; border-radius: 8px; background: #fbfaf8; }
.papelera > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; color: #6b6659; }
.papelera-cuerpo { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.papelera-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.papelera-botones { display: inline-flex; gap: 6px; flex-shrink: 0; }

/* 08/10/2026: sección «Piezas musicales» reorganizada */
.fuentes-grupos-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.fuentes-grupos-barra .fuentes-buscar { flex: 1 1 22em; max-width: 40em; }
.fuentes-ayuda { cursor: help; color: #8a8577; font-size: 1.1rem; padding: 0 4px; }
.fuentes-seleccion { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 8px; background: #e3eefc; border: 1px solid #b9cff0; border-radius: 8px; }
.fuentes-seleccion[hidden] { display: none; }
.fuentes-sel-estado:empty { display: none; }
.fuentes-sel-estado { margin-bottom: 8px; }
#sources-card > h2 { display: flex; align-items: center; gap: 12px; }
#sources-card > h2 .sc-anadir { margin-left: auto; position: relative; font-size: 1rem; font-weight: 400; }
#sources-card > h2 .sc-menu { position: absolute; right: 0; top: 110%; z-index: 30; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: #fff; border: 1px solid #ddd9d0; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); white-space: nowrap; }
#sources-card > h2 .sc-menu[hidden] { display: none; }
.universo-sonido .fuentes-lote { display: none !important; }
.universo-sonido #source-roots-card:not(.anadiendo) { display: none; }
.universo-sonido #source-roots-card .subidas-plegadas { display: none; }
.sc-cerrar { float: right; }
#source-roots-card:not(.anadiendo) .sc-cerrar { display: none; }
.papelera-subidas { margin-top: 6px; }
.papelera-subidas > summary { cursor: pointer; color: #6b6659; }

/* 08/10/2026: progreso de «volver a analizar» varias piezas */
.lote-prog { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: #fff; border: 1px solid #ddd9d0; border-radius: 8px; color: #3f3a2e; max-width: 46em; }
.lp-cab { font-size: 1.02rem; }
.lp-barra { height: 8px; background: #eee9df; border-radius: 4px; overflow: hidden; }
.lp-barra i { display: block; height: 100%; width: 0; background: #4f6ba8; transition: width .4s; }
.lp-datos { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #6b6659; font-size: .92rem; }
.lp-que > summary { cursor: pointer; color: #6b6659; font-size: .92rem; }
.lp-que ol, .lp-que ul { margin: 6px 0 0 1.2em; padding: 0; font-size: .9rem; color: #6b6659; }
.lp-aviso { font-size: .88rem; color: #9a6a1f; }
.lote-fin .lp-barra, .lote-fin .lp-aviso { display: none; }
#reanalizar-marcadas-estado { display: block; margin-top: 6px; }

/* 09/10/2026 (Javi): MEZCLADOR arriba (una tira por instrumento, una al lado de otra) y debajo
   los grupos de 12 líneas a todo el ancho */
.mz-mezclador { background: #efede8; border: 1px solid #ddd9d0; }
.mz-mezclador > .mezclas-ctrl-col { background: #f9f8f6; border: 1px solid #ddd9d0; }
.mz-mezclador > .mezclas-ctrl-col.apagado { opacity: .55; }
.mz-mezclador .mezclas-channel-row { display: grid; align-items: center; }
.mz12-on .mezclas-channel { display: block; }
.mz12-on .mezclas-channel > .mz12-zona { width: 100%; }
.mz12-on .mz-zona-nombre { font-weight: 700; color: #3f3a2e; }
.mezclas-channels:not(:has(.mz12-zona:not([hidden]))) { display: none; }

/* 09/10/2026 (Javi): controles de la mesa en grupos (cómo suena · tonalidad y acordes · compás y pulso · cómo se ve) */
.mz12-teoria { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); align-items: stretch; background: transparent; border: 0; padding: 0; }
.mz-grupo { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; background: #fff; border: 1px solid #ddd9d0; }
.mz-grupo-sonido { background: #fff8ec; border-color: #e8c98f; }
.mz-grupo-ver { background: #f1f5fb; border-color: #c9d6ea; }
.mz-grupo-tit { letter-spacing: .02em; text-transform: uppercase; }
.mz-grupo .mz12-sonido { background: transparent; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.mz-grupo .mz12-zoom { flex-wrap: wrap; margin: 0; }
/* título de la mesa en UNA sola línea */
.pagina-mesa-titulo { flex-direction: row !important; align-items: baseline !important; justify-content: flex-start !important; gap: 14px !important; min-width: 0; }
.pagina-mesa-titulo h1 { white-space: nowrap; }
.pagina-mesa-tema-fila { min-width: 0; flex-wrap: nowrap; }
.pagina-mesa-tema { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pagina-mesa-volver, .pagina-mesa-cab button, .pagina-mesa-cab .mz-vista-ayudas { white-space: nowrap; }

/* 09/10/2026 (Javi): todo COMPACTO para dejar el máximo espacio a las 12 líneas */
.mz12-teoria { display: flex; flex-wrap: wrap; gap: 6px; font-size: .78rem; }
.mz-grupo { flex: 1 1 auto; gap: 4px 10px; padding: 3px 8px; border-radius: 8px; }
.mz-grupo .mz12-sonido, .mz-grupo .mz12-sonido label { gap: 4px 8px; }
.mz-grupo label, .mz-grupo .mz12-compas-ctl { gap: 4px; }
.mz-grupo select, .mz-grupo input[type="number"] { font-size: .78rem; padding: 1px 3px; height: auto; min-height: 0; }
.mz-grupo button { font-size: .75rem; padding: 1px 7px; min-height: 0; line-height: 1.5; }
.mz-grupo .hint { font-size: .72rem; }
.mz-grupo .mz12-zoom { flex: 1 1 auto; gap: 4px; }
.mz-grupo .mz12-zoom .mz-ctrl-label { font-size: .68rem; margin-left: 6px !important; }
.mz-grupo .mz12-zoom button { padding: 0 6px; }
/* mezclador: tiras estrechas y bajas */
.mz-mezclador { gap: 6px; padding: 5px; margin-bottom: 6px; border-radius: 10px; }
.mz-mezclador > .mezclas-ctrl-col { border-radius: 8px; gap: 1px; font-size: .74rem; }
.mz-mezclador .mezclas-channel-row { grid-template-columns: 4.6em minmax(0, 1fr); column-gap: 4px; line-height: 1.25; }
.mz-mezclador input[type="range"] { height: 12px; margin: 0; }
.mz-mezclador select { font-size: .74rem; padding: 0 2px; max-width: 100%; }
.mz-mezclador .mezclas-channel-title { font-size: .8rem; gap: 4px; }
.mz-mezclador .mezclas-channel-botones button { font-size: .7rem; min-height: 0; }
.mz-mezclador .mz12-inst-titulo { font-size: .8rem; max-width: 9.5em; padding: 0 2px; }
.mz-mezclador .mz12-cab { gap: 1px; }
.mz-mezclador .mz12-plegar { width: 20px; height: 20px; font-size: .7rem; }
.mz-mezclador .mezclas-efectos { font-size: .74rem; }
.mz-mezclador .mezclas-efectos summary { padding: 0; }
.mz-mezclador .mz12-cmp-oido .hint { display: none; }
/* filas de las 12 líneas con menos marco */
.mz12-on .mezclas-channels { gap: 6px; }
.mz12-on .mezclas-channel { padding: 4px 6px; border-radius: 8px; }
.mz12-on .mz-zona-nombre { font-size: .78rem; margin-bottom: 1px; }
/* cabecera y reproductor más bajos */
.pagina-mesa-cab { padding: 4px 12px !important; gap: 10px !important; }
.pagina-mesa-cab h1 { font-size: 1.05rem !important; }
.pagina-mesa-cab button, .pagina-mesa-cab select { font-size: .78rem; padding: 2px 8px; min-height: 0; }
.pagina-mesa-cuerpo { padding: 6px 12px 0 !important; }
.source-mezclas .mezclas-transporte button, .mezclas-play, .mezclas-pause, .mezclas-stop, .mezclas-back, .mezclas-fwd, .mezclas-reset { font-size: .78rem; padding: 2px 9px; min-height: 0; }
.mz12-posicion { height: 14px; }
/* «Ocultar controles» también oculta el mezclador */
/* 10/10/2026 (Javi): el mezclador se ve SIEMPRE, también con «Ocultar controles» */
.mezclas-transport { margin-bottom: 4px !important; font-size: .8rem; }
.mezclas-transport .mezclas-master { font-size: .78rem; }
.mz12-teoria, .mz12-zoom, .mz12-posicion { margin-bottom: 4px; }

/* 09/10/2026 (Javi): MEZCLADOR como una mesa de verdad — etiquetas una sola vez a la izquierda,
   nombre de cada instrumento en vertical y sus controles alineados en filas con las etiquetas */
.mz-mezclador { display: grid; grid-auto-flow: column; grid-template-rows: repeat(11, auto); grid-auto-columns: max-content; column-gap: 4px; row-gap: 0; align-items: center; overflow-x: auto; }
.mz-mezclador-etq, .mz-mezclador > .mezclas-ctrl-col { grid-row: 1 / span 11; display: grid; grid-template-rows: subgrid; align-items: center; }
.mz-mezclador-etq { grid-column: 1; position: sticky; left: 0; z-index: 2; background: #efede8; padding: 4px 8px 4px 2px; font-size: .72rem; color: #6b6352; text-align: right; white-space: nowrap; }
.mz-mezclador-etq > div { min-height: 18px; display: flex; align-items: center; justify-content: flex-end; }
.mz-etq-inst { grid-row: 1; } .mz-etq-ms { grid-row: 2; } .mz-etq-manos { grid-row: 3; } .mz-etq-oct { grid-row: 4; } .mz-etq-vol { grid-row: 5; }
.mz-etq-bass { grid-row: 6; } .mz-etq-mid { grid-row: 7; } .mz-etq-treble { grid-row: 8; } .mz-etq-pan { grid-row: 9; } .mz-etq-fx { grid-row: 10; } .mz-etq-cmp { grid-row: 11; }
.mz-mezclador:not(:has([data-juntas-canal])) .mz-etq-manos, .mz-mezclador:not(:has(.mz12-cmp-oido)) .mz-etq-cmp { display: none; }
.mz-mezclador > .mezclas-ctrl-col { flex: none; padding: 4px 6px 4px 3px; }
.mz-mezclador > .mz-tira-golpe { background: #f4f2ee; }
.mz-tira-nombre { grid-column: 1; grid-row: 1 / -1; align-self: stretch; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-weight: 700; font-size: .78rem; color: #3f3a2e; white-space: nowrap; overflow: hidden; border-left: 1px solid #ddd9d0; padding-left: 1px; }
.mz-mezclador .mezclas-channel-title, .mz-mezclador .mz12-cab { display: contents; }
.mz-mezclador .mezclas-ctrl-col > *:not(.mz-tira-nombre), .mz-mezclador .mz12-cab > * { grid-column: 2; min-width: 0; min-height: 18px; }
.mz-mezclador .mezclas-channel-title > span:first-child { grid-row: 1; font-weight: 400; }
.mz-mezclador .mezclas-channel-botones { grid-row: 2; display: flex; gap: 3px; }
.mz-mezclador .mz12-inst { grid-row: 2; }
.mz-mezclador .mz12-inst .hint, .mz-mezclador .mz12-badge, .mz-mezclador .mz12-cab > .hint, .mz-mezclador .mz12-cmp-oido .hint { display: none; }
.mz-mezclador label.mezclas-channel-row { display: block; font-size: 0; }
.mz-mezclador label.mezclas-channel-row > input[type="range"] { width: 100%; }
.mz-mezclador label.mezclas-channel-row > select, .mz-mezclador .mz12-inst-titulo { font-size: .74rem; width: 100%; max-width: none; }
.mz-mezclador label:has([data-juntas-canal]) { grid-row: 3; }
.mz-mezclador label:has([data-oct-canal]) { grid-row: 4; }
.mz-mezclador label:has(.mezclas-vol) { grid-row: 5; }
.mz-mezclador label:has(.mezclas-bass) { grid-row: 6; }
.mz-mezclador label:has(.mezclas-mid) { grid-row: 7; }
.mz-mezclador label:has(.mezclas-treble) { grid-row: 8; }
.mz-mezclador label:has(.mezclas-pan) { grid-row: 9; }
.mz-mezclador .mezclas-efectos { grid-row: 10; }
.mz-mezclador .mezclas-efectos[open] label.mezclas-channel-row { font-size: .68rem; display: grid; grid-template-columns: 5.6em 1fr; align-items: center; gap: 4px; height: 1.9em; white-space: nowrap; } /* 14/10/2026 (Javi): todas las filas igual de altas; «Distorsión» ya no se monta en el control */
.mz-mezclador .mezclas-efectos[open] label.mezclas-channel-row > input { min-width: 0; width: 100%; }
.mz-mezclador .mz12-cmp-oido { grid-row: 11; }
.mz-mezclador .mz12-cmp-bal { font-size: 0; display: block; }
.mz-mezclador .mz12-cmp-bal input { width: 100%; }
.mz12-etq-golpe { position: absolute; left: 2px; right: 2px; transform: translateY(-50%); line-height: 1; white-space: nowrap; }
/* 09/10/2026: fila «Silenciar · Solo» alineada a la izquierda: M S y después ▴ */
.mz-mezclador > .mezclas-ctrl-col { width: max-content; justify-self: start; }
.mz-mezclador .mezclas-channel-botones { justify-self: start !important; margin: 0 !important; }
.mz-mezclador .mz12-inst { justify-self: start !important; }
.mz-mezclador .mz12-plegar { margin-left: 0 !important; }
.mz-mezclador .mezclas-channel-botones button { width: 26px; }
.mz-mezclador .mezclas-channel-botones button { min-width: 0 !important; padding: 0 !important; height: 20px; }
/* 09/10/2026: lo que va dentro del título (instrumento, M S) también en la columna de controles */
.mz-mezclador .mezclas-channel-title > * { grid-column: 2; min-width: 0; }
.mz-mezclador .mz12-inst { margin-left: 56px !important; }
/* 09/10/2026: sin nombre vertical (el instrumento ya sale arriba); la Batería con su nombre arriba en horizontal */
.mz-tira-nombre { display: none !important; }
.mz-mezclador > .mezclas-ctrl-col { grid-template-columns: 0 130px; column-gap: 0; padding-left: 6px; }
.mz-mezclador > .mz-tira-golpe { grid-template-columns: 0 120px; }
.mz-mezclador .mezclas-channel-title > span:first-child:not(:has(select)) { visibility: visible; font-weight: 700; font-size: .8rem; white-space: nowrap; }
.mz12-etq-golpes { flex-shrink: 0; }
.mz12-etq-golpe { font-size: 10px; overflow: visible; text-overflow: clip; }
.mz12-etq-golpes { width: auto; }
.mz12-etq-golpe b { color: inherit !important; }
.mz-zona-nombre { display: flex; align-items: center; gap: 6px; }
.mz-zn-orden { display: inline-flex; gap: 2px; }
.mz-zn-orden button { font-size: .72rem; padding: 0 6px; min-height: 0; line-height: 1.5; }
.mezclas-channel:first-child .mz-zn-orden [data-orden="-1"], .mezclas-channel:last-child .mz-zn-orden [data-orden="1"] { opacity: .35; pointer-events: none; }
.mz12-on .mz-zona-nombre { display: flex; }
/* 09/10/2026: con un arreglo para piano, solo se ven los instrumentos del arreglo */
.con-arreglo .mz-mezclador > .mezclas-ctrl-col:not(.mz-tira-arreglo), .con-arreglo .mz-mezclador > .mz-tira-golpe { display: none !important; }
.con-arreglo .mezclas-channels > .mezclas-channel:not(.mz-arreglo) { display: none !important; }
.mz-mezclador > .mz-tira-arreglo { background: #fdf3f1; }
.con-arreglo .mz-etq-manos, .con-arreglo .mz-etq-cmp { visibility: hidden; }

.mz-mezclador label:has([data-am-oct]) { grid-row: 4; }
.mz-grupo-ver .mz-vista-ayudas { display: inline-flex; gap: 4px; align-items: center; }
.mz-grupo-ver .mz-vista-ayudas button, .mz-grupo-ver .mz-vista-ayudas select { font-size: .75rem; padding: 1px 7px; min-height: 0; }
.mz-grupo-ver .intensidad-ctl { display: inline-flex; align-items: center; gap: 4px; }
.mz-grupo-ver .intensidad-ctl input { width: 90px; }
/* 09/10/2026: «⚙️ Ajuste fino» plegado en cada grupo de controles */
.mz-fino { flex: 0 0 100%; }
.mz-fino > summary { cursor: pointer; font-size: .72rem; color: #6b6352; list-style: revert; }
.mz-fino[open] { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding-top: 2px; border-top: 1px dashed #ddd9d0; }
.mz-fino[open] > summary { flex: 0 0 100%; }
.mz-resumen { font-size: .78rem; }
/* 09/10/2026: un solo «⚙️ Ajuste fino» con apartados */
.mz-fino-global { flex: 0 0 100%; width: 100%; background: #faf9f6; border: 1px dashed #d6d0c2; border-radius: 8px; padding: 3px 8px; }
.mz-fino-global > summary { cursor: pointer; font-size: .78rem; font-weight: 700; color: #6b6352; }
.mz-fino-apartados { flex-wrap: wrap; padding: 4px 0; font-size: .78rem; }
.mz-fino-apartado { flex-wrap: wrap; flex: 1 1 320px; }
.mz-fino-tit { flex: 0 0 100%; font-size: .68rem; text-transform: uppercase; }

/* 10/10/2026 (Javi): controles en la cabecera de los grupos de 12 líneas, tras el nombre */
.mz-zona-nombre .mz-zn-txt { display: inline-block; white-space: nowrap; }
.mz-zn-ctl { display: inline-flex; align-items: center; font-weight: 400; font-size: .78rem; color: #5a5446; }
.mz-zn-ctl label, .mz-zn-zoom { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.mz-zn-ctl select, .mz-zn-ctl input[type="number"] { font-size: .78rem; padding: 0 2px; }
.mz-zn-ctl select[data-zn="afin"], .mz-zn-ctl select[data-zn="sis"] { max-width: 13em; }
.mz-zn-zoom button { font-size: .75rem; padding: 0 6px; min-height: 0; line-height: 1.5; }
.mz-zn-zoom b { text-align: center; font-weight: 600; }
/* 10/10/2026 (Javi): «🎶 Qué suena» encima de «Cómo suena» */
.mz-grupo-que { background: #f3f8ef; border-color: #b9d3a6; }
.mz-tema-titulo { font-weight: 700; font-size: .9rem; color: #3f3a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28em; }
.mz-grupo .mz12-sonido-vel { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.mz-grupo .mz12-sonido-vel label { display: inline-flex; align-items: center; gap: 4px; }
/* 10/10/2026 (Javi): cabecera de grupo en UNA línea; zoom único proporcional (--mz12-k) */
.mz12-on .mz-zona-nombre { flex-wrap: nowrap; white-space: nowrap; }
.mz-zn-ctl { gap: 0 10px; }
.mz-zn-ctl .mz-zn-desv { width: 3.6em !important; min-width: 0; padding: 0 2px; }
.mz-zn-ctl select[data-zn="afin"] { max-width: 11em; }
.mz-zn-ctl select[data-zn="sis"] { max-width: 10em; }
.mz-zn-zoom b { min-width: 3.2em; }
.mz12-t1 { font-size: calc(8.5px * var(--mz12-k, 1)); }
.mz12-t2 { font-size: calc(6.5px * var(--mz12-k, 1)); }
/* 10/10/2026 (Javi): reproductor + posición + mezclador fijos arriba aunque se desplacen las 12 líneas */
.pagina-mesa-cuerpo > .source-mezclas > .mz-fijo { position: sticky; top: 0; z-index: 30; background: var(--bg, #fff); padding-top: 4px; box-shadow: 0 6px 8px -8px rgba(0,0,0,.35); }
.mz-fijo .mezclas-posicion { margin: 0.2rem 0 0.4rem; }
.mz-mezclador:not(:has([data-oct-canal], [data-am-oct])) .mz-etq-oct { display: none; }
.mz-zn-ctl .mz-zn-plegar { margin: 0 !important; font-size: .75rem; padding: 0 6px; min-height: 0; line-height: 1.5; }
/* 10/10/2026 (Javi): Estilo dentro de «Qué suena»; la cabecera vacía no ocupa sitio */
.mz-grupo .mezclas-header-estilo { display: inline-flex; align-items: center; gap: 4px; margin: 0; flex-direction: row; }
.mz-grupo .mezclas-header-estilo label { margin: 0; font-size: inherit; text-transform: none; letter-spacing: 0; color: inherit; font-weight: 400; }
.mezclas-header:empty, .mezclas-header:not(:has(*)) { display: none; }
.mz-tinta-ctl { display: flex !important; align-items: center; gap: 6px; flex: 0 0 100%; }
.mz12-leyenda .mz12-ancho-dur { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; }
.mz-fino-apartado .mz12-leyenda { flex: 0 0 100%; }
/* 10/10/2026 (Javi): Ajuste fino en 4 columnas (tarjetas), un control por fila */
.mz-fino-apartados { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 10px; align-items: start; }
.mz-fino-apartado { display: flex !important; flex-direction: column; align-items: stretch; gap: 4px; background: #fff; border: 1px solid #e4dfd3; border-radius: 8px; padding: 6px 8px; }
.mz-fino-apartado:last-child { grid-column: 1 / -1; }
.mz-fino-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 22px; }
.mz-fino-fila > label, .mz-fino-fila > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mz-fino-fila .mz-tinta-ctl { flex: 1 1 auto; }
.mz-zn-verl { font-size: .75rem; color: #6b6352; margin-right: -6px; }
.mz12-leyenda .mz12-ancho-dur { margin-left: 0 !important; margin-top: 4px; }

/* 10/10/2026 (Javi): Volumen pegado al tiempo; Tamaño justo después; Restablecer a la derecha */
.mezclas-transport .mezclas-master { margin-left: 10px !important; }
.mezclas-transport .mezclas-reset { margin-left: auto; }
.mezclas-transport .mz12-ancho-dur { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: .78rem; }
.mezclas-transport .mz12-ancho-dur[hidden] { display: none; }
/* 10/10/2026 (Javi): toda la barra del reproductor en UNA línea */
.mezclas-transport { flex-wrap: nowrap !important; white-space: nowrap; gap: 5px !important; }
.mezclas-transport > * { flex-shrink: 0; }
.mezclas-transport .mezclas-tiempo { min-width: 0; }
.mezclas-transport .mezclas-master, .mezclas-transport .mz12-ancho-dur { margin-left: 6px !important; gap: 4px; font-size: .78rem; }
.mezclas-transport .mezclas-master-vol { width: 80px; }
.mezclas-transport .mz12-escala { width: 90px !important; }
.mezclas-transport .mz12-escala-val { font-weight: 600; font-size: .78rem; }
.mezclas-transport .mezclas-sonido { gap: 4px; }
/* 10/10/2026 (Javi): con los controles a la vista, la barra no repite «Escuchar» (solo sale con controles ocultos, o en Clásica/ABC) */


/* 10/10/2026 (Javi): acordes «en vertical» — dentro del grupo (dorado) y entre instrumentos (morado 🔗) */
.mz12-vert rect { fill: rgba(212, 160, 23, 0.14); stroke: #d4a017; stroke-width: 1.5; }
.mz12-vert text { font-size: 8px; font-weight: 700; fill: #9a7300; font-family: 'SFMono-Regular', Menlo, monospace; }
.mz12-vert-multi rect { fill: rgba(130, 80, 200, 0.08); stroke: #8250c8; stroke-dasharray: 4,3; }
.mz12-vert-multi text { fill: #6a3fb0; }

/* 10/10/2026 (Javi): Estructura del tema alineada — columna de etiquetas fija y cajas del mismo tamaño */
.mz12-est-fila { display: grid !important; grid-template-columns: 5.5em minmax(0, 1fr); align-items: start; gap: 0 0.7rem; }
.mz12-est-fila > .mz-ctrl-label { line-height: 2.2rem; }
.mz12-est-cajas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.4rem; }
.mz12-est-cajas > * { height: 2.2rem; box-sizing: border-box; }
.mz12-parte, .mz12-orden { display: inline-flex; align-items: center; justify-content: space-between; }
.mz12-parte { width: 19em; }
.mz12-parte input[data-est="pnombre"] { flex: 1 1 auto; width: auto !important; min-width: 0; }
.mz12-parte input[data-est="pn"] { width: 3.6em !important; }
.mz12-parte b { width: 1.2em; text-align: center; }
.mz12-orden { width: 11em; }
.mz12-orden b { flex: 1 1 auto; text-align: center; line-height: 1; }
.mz12-orden b small { font-size: .75em; margin-left: 1px; }
.mz12-orden button, .mz12-parte button { height: 1.6rem; min-width: 1.6rem; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.mz12-flecha { width: 1em; text-align: center; line-height: 2.2rem; }
/* 10/10/2026 (Javi): «+ Parte» y «⇔ Ajustar» a la misma altura que las cajas */
.mz12-est-cajas > button { margin: 0 !important; height: 2.2rem !important; padding: 0 0.8em; display: inline-flex; align-items: center; align-self: center; vertical-align: middle; transform: none; }
.mz12-est-cajas > select { margin: 0 !important; align-self: center; }

/* 10/10/2026 (Javi): partes del tema en las 12 líneas */
.mz12-parte-fondo { opacity: 0.07; pointer-events: none; }
.mz12-parte-inicio { stroke-width: 3; opacity: 0.85; pointer-events: none; }
.mz12-parte-nombre { font-size: 10px; font-weight: 800; font-family: -apple-system, system-ui, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 3px; }

/* 10/10/2026 (Javi): «Foco» — los instrumentos que no son el elegido, apagados */
.mz12-zona.mz12-desenfocado { opacity: 0.22; filter: grayscale(0.7); transition: opacity .2s; }
.mz12-zona.mz12-desenfocado:hover { opacity: 0.6; }
/* 10/10/2026 (Javi): las etiquetas de las 12 líneas (7 B … 1 C) quedan FIJAS a la izquierda aunque la vista se desplace */
.mz12-etiquetas { position: sticky !important; left: 0; z-index: 4; box-shadow: 4px 0 6px -4px rgba(0,0,0,.15); }
/* 10/10/2026 (Javi): edición en 12 líneas */
.mz12-editando .mz12-lienzo svg { cursor: crosshair; }
.mz12-editando .mz12-nota { cursor: grab; }
.mz12-nota.sel rect { stroke: #e8590c !important; stroke-width: 3px !important; filter: drop-shadow(0 0 3px rgba(232,89,12,.6)); }
.mz12-editando .mz12-acorde-compas { cursor: pointer; text-decoration: underline dotted; }
.mz12-edibar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; margin: 4px 0; background: #fff4e6; border: 2px solid #f59f00; border-radius: 10px; }
.mz12-edibar .hint { font-size: .75rem; }
.mz-btn-editar.activo { background: #e8590c !important; }
.mz12-popacorde { position: absolute; z-index: 9999; display: flex; align-items: center; background: #fff; border: 2px solid #2f6fb0; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.mz12-popacorde { white-space: nowrap; font-size: .85rem; padding: 4px 8px; gap: 4px; }
.mz12-popacorde select { max-width: 10em; }

/* 10/10/2026 (Javi): número en las notas estrechas y sin «selección de texto» morada al arrastrar */
.mz12-t-mini { font-size: calc(7px * var(--mz12-k, 1)) !important; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 2px; }
.mz12-lienzo svg, .mz12-lienzo svg text { user-select: none; -webkit-user-select: none; }

/* 10/10/2026 (Javi): 🌈 arcoíris — líneas de color y etiquetas más fuertes y grandes */
.mz12-arco .mz12-linea { stroke-width: 1.6; opacity: .9; }
.mz12-arco .mz12-linea.fuera-escala { opacity: .35; stroke-dasharray: 2 3; }
.mz12-arco .mz12-linea.es-raiz { stroke-width: 2.6; }
.mz12-arco .mz12-etiquetas { width: 40px; }
.mz12-arco .mz12-etiquetas div { font-size: 12.5px; font-weight: 800; opacity: 1; }
.mz12-arco .mz12-etiquetas div b { color: inherit; }
.mz12-arco .mz12-etiquetas div.fuera-escala { opacity: .55; }
.mz12-arco .mz12-nota text { fill: #1d1b16; }

/* 10/10/2026 (Javi): nº de 12ava delante de cada elemento de la batería */
.mz12-etq-golpe .mz12-etq-doce { display: inline-block; min-width: 1.8em; text-align: right; font-weight: 800; font-family: 'SFMono-Regular', Menlo, monospace; }
.mz12-etiquetas .mz12-etq-golpe { display: flex; align-items: center; gap: 4px; line-height: 1; }
.mz12-etiquetas .mz12-etq-golpe .mz12-etq-doce { min-width: 1.6em; }

/* 10/10/2026 (Javi): nombres de la batería dentro del dibujo, al empezar cada línea */
.mz12-golpe-nombre { font-size: calc(10px * var(--mz12-k, 1)); font-weight: 800; paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: 3px; pointer-events: none; }

/* 10/10/2026 (Javi): todas las columnas de etiquetas igual de anchas (si hay batería, lo que pida su nombre más largo) */
.mz12-etiquetas, .mz12-arco .mz12-etiquetas, .mz12-etq-golpes { width: var(--mz12-etq-w, 40px) !important; }
.mz12-etiquetas .mz12-etq-golpe { left: 4px; right: auto; font-size: 10px; }
.mz12-etiquetas .mz12-etq-golpe b { font-weight: 700; }
.mz12-lienzo { min-width: 0; }

/* 11/10/2026 (Javi): banda «Partes» encima de las 12 líneas */
.mz-partes-banda { margin-bottom: 6px; }
.mz-partes-banda .mz-banda-etq { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #5b5648; }
.mz-banda-parte rect { fill-opacity: .18; stroke-opacity: .7; }
.mz-banda-parte text { font-size: 13px; font-weight: 700; fill: #2b2a26; }
.mz-banda-parte text.mz-bp-escala { font-size: 11.5px; font-weight: 500; fill: #55524a; }
.mz-banda-parte.cambia text.mz-bp-escala { fill: #b0410e; font-weight: 700; }
.mz-banda-parte.cambia rect { stroke-width: 2; }

/* 11/10/2026 (Javi): ✨ Revisión de notas — sección propia */
.mz-rev-seccion { border: 1.5px solid #e9c46a; background: #fffaf0; border-radius: 10px; padding: 10px 14px; margin: 0 0 0.9rem; }
.mz-rev-seccion.activa { border-color: #e8590c; box-shadow: 0 0 0 3px rgba(232,89,12,.08); }
.mz-rev-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mz-rev-titulo { font-weight: 700; font-size: 15px; color: #8a4b08; }
.mz-rev-cab .hint { flex: 1 1 260px; }
.mz-rev-cuerpo:empty { display: none; }
.mz-rev-cuerpo { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e9c46a; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.mz-rev-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mz-rev-chip { background: #fff; border: 1px solid #ecd9b0; border-radius: 999px; padding: 2px 10px; }
.mz-rev-item { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #ecd9b0; border-radius: 8px; padding: 8px 12px; }
.mz-rev-nav { white-space: nowrap; }
.mz-rev-cambio { font-weight: 700; color: #c92a2a; }
.mz-rev-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mz-rev-sep { flex: 1; }
.mz12-rev-si { background: #2b8a3e !important; color: #fff !important; border-color: #2b8a3e !important; }
.mz12-nota.revisar rect { stroke: #e8590c; stroke-width: 2.5; stroke-dasharray: 4 2; }
.mz12-nota.revisar.sel rect { stroke: #c92a2a; stroke-width: 3.5; stroke-dasharray: none; }

.mz-rev-insts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mz-rev-insts button { background: #fff !important; color: #1f5fbf !important; border: 1.5px solid #1f5fbf !important; border-radius: 8px !important; padding: 5px 12px !important; font-size: 13px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.mz-rev-insts button:hover { background: #eef4ff !important; }
.mz-rev-insts button.activo { background: #1f5fbf !important; color: #fff !important; border-color: #1f5fbf !important; }
.mz-rev-sep0 { width: 14px; }
.mz-rev-acciones [data-rev^='oir'] { background: #fff; color: #1f5fbf; border: 1.5px solid #1f5fbf; }

/* 11/10/2026 (Javi): columnas de la octava de referencia bien distintas: 12ava (color, negrita) | nota (gris, pequeña) */
.mz12-etiquetas div:has(> .mz12-e-d) { display: flex; align-items: center; white-space: nowrap; }
.mz12-etiquetas .mz12-e-d { display: inline-block; min-width: 2em; text-align: right; font-weight: 800; }
.mz12-etiquetas .mz12-e-n { display: inline-block; min-width: 2.2em; text-align: left; margin-left: 5px; padding-left: 5px; border-left: 1px solid #d6d0c2; font-size: .78em; font-weight: 500 !important; color: #6b6659 !important; }
/* 12/10/2026: 📜 conciliador — nota que falta (la partitura la tiene, el oído no) */
.mz12-falta-rev rect { fill: rgba(43, 138, 62, 0.12); stroke: #2b8a3e; stroke-width: 2; stroke-dasharray: 4 3; }
.mz12-falta-rev.sel rect { stroke: #c92a2a; stroke-width: 3; stroke-dasharray: none; fill: rgba(43, 138, 62, 0.25); }
.mz12-falta-rev text { fill: #2b8a3e; }
/* 12/10/2026: líneas extra identificadas como las de referencia (12ava | nota+octava) y su octava ±n */
.mz12-etiquetas .mz12-etq-extra2 { font-size: .85em; opacity: .9; }
.mz12-etiquetas .mz12-e-o { display: inline-block; margin-left: 4px; font-size: .72em; font-weight: 700; color: #b07d2b !important; }
.mz12-etiquetas .mz12-e-n sub { font-size: .75em; vertical-align: baseline; margin-left: 1px; }
/* 12/10/2026 (Javi): Revisión de notas en 3 pasos numerados, más clara */
.mz-rev-paso { display: grid; grid-template-columns: 28px 130px 1fr; align-items: start; gap: 8px; padding: 8px 0; border-bottom: 1px dashed #ecd9b0; }
.mz-rev-paso:last-of-type { border-bottom: none; }
.mz-rev-num { width: 24px; height: 24px; border-radius: 50%; background: #e8590c; color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 3px; }
.mz-rev-lbl { font-weight: 700; color: #8a4b08; font-size: 14px; padding-top: 6px; }
.mz-rev-tiposcol { display: flex; flex-direction: column; gap: 6px; }
.mz-rev-sub { font-weight: 600; color: #6b6659; margin-right: 4px; min-width: 150px; display: inline-block; }
.mz-rev-info { color: #2b8a3e; font-size: 13px; }
.mz-rev-tarjeta { grid-column: 3; background: #fff; border: 1.5px solid #ecd9b0; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.mz-rev-paso > .mz-rev-tarjeta, .mz-rev-paso > .mz-rev-info { grid-column: 3; }
.mz-rev-tarjeta .mz-rev-item { border: none; padding: 0; background: none; }
.mz-rev-que { display: flex; flex-direction: column; gap: 2px; }
.mz-rev-donde { color: #4a4636; }
.mz-rev-cambio { font-size: 20px !important; }
.mz-rev-porque { color: #6b6659; }
@media (max-width: 760px) { .mz-rev-paso { grid-template-columns: 28px 1fr; } .mz-rev-paso > :nth-child(3) { grid-column: 1 / -1; } }
/* 12/10/2026: botón de ocultar/mostrar mesa dentro de la sección de la mesa */
.mz-mesa-cab { display: flex; justify-content: flex-start; padding: 2px 0 4px; }
.mz-mesa-cab .mz-btn-mesa { font-size: 13px; padding: 3px 10px; }
/* 12/10/2026: «🎚 Su mesa» — solo la tira de ese instrumento (con la columna de etiquetas) */
.mz-mezclador.mz-solo-uno > .mezclas-ctrl-col:not(.mz-tira-visible) { display: none !important; }
.mz-zn-mesa1 { font-size: 12px; padding: 2px 8px; border: 1px solid #1f5fbf; background: #fff; color: #1f5fbf; border-radius: 6px; cursor: pointer; margin-right: 6px; }
.mz-zn-mesa1.activo { background: #1f5fbf; color: #fff; }
/* 12/10/2026 (Javi): «⚙️ Ajuste fino» en rojo */
/* 12/10/2026: 🔎 efectos detectados en la grabación */
.mz-fx-detectado { font-size: 11px; color: #0c8599; cursor: help; padding: 1px 0; }
.mz-mesa-cab { gap: 8px; }
.mz-btn-fxgrab { font-size: 13px; padding: 3px 10px; border: 1px solid #0c8599 !important; background: #fff !important; color: #0c8599 !important; border-radius: 6px; cursor: pointer; }
.mz-btn-fxgrab.activo { background: #0c8599 !important; color: #fff !important; }
/* 13/10/2026: ✏️ Editar en la cabecera de cada instrumento */
.mz-zn-editar { font-size: 12px; padding: 2px 8px; border: 1px solid #e8590c; background: #fff; color: #e8590c; border-radius: 6px; cursor: pointer; margin-right: 6px; }
.mz-zn-editar.activo { background: #e8590c; color: #fff; }
/* 13/10/2026 (Javi): columnas de ancho fijo en la cabecera de cada instrumento (todo alineado aunque cambie el texto) */
.mz-zn-ctl { flex-wrap: nowrap; }
.mz-zn-col { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; }
.mz-zn-col-mesa { width: 9.2em; } .mz-zn-col-mesa button { width: 100%; margin-right: 0; }
.mz-zn-col-editar { width: 7em; } .mz-zn-col-editar button { width: 100%; margin-right: 0; }
.mz-zn-col-ver { width: 7.6em; }
.mz-zn-col-manos { width: 13.5em; }
.mz-zn-col-extra { width: 8.6em; }
.mz-zn-col-oct { width: 6.4em; }
/* 13/10/2026 (Javi): fila «Tonalidad y acordes»: todo a la misma altura y la escala con su fórmula entera */
.mz-grupo-teoria { align-items: center; }
.mz-grupo-teoria > label, .mz-grupo-teoria > span, .mz-grupo-teoria > div:not(.mz-grupo-tit) { display: inline-flex; align-items: center; margin: 0; }
.mz-grupo-teoria select, .mz-grupo-teoria button { box-sizing: border-box; height: 1.95em; margin: 0; vertical-align: middle; line-height: 1.2; }
.mz-grupo-teoria select[data-teo="escala"] { max-width: none; width: auto; }
/* 13/10/2026 (Javi): 🎵 panel de la nota (editando), como el del asistente pero a la derecha; se agranda desde la esquina */
.mz-panel-nota { position: fixed; right: 18px; bottom: 82px; z-index: 8990; width: 340px; height: min(560px, calc(100vh - 120px)); min-width: 280px; min-height: 220px; max-width: calc(100vw - 36px); max-height: calc(100vh - 100px); overflow: hidden; display: flex; flex-direction: column; background: #fff; border: 1.5px solid #f0b48a; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.22); font-size: 13px; color: #222; }
.mz-panel-nota[hidden] { display: none; }
.mz-pn-cab { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff4e6; border-bottom: 1px solid #f0d2b8; }
.mz-pn-cab b { flex: 1; }
.mz-pn-cab button { border: 1px solid #e0c3a8; background: #fff; border-radius: 6px; padding: 2px 8px; }
.mz-pn-cuerpo { flex: 1; overflow-y: auto; padding: 6px 10px 10px; }
.mz-pn-sec { border-bottom: 1px dashed #eadfce; padding: 4px 0 6px; }
.mz-pn-sec summary { cursor: pointer; font-weight: 700; color: #8a4b16; padding: 3px 0; }
.mz-pn-campos { display: flex; flex-direction: column; gap: 5px; padding: 3px 0 0 6px; }
.mz-pn-campos label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mz-pn-campos label > span:first-child { width: 7.5em; color: #5a5446; }
.mz-pn-campos input[type=number] { width: 6em; }
.mz-pn-campos input[type=range] { flex: 1; min-width: 90px; }
.mz-pn-campos button { border: 1px solid #c9d6ea; background: #fff; border-radius: 6px; padding: 1px 7px; cursor: pointer; font-size: 12px; }
/* 13/10/2026: panel de la nota — botones con texto visible, cabecera para arrastrar y tiradores (sin el «resize» del navegador) */
.mz-panel-nota { resize: none; }
.mz-panel-nota button { color: #222 !important; background: #fff !important; font-size: 12px; line-height: 1.4; min-height: 0; height: auto; padding: 2px 8px; border: 1px solid #c9d6ea; border-radius: 6px; box-shadow: none; }
.mz-panel-nota button:hover { background: #f2f6fc !important; }
.mz-pn-cab { cursor: move; user-select: none; touch-action: none; }
.mz-pn-cab button { cursor: pointer; }
.mz-pn-tir { position: absolute; z-index: 3; touch-action: none; }
.mz-pn-tir-d { top: 12px; right: 0; bottom: 14px; width: 8px; cursor: ew-resize; }
.mz-pn-tir-b { left: 12px; right: 14px; bottom: 0; height: 8px; cursor: ns-resize; }
.mz-pn-tir-e { right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; background: linear-gradient(315deg, #d9a273 0 2px, transparent 2px 5px, #d9a273 5px 7px, transparent 7px); border-bottom-right-radius: 14px; }
.mz-pn-tir-d:hover, .mz-pn-tir-b:hover { background: rgba(232, 89, 12, .15); }
.mz-panel-nota button { margin: 0 !important; }
/* 13/10/2026: marcas de articulación en las 12 líneas */
.mz12-marca { fill: #3f3a2e; }
.mz12-marca-t { fill: #3f3a2e; font-size: 11px; font-weight: 700; }
.mz12-marca-arco { fill: none; stroke: #3f3a2e; stroke-width: 1.4; }
/* 13/10/2026: 🎸 Tablatura */
.mz-tab { margin: 4px 0 16px; }
.mz-tab-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 6px 4px 10px; }
.mz-tab-inst h4 { margin: 10px 0 2px; color: #8a4b16; }
.mz-tab-fila { display: block; max-width: 100%; margin-bottom: 4px; font-family: ui-monospace, Menlo, monospace; }
.mz-tab-l { stroke: #9a9284; stroke-width: 1; }
.mz-tab-barra-c { stroke: #3b362c; stroke-width: 1.4; }
.mz-tab-cu { font-size: 11px; fill: #8a8273; }
.mz-tab-num { font-size: 10px; fill: #a39a88; }
.mz-tab-compas { fill: transparent; cursor: pointer; }
.mz-tab-compas:hover { fill: rgba(255, 183, 30, .08); }
.mz-tab-n rect { fill: var(--bg, #fff); }
.mz-tab-n text { font-size: 12px; font-weight: 700; fill: #9a9284; }
.mz-tab-n.mano text { fill: #1d1a14; }
.mz-tab-n.sel rect { fill: #ffb71e; }
.mz-tab-n { cursor: pointer; }
.mz-tab-dedo { font-size: 9px; fill: #8a4b16; }
.mz-tab-cab { stroke: #e0452b; stroke-width: 2; pointer-events: none; }
/* 13/10/2026: 🧠 Aprender estilos */
.mz-btn-aprender { margin-left: 6px; border: 1px solid #c9d6ea; background: #fff; border-radius: 8px; padding: 2px 8px; cursor: pointer; font-size: 15px; }
.mz-aprender { position: fixed; right: 16px; top: 80px; width: min(520px, calc(100vw - 32px)); max-height: 78vh; display: flex; flex-direction: column;
  background: var(--bg, #fff); border: 1px solid #e3d6c3; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); z-index: 9000; font-size: 13px; }
.mz-aprender[hidden] { display: none; }
.mz-ap-cab { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid #eadfce; background: #fff7ea; border-radius: 12px 12px 0 0; }
.mz-ap-cab button { border: none; background: none; font-size: 16px; cursor: pointer; }
.mz-ap-cuerpo { overflow: auto; padding: 4px 12px 12px; }
.mz-ap-cuerpo h4 { margin: 12px 0 4px; color: #8a4b16; }
.mz-ap-tabla { border-collapse: collapse; width: 100%; }
.mz-ap-tabla th { text-align: left; font-weight: 600; color: #5a5446; width: 9em; vertical-align: top; padding: 2px 6px 2px 0; }
.mz-ap-tabla td { padding: 2px 0; }
.mz-ap-acentos { display: inline-flex; align-items: flex-end; gap: 3px; height: 30px; }
.mz-ap-acentos i { display: inline-block; width: 10px; background: #e0892b; border-radius: 2px 2px 0 0; }
.mz-ap-props li { margin: 2px 0; }
.mz-ap-props button, .mz-ap-botones button { border: 1px solid #c9d6ea; background: #fff; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.mz-ap-estilo { border-top: 1px dashed #eadfce; padding: 4px 0; }
.mz-ap-estilo summary { cursor: pointer; }
.mz-ap-botones { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 6px; }
.mz-aprender .hint { font-size: 12px; color: #8a8273; }
.mz-aprender td, .mz-aprender th { font-size: 13px; }
.mz-aprender .mz-ap-props button, .mz-aprender .mz-ap-botones button { color: #1d1a14; font-size: 12px; min-width: 0; width: auto; height: auto; }
.mz-aprender .mz-ap-cab button { color: #5a5446; min-width: 0; width: auto; }
.mz-pn-captado { margin: 4px 0 6px; padding: 4px 8px; background: #eef4ff; border-radius: 6px; color: #3a5a8a; font-size: 12px; }

/* 14/10/2026 (Javi): títulos de sección (Qué suena, Cómo suena, Tonalidad y acordes, Ajuste fino…) en NEGRITA NARANJA
   y los parámetros de cada sección DEBAJO de su título */
.mz-grupo-tit { flex: 0 0 100% !important; margin-right: 0 !important; color: #e8590c !important; font-weight: 800 !important; font-size: .78rem !important; }
.mz-fino-global > summary, details.mz-fino > summary { color: #e8590c !important; font-weight: 800 !important; }
.mz-fino-tit { color: #e8590c; font-weight: 800; }

/* 14/10/2026 (Javi): «Tamaño y legibilidad» con el mismo estilo que el resto del Ajuste fino */
.mz-fino-apartado .mz-leg-ctl { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .78rem !important; text-transform: none !important; letter-spacing: 0 !important; color: inherit !important; background: none !important; margin: 0 !important; }
.mz-fino-apartado .mz-leg-ctl input[type="range"] { width: 140px; }
.mz-fino-apartado .mz-vista-ayudas button, .mz-fino-apartado .mz-vista-ayudas select { font-size: .75rem !important; padding: 1px 8px !important; min-height: 0 !important; height: auto !important; line-height: 1.5; border-width: 1px !important; }
.mz-fino-apartado .mz-leg-x { color: #6b6352; }
.mz-fino-apartado .mz12-leyenda { background: none; border: 0; padding: 2px 0 0; gap: 4px; }
.mz-fino-apartado .mz-leg-tit { font-size: .78rem; }
.mz-fino-apartado .mz12-leyenda-fila { gap: 8px; align-items: flex-end; }

/* 14/10/2026 (Javi): indicador de lo que suena en todas las codificaciones, en ROJO */
.mz-hoja-compas.activo { background: #fff0ee !important; box-shadow: inset 3px 0 0 #c0392b, inset 0 -3px 0 #c0392b !important; }
.abc-sistema td.abc-sonando { background: #fde3df !important; box-shadow: inset 0 -3px 0 #c0392b; }

/* 14/10/2026 (Javi): los instrumentos de percusión con los mismos parámetros que los demás, en sus filas */
.mz-mezclador .mz-g-manos { grid-row: 3; }
.mz-mezclador label:has([data-geq="bass"]) { grid-row: 6; }
.mz-mezclador label:has([data-geq="mid"]) { grid-row: 7; }
.mz-mezclador label:has([data-geq="treble"]) { grid-row: 8; }
.mz-mezclador label:has([data-geq="pan"]) { grid-row: 9; }
.mz-mezclador .mz-g-manos select { font-size: .72rem; max-width: 100%; }

/* 14/10/2026 (Javi: «¿sirve para algo esta línea?»): en Clásica y ABC no se ven las 12 líneas, así que la fila de
   cabeceras de instrumentos (Partes, ↑↓, nombre) no sirve: se oculta. El mezclador sigue arriba. */
.mezclas-mesa-raiz:not(.mz12-on) > .mezclas-desplazable > .mezclas-channels,
.mezclas-mesa-raiz:not(.mz12-on) .mezclas-desplazable > .mezclas-channels { display: none !important; }

/* 15/10/2026: 🎹 Teclado de Atlas (js/16-teclado.js) — abajo, en cualquier página donde suena un instrumento */
.tq-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #f7f5f0; border-top: 2px solid #c9c2b0; box-shadow: 0 -4px 14px rgba(0,0,0,.12); padding: 6px 12px 10px; }
.tq-panel[hidden] { display: none; }
body.con-teclado { padding-bottom: 190px; }
.tq-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 6px; font-size: 14px; }
.tq-cab select { font-size: 14px; }
.tq-cab .tq-cerrar { margin-left: auto; }
.tq-escribir { padding: 2px 8px; border-radius: 6px; border: 1px solid #c9c2b0; cursor: pointer; }
.tq-escribir.activo { background: #e8a33d; color: #fff; border-color: #c27f1c; font-weight: 600; }
.tq-scroll { overflow-x: auto; overflow-y: hidden; }
.tq-teclas { position: relative; height: 120px; min-width: 100%; user-select: none; touch-action: none; }
.tq-tecla.sonando { background: #6fa8dc !important; color: #fff; }
.tq-sin-sonido { color: #b0412e; font-weight: 600; }
.tq-tecla { position: absolute; top: 0; box-sizing: border-box; border: 1px solid #555; border-radius: 0 0 4px 4px; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; font-size: 10px; padding-bottom: 3px; overflow: hidden; }
.tq-blanca { height: 100%; background: #fff; color: #555; z-index: 1; }
.tq-negra { height: 62%; background: #222; z-index: 2; border-color: #000; }
.tq-negra-igual { height: 100%; background: #2a2a2a; color: #ddd; z-index: 1; }
.tq-tecla.marcada.tq-blanca { background: #fdf0d2; }
/* 16/10/2026 (Javi): las negras con LED siguen siendo NEGRAS (el LED ya dice que está en la escala) */
.tq-tecla.pulsada { background: #e8a33d !important; color: #fff; }
.tq-tecla .tq-linea { font-weight: 600; font-size: 11px; }

/* 15/10/2026: tira «🎹 Teclado» en el mezclador de la mesa */
.mz-mezclador > .mz-tira-teclado { background: #eef4fb; }
.mz-mezclador .mz-tira-teclado .mz-tk-nombre { font-size: .78rem; margin-left: 6px; align-self: center; white-space: nowrap; }
.mz-mezclador label.mz-tk-ver { grid-row: 3; }
.mz-mezclador label.mz-tk-ver > select { font-size: .74rem; width: 100%; }
.con-arreglo .mz-mezclador > .mezclas-ctrl-col.mz-tira-teclado { display: grid !important; }
/* 15/10/2026 (Javi): un LED en cada tecla de la escala o acorde (la raíz, en rojo) */
.tq-tecla.marcada::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; max-width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--led, #2fbf4a); box-shadow: 0 0 5px 1px var(--led, #2fbf4a); } /* 16/10/2026: color de su línea */
.tq-tecla.marcada.raiz::before { width: 12px; height: 12px; box-shadow: 0 0 7px 3px var(--led, #e5402b); } /* raíz: algo más grande */
.tq-tecla.marcada.tq-negra::before { top: 4px; }
/* 15/10/2026 (Javi): indicador 💻 Local / 🌐 Servidor en la página de la mesa */
.pm-entorno { font-size: .78rem; padding: 2px 8px; border-radius: 10px; white-space: nowrap; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pm-entorno.es-local { background: #e6f4ea; color: #1e6b34; border: 1px solid #9fd0ad; }
.pm-entorno.es-servidor { background: #e8effa; color: #1f4f96; border: 1px solid #a9c1e8; }
/* 15/10/2026 (Javi): pista «🎹 Teclado» de la mesa: se ve con el teclado abierto o si tiene notas escritas */
body:not(.con-teclado-mesa) .mz-canal-teclado:not(.con-notas) { display: none !important; }
.mz-mezclador > .mezclas-ctrl-col.mz-canal-teclado { background: #eef4fb; }
.mezclas-channel.mz-canal-teclado { border-left: 4px solid #6fa8dc; }
.tq-cab .tq-modo, .tq-cab .tq-seguir { font-size: 14px; }

/* 16/10/2026 (Javi): ➕ Añadir instrumento */
.mz-mezclador > .mezclas-ctrl-col.mz-canal-extra { background: #e3f4dc; outline: 2px dashed #74b816; outline-offset: -2px; }
.mezclas-channel.mz-canal-extra { border-left: 6px solid #74b816; background: #f3fbef; }
.mz-extra-badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: #74b816; color: #fff; font-size: .7rem; font-weight: 700; vertical-align: middle; }
.mz-extra-tocar, .mz-extra-quitar { padding: 0 4px; font-size: 12px; }
.mz-pop-anadir { position: fixed; z-index: 3000; background: #fff; border: 1px solid #c9d3df; border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.18);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.mz-pop-anadir .mz-anadir-botones { display: flex; gap: 8px; }

/* 16/10/2026 (Javi): botones de Música en la misma línea que la canción (solo con la ficha abierta) */
.sd-acciones-fila { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: 12px; }
.source-row:not(.is-open) .sd-acciones-fila { display: none; }
.sd-acciones-fila .sd-btn-resultados.activo { outline: 2px solid #1c5fd6; outline-offset: 1px; }
.sd-acciones-fila { gap: 6px; margin-left: 8px; vertical-align: middle; }
.sd-acciones-fila > button { padding: 2px 9px; font-size: .82rem; line-height: 1.5; }
.sd-acciones-fila .mezclas-reanalizar-estado { font-size: .8rem; }

/* 16/10/2026 (Javi): 🎸 / 🪕 MÁSTIL en la ventana del instrumento (misma lógica que las teclas: .tq-tecla[data-midi]) */
.tq-teclas.tq-con-mastil { height: auto; }
.tq-mastil { display: grid; gap: 0; background: #6b4a2b; border-radius: 6px; padding: 4px 0; }
.tq-cuerda-nombre { color: #f3e6cf; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.tq-tecla.tq-traste { position: relative; height: 24px; border: 0; border-right: 2px solid #c8c2b4; border-radius: 0; background: linear-gradient(#0000 calc(50% - 1px), #d9d3c4 calc(50% - 1px), #d9d3c4 calc(50% + 1px), #0000 calc(50% + 1px)); }
.tq-tecla.tq-traste.tq-al-aire { background-color: #4d3420; border-right: 5px solid #efe7d4; }
.tq-tecla.tq-traste.marcada::before { top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; }
.tq-tecla.tq-traste.marcada.raiz::before { width: 15px; height: 15px; }
.tq-tecla.tq-traste.pulsada { background-color: #e8a33d !important; }
.tq-traste-num { text-align: center; color: #f3e6cf; font-size: 10px; line-height: 1.2; }
.tq-traste-num span { display: block; opacity: .7; }

/* 16/10/2026 (Javi): selector «🎵 Instrumento» con el aspecto de los botones del reproductor */
select.mz-sel-instrumento { appearance: none; -webkit-appearance: none; background: var(--accent, #2f6fd6); color: #fff; border: 0; border-radius: 6px;
  padding: 2px 12px; font-size: .78rem; line-height: 1.6; cursor: pointer; font-weight: 500; }
select.mz-sel-instrumento option { background: #fff; color: #222; }

/* 16/10/2026 (Javi): ✨ Canción nueva */
.mz-oculto { display: none !important; }
body:not(.con-teclado-mesa) .mz-canal-teclado.mz-siempre { display: revert !important; }
.mz-mezclador > .mezclas-ctrl-col.mz-canal-teclado.mz-siempre { display: grid !important; }
.cn-modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 3000; display: flex; align-items: center; justify-content: center; }
.cn-caja { background: #fff; border-radius: 10px; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 340px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.cn-caja h3 { margin: 0; }
.cn-caja label { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.cn-caja input[name=nombre] { flex: 1; }
.cn-botones { display: flex; gap: 10px; margin-top: 6px; }
.cn-caja select { max-width: 330px; }
.cn-acentos { margin-top: -6px; text-align: right; }
.cn-caja { max-height: 92vh; overflow-y: auto; gap: 7px; }
/* 16/10/2026: ➕ Añadir instrumento desde el catálogo (familia → instrumento → modelo) */
.mz-pop-anadir label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.mz-pop-anadir label select { min-width: 190px; }
.mz-pop-anadir .mz-anadir-nota { max-width: 300px; font-style: italic; }
/* 16/10/2026: 🔗 Alinear con partitura (conciliador, paso 1) */
.mz12-btn-alinear { margin-left: 6px; }
.mz-pop-alinear { max-width: 440px; }
.mz-pop-alinear .mz-alin-sel { width: 100%; min-width: 380px; }
.mz-pop-alinear .mz-alin-msg { font-style: normal; }
/* 16/10/2026: ⚖️ Por compases (conciliador paso 2) */
.mz-rev-compases { display: flex; flex-wrap: wrap; gap: 4px; max-height: 120px; overflow-y: auto; }
.mz-rev-compases button { padding: 2px 7px; border-radius: 6px; border: 2px solid #c9d3df; background: #fff; font-weight: 600; cursor: pointer; }
.mz-rev-compases button.activo { background: #eef3fb; box-shadow: 0 0 0 2px #4f6db0 inset; }
.mz-rev-compases sup { font-size: 9px; margin-left: 2px; opacity: .75; }
/* 16/10/2026: 🎼 signos de la nota y 📏 ritmo en las 12 líneas (n.º 5) */
.mz12-marca-t { font-size: 10px; }
.mz12-marca-t.captado { fill: #7a7a7a; }
.mz12-marca-t.apagado { fill: #b3261e; font-size: 11px; text-anchor: end; }
.mz12-marca-d { fill: #5a5345; font-size: 8.5px; font-style: italic; }
.mz12-fuerza { fill: none; pointer-events: none; }
.mz12-fuerza.fuerte { stroke: #3f3a2e; }
.mz12-fuerza.suave { stroke: #9a9488; stroke-dasharray: 2,2; }
.mz12-marca-reg, .mz12-marca-ped { fill: none; stroke: #3f3a2e; stroke-width: 1.1; }
.mz12-desvio { stroke-width: 2.6; stroke-linecap: round; }
.mz12-desvio.antes, .mz12-desvio-p.antes { stroke: #2f6fd6; fill: #2f6fd6; }
.mz12-desvio.tarde, .mz12-desvio-p.tarde { stroke: #e07b17; fill: #e07b17; }
.mz12-suma-mal rect { fill: #fdeceb; stroke: #c0392b; stroke-width: 1; }
.mz12-suma-mal text { fill: #c0392b; font-size: 9px; font-weight: 700; text-anchor: end; }
.mz-pn-ritmo .antes { color: #2f6fd6; font-weight: 600; }
.mz-pn-ritmo .tarde { color: #e07b17; font-weight: 600; }
/* 16/10/2026: 📈 curva de volumen de cada nota (n.º 5, punto 2) */
.mz12-curva { fill: none; stroke: rgba(30, 30, 30, .55); stroke-width: 1.1; pointer-events: none; }
.mz-pn-curva-caja { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mz-pn-curva { background: #faf8f2; border: 1px solid #ddd6c6; border-radius: 4px; }
.mz-pn-curva .nota { fill: rgba(79, 109, 176, .12); }
.mz-pn-curva .area { fill: rgba(224, 123, 23, .18); stroke: none; }
.mz-pn-curva .linea { fill: none; stroke: #e07b17; stroke-width: 1.5; }
.mz-zn-col-lupa button { padding: 3px 8px; border: 1px solid #7a5ea8; color: #5a3e8a; background: #fff; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; }
/* 16/10/2026: 🎹 Tocar acordes (js/37-tocar-acordes.js) */
.pagina-tocar { z-index: 899; display: flex; flex-direction: column; }
.pagina-tocar .ta-cuerpo { flex: 1; overflow: auto; padding: 10px 14px 230px; }
.ta-barra { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 8px 10px; background: #fbf7ee; border: 1px solid #e3d9c3; border-radius: 8px; margin-bottom: 10px; }
.ta-columnas { display: grid; grid-template-columns: minmax(260px, 340px) minmax(220px, 300px) 1fr; gap: 12px; align-items: start; }
.ta-lista { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 380px); overflow: hidden; }
.ta-lista-items { overflow-y: auto; }
.ta-grupo { font-size: 12px; font-weight: 700; color: #8a6d2f; margin: 8px 0 2px; text-transform: uppercase; letter-spacing: .03em; }
.ta-item { display: flex; align-items: baseline; gap: 6px; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.ta-item:hover { background: #f1ede3; }
.ta-item.sel { background: #e3ecfb; box-shadow: inset 0 0 0 1px #4f6db0; }
.ta-item-n { font-weight: 700; min-width: 70px; }
.ta-item-f { font-family: monospace; font-size: 12px; color: #555; flex: 1; }
.ta-item-g { font-size: 11px; color: #2f7d4b; }
.ta-fav { border: none; background: none; color: #ccc; cursor: pointer; font-size: 14px; padding: 0; }
.ta-fav.on { color: #e0a800; }
.ta-inv { display: flex; flex-direction: column; gap: 6px; }
.ta-inv-tit { font-weight: 700; font-size: 1.05em; }
.ta-inv-b { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border: 1px solid #c9d3df; border-radius: 8px; background: #fff; cursor: pointer; }
.ta-inv-b b { font-size: 1.1em; color: #4f6db0; }
.ta-inv-b span { font-family: monospace; font-size: 12px; color: #555; }
.ta-inv-b.sel { background: #4f6db0; color: #fff; }
.ta-inv-b.sel b, .ta-inv-b.sel span { color: #fff; }
.ta-info-acorde { font-size: 3rem; font-weight: 800; color: #1a5fd0; }
.ta-info-acorde span { font-size: 1.6rem; color: #333; margin-left: 8px; }
.ta-info-det { font-family: monospace; font-size: 15px; color: #444; margin-top: 4px; }
.tq-tecla.tq-acorde { box-shadow: inset 0 0 0 3px #e07b17; }
.ta-inv-b { color: #333; } .ta-inv-b.sel { color: #fff; }
/* 16/10/2026: Tocar acordes · fase 2 (mesa de 2 canales y círculo de acordes) */
.ta-abajo { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 12px; margin-top: 12px; align-items: start; }
.ta-sec-tit { font-weight: 700; color: #8a6d2f; margin-bottom: 6px; }
.ta-tiras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ta-tira { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border: 1px solid #ddd6c6; border-radius: 8px; background: #faf8f2; font-size: 12px; }
.ta-tira.muda { opacity: .55; }
.ta-tira-cab { display: flex; justify-content: space-between; align-items: center; }
.ta-tira-cab button { border: 1px solid #c9c2b0; background: #fff; border-radius: 6px; cursor: pointer; }
.ta-tira label { display: flex; flex-direction: column; gap: 1px; }
.ta-tira select { max-width: 100%; }
.ta-circ-barra { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 6px; }
.ta-circ-barra button.activo { background: #c0392b; color: #fff; }
.ta-circ-cuerpo { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: start; }
.ta-rueda { width: 210px; height: 210px; cursor: pointer; }
.ta-r-t { font-size: 13px; font-weight: 800; text-anchor: middle; fill: #222; pointer-events: none; }
.ta-r-s { font-size: 8.5px; text-anchor: middle; fill: #333; pointer-events: none; }
.ta-r-c { font-size: 16px; font-weight: 800; text-anchor: middle; fill: #1a5fd0; }
.ta-circ-lista { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.ta-c-el { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid #e3d9c3; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; }
.ta-c-el.sonando { background: #fff1d6; border-color: #e07b17; }
.ta-c-g { display: inline-block; min-width: 26px; text-align: center; font-weight: 700; color: #fff; background: #4f6db0; border-radius: 4px; padding: 0 4px; }
.ta-c-d button, .ta-c-mov button { border: 1px solid #c9c2b0; background: #fff; border-radius: 4px; cursor: pointer; padding: 0 5px; margin: 0 2px; }
.ta-tira { min-width: 0; } .ta-tira select { width: 100%; }
.ta-c-d button, .ta-c-mov button, .ta-tira-cab button { color: #333 !important; background: #fff !important; min-width: 22px; }
.ta-c-el select { color: #333; }
/* 16/10/2026: el círculo en movimiento */
.ta-aguja { stroke: #c0392b; stroke-width: 2.5; stroke-linecap: round; pointer-events: none; }
.ta-bola { fill: #c0392b; stroke: #fff; stroke-width: 2; pointer-events: none; filter: drop-shadow(0 0 4px rgba(192,57,43,.7)); }
.ta-r-marca { stroke: #b9b0a0; stroke-width: 1; }
.ta-r-marca.comp { stroke: #6b6355; stroke-width: 2; }
.ta-seg-activo { animation: taLatido .5s ease-in-out infinite alternate; transform-origin: 100px 100px; }
@keyframes taLatido { from { transform: scale(1); } to { transform: scale(1.035); } }
.ta-rueda.girando { filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); }

/* 17/10/2026 (Javi: «aprovecha toda la pantalla»): Herramientas → Base de datos
   ocupa todo el ancho; título y explicación fuera, barra de elegir base en una línea;
   el marco llega hasta abajo (alto calculado en 32-base-datos.js). */
main.is-full-tab { max-width: none; padding: 0.4rem 0.6rem 0.4rem; }
main.is-full-tab #tab-basedatos > h1,
main.is-full-tab #tab-basedatos .card > p.hint:first-child { display: none; }
main.is-full-tab #tab-basedatos > .card { padding: 0.3rem 0.75rem; margin: 0 0 0.4rem; }
main.is-full-tab #tab-basedatos .inline-form { margin: 0; align-items: center; }
main.is-full-tab #tab-basedatos #bda-msg:empty { display: none; }
/* 17/10/2026 (Javi: «letra más grande y negra, menos espacios en blanco»):
   con Base de datos abierta, cabecera y pestañas más compactas y oscuras. */
body.con-pestana-completa .topbar { padding: 0.3rem 0.75rem; }
body.con-pestana-completa .tabs { padding: 0 0.75rem; }
body.con-pestana-completa .tab-button { padding: 0.35rem 0.8rem; font-size: 1rem; color: #1a1a1a; }
main.is-full-tab #tab-basedatos > .card { padding: 0.2rem 0.6rem; margin: 0 0 0.3rem; font-size: 1rem; color: #111; }
main.is-full-tab #tab-basedatos .inline-form > * { margin-top: 0; margin-bottom: 0; }
main.is-full-tab #tab-basedatos .inline-form button { padding: 0.2rem 0.7rem; }
main.is-full-tab { padding: 0.25rem 0.5rem 0.25rem; }
/* 17/10/2026: barra de base y «← Volver» dentro de la fila de pestañas */
body:not(.con-pestana-completa) .bda-en-nav { display: none !important; }
.tabs > .card.bda-en-nav { align-self: center; margin: 0 0 0 1rem; padding: 0.15rem 0.6rem; box-shadow: none; flex: 0 1 auto; }
.tabs > .card.bda-en-nav > p.hint:first-child { display: none; }
.tabs > .card.bda-en-nav .inline-form { margin: 0; flex-wrap: nowrap; align-items: center; gap: 0.6rem; }
.tabs > .card.bda-en-nav .inline-form > * { margin: 0; white-space: nowrap; }
.tabs > .card.bda-en-nav .inline-form button { padding: 0.15rem 0.6rem; }
.tabs > .card.bda-en-nav #bda-msg:empty { display: none; }
.tabs > .card.bda-en-nav #bda-msg { margin: 0.1rem 0 0; }
.tab-button.bda-volver { color: #1d6b3a !important; font-weight: 600; }
body.con-pestana-completa .tabs { flex-wrap: wrap; align-items: center; row-gap: 0.2rem; }
body.con-pestana-completa .tab-button, body.con-pestana-completa .tabs-dropdown-toggle { white-space: nowrap; }
/* 17/10/2026 (Javi): fila de pestañas con Base de datos — grupos en cajas
   (Volver) (Universos · Generación · Consulta) (base · + Nueva base · Abrir) (Herramientas),
   todo centrado en la línea y con la misma letra, tamaño, intensidad y color. */
body:not(.con-pestana-completa) .bda-grupo { display: contents; }
body.con-pestana-completa .tabs { gap: 0.6rem; padding: 0.3rem 0.75rem; align-items: center; }
body.con-pestana-completa .tabs-divider { display: none; }
body.con-pestana-completa .bda-volver,
body.con-pestana-completa .bda-grupo,
body.con-pestana-completa .tabs > .card.bda-en-nav,
body.con-pestana-completa .tabs-dropdown {
  display: inline-flex; align-items: center; gap: 0.15rem;
  border: 1px solid #d6d3cb; border-radius: 8px; background: #f7f6f2;
  padding: 0.1rem 0.35rem; margin: 0; box-shadow: none; min-height: 2.1rem; box-sizing: border-box;
}
body.con-pestana-completa .tabs-dropdown { margin-left: auto; }
body.con-pestana-completa .tabs > .card.bda-en-nav { margin-left: 0; }
body.con-pestana-completa .tabs .tab-button,
body.con-pestana-completa .tabs .tabs-dropdown-toggle,
body.con-pestana-completa .tabs > .card.bda-en-nav label,
body.con-pestana-completa .tabs > .card.bda-en-nav select,
body.con-pestana-completa .tabs > .card.bda-en-nav button,
body.con-pestana-completa .tabs > .card.bda-en-nav a {
  font-family: inherit; font-size: 1rem; font-weight: 500; color: #1a1a1a !important;
  line-height: 1.3; padding: 0.2rem 0.55rem; margin: 0; border: none; border-radius: 6px;
  background: transparent; text-decoration: none; box-shadow: none;
}
body.con-pestana-completa .tabs .tab-button:hover,
body.con-pestana-completa .tabs .tabs-dropdown-toggle:hover,
body.con-pestana-completa .tabs > .card.bda-en-nav button:hover,
body.con-pestana-completa .tabs > .card.bda-en-nav a:hover { background: #e9e6dd; }
body.con-pestana-completa .tabs .tabs-dropdown-toggle.active,
body.con-pestana-completa .tabs .tab-button.active { background: #e4efe7; }
body.con-pestana-completa .tabs > .card.bda-en-nav label { display: inline-flex; align-items: center; gap: 0.4rem; padding-right: 0; }
body.con-pestana-completa .tabs > .card.bda-en-nav select { font-weight: 700; border: 1px solid #cfcabf; background: #fff; padding: 0.1rem 0.3rem; }
body.con-pestana-completa .tabs > .card.bda-en-nav .inline-form { gap: 0.15rem; }
body.con-pestana-completa .tabs .tab-button.bda-volver { border: 1px solid #d6d3cb; border-radius: 8px; background: #f7f6f2; padding: 0.1rem 0.9rem; min-height: 2.1rem; }
body.con-pestana-completa .tabs .tab-button.bda-volver:hover { background: #e9e6dd; }

/* 17/10/2026 (Javi): Herramientas → 🎨 Apariencia — tema elegido a mano (Claro / Oscuro / Automático)
   y contraste; afectan a toda la aplicación y se recuerdan en este navegador (js/41-apariencia.js). */
:root[data-tema="oscuro"] {
    --bg: #14161a;
    --fg: #e9e9ea;
    --muted: #9a9ea6;
    --border: #2c2f36;
    --card-bg: #1c1f26;
    --accent: #8aa3d6;
    --accent-contrast: #0b0d10;
    --warn-bg: #2b230f;
    --warn-fg: #e2b464;
    --ok: #4fce76;
    --bad: #d98b82;
    --phase-tint-0: #262219;
    --phase-tint-1: #1a2129;
    --phase-tint-2: #221c27;
    --phase-tint-3: #1a2420;
    --phase-tint-4: #271a20;
    --phase-tint-5: #1a2624;
    --lane-color-3: #b28ad6;
  }
:root[data-tema="oscuro"] { color-scheme: dark; }
:root[data-tema="claro"] { color-scheme: light; }
html.con-filtro main > .tab-panel, html.con-filtro .pagina-mesa-cuerpo, html.con-filtro .app-header .topbar {
  filter: saturate(var(--intensidad, 1)) contrast(var(--contraste, 1));
}
#apariencia-panel { position: fixed; z-index: 3000; width: 20rem; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 0.8rem 1rem; }
#apariencia-panel h3 { margin: 0 0 0.6rem; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; }
#apariencia-panel h3 button { border: none; background: none; font-size: 1.1rem; cursor: pointer; color: var(--fg); padding: 0 0.2rem; }
#apariencia-panel .ap-fila { display: grid; grid-template-columns: 6.5rem 1fr 2.6rem; align-items: center; gap: 0.5rem; margin: 0.45rem 0; }
#apariencia-panel input[type=range] { width: 100%; }
#apariencia-panel .ap-valor { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
#apariencia-panel .ap-tema { display: flex; gap: 0.3rem; }
#apariencia-panel .ap-tema button { flex: 1; padding: 0.25rem 0.3rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--fg); cursor: pointer; font-size: 0.9rem; }
#apariencia-panel .ap-tema button.activo { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
#apariencia-panel .ap-pie { display: flex; justify-content: flex-end; margin-top: 0.6rem; }
#apariencia-panel .ap-pie button { padding: 0.2rem 0.7rem; }
/* «+ Nueva base» y «Abrir en pestaña nueva» en su propia caja */
body:not(.con-pestana-completa) .bda-caja-acciones { display: contents; }
body.con-pestana-completa .tabs > .bda-caja-acciones {
  display: inline-flex; align-items: center; gap: 0.15rem;
  border: 1px solid #d6d3cb; border-radius: 8px; background: #f7f6f2;
  padding: 0.1rem 0.35rem; min-height: 2.1rem; box-sizing: border-box;
}
body.con-pestana-completa .tabs > .bda-caja-acciones > button,
body.con-pestana-completa .tabs > .bda-caja-acciones > a {
  font-family: inherit; font-size: 1rem; font-weight: 500; color: #1a1a1a !important;
  line-height: 1.3; padding: 0.2rem 0.55rem; margin: 0; border: none; border-radius: 6px;
  background: transparent; text-decoration: none; white-space: nowrap; cursor: pointer;
}
body.con-pestana-completa .tabs > .bda-caja-acciones > *:hover { background: #e9e6dd; }
body.con-pestana-completa .tabs > .bda-caja-acciones > [hidden] { display: none; }
/* cajas de la fila en tema oscuro */
:root[data-tema="oscuro"] body.con-pestana-completa .bda-grupo,
:root[data-tema="oscuro"] body.con-pestana-completa .tabs > .card.bda-en-nav,
:root[data-tema="oscuro"] body.con-pestana-completa .tabs > .bda-caja-acciones,
:root[data-tema="oscuro"] body.con-pestana-completa .tabs-dropdown,
:root[data-tema="oscuro"] body.con-pestana-completa .tabs .tab-button.bda-volver { background: var(--card-bg); border-color: var(--border); }
:root[data-tema="oscuro"] body.con-pestana-completa .tabs .tab-button,
:root[data-tema="oscuro"] body.con-pestana-completa .tabs .tabs-dropdown-toggle,
:root[data-tema="oscuro"] body.con-pestana-completa .tabs > .card.bda-en-nav label,
:root[data-tema="oscuro"] body.con-pestana-completa .tabs > .bda-caja-acciones > * { color: var(--fg) !important; }
:root[data-tema="oscuro"] body.con-pestana-completa .tabs .tabs-dropdown-toggle.active,
:root[data-tema="oscuro"] body.con-pestana-completa .tabs .tab-button.active { background: #2a3a30; }
:root[data-tema="oscuro"] body.con-pestana-completa .tabs .tab-button:hover,
:root[data-tema="oscuro"] body.con-pestana-completa .tabs .tabs-dropdown-toggle:hover,
:root[data-tema="oscuro"] body.con-pestana-completa .tabs > .bda-caja-acciones > *:hover { background: #2c2f36; }
:root[data-tema="oscuro"] body.con-pestana-completa .tabs > .card.bda-en-nav select { background: var(--bg); color: var(--fg); border-color: var(--border); }
:root[data-tema="oscuro"] body.con-pestana-completa .tabs > .card.bda-en-nav select { color: var(--fg) !important; }

/* 17/10/2026: Ritmos → subestilos que usan el ritmo */
.rit-subs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0; }
.rit-subs .rit-sub { display: inline-flex; gap: 4px; align-items: center; border: 1px solid var(--borde, #ccc); border-radius: 6px; padding: 1px 6px; }
.rit-subs .rit-sub label { display: inline-flex; gap: 3px; align-items: center; margin: 0; }

/* 17/10/2026: 🥁 Caja de ritmos (js/38-caja-ritmos.js) */
.cr-cuerpo { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
.cr-cab, .cr-botones { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.cr-cab .cr-ancho input { min-width: 16em; }
.cr-botones { margin-top: 8px; }
.cr-botones button.activo { background: #c62828; color: #fff; }
.cr-medio { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 10px; align-items: start; }
@media (max-width: 900px) { .cr-medio { grid-template-columns: 1fr; } }
.cr-rueda svg { width: 100%; height: auto; display: block; }
.cr-seg { cursor: pointer; stroke: #fff; stroke-width: 0.3; }
.cr-seg:hover { opacity: 0.75; }
.cr-marca { stroke: #9aa3ad; stroke-width: 0.4; } .cr-marca.comp { stroke: #333; stroke-width: 1; }
.cr-aguja { stroke: #c62828; stroke-width: 1.4; stroke-linecap: round; }
.cr-r-c { font-size: 11px; font-weight: 700; text-anchor: middle; fill: currentColor; } .cr-r-s { font-size: 7px; text-anchor: middle; fill: currentColor; opacity: 0.75; }
.cr-rejilla { overflow-x: auto; }
.cr-fila { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.cr-fila-cab { display: flex; gap: 3px; align-items: center; min-width: 330px; border-left: 5px solid hsl(var(--h) 70% 45%); padding-left: 4px; }
.cr-fila-cab select { max-width: 150px; }
.cr-celdas { display: flex; gap: 1px; }
.cr-celda { width: 22px; height: 26px; padding: 0; border: 1px solid #d5d9de; background: #f4f6f8; border-radius: 3px; font-size: 9px; cursor: pointer; }
.cr-celda.pulso { margin-left: 3px; background: #e9ecf0; } .cr-celda.compas { margin-left: 8px; border-left: 2px solid #555; }
.cr-celda.fuerte { background: hsl(var(--h) 70% 42%); color: #fff; } .cr-celda.suave { background: hsl(var(--h) 70% 72%); }
.cr-celda.ahora { outline: 2px solid #c62828; }
.cr-mas { margin-top: 6px; }
.cr-tira-master { border: 2px solid #555; }
.cr-tiras .ta-tira { border-top: 4px solid hsl(var(--h, 0) 70% 45%); }
.cr-tiras button.on { background: #c62828; color: #fff; }

/* 17/10/2026 (Javi: «las mesas no salen completas»): la página se desplaza y la mesa va en fila, como una mesa de mezclas */
.pagina-caja { display: flex; flex-direction: column; }
.pagina-caja .cr-cuerpo { flex: 1; overflow: auto; padding-bottom: 60px; }
.cr-tiras { display: flex !important; gap: 8px; overflow-x: auto; align-items: stretch; padding-bottom: 6px; }
.cr-tiras .ta-tira { flex: 0 0 150px; }
.cr-tiras .cr-fx summary { cursor: pointer; font-weight: 600; margin: 4px 0; }
.cr-tiras .cr-fx label { display: flex; flex-direction: column; gap: 1px; }

/* 17/10/2026: M y S encendidos se ven (la regla de .ta-tira-cab button los dejaba siempre en blanco) */
.cr-tiras .ta-tira-cab button.on { background: #c62828 !important; color: #fff !important; border-color: #c62828; }
.cr-tiras .ta-tira-cab button[data-cr-m="solo"].on { background: #f9a825 !important; color: #222 !important; border-color: #f9a825; }

/* 17/10/2026: casillas partidas (÷2, ÷3, ÷4) */
.cr-celda.partida { background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--r) - 1px), rgba(255,255,255,.85) calc(100% / var(--r) - 1px) calc(100% / var(--r))); font-weight: 700; }
.cr-parte { stroke: #fff; stroke-width: 0.8; pointer-events: none; }
.cr-pista-ayuda { margin-left: 10px; }

/* 17/10/2026 (Javi: «reparte las secciones para aprovechar el lienzo»): círculo a la izquierda (fijo al bajar);
   a su derecha la rejilla y, debajo de ella, la mesa */
.pagina-caja .cr-cuerpo { display: grid; grid-template-columns: minmax(300px, 30vw) 1fr; grid-template-areas: "barra barra" "rueda rejilla" "rueda mesa";
  gap: 10px; align-content: start; align-items: start; }
.pagina-caja .cr-barra { grid-area: barra; padding: 8px 12px; }
.pagina-caja .cr-medio { display: contents; }
.pagina-caja .cr-rueda { grid-area: rueda; position: sticky; top: 0; }
.pagina-caja .cr-rejilla { grid-area: rejilla; }
.pagina-caja .cr-mesa { grid-area: mesa; margin: 0; }
.pagina-caja .cr-botones { margin-top: 4px; }
.cr-fila { width: 100%; }
.cr-celdas { flex: 1; min-width: 0; }
.cr-celda { flex: 1 1 0; min-width: 16px; max-width: 46px; height: 32px; }
@media (max-width: 900px) { .pagina-caja .cr-cuerpo { grid-template-columns: 1fr; grid-template-areas: "barra" "rueda" "rejilla" "mesa"; } .pagina-caja .cr-rueda { position: static; } }

/* ==== 19/10/2026: varios desplegables en la barra (Elementos musicales + Herramientas) ==== */
.tabs-dropdown ~ .tabs-dropdown { margin-left: 0; }
body.con-pestana-completa .tabs-dropdown ~ .tabs-dropdown { margin-left: 0; }

/* ==== 19/10/2026: Elementos musicales → 🔎 Acordes y escalas (teoría), js/39-teoria.js ==== */
.teo-ayuda h3 { margin: 0.6rem 0 0.3rem; }
.teo-ayuda dd { margin-bottom: 0.5rem; }
.teo-cab h2 { margin: 0.1rem 0 0.2rem; }
.teo-arriba { display: grid; grid-template-columns: minmax(240px, 330px) 1fr; gap: 1rem; align-items: start; margin: 0.6rem 0; }
.teo-reloj-caja { text-align: center; }
.teo-reloj { width: 100%; max-width: 330px; height: auto; }
.teo-aro { fill: none; stroke: var(--border); stroke-width: 2; }
.teo-poli { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 2; }
.teo-poli-comp { fill: none; stroke: #c26a1a; stroke-width: 1.5; stroke-dasharray: 5 4; }
.teo-pos { cursor: pointer; }
.teo-pos circle { stroke-width: 2; }
.teo-pos.teo-off circle { fill: var(--card-bg); stroke: var(--border); }
.teo-pos.teo-off.teo-alt circle { fill: color-mix(in srgb, var(--fg) 8%, var(--card-bg)); }
.teo-pos.teo-on circle { fill: var(--accent); stroke: var(--accent); }
.teo-pos.teo-comp circle { fill: #fbe3cd; stroke: #c26a1a; stroke-dasharray: 4 3; }
.teo-pos:hover circle, .teo-pos:focus circle { stroke-width: 3.5; }
.teo-n { text-anchor: middle; font-size: 13px; font-weight: 700; fill: var(--fg); pointer-events: none; }
.teo-pos.teo-on .teo-n { fill: #fff; }
.teo-pos.teo-comp .teo-n { fill: #7a3c06; }
.teo-r { text-anchor: middle; font-size: 12px; fill: var(--muted); pointer-events: none; }
.teo-pos.teo-on .teo-r { fill: var(--fg); font-weight: 600; }
.teo-centro { text-anchor: middle; font-size: 30px; font-weight: 700; fill: var(--fg); }
.teo-centro-s { text-anchor: middle; font-size: 12px; fill: var(--muted); }
.teo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1rem; align-items: start; }
.teo-bloque { margin: 0; }
.teo-bloque h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.teo-bloque p { margin: 0.35rem 0; }
.teo-nota { background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 6px; padding: 0.35rem 0.5rem; }
.teo-tabla { border-collapse: collapse; font-size: 0.92rem; width: 100%; }
.teo-tabla th { text-align: left; font-weight: 500; color: var(--muted); padding: 0.2rem 0.4rem; white-space: nowrap; }
.teo-tabla td { text-align: center; padding: 0.2rem 0.35rem; border-left: 1px solid var(--border); }
.teo-tabla thead td { font-weight: 700; }
.teo-pat-uniforme, .teo-pat-terciario, .teo-pat-cuartal { color: var(--fg); }
.teo-vector { display: flex; align-items: flex-end; gap: 0.3rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; }
.teo-vector-t { width: 100%; font-size: 0.85rem; color: var(--muted); }
.teo-barra { display: flex; flex-direction: column; align-items: center; width: 4.4rem; }
.teo-barra span { display: block; width: 1.4rem; background: var(--accent); border-radius: 3px 3px 0 0; }
.teo-barra { height: 105px; justify-content: flex-end; }
.teo-barra b { font-size: 0.9rem; }
.teo-barra i { font-style: normal; font-size: 0.72rem; color: var(--muted); text-align: center; line-height: 1.1; }
.teo-donde { margin: 0.2rem 0 0.4rem; padding-left: 1.1rem; }
.teo-donde li { margin: 0.25rem 0; }
.teo-chip { display: inline-block; font-size: 0.8rem; border: 1px solid var(--border); border-radius: 10px; padding: 0 0.4rem; margin: 0.1rem 0.1rem 0 0; white-space: nowrap; }
@media (max-width: 860px) { .teo-arriba { grid-template-columns: 1fr; } }
:root[data-tema="oscuro"] .teo-pos.teo-comp circle { fill: #4a2c12; }
:root[data-tema="oscuro"] .teo-pos.teo-comp .teo-n { fill: #ffd2a8; }

/* 19/10/2026: «Elementos musicales» como app propia: sin universo en la cabecera */
body.app-elementos #active-universe-label { display: none; }

/* 19/10/2026 (Javi): la 12ava que está sonando se ilumina (Escalas y modos, Acordes y Acordes y escalas) */
.esc-suena { background: #ffe066 !important; color: #000 !important; box-shadow: 0 0 0 3px #f2b705, 0 0 14px #f2b705 !important; transition: background 0.05s; }
.teo-pos.esc-suena { background: none !important; box-shadow: none !important; }
.teo-pos.esc-suena circle { fill: #ffd43b !important; stroke: #e08e00 !important; stroke-width: 6 !important; }
.teo-pos.esc-suena .teo-n { fill: #000 !important; }

/* 19/10/2026: botón 🎹 Teclado en la barra de pestañas de todas las páginas */
.tabs-teclado-btn { white-space: nowrap; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--fg); padding: 0.3rem 0.7rem; margin: 0.35rem 0 0.35rem 0.5rem; cursor: pointer; font-size: 0.95rem; align-self: center; }
.tabs-teclado-btn:hover { background: var(--bg); }
body.con-teclado .tabs-teclado-btn { background: #ffe066; border-color: #f2b705; color: #000; }

/* ==== 19/10/2026 (Javi): Acordes y escalas a TODA LA PANTALLA, y cómo se reacomoda en pantallas pequeñas ====
   Ancha (≥1050px): lista | reloj + «Qué es» (fijos al bajar) | tarjetas en 2-3 columnas.
   Mediana (860-1050px): lista | reloj al lado de «Qué es», y debajo las tarjetas.
   Pequeña (<860px, tablet vertical o móvil): todo en una columna; la lista se queda corta y se desplaza. */
main.is-full-tab #tab-teoria { padding: 0 0.4rem; }
#tab-teoria > h1 { margin: 0.3rem 0 0.4rem; font-size: 1.5rem; }
#tab-teoria > .mant-aviso { margin: 0 0 0.6rem; padding: 0.35rem 0.7rem; }
#tab-teoria .esc-layout { grid-template-columns: minmax(220px, 270px) 1fr; gap: 0.8rem; }
#teo-instrumento { max-width: 13rem; }
#tab-teoria .esc-lista-card { max-height: calc(100vh - 1rem); }
#tab-teoria .esc-detalle { padding: 0.8rem 1rem; }
#teo-ayuda dl { column-width: 26rem; column-gap: 2.2rem; }
#teo-ayuda dt { break-after: avoid; }
#teo-ayuda dd { break-inside: avoid; }
.teo-cuerpo { display: grid; grid-template-columns: minmax(260px, clamp(300px, 28vw, 420px)) 1fr; gap: 1rem; align-items: start; margin-top: 0.5rem; }
.teo-izq { position: sticky; top: 0.5rem; display: flex; flex-direction: column; gap: 0.8rem; }
.teo-izq .teo-reloj { max-width: 420px; }
.teo-cuerpo .teo-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.teo-tabla-wrap { overflow-x: auto; }
body.con-teclado #tab-teoria .esc-detalle { padding-bottom: 240px; }
@media (max-width: 1050px) {
  .teo-cuerpo { grid-template-columns: 1fr; }
  .teo-izq { position: static; display: grid; grid-template-columns: minmax(260px, 340px) 1fr; align-items: start; }
}
@media (max-width: 860px) {
  #tab-teoria .esc-layout { grid-template-columns: 1fr; }
  #tab-teoria .esc-lista-card { max-height: 38vh; }
  .teo-izq { grid-template-columns: 1fr; }
  .teo-izq .teo-reloj { max-width: 300px; }
  .teo-cuerpo .teo-grid { grid-template-columns: 1fr; }
  .teo-barra { width: 3.6rem; }
}

/* ==== 19/10/2026 (Javi): Escalas y modos y Acordes también a TODA LA PANTALLA ====
   Ancha: lista | dibujo de 12 líneas | al lado, la nota elegida, botones y familia / escalas donde cabe.
   Mediana (<1050px): lista | dibujo y debajo lo demás. Pequeña (<860px): una sola columna. */
main.is-full-tab #tab-escalas, main.is-full-tab #tab-acordes { padding: 0 0.4rem; }
#tab-escalas > h1, #tab-acordes > h1 { margin: 0.3rem 0 0.4rem; font-size: 1.5rem; }
#tab-escalas > .mant-aviso, #tab-acordes > .mant-aviso { margin: 0 0 0.6rem; padding: 0.35rem 0.7rem; }
#tab-escalas .esc-layout, #tab-acordes .esc-layout { grid-template-columns: minmax(220px, 270px) 1fr; gap: 0.8rem; }
#tab-escalas .esc-lista-card, #tab-acordes .esc-lista-card { max-height: calc(100vh - 1rem); }
#esc-ayuda dl, #aco-ayuda dl { column-width: 26rem; column-gap: 2.2rem; }
#esc-ayuda dt, #aco-ayuda dt { break-after: avoid; }
#esc-ayuda dd, #aco-ayuda dd { break-inside: avoid; }
#esc-instrumento, #aco-instrumento { max-width: 13rem; }
.mant-cuerpo { display: grid; grid-template-columns: fit-content(calc(100% - 290px)) minmax(270px, 1fr); gap: 1rem; align-items: start; }
.mant-dibujo { min-width: 0; overflow-x: auto; }
.mant-lado { position: sticky; top: 0.5rem; min-width: 0; }
.mant-lado .esc-familia { margin-top: 0.6rem; }
body.con-teclado #esc-detalle, body.con-teclado #aco-detalle { padding-bottom: 240px; }
@media (max-width: 1050px) {
  .mant-cuerpo { grid-template-columns: 1fr; }
  .mant-lado { position: static; }
}
@media (max-width: 860px) {
  #tab-escalas .esc-layout, #tab-acordes .esc-layout { grid-template-columns: 1fr; }
  #tab-escalas .esc-lista-card, #tab-acordes .esc-lista-card { max-height: 38vh; }
}

/* 19/10/2026: acordes del compás que vienen de la base (verde) y los puestos a mano (subrayados) */
.mz12-acorde-compas.mz12-acorde-base { fill: #1d7a45; }
.mz12-acorde-compas.mz12-acorde-fijo { text-decoration: underline; }

/* 19/10/2026: forma calculada (Tramos del tema) en la Estructura del tema de la mesa */
.mz12-tramo { border: 1px solid var(--pc, #999); border-left: 5px solid var(--pc, #999); background: color-mix(in srgb, var(--pc, #999) 12%, #fff); color: #222; border-radius: 6px; padding: 0.15rem 0.45rem; font-size: 0.82rem; cursor: pointer; }
.mz12-tramo:hover { background: color-mix(in srgb, var(--pc, #999) 25%, #fff); }
.mz12-tramo i { color: #555; } .mz12-tramo em { color: #b04a00; font-style: normal; font-weight: 600; }
.mz12-tramo.revisado { box-shadow: inset 0 0 0 1px #1d7a45; }
.mz12-forma-txt { font-family: 'SFMono-Regular', Menlo, monospace; font-weight: 700; margin-right: 0.4rem; }

/* 19/10/2026: Estructura del tema reordenada: forma calculada arriba, luego partes y orden */
.mz12-est-bloque { border-top: 1px solid #e6dcc4; margin-top: 0.5rem; padding-top: 0.4rem; }
.mz12-est-sub { font-weight: 600; margin: 0.1rem 0 0.3rem; }
.mz12-est-forma .mz12-forma-txt { font-size: 1.05rem; letter-spacing: 0.15em; }
.mz12-tramo b { margin-right: 0.35em; } .mz12-tramo i, .mz12-tramo em { margin-left: 0.35em; }

/* 19/10/2026: revisar los tramos desde la mesa */
.mz12-tramo { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.1rem 0.25rem 0.1rem 0.35rem; }
.mz12-tramo-ir { background: none; border: none; padding: 0.1rem 0.2rem; cursor: pointer; font: inherit; color: inherit; }
.mz12-tramo-btn { background: #fff; border: 1px solid #d6d3cb; border-radius: 5px; padding: 0 0.3rem; cursor: pointer; font-size: 0.8rem; line-height: 1.4; }
.mz12-tramo-btn.si { background: #d3f0dc; border-color: #1d7a45; color: #1d7a45; font-weight: 700; }
.mz12-tramo.revisado { background: color-mix(in srgb, #2b8a3e 10%, #fff); }
.mz12-tramo-ed input { font-size: 0.85rem; padding: 0.1rem 0.25rem; }
.mz12-tr-progreso { margin-left: 0.6rem; font-weight: 500; font-size: 0.88rem; color: #7a5a00; }
.mz12-tr-progreso.completo { color: #1d7a45; font-weight: 700; }
.mz12-tramo-btn[data-est="tr-revisado"]:not(.si) { color: #c4bfb3; }
.mz12-tr-previa { margin: 0.2rem 0 0.4rem; padding: 0.35rem 0.6rem; background: #fff8e1; border: 1px solid #f0d68a; border-radius: 6px; font-size: 0.88rem; }
.mz12-caja-ctl { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
/* 19/10/2026 (Javi): caja de ritmos — columnas de los instrumentos alineadas (instrumento · golpes/notas · sonido/nota · ▲ ✕)
   y las casillas de todas las pistas empiezan a la misma altura */
.cr-fila-cab { display: grid; grid-template-columns: 150px 84px 140px 34px 34px; gap: 4px; flex: 0 0 auto; width: 462px; min-width: 462px; box-sizing: border-box; }
.cr-fila-cab select { max-width: none; width: 100%; box-sizing: border-box; }
.cr-fila-cab button { width: 34px; padding-left: 0; padding-right: 0; }

/* 19/10/2026: cabecera de la caja de ritmos en tres filas alineadas (patrón · datos · tiempo) */
.pagina-caja .cr-cab { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.cr-cab-fila { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; align-items: end; }
.cr-cab-tiempo { grid-template-columns: 6.5em repeat(4, 7.5em) auto minmax(0, 1fr); }
/* 29/10/2026: ⋯ agrupación (pulsos desiguales) y swing, escondidos; y el compás en notación de Atlas */
.cr-mas-tiempo { align-self: end; font-size: 0.82rem; color: #555; }
.cr-mas-tiempo > summary { cursor: pointer; list-style: none; padding: 3px 8px; border: 1px solid #ccd; border-radius: 6px; display: inline-block; }
.cr-mas-tiempo[open] { display: flex; gap: 10px; align-items: end; }
.cr-mas-tiempo label { display: flex; flex-direction: column; gap: 2px; }
.cr-notacion { align-self: center; font-weight: 600; }
.cr-cab-tit { font-weight: 700; font-size: 0.85rem; color: #555; align-self: center; }
.cr-cab-fila > label { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; color: #555; min-width: 0; }
.cr-cab-fila > label > input, .cr-cab-fila > label > select { width: 100%; box-sizing: border-box; font-size: 0.95rem; color: #111; }
.cr-cab-fila > label.cr-check > span:last-child { font-size: 0.95rem; color: #111; padding: 3px 0; }
@media (max-width: 760px) { .cr-cab-fila, .cr-cab-tiempo { grid-template-columns: 1fr 1fr; } .cr-cab-tit { grid-column: 1 / -1; } }

/* 20/10/2026 (Javi): Estructura del tema más sencilla — ① forma en una línea de letras, ② partes y orden; guardar/deshacer a la derecha */
.mz12-est-der { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; }
.mz12-est-sub button { margin-left: 0.4rem; font-weight: 500; }
.mz12-forma-letras { display: flex; flex-wrap: wrap; gap: 0.1rem 0.25rem; margin: 0.15rem 0 0.35rem; }
.mz12-forma-l { background: none; border: 1px solid transparent; border-radius: 5px; padding: 0 0.25rem; cursor: pointer; font-family: 'SFMono-Regular', Menlo, monospace; font-weight: 700; font-size: 1.05rem; line-height: 1.5; }
.mz12-forma-l:hover { border-color: currentColor; background: #fffdf6; }
.mz12-forma-l.rev::after { content: '✓'; color: #1d7a45; font-size: 0.7em; margin-left: 1px; vertical-align: super; }
.mz12-est-acciones .mz12-tr-progreso { margin-left: 0; }
.mz12-tramos-cajas { margin-top: 0.35rem; }

/* 20/10/2026 (Javi): Estructura del tema = una barra con los trozos en su orden + 2-3 botones */
.mz12-est-ayuda { color: #777; font-size: 0.85rem; font-weight: 400; }
.mz12-barra { display: flex; gap: 2px; margin: 0.4rem 0; height: 1.9rem; }
.mz12-barra-t { flex-basis: 0; min-width: 1.3rem; border: none; border-radius: 4px; cursor: pointer; padding: 0; overflow: hidden; white-space: nowrap;
  background: color-mix(in srgb, var(--pc, #999) 70%, #fff); color: #fff; font-weight: 700; font-size: 0.8rem; text-shadow: 0 1px 1px rgba(0,0,0,0.35); }
.mz12-barra-t:hover { background: var(--pc, #999); }
.mz12-barra-t.rev { box-shadow: inset 0 -3px 0 #1d7a45; }
.mz12-est-que { font-size: 0.9rem; color: #444; }
.mz12-est-editor { border-top: 1px solid #e6dcc4; margin-top: 0.4rem; padding-top: 0.4rem; display: flex; flex-direction: column; gap: 0.35rem; }
.mz12-est-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.mz12-est-acciones > button { flex: 0 0 auto; width: auto; }
/* 20/10/2026 (Javi): Partes en una tabla compacta — fila «Parte» (letras) y fila «Compases» (números) */
.mz12-partes-tabla { overflow-x: auto; }
.mz12-partes-tabla table { border-collapse: collapse; }
.mz12-partes-tabla th { text-align: left; font-weight: 500; color: #666; font-size: 0.82rem; padding: 0.1rem 0.6rem 0.1rem 0; white-space: nowrap; }
.mz12-partes-tabla td { padding: 0.1rem 0.15rem; text-align: center; }
.mz12-pt-l { color: var(--pc); font-weight: 700; position: relative; border-bottom: 3px solid var(--pc); }
.mz12-pt-l button { display: none; position: absolute; top: -0.4rem; right: -0.3rem; border: none; background: #fff; color: #b33; font-size: 0.7rem; padding: 0 0.15rem; cursor: pointer; border-radius: 3px; }
.mz12-pt-l:hover button { display: block; }
.mz12-partes-tabla input { width: 2.8em; text-align: center; padding: 0.1rem; font-size: 0.85rem; -moz-appearance: textfield; }
.mz12-partes-tabla input::-webkit-inner-spin-button { display: none; }
/* 20/10/2026 (Javi): Orden = fila de letras; los botones solo en la letra pulsada */
.mz12-orden-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.2rem; }
.mz12-ord { display: inline-flex; align-items: center; gap: 0.15rem; border-radius: 5px; }
.mz12-ord.sel { background: color-mix(in srgb, var(--pc) 12%, #fff); outline: 1px solid var(--pc); padding-right: 0.2rem; }
.mz12-ord-l { border: none; background: none; color: var(--pc); font-weight: 700; font-size: 0.95rem; cursor: pointer; padding: 0.1rem 0.3rem; border-bottom: 3px solid var(--pc); }
.mz12-ord-l small { font-size: 0.7rem; margin-left: 1px; }
.mz12-ord-ctl button { padding: 0 0.35rem; font-size: 0.75rem; line-height: 1.5; }
.mz12-orden-fila .mz12-flecha { color: #bbb; font-size: 0.75rem; }
.mz12-orden-fila select { font-size: 0.8rem; margin-left: 0.4rem; }
/* 20/10/2026 (Javi): botones del editor de la estructura, a tamaño normal y los tres iguales */
.mz12-est-botones { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-left: 6.2em; }
.mz12-est-botones > button { flex: 0 0 auto; width: auto; height: 2rem; padding: 0 0.8em; font-size: 0.85rem; display: inline-flex; align-items: center; }
/* 20/10/2026 (Javi): casillas de compases para 3 cifras */
.mz12-partes-tabla td { width: 3.6em; min-width: 3.6em; max-width: 3.6em; }
.mz12-partes-tabla td:last-child[rowspan] { width: auto; max-width: none; }
.mz12-partes-tabla input[type="number"] { width: 3.2em !important; min-width: 0 !important; max-width: 3.2em !important; height: 1.7rem !important; padding: 0 0.1rem !important; box-sizing: border-box; }
/* 20/10/2026 (Javi): la barra de trozos se desliza si no caben todos */
.mz12-barra { overflow-x: auto; overflow-y: hidden; height: auto; padding-bottom: 4px; max-width: 100%; }
.mz12-barra-t { flex-shrink: 0; height: 1.9rem; }
/* 20/10/2026 (Javi): Partes y orden en una sola tabla; clic en una letra = sus botones debajo */
.mz12-partes-tabla td.mz12-pt-mas { width: auto; max-width: none; min-width: 0; white-space: nowrap; padding-left: 0.5rem; text-align: left; }
.mz12-pt-mas button, .mz12-pt-mas select { font-size: 0.8rem; height: 1.7rem; padding: 0 0.6em; width: auto; }
.mz12-pt-l { border-bottom: none; }
.mz12-pt-l .mz12-ord-l { display: inline-block; position: static; width: 100%; }
.mz12-pt-l.sel { background: color-mix(in srgb, var(--pc) 15%, #fff); border-radius: 5px 5px 0 0; }
.mz12-ord-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding-left: 6.2em; }
.mz12-ord-ctl button { width: auto; height: 1.8rem; padding: 0 0.7em; font-size: 0.8rem; flex: 0 0 auto; }
.mz12-veces { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; margin: 0 0.3rem; }
.mz12-veces b { min-width: 1.2em; text-align: center; }
.mz12-veces button { width: 1.8rem !important; padding: 0 !important; }
.mz12-barra-n { font-weight: 500; font-size: 0.75rem; }
.mz12-barra-t { text-overflow: ellipsis; padding: 0 0.3rem; }
/* 20/10/2026 (Javi: «alinea y reordena los campos»): Qué suena · Cómo suena · Tonalidad en FILAS, con el nombre de
   cada fila en una columna del mismo ancho, desplegables a su tamaño y botones normales */
.mz-grupo .mz-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; min-height: 2.1rem; width: 100%; }
.mz-grupo .mz-fila > *, .mz-grupo .mz-fila label, .mz-grupo .mz-fila .mz12-sonido, .mz-grupo .mz-fila .mz12-sonido-vel,
.mz-grupo .mz-fila .mz-afin-pieza, .mz-grupo .mz-fila .mz12-compas-ctl, .mz-grupo .mz-fila .mz12-caja-ctl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; margin: 0; }
.mz-grupo .mz-fila label { gap: 0.4rem; }
.mz-grupo .mz-etq { color: #555; white-space: nowrap; }
.mz-grupo .mz-fila > :first-child > .mz-etq:first-child, .mz-grupo .mz-fila > :first-child > label:first-child > .mz-etq:first-child { min-width: 8.5em; }
.mz-grupo .mz-fila-sin-etq { padding-left: calc(8.5em + 0.4rem); }
.mz-grupo .mz-fila select { width: auto !important; max-width: 22em; height: 1.9rem; font-size: 0.88rem; }
.mz-grupo .mz-fila input[type="number"] { width: 4.5em !important; height: 1.9rem; font-size: 0.88rem; }
.mz-grupo .mz-fila input[type="range"] { width: 90px !important; }
.mz-grupo .mz-fila button { width: auto !important; height: 1.9rem; padding: 0 0.8em; font-size: 0.85rem; display: inline-flex; align-items: center; margin: 0; flex: 0 0 auto; }
/* 20/10/2026 (Javi: «que las cajas blancas empiecen en la misma columna»): cada fila es una rejilla con las mismas columnas
   nombre · caja · nombre · caja · …  (los envoltorios se «abren» con display: contents para que sus piezas caigan en la rejilla) */
.mz-grupo .mz-fila { display: grid !important; grid-template-columns: 8.5em 15em 9.5em 15em 7.5em max-content max-content; column-gap: 0.6rem; row-gap: 0.3rem; align-items: center; justify-items: start; }
.mz-grupo .mz-fila .mz12-sonido, .mz-grupo .mz-fila .mz12-partitura-ctl, .mz-grupo .mz-fila .mz12-fuentes-ctl, .mz-grupo .mz-fila .mz12-caja-ctl,
.mz-grupo .mz-fila .mz12-sonido-vel, .mz-grupo .mz-fila .mz-afin-pieza, .mz-grupo .mz-fila .mz12-compas-ctl,
.mz-grupo .mz-fila label:has(select), .mz-grupo .mz-fila label:has(input[type="number"]), .mz-grupo .mz-fila label:has(input[type="range"]) { display: contents !important; }
.mz-grupo .mz-fila > *, .mz-grupo .mz-fila select, .mz-grupo .mz-fila .hint { min-width: 0; max-width: 100%; }
.mz-grupo .mz-fila .mz-etq { min-width: 0 !important; }
.mz-grupo .mz-fila select { width: 100% !important; max-width: 100%; }
.mz-grupo .mz-fila .mz12-fuentes-ctl .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-grupo .mz-fila .mz12-fuentes-ctl .hint, .mz-grupo .mz-fila .mz12-fuentes-ctl select { grid-column: 2 / 4; width: 100%; }
.mz-grupo .mz-fila-sin-etq { display: flex !important; padding-left: calc(8.5em + 0.6rem); gap: 0.5rem; }
/* 20/10/2026 (Javi): ↺ Originales bajo la caja de Raíz y ✨ Propuesta bajo la de Escala */
.mz-grupo .mz-fila.mz-fila-sin-etq { display: grid !important; padding-left: 0; }
.mz-grupo .mz-fila-sin-etq [data-teo="originales"] { grid-column: 2; }
.mz-grupo .mz-fila-sin-etq [data-teo="proponer"] { grid-column: 4; }

/* 20/10/2026 (Javi): 🎼 ARMONÍA — reloj (círculo de quintas) + teclado + tarjetas cortas + tira de acordes */
.ar-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; }
.ar-top h1 { margin: 0; }
.ar-pests { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.ar-pests button { border: 1px solid #d6d0c0; background: #fff; border-radius: 18px; padding: 0.35rem 0.9rem; cursor: pointer; font-size: 0.92rem; }
.ar-pests button.on { background: #2f6fb0; color: #fff; border-color: #2f6fb0; }
.ar-cuerpo { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 1.2rem; margin-top: 0.8rem; align-items: start; }
@media (max-width: 860px) { .ar-cuerpo { grid-template-columns: 1fr; } }
.ar-dibujo { position: sticky; top: 0.5rem; }
.ar-reloj { width: 100%; height: auto; display: block; }
.ar-sec { stroke: #fff; stroke-width: 2; cursor: pointer; transition: transform 0.15s, filter 0.15s; transform-origin: 180px 180px; }
.ar-sec:hover { filter: brightness(1.12); }
.ar-sec.on { stroke: #111; stroke-width: 3.5; filter: brightness(1.25) drop-shadow(0 0 6px rgba(0,0,0,0.35)); }
.ar-t { text-anchor: middle; font-size: 15px; font-weight: 700; fill: #555; pointer-events: none; }
.ar-t.cl { fill: #fff; } .ar-t-m { font-size: 11.5px; font-weight: 600; } .ar-dim { font-size: 11px; }
.ar-centro { fill: #fffdf6; stroke: #e6dcc4; }
.ar-casa { text-anchor: middle; font-size: 20px; font-weight: 800; fill: #222; }
.ar-arm { text-anchor: middle; font-size: 11.5px; fill: #666; }
.ar-camino { fill: none; stroke: #222; stroke-width: 2.2; opacity: 0.55; }
.ar-camino.on { stroke: #d9480f; opacity: 1; stroke-width: 3.5; }
.ar-num { fill: #fff; stroke: #222; stroke-width: 1.2; } .ar-num.on { fill: #ffd43b; }
.ar-num-t { text-anchor: middle; font-size: 9.5px; font-weight: 700; pointer-events: none; }
.ar-tec { width: 100%; height: auto; margin-top: 0.6rem; display: block; }
.ar-k { fill: #fff; stroke: #999; } .ar-kn { fill: #333; }
.ar-k.on { fill: #4dabf7; } .ar-k.tension { fill: #e03131; }
.ar-k-t { font-size: 9px; fill: #888; text-anchor: middle; }
.ar-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.6rem; }
.ar-cab select { width: auto; height: 1.9rem; }
.ar-link { font-size: 0.85rem; }
.ar-card { background: #fff; border: 1px solid #e6dcc4; border-radius: 10px; padding: 0.55rem 0.8rem; margin-bottom: 0.55rem; }
.ar-card-clave { border-color: #e03131; background: #fff5f5; }
.ar-card-t { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-weight: 700; }
.ar-card p { margin: 0.3rem 0 0; color: #444; font-size: 0.92rem; line-height: 1.4; }
.ar-play { width: auto; flex: 0 0 auto; height: 1.8rem; padding: 0 0.8em; font-size: 0.82rem; border-radius: 14px; border: 1px solid #2f6fb0; background: #2f6fb0; color: #fff; cursor: pointer; }
.ar-play.on { background: #c92a2a; border-color: #c92a2a; }
.ar-lista { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }
.ar-item { width: auto; border: 1px solid #d6d0c0; background: #fff; border-radius: 8px; padding: 0.3rem 0.6rem; cursor: pointer; text-align: left; display: flex; flex-direction: column; }
.ar-item small { color: #888; font-size: 0.75rem; } .ar-item.on { border-color: #2f6fb0; box-shadow: inset 0 0 0 1px #2f6fb0; background: #eef4fb; }
.ar-analisis { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.03em; }
.ar-tira { display: flex; gap: 3px; margin-top: 1rem; }
.ar-blq { flex-basis: 0; min-width: 2.4rem; height: 3.1rem; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: color-mix(in srgb, var(--c) 78%, #fff);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.ar-blq b { font-size: 0.95rem; } .ar-blq small { font-size: 0.72rem; opacity: 0.9; }
.ar-blq.on { background: var(--c); transform: translateY(-3px); box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
.ar-ley { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.8rem; color: #666; margin-top: 0.4rem; }
.ar-ley i { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-right: 0.3rem; vertical-align: -1px; }

/* 20/10/2026 (Javi): ⏱ BPM en las páginas de Elementos musicales */
.em-bpm { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.88rem; margin-left: 0.4rem; white-space: nowrap; }
.em-bpm input { width: 4.2em !important; height: 1.8rem; padding: 0 0.3rem; }

.ar-tonal { display: inline-block; font-size: 0.72rem; font-weight: 600; color: #7a5a00; background: #fff4d6; border: 1px solid #f0d68a; border-radius: 10px; padding: 0 0.45rem; margin-left: 0.3rem; vertical-align: 1px; cursor: help; }
.ar-modal { color: #5f3dc4; background: #f3f0ff; border-color: #d0bfff; }
.ar-nota { font-size: 0.85rem; color: #555; margin: 0 0 0.6rem; }

.ar-card-tipos { background: #fbfaf6; }
.ar-tipo { border-top: 1px dashed #e6dcc4; padding-top: 0.4rem; margin-top: 0.4rem; }
.ar-tipo p { margin-top: 0.15rem; }
.ar-ayuda { margin-top: 0.6rem; font-size: 0.92rem; } .ar-ayuda p { margin: 0.35rem 0; line-height: 1.45; }

/* 21/10/2026 (Javi): 🔬 Análisis del tema (js/42-analisis-tema.js) */
.mz-ana-seccion { margin: 10px 0; padding: 12px; border: 1px solid #d0d7e2; border-radius: 10px; background: #fbfcfe; }
.ana-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.ana-titulo { font-weight: 700; font-size: 1.05em; }
.ana-botones { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.ana-botones button, .ana-oir { padding: 3px 10px; border-radius: 6px; border: 1px solid #c5cdd8; background: #fff; cursor: pointer; font-size: 0.9em; width: auto; }
.ana-botones button:hover, .ana-oir:hover { background: #eef4ff; }
.ana-oir { padding: 1px 7px; font-size: 0.8em; margin: 1px 2px; }
.ana-aviso { background: #fff9db; border: 1px solid #ffe066; padding: 6px 10px; border-radius: 6px; }
.ana-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.ana-tarjeta { background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; padding: 10px 12px; }
.ana-tarjeta h4 { margin: 0 0 4px; font-size: 1em; }
.ana-tarjeta h5 { margin: 10px 0 4px; font-size: 0.88em; color: #495057; }
.ana-resumen { margin: 0; line-height: 1.45; }
.ana-ficha { margin-top: 10px; }
.ana-mas > summary { cursor: pointer; color: #1c7ed6; font-size: 0.88em; margin-top: 6px; }
.ana-mas-cuerpo { padding-top: 4px; }
.ana-ayuda { margin-top: 10px; }
.ana-barras { display: flex; flex-direction: column; gap: 3px; }
.ana-barra { display: grid; grid-template-columns: minmax(70px, auto) 1fr 52px; align-items: center; gap: 6px; font-size: 0.85em; }
.ana-barra-et { white-space: nowrap; font-weight: 600; }
.ana-barra-fondo { background: #f1f3f5; border-radius: 4px; height: 12px; overflow: hidden; }
.ana-barra-fondo > span { display: block; height: 100%; border-radius: 4px; }
.ana-barra-n { text-align: right; color: #495057; }
.ana-fun { display: flex; border-radius: 6px; overflow: hidden; font-size: 0.8em; color: #fff; }
.ana-fun > span { padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ana-lista { margin: 0; padding-left: 18px; font-size: 0.88em; line-height: 1.6; }
.ana-secuencia { display: flex; flex-wrap: wrap; gap: 3px; }
.ana-secuencia button { border: 1px solid #dee2e6; background: #fff; border-radius: 5px; padding: 1px 6px; font-size: 0.82em; cursor: pointer; width: auto; }
.ana-secuencia button small { color: #adb5bd; margin-right: 3px; }
.ana-secuencia button:hover { background: #eef4ff; }
.ana-svg { width: 100%; height: 90px; display: block; background: #fff; border: 1px solid #eef0f3; border-radius: 6px; }
.ana-svg-pie { display: flex; justify-content: space-between; font-size: 0.75em; color: #868e96; }
.ana-forma-barra { display: flex; height: 26px; border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.ana-forma-barra button { border: 0; border-right: 1px solid #fff; color: #222; font-weight: 700; cursor: pointer; min-width: 0; padding: 0; width: auto; }
.ana-tabla { border-collapse: collapse; font-size: 0.85em; width: 100%; }
.ana-tabla th, .ana-tabla td { border-bottom: 1px solid #eef0f3; padding: 2px 6px; text-align: left; }
.ana-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
/* 21/10/2026: botones del análisis legibles y de tamaño normal (los de la mesa son blancos y estirados) */
.mz-ana-seccion button:not(.ana-forma-barra button) { flex: none !important; }
.mz-ana-seccion button { color: #212529 !important; width: auto !important; min-width: 0; }
.ana-botones button { background: #fff !important; font-weight: 600; }
.ana-botones button[data-ana="guardar"] { background: #e7f5ff !important; border-color: #74c0fc; }

/* 21/10/2026: «📜 Generar ficha de la IA» debajo del título del análisis */
.ana-acciones { margin: 0 0 10px; }
.ana-acciones button { padding: 4px 12px; border-radius: 6px; border: 1px solid #c5cdd8; background: #fff !important; cursor: pointer; font-weight: 600; }
.ana-acciones button:hover { background: #eef4ff !important; }

/* 21/10/2026: tablas de acordes del análisis (principales / resto) con 🔊 Oír y 👁 Ver */
.ana-acordes td { vertical-align: middle; }
.ana-acc { text-align: right; }
.ana-acc button { display: inline-block; margin: 1px 0 1px 3px; }
.ana-tarjeta { min-width: 0; overflow-x: auto; }
.ana-acc button { padding: 1px 7px; margin-left: 3px; border-radius: 5px; border: 1px solid #c5cdd8; background: #fff; cursor: pointer; font-size: 0.8em; }
.ana-acc button.activo, .ana-acc button.sonando { background: #e7f5ff; border-color: #74c0fc; }
.ana-mini { display: inline-block; width: 50px; height: 8px; background: #f1f3f5; border-radius: 4px; overflow: hidden; vertical-align: middle; }
.ana-mini > span { display: block; height: 100%; background: #845ef7; }
.ana-ver td { background: #f8f9fa; font-size: 0.85em; }
/* 21/10/2026: al abrir «Ver más», la tarjeta ocupa todo el ancho (cabe la tabla de acordes) */
.ana-tarjeta:has(> details.ana-mas[open]) { grid-column: 1 / -1; }
.ana-acc { white-space: nowrap; }
.ana-acordes { max-width: 760px; }

/* 21/10/2026 (Javi): en Armonía quedan FIJOS la cabecera (título, pestañas, Casa/BPM) y el dibujo (reloj + teclado); el resto se desplaza */
#ar-pagina .ar-top { position: sticky; top: var(--ar-h, 0px); z-index: 6; background: #fff; padding: 4px 0 6px; }
#ar-pagina .ar-texto .ar-cab { position: sticky; top: var(--ar-t, 0px); z-index: 5; background: #fff; padding: 6px 0; }
#ar-pagina .ar-dibujo { position: sticky; top: calc(var(--ar-t, 0px) + 6px); }
.ar-pests button { color: #212529; }
.ar-pests button.on { color: #fff; }

/* 21/10/2026 (Javi: «lo mismo en páginas semejantes»): en Escalas y modos, Acordes y Teoría quedan FIJOS el título y la lista
   de la izquierda (con su propio desplazamiento); la ficha de la derecha se desplaza */
#tab-escalas > h1, #tab-acordes > h1, #tab-teoria > h1 { position: sticky; top: var(--app-h, 0px); z-index: 6; background: #fff; margin-top: 0; padding: 6px 0; }
#tab-escalas .esc-lista-card, #tab-acordes .esc-lista-card, #tab-teoria .esc-lista-card { position: sticky; top: calc(var(--app-h, 0px) + 60px); max-height: calc(100vh - var(--app-h, 0px) - 72px); overflow-y: auto; }
#tab-escalas .esc-layout, #tab-acordes .esc-layout, #tab-teoria .esc-layout { align-items: start; }

/* 21/10/2026: nombres de la lista de Armonía (progresiones/cadencias) legibles */
.ar-item { color: #212529; }
.ar-item.on { color: #212529; }
/* 21/10/2026 (Javi): 📖 LIBRO DE MÚSICA (js/43-libro.js). Índice fijo a la izquierda; cabecera del capítulo y dibujo fijos; el texto se desplaza */
#lb-pagina .lb-top { position: sticky; top: var(--lb-h, 0px); z-index: 7; background: #fff; padding: 4px 0; }
#lb-pagina .lb-top h1 { margin: 0; }
.lb-libro { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; align-items: start; }
.lb-col-indice { position: sticky; top: calc(var(--lb-t, 0px) + 4px); max-height: calc(100vh - var(--lb-t, 0px) - 12px); overflow-y: auto; }
.lb-indice { display: flex; flex-direction: column; gap: 2px; border: 1px solid #e3e8ef; border-radius: 10px; padding: 8px; background: #fbfcfe; }
.lb-indice-t { font-weight: 700; margin-bottom: 4px; }
.lb-parte { font-size: 0.75rem; font-weight: 700; color: #868e96; text-transform: uppercase; letter-spacing: 0.04em; margin: 8px 0 2px; }
.lb-indice button { text-align: left; border: 0; background: transparent; color: #212529; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; width: auto; }
.lb-indice button:hover { background: #eef4ff; }
.lb-indice button.on { background: #2f6fb0; color: #fff; }
.lb-indice button.lb-pronto { color: #868e96; }
.lb-indice button.on.lb-pronto { color: #fff; }
.lb-indice .lb-n { display: inline-block; min-width: 1.4em; color: inherit; opacity: 0.7; }
.lb-cab { position: sticky; top: var(--lb-t, 0px); z-index: 6; background: #fff; padding: 4px 0 6px; }
.lb-cab h2 { margin: 0; font-size: 1.3rem; }
.lb-parte-t { font-size: 0.78rem; color: #868e96; text-transform: uppercase; letter-spacing: 0.04em; }
.lb-cuerpo { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: 1rem; align-items: start; }
.lb-cuerpo-uno { grid-template-columns: minmax(0, 760px); }
.lb-dibujo { position: sticky; top: calc(var(--lb-c, 0px) + 4px); max-height: calc(100vh - var(--lb-c, 0px) - 12px); overflow-y: auto; }
.lb-svg { width: 100%; height: auto; display: block; border: 1px solid #eef0f3; border-radius: 8px; margin-bottom: 6px; }
.lb-reloj { max-width: 340px; margin: 0 auto 6px; }
.lb-pie { font-size: 0.82rem; color: #495057; margin: 2px 0 8px; }
.lb-fila { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0; font-size: 0.9rem; }
.lb-play, .lb-abrir { padding: 4px 12px; border-radius: 6px; border: 1px solid #74c0fc; background: #e7f5ff; color: #1864ab; cursor: pointer; font-weight: 600; width: auto; }
.lb-play:hover, .lb-abrir:hover { background: #d0ebff; }
.lb-mandos { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; margin: 6px 0; }
.lb-mandos label { display: grid; grid-template-columns: 120px minmax(120px, 1fr) minmax(120px, auto); gap: 8px; align-items: center; }
.lb-mandos span { color: #495057; font-size: 0.85rem; }
.lb-deslizas label { display: flex; flex-direction: column; align-items: center; font-size: 0.72rem; color: #868e96; }
.lb-deslizas input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 18px; height: 70px; }
.lb-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; line-height: 1.5; }
.lb-card h4 { margin: 0 0 6px; }
.lb-card ul { padding-left: 18px; margin: 4px 0; }
.lb-tabla { border-collapse: collapse; font-size: 0.85rem; width: 100%; }
.lb-tabla th, .lb-tabla td { border-bottom: 1px solid #eef0f3; padding: 2px 6px; text-align: left; }
.lb-ints { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0; }
.lb-ints button { border: 2px solid var(--c); background: #fff; color: #212529; border-radius: 6px; padding: 2px 7px; cursor: pointer; font-size: 0.85rem; width: auto; }
.lb-ints button.on { background: var(--c); color: #fff; }
.lb-navega { display: flex; justify-content: space-between; gap: 8px; margin: 14px 0 30px; }
.lb-navega button { border: 1px solid #c5cdd8; background: #fff; color: #212529; border-radius: 8px; padding: 6px 12px; cursor: pointer; width: auto; }
.lb-navega button:hover { background: #eef4ff; }
@media (max-width: 900px) { .lb-libro, .lb-cuerpo { grid-template-columns: minmax(0, 1fr); } .lb-col-indice, .lb-dibujo { position: static; max-height: none; } }
/* 21/10/2026: Libro, capítulos 13-14: teclado y tira de acordes */
.lb-tec { max-width: 520px; }
.lb-tira { display: flex; gap: 3px; margin: 6px 0; flex-wrap: wrap; }
.lb-tira button { flex: 1 1 60px; min-width: 60px; border: 1px solid #c5cdd8; background: #fff; color: #212529; border-radius: 6px; padding: 4px 6px; cursor: pointer; font-weight: 600; display: flex; flex-direction: column; align-items: center; font-size: 0.85rem; width: auto; }
.lb-tira button small { font-weight: 400; color: #868e96; font-size: 0.72rem; }
.lb-tira button.on { background: #1c7ed6; color: #fff; border-color: #1c7ed6; }
.lb-tira button.on small { color: #e7f5ff; }
/* 21/10/2026 (Javi: «este gráfico es muy claro, aplícalo en la mesa»): 🟦 VISTA CLARA de las 12 líneas, como el rollo del Libro
   — barras suaves y redondeadas sin números dentro, líneas casi invisibles salvo la raíz, compases tenues (Ajuste fino → Qué se dibuja) */
.mz12-claro .mz12-nota rect { rx: 5px; ry: 5px; stroke: none; fill-opacity: 0.78; }
.mz12-claro .mz12-nota text { display: none; }
.mz12-claro .mz12-nota.sonando rect, .mz12-claro .mz12-nota.marcada rect, .mz12-claro .mz12-nota.sel rect { fill-opacity: 1; stroke: #212529; stroke-width: 1.5; }
.mz12-claro .mz12-nota.fuera rect { stroke: #e03131; stroke-width: 1.5; stroke-dasharray: none; }
.mz12-claro .mz12-linea { stroke: #f1f3f5 !important; stroke-width: 1 !important; stroke-dasharray: none !important; opacity: 1; }
.mz12-claro .mz12-linea.es-raiz { stroke: #ced4da !important; stroke-width: 1.5 !important; }
.mz12-claro .mz12-linea.sonando, .mz12-claro .mz12-linea.iluminada { stroke: #ffe8cc !important; stroke-width: 2 !important; }
.mz12-claro .mz12-barra { stroke: #e9ecef !important; opacity: 1; }
.mz12-claro .mz12-lienzo, .mz12-claro .mz12-fila svg { background: #fbfcfe; }
/* 21/10/2026: 👂 ejercicios de oído del Libro */
.lb-ejercicio { border-color: #b2f2bb; background: #f8fff9; }
.lb-resps { gap: 6px; }
.lb-resp { padding: 6px 14px; border-radius: 8px; border: 1px solid #c5cdd8; background: #fff; color: #212529; cursor: pointer; font-weight: 600; width: auto; }
.lb-resp:hover:not([disabled]) { background: #eef4ff; }
.lb-resp.bien { background: #d3f9d8; border-color: #2b8a3e; }
.lb-resp.mal { background: #ffe3e3; border-color: #c92a2a; }
.lb-veredicto { font-weight: 600; }
.lb-veredicto.bien { color: #2b8a3e; } .lb-veredicto.mal { color: #c92a2a; }
.lb-play.lb-suave { background: #fff; border-color: #dee2e6; color: #868e96; }

/* 21/10/2026: 🔊 Su sonido (página de Instrumentos, js/44-instrumento-sonido.js) */
.isn-dialogo { width: min(980px, 96vw); border: 0; border-radius: 12px; padding: 14px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.isn-dialogo::backdrop { background: rgba(0,0,0,.35); }
.isn-cab { display: flex; justify-content: space-between; align-items: center; }
.isn-cab h3 { margin: 0; }
.isn-cab button { border: 1px solid #dee2e6; background: #fff; color: #212529; border-radius: 6px; padding: 2px 10px; cursor: pointer; width: auto; }
.isn-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.isn-card { border: 1px solid #e3e8ef; border-radius: 10px; padding: 10px 12px; background: #fff; }
.isn-card h4 { margin: 0 0 6px; }
.isn-card p { margin: 6px 0; line-height: 1.45; }
.isn-ancha { grid-column: 1 / -1; }
.isn-svg { width: 100%; height: auto; display: block; border: 1px solid #eef0f3; border-radius: 6px; }
.inst-btn-sonido { background: #e7f5ff !important; color: #1864ab !important; border: 1px solid #74c0fc !important; }
@media (max-width: 760px) { .isn-rejilla { grid-template-columns: 1fr; } }

/* 21/10/2026: Instrumentos agrupados por familia (plegables, cerradas de entrada) */
.inst-familia td { background: #f1f3f5; cursor: pointer; padding: 6px 8px; border-top: 2px solid #fff; }
.inst-familia:hover td { background: #e7f5ff; }
.inst-flecha { display: inline-block; width: 1em; color: #495057; }

/* 21/10/2026: teclado grande de «Su sonido» */
.isn-tec-caja { overflow-x: auto; border: 1px solid #eef0f3; border-radius: 6px; padding: 4px; background: #fbfcfe; }
.isn-tec { display: block; }

/* 21/10/2026 (Javi): Ajuste fino a TODO el ancho; «Qué se dibuja» con su muestra de 12 líneas al lado */
.mz-fino-apartados { grid-template-columns: 1fr !important; }
.mz-fino-apartado:not(.mz-ap-dibuja) { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.mz-fino-apartado:not(.mz-ap-dibuja) > .mz-fino-tit { flex: 0 0 100%; }
.mz-fino-apartado.mz-ap-dibuja { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 460px); gap: 6px 16px; align-items: start; }
.mz-ap-dibuja > .mz-fino-tit { grid-column: 1 / -1; }
.mz-ap-opciones { columns: 2 230px; column-gap: 18px; }
.mz-ap-opciones .mz-fino-fila { break-inside: avoid; margin-bottom: 3px; }
.mz-fino-fila > label { flex-wrap: nowrap !important; }
.mz-fino-fila > label > input[type="checkbox"] { flex: 0 0 auto; margin: 0 2px 0 0; }
.mz-muestra { position: sticky; top: 8px; background: #fbfcfe; border: 1px solid #e4dfd3; border-radius: 8px; padding: 6px 8px; }
.mz-muestra-tit { font-weight: 700; font-size: .78rem; margin-bottom: 3px; }
.mz-muestra-svg { display: block; max-width: 100%; height: auto; }
.mz-muestra .hint { font-size: .7rem; margin-top: 3px; }
.mz-pulso-ahora { display: inline-block; background: #f1f3f5; border: 1px solid #dee2e6; border-radius: 6px; padding: 0 6px; font-size: .78rem; }
@media (max-width: 760px) { .mz-fino-apartado.mz-ap-dibuja { grid-template-columns: 1fr; } .mz-muestra { position: static; } }
.mz-ap-opciones [data-teo="cerradosDef"] { width: auto !important; display: inline-block; font-size: .75rem !important; padding: 2px 10px !important; }


/* 22/10/2026, pedido de Javi: Generación de Conocimiento aprovecha toda la pantalla y el
   diagrama se ajusta a la ventana, sin zoom ni deslizadores. «Estado del proceso» mantiene
   su aspecto de siempre (Javi: «estaba mejor antes»), solo con menos aire arriba y abajo. */
main.is-full-tab #tab-aprendizaje > h1 { font-size: 1.3rem; margin: 0.2rem 0 0.4rem; }
#tab-aprendizaje .pipeline-panel--horizontal { padding: 0.6rem 1.25rem; margin-bottom: 0.6rem; }
#tab-aprendizaje .pipeline-panel--horizontal h2 { margin: 0 0 0.3rem; }
#tab-aprendizaje .pipeline-panel--horizontal .pipeline-stages { min-height: 0; }
#tab-aprendizaje #learn-diagram-card { padding: 0.5rem 0.75rem; }
#tab-aprendizaje .learn-flow-legend { margin: 0.25rem 0 0.35rem; }
#tab-aprendizaje .learn-flow-wrap { max-height: none; overflow: hidden; }
#tab-aprendizaje .learn-flow-desc-bar { margin-top: 0.35rem; padding: 0.35rem 0.7rem; }
#tab-aprendizaje .aprendizaje-diagram-row { margin-top: 0; }
#modelos-descripcion .modelos-familias { font-size: 0.85em; }

/* 22/10/2026: 🧩 Unir lo repetido (ventana de revisión, js/27-consolidacion.js) */
.rep-modal { max-width: 860px; width: 92vw; max-height: 86vh; overflow: auto; }
.rep-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0.6rem; }
.rep-ayuda { margin: 0 0 0.6rem; }
.rep-lista { display: flex; flex-direction: column; gap: 0.7rem; }
.rep-tarjeta { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.8rem; background: var(--card-bg); }
.rep-tarjeta.rep-hecha { opacity: 0.55; border-color: var(--ok); }
.rep-tarjeta.rep-descartada { opacity: 0.45; }
.rep-une { font-size: 0.85rem; color: var(--muted); }
.rep-miembros { margin: 0.25rem 0 0.5rem 1.1rem; padding: 0; }
.rep-tipo { font-size: 0.72rem; border: 1px solid var(--border); border-radius: 6px; padding: 0 0.3rem; color: var(--muted); }
.rep-queda { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.rep-queda input { flex: 1 1 auto; max-width: 480px; }
.rep-alias { margin-top: 0.35rem; font-size: 0.85rem; }
.rep-chip { display: inline-block; border-radius: 999px; padding: 0.05rem 0.5rem; background: var(--bg); border: 1px solid var(--border); margin: 0.1rem 0; }
.rep-motivo { margin-top: 0.3rem; }
.rep-contenido { margin-top: 0.3rem; font-size: 0.85rem; white-space: pre-wrap; }
.rep-botones { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
/* 22/10/2026, Javi: números más pequeños y todos a la misma altura (alineados en una fila). */
#tab-aprendizaje .pipeline-panel--horizontal .pipeline-stages { align-items: flex-start; }
#tab-aprendizaje .pipeline-panel--horizontal .pipeline-value { font-size: 1.35rem; line-height: 1.2; }
#tab-aprendizaje .pipeline-panel--horizontal .pipeline-pending { display: block; font-size: 0.68rem; font-weight: 400; line-height: 1.2; }
/* 22/10/2026: 🧹 Limpieza gratis (js/28-limpieza-gratis.js) */
.lim-cifras { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0.6rem 0; }
.lim-cifras div { display: flex; flex-direction: column; align-items: center; }
.lim-cifras strong { font-size: 1.35rem; }
.lim-cifras span { font-size: 0.78rem; color: var(--muted); }
.lim-ejemplos { font-size: 0.82rem; margin: 0.4rem 0 0 1rem; padding: 0; }
/* 22/10/2026: 👉 siguiente paso del diagrama y pausa de la muestra de «Ejecutar todo» */
.learn-flow-pill--siguiente { box-shadow: 0 0 0 3px #f2b705; animation: siguiente-latido 1.6s ease-in-out infinite; }
.learn-flow-pill--siguiente::before { content: '👉 '; }
@keyframes siguiente-latido { 50% { box-shadow: 0 0 0 6px rgba(242, 183, 5, 0.35); } }
.muestra-pausa { margin-top: 0.6rem; padding: 0.6rem 0.8rem; border: 2px solid #f2b705; border-radius: 8px; background: var(--card-bg); display: flex; flex-direction: column; gap: 0.35rem; }
.muestra-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consulta-pasos-aviso { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
/* 22/10/2026: diagrama a la izquierda, pasos a la derecha, barra arrastrable en medio */
.learn-split { display: flex; align-items: stretch; gap: 0; }
.learn-split-izq { flex: 0 0 55%; min-width: 0; }
.learn-split-barra { flex: 0 0 10px; cursor: col-resize; margin: 0 4px; border-radius: 6px; background: var(--border); position: relative; }
.learn-split-barra::after { content: '⋮'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--muted); font-size: 1rem; }
.learn-split-barra:hover, body.learn-split-moviendo .learn-split-barra { background: var(--accent); }
body.learn-split-moviendo { user-select: none; cursor: col-resize; }
.learn-split-der { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); overflow: hidden; }
.learn-split-der-titulo { font-weight: 600; font-size: 0.85rem; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); color: var(--muted); }
.learn-split-der > .result { flex: 1 1 auto; overflow: auto; margin: 0; padding: 0.4rem 0.6rem; }
#tab-aprendizaje .learn-split-der .progress-log { max-height: none; }
/* 22/10/2026, Javi: las dos partes con la altura del diagrama (la derecha no crece; se desplaza por dentro) */
.learn-split { align-items: flex-start; }
.learn-split-barra { align-self: stretch; }
/* 22/10/2026, Javi: «Ejecutar todo» dentro del diagrama (arriba a la derecha) y más pequeño */
.learn-split-izq { position: relative; }
.learn-split-izq #learn-flow-run-all-btn { position: absolute; top: 8px; right: 10px; z-index: 3; font-size: 0.72rem; padding: 0.2rem 0.6rem; }

/* 23/10/2026, pedido de Javi: todos los botones del diagrama con el mismo ancho y alto
   (la altura la pone 26-diagrama.js); el texto va centrado dentro. */
.learn-flow-pill { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; }

/* 23/10/2026: «🔁 Reintentar» bajo un error del proceso (ver createProgressLog en 21-aprendizaje.js). */
.progress-reintentar button { white-space: nowrap; flex: none; }
.progress-reintentar { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-muted, #555); }

/* 23/10/2026: 🔤 Vista alfanumérica de las 12 líneas (solo la duración y los signos de la nota). */
.mz12-alfa-raya { stroke: #868e96; stroke-width: 1; }
.mz12-alfa-t { text-anchor: start; font-size: calc(8px * var(--mz12-k, 1)); fill: #212529; }
.mz12-nota.mz12-alfa.sel .mz12-alfa-raya, .mz12-nota.mz12-alfa.sonando .mz12-alfa-raya { stroke: #e8590c; stroke-width: 2; }
.mz12-nota.mz12-alfa.fuera .mz12-alfa-t { fill: #b0473a; }
.mz12-fig { fill: #212529; stroke: #212529; stroke-width: 1; }
.mz12-fig.hueca { fill: #fff; stroke-width: 1.3; }
.mz12-fig-l { stroke: #212529; stroke-width: 1.1; fill: none; }
.mz12-fig-c { stroke: #212529; stroke-width: 1.8; fill: none; stroke-linecap: round; }
.mz12-fig-p { fill: #212529; }
.mz12-fig-3 { fill: #495057; font-weight: 700; text-anchor: middle; font-family: sans-serif; }
.mz12-nota.mz12-alfa rect { stroke: none !important; }
.mz12-nota.mz12-alfa.fuera .mz12-fig, .mz12-nota.mz12-alfa.fuera .mz12-fig-l, .mz12-nota.mz12-alfa.fuera .mz12-fig-c { stroke: #b0473a; }
.mz12-nota.mz12-alfa.fuera .mz12-fig:not(.hueca), .mz12-nota.mz12-alfa.fuera .mz12-fig-p { fill: #b0473a; }
.mz12-fig-s { fill: #495057; }
.mz12-fig-z { fill: none; stroke: #495057; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mz12-silfig .mz12-fig-l { stroke: #495057; }
.mz12-alfa-sil { fill: #868e96; text-anchor: start; }
.mz12-alfa-silg rect.mz12-fig-s { stroke: none !important; fill: #495057 !important; stroke-dasharray: none !important; }

/* 23/10/2026: «Qué se dibuja» con 3 decisiones (Vista · Notación · Color), «➕ Más detalles» y «Así se verá» en grande */
.mz-seg-fila { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mz-seg-tit { min-width: 5.2rem; font-weight: 700; color: #495057; }
.mz-seg { display: inline-flex; border: 1px solid #ced4da; border-radius: 8px; overflow: hidden; background: #fff; }
.mz-seg label { margin: 0 !important; cursor: pointer; }
.mz-seg input { position: absolute; opacity: 0; pointer-events: none; }
.mz-seg span { display: inline-block; padding: 0.25rem 0.7rem; font-size: 0.85rem; border-right: 1px solid #e9ecef; white-space: nowrap; }
.mz-seg label:last-child span { border-right: none; }
.mz-seg input:checked + span { background: #4263eb; color: #fff; font-weight: 700; }
.mz-seg input:focus-visible + span { outline: 2px solid #ffd43b; }
.mz-mas-det { margin-top: 0.3rem; }
.mz-mas-det > summary { cursor: pointer; font-weight: 700; color: #495057; padding: 0.15rem 0; }
.mz-mas-det[open] > summary { margin-bottom: 0.2rem; }
.mz12-viga { stroke: #212529; stroke-linecap: butt; }
.mz-muestra-grande-btn { font-size: 0.75rem; padding: 0.1rem 0.5rem; margin-left: 0.4rem; }
.mz-muestra-ov { position: fixed; inset: 0; z-index: 3000; background: rgba(20, 22, 26, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mz-muestra-caja { background: #fff; border-radius: 12px; padding: 14px 16px; width: min(1240px, 100%); max-height: 100%; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.mz-muestra-cab { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: center; margin-bottom: 0.6rem; }
.mz-muestra-cerrar { margin-left: auto; }
.mz-muestra.grande .mz-muestra-tit { font-size: 1rem; }


/* --- Consulta a toda la pantalla (23/10/2026, Javi: «aprovecha toda la
   pantalla para distribuir los componentes de forma estructurada»).
   Tres columnas: Buscar y resultados | Grafo (lo más grande, alto de la
   ventana) | Chat, duplicados, patrones. Cada lateral con su scroll. --- */
main.is-full-tab #tab-consulta > h1 { margin: 0.2rem 0 0.4rem; font-size: 1.4rem; }
main.is-full-tab #tab-consulta { --consulta-alto: calc(100vh - 205px); }
@media (min-width: 1100px) {
  main.is-full-tab #consulta-contenido:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(280px, 22%) minmax(0, 1fr) minmax(300px, 24%);
    gap: 0.75rem;
    align-items: start;
  }
  main.is-full-tab .consulta-col {
    max-height: var(--consulta-alto);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-right: 2px;
  }
  main.is-full-tab .consulta-col > .card,
  main.is-full-tab #tab-consulta .consulta-grafo { margin: 0; padding: 0.7rem 0.85rem; }
  main.is-full-tab #tab-consulta .card h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
  /* Buscar: el formulario en vertical, que es una columna estrecha */
  main.is-full-tab .consulta-izq #query-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.5rem; }
  main.is-full-tab .consulta-izq #query-form label { margin: 0; min-width: 0; }
  main.is-full-tab .consulta-izq #query-form label:first-child { grid-column: 1 / -1; }
  main.is-full-tab .consulta-izq #query-form input,
  main.is-full-tab .consulta-izq #query-form select { width: 100%; max-width: none; box-sizing: border-box; }
  main.is-full-tab .consulta-izq #query-form button[type=submit] { grid-column: 1 / -1; }
  /* Grafo: controles compactos arriba y el lienzo ocupa el resto del alto */
  main.is-full-tab .consulta-grafo { display: flex; flex-direction: column; height: var(--consulta-alto); min-height: 520px; box-sizing: border-box; overflow: hidden; }
  main.is-full-tab .consulta-grafo > h2,
  main.is-full-tab .consulta-grafo > .graph-controls,
  main.is-full-tab .consulta-grafo > #graph-summary,
  main.is-full-tab .consulta-grafo > #graph-camera-row { flex: none; }
  main.is-full-tab .consulta-grafo #graph-wrap { flex: 1 1 auto; min-height: 260px; }
  main.is-full-tab .consulta-grafo .graph-type-filter { font-size: 0.82rem; padding: 0.3rem 0.5rem; gap: 0.15rem 0.6rem; }
  main.is-full-tab .consulta-grafo .graph-controls > label,
  main.is-full-tab .consulta-grafo .graph-controls .hint { font-size: 0.8rem; margin: 0; }
  main.is-full-tab .consulta-grafo #graph-summary,
  main.is-full-tab .consulta-grafo #graph-camera-row button { font-size: 0.8rem; }
  main.is-full-tab .consulta-grafo #graph-camera-row button { padding: 0.2rem 0.55rem; }
  main.is-full-tab .consulta-grafo .graph-controls { gap: 0.3rem; margin-bottom: 0.3rem; }
  main.is-full-tab .consulta-grafo .graph-controls-row { gap: 0.3rem 0.8rem; margin: 0; }
  main.is-full-tab .consulta-grafo .graph-controls-row label { margin: 0; }
  main.is-full-tab .consulta-grafo #graph-summary { margin: 0.2rem 0; }
  main.is-full-tab .consulta-grafo #graph-camera-row { margin: 0 0 0.35rem; gap: 0.35rem; }
  main.is-full-tab .consulta-grafo #graph-container { height: 100%; }
  /* Herramientas: el chat arriba (lo más usado) */
  main.is-full-tab .consulta-der #graph-chat-card { order: -1; }
  main.is-full-tab .consulta-der #graph-chat-thread { max-height: 40vh; overflow-y: auto; }
}
@media (min-width: 1100px) {
  main.is-full-tab .consulta-grafo .graph-type-filter select { max-width: 100%; box-sizing: border-box; }
}

/* 23/10/2026: ✔ Principios Atlas (29-principios.js) */
.pr-resumen { margin: 0.4rem 0 0.8rem; font-size: 1.05rem; }
.pr-reglas { display: flex; flex-direction: column; gap: 0.5rem; }
.pr-regla { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.8rem; background: var(--card-bg); }
.pr-regla > summary { cursor: pointer; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.pr-luz { font-size: 1.1rem; }
.pr-cifra { margin-left: auto; color: var(--muted, #666); }
.pr-isla { margin: 0.3rem 0 0.3rem 0.8rem; }
.pr-isla > summary { cursor: pointer; }
.pr-item { display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; }
.pr-ver { margin-left: auto; font-size: 0.85rem; padding: 0.1rem 0.5rem; }

/* 23/10/2026: barra del grafo (30-grafo-barra.js): una fila + ventanitas encima del grafo */
.consulta-grafo { position: relative; }
.gr-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; margin-bottom: 0.35rem; }
.gr-barra h2 { margin: 0 0.4rem 0 0 !important; font-size: 1.05rem; }
.gr-barra #graph-search { flex: 1 1 150px; min-width: 120px; max-width: 260px; }
.gr-barra button { padding: 0.2rem 0.55rem; font-size: 0.85rem; white-space: nowrap; }
.gr-barra button.activo { outline: 2px solid var(--accent, #4a6fd0); }
.gr-mostrar { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; margin: 0; }
.gr-n { font-size: 0.75rem; opacity: 0.8; }
.gr-n:empty { display: none; }
.gr-pop { position: absolute; z-index: 40; top: 2.9rem; left: 0.8rem; right: 0.8rem; max-height: 60vh; overflow: auto;
  background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 0.6rem 0.8rem; }
.gr-pop-der { left: auto; right: 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; width: max-content; }
.gr-pop-der[hidden], .gr-pop[hidden] { display: none; }
.gr-pop-cab { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
.gr-pop-cab strong { margin-right: auto; }
.gr-pop-cab button { padding: 0.15rem 0.5rem; font-size: 0.8rem; }
.gr-rejilla { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.25rem 0.8rem; border: 0; padding: 0; }
.gr-rejilla label { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-rejilla select { grid-column: 1 / -1; max-width: 340px; order: 99; margin-top: 0.3rem; }
.gr-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem 0.8rem; }
.gr-filtros label { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; font-size: 0.85rem; }
.gr-leyenda { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-top: 0.6rem; font-size: 0.82rem; color: var(--muted, #666); }
.gr-l { display: inline-block; width: 34px; height: 0; vertical-align: middle; margin-right: 0.3rem; border-top: 3px solid #6b8fd6; }
.gr-l-puntos { border-top: 3px dotted #b9a6d6; }
.gr-l-guiones { border-top: 3px dashed #8f9aa8; }
#graph-summary:empty { display: none; }
/* ⛶ Ampliar: el grafo a toda la pantalla */
main.gr-ampliado .consulta-grafo { position: fixed !important; inset: 6px; z-index: 1000; height: auto !important; margin: 0 !important;
  display: flex; flex-direction: column; overflow: hidden; }
main.gr-ampliado .consulta-grafo #graph-wrap { flex: 1 1 auto; min-height: 0; }
main.gr-ampliado .consulta-grafo #graph-container { height: 100% !important; }
main.gr-ampliado .consulta-grafo > :not(.gr-barra):not(.gr-pop):not(.gr-recorrido-bar):not(#graph-summary):not(#graph-star-banner):not(#graph-wrap) { display: none; }

/* 23/10/2026: ventana de progreso dentro de «Unir lo repetido» (y otros procesos por lotes) */
.rep-progreso { margin: 0.4rem 0 0.6rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.6rem; background: var(--card-bg); }
.rep-progreso .progress-log { max-height: 220px; }

/* 24/10/2026, pedido de Javi: ⛶ Ampliar a TODA la pantalla (ancho y alto).
   El filtro de Apariencia (saturate/contrast) en .tab-panel hacía que «position: fixed»
   se midiera dentro de la pestaña y no de la ventana → al ampliar se quita de la
   pestaña y se pone en la caja ampliada. */
html.con-filtro main.gr-ampliado > .tab-panel, .con-intensidad main.gr-ampliado > .tab-panel,
html.con-filtro main.lf-ampliado > .tab-panel, .con-intensidad main.lf-ampliado > .tab-panel { filter: none !important; }
html.con-filtro main.gr-ampliado .consulta-grafo, html.con-filtro main.lf-ampliado #learn-diagram-card { filter: saturate(var(--intensidad, 1)) contrast(var(--contraste, 1)); }
.con-intensidad main.gr-ampliado .consulta-grafo, .con-intensidad main.lf-ampliado #learn-diagram-card { filter: saturate(var(--intensidad, 1)); }
main.gr-ampliado .consulta-grafo { inset: 0 !important; border-radius: 0 !important; max-width: none !important; width: auto !important; }
.learn-diagram-header { flex-wrap: nowrap; }
.learn-flow-ampliar { padding: 0.2rem 0.6rem; font-size: 0.8rem; white-space: nowrap; }
main.lf-ampliado #learn-diagram-card { position: fixed !important; inset: 0; z-index: 1000; margin: 0 !important; border-radius: 0;
  max-width: none !important; width: auto !important; overflow: auto; background: var(--card-bg, var(--bg)); box-sizing: border-box; }
main.lf-ampliado #learn-diagram-card .learn-flow-legend { display: none; }
body.lf-ampliado-body, body.gr-ampliado-body { overflow: hidden; }
main.lf-ampliado ~ .schema-modal-overlay, body.lf-ampliado-body .schema-modal-overlay, body.lf-ampliado-body .modal-overlay { z-index: 2000; }

/* 24/10/2026, pedido de Javi: la barra del grafo en dos grupos — 👁 Qué se ve · 🎨 Cómo se ve */
.gr-barra .gr-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; padding: 0.2rem 0.45rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg, transparent); }
.gr-barra .gr-grupo { flex: 0 1 auto; }
.gr-barra .gr-grupo #graph-search { flex: 0 1 180px; min-width: 110px; }
.gr-grupo-tit { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.gr-aspecto-botones { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gr-aspecto-botones button { padding: 0.2rem 0.6rem; font-size: 0.85rem; }
#gr-pop-aspecto { left: auto; width: min(560px, calc(100% - 1.6rem)); }
/* 24/10/2026, pedido de Javi: todos los controles de la barra del grafo alineados (misma altura, centrados) */
.gr-barra { align-items: center; }
.gr-barra .gr-grupo { align-items: center; min-height: 2.3rem; box-sizing: border-box; }
.gr-barra input, .gr-barra select, .gr-barra button { height: 1.85rem; box-sizing: border-box; margin: 0 !important; vertical-align: middle;
  display: inline-flex; align-items: center; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 0.85rem; line-height: 1; }
.gr-barra input { display: inline-block; padding: 0 0.5rem; }
.gr-barra select { display: inline-block; padding: 0 0.4rem; }
.gr-barra .gr-mostrar { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0 !important; font-size: 0.85rem; height: 1.85rem; }
.gr-barra .gr-grupo-tit { display: inline-flex; align-items: center; height: 1.85rem; }
.gr-barra h2 { display: inline-flex; align-items: center; height: 1.85rem; line-height: 1; }
.gr-barra button { gap: 0.3rem; }

/* 24/10/2026, pedido de Javi: ⤒ Principio / ⤓ Final en ✔ Principios Atlas; filas con 👁 Ver siempre en su línea */
.pr-modal { overflow-y: auto; }
.pr-saltos { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 0.4rem; padding: 0.4rem 0 0.1rem; pointer-events: none; }
.pr-saltos button { pointer-events: auto; padding: 0.25rem 0.7rem; font-size: 0.85rem; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.pr-item { flex-wrap: nowrap !important; align-items: center !important; padding: 0.15rem 0; }
.pr-item .rep-tipo { flex: none; }
.pr-item .pr-tit { flex: 1 1 auto; min-width: 0; }
.pr-item .pr-ver { flex: none; }

/* 24/10/2026: 🌳 Árbol y 🔗 Encajar en ✔ Principios Atlas */
.pr-arbol { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.4rem 0 0.8rem; background: var(--card-bg); }
.pr-arbol-cols { display: grid; grid-template-columns: minmax(240px, 1fr) 1.3fr; gap: 1rem; }
@media (max-width: 700px) { .pr-arbol-cols { grid-template-columns: 1fr; } }
.pr-arbol-dibujo ul { list-style: none; margin: 0.2rem 0 0 0; padding-left: 1rem; border-left: 1px dashed var(--border); }
.pr-arbol-dibujo > ul { border-left: 0; padding-left: 0; }
.pr-arbol-dibujo li { margin: 0.1rem 0; font-size: 0.88rem; }
.pr-arbol-botones { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pr-arbol-botones button { padding: 0.25rem 0.7rem; font-size: 0.85rem; }
.pr-enc-tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0.4rem 0; }
.pr-enc-tabla td { padding: 0.15rem 0.4rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.pr-enc-n { text-align: right; white-space: nowrap; }
.pr-enc-barra { width: 30%; }
.pr-enc-barra span { display: block; height: 0.6rem; margin-top: 0.35rem; border-radius: 4px; background: var(--accent, #4a6fd0); }
.gr-l-arbol { border-top: 2px solid rgba(245,159,0,0.6); }

/* 24/10/2026: 🕰 Vigencia (45-vigencia.js) */
.vg-totales { margin: 0.4rem 0 0.6rem; }
.vg-grupo { border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.7rem; margin: 0.4rem 0; background: var(--card-bg); }
.vg-grupo > summary { cursor: pointer; }
.vg-tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 0.3rem; }
.vg-tabla td { padding: 0.2rem 0.35rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.vg-ic { width: 1.6rem; text-align: center; }
.vg-tabla td:nth-child(3) { width: 35%; }
.vg-historia td, .vg-rechazado td, .vg-cambiado td { opacity: 0.72; }

/* 24/10/2026: criterios rediseñados (46-criterios.js) */
.cg-lista { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; }
.cg-tarjeta { border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); padding: 0.45rem 0.7rem; }
.cg-tarjeta.cg-sin { opacity: 0.75; }
.cg-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.cg-n { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--border); font-size: 0.78rem; font-weight: 700; }
.cg-chip { font-size: 0.72rem; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.cg-chip.cg-ia { background: rgba(74,111,208,.12); border-color: rgba(74,111,208,.4); }
.cg-chip.cg-arbol { background: rgba(245,159,0,.14); border-color: rgba(245,159,0,.5); }
.cg-que { flex: 1 1 260px; }
.cg-abrir { margin-left: auto; padding: 0.2rem 0.6rem; font-size: 0.85rem; }
.cg-cuerpo { margin-top: 0.5rem; border-top: 1px dashed var(--border); padding-top: 0.5rem; }
.cg-pestanas { display: flex; gap: 0.3rem; margin-bottom: 0.4rem; }
.cg-pest { padding: 0.2rem 0.7rem; font-size: 0.85rem; }
.cg-pest.activo { outline: 2px solid var(--accent, #4a6fd0); }
.cg-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.5rem 0.8rem; }
.cg-campos label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 600; margin: 0; }
.cg-campos textarea { font-weight: 400; font-size: 0.85rem; width: 100%; box-sizing: border-box; resize: vertical; }
.cg-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0.3rem; }
.cg-botones button { padding: 0.25rem 0.8rem; font-size: 0.85rem; }
.cg-texto { white-space: pre-wrap; font-size: 0.8rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; max-height: 260px; overflow: auto; }
.cg-arbol-ul, .cg-arbol-ul ul { list-style: none; margin: 0; padding: 0; }
.cg-arbol-ul ul { margin-left: 1.2rem; border-left: 1px dashed var(--border); padding-left: 0.4rem; }
.cg-rama { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin: 0.15rem 0; }
.cg-r-tit { flex: 0 1 280px; min-width: 160px; font-weight: 600; }
.cg-r-desc { flex: 1 1 280px; min-width: 160px; font-size: 0.82rem; }
.cg-r-bot button { padding: 0.1rem 0.4rem; font-size: 0.8rem; }
.cg-umbrales { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; margin-top: 0.6rem; font-size: 0.85rem; }
.cg-umbrales input { width: 4rem; }
.cg-del-paso { margin-top: 0.8rem; padding: 0.25rem 0.8rem; font-size: 0.85rem; }
.cg-generales-barra { display: flex; justify-content: flex-end; margin: 0 0 0.5rem; }
.cg-generales-barra button { padding: 0.25rem 0.8rem; font-size: 0.88rem; }
.cg-complejo > summary { cursor: pointer; list-style: none; }
.cg-complejo > summary::-webkit-details-marker { display: none; }
.cg-complejo > summary h2 { display: inline; }
.cg-complejo > summary h2::after { content: " ▾"; font-size: 0.8em; color: var(--muted); }
.cg-complejo[open] > summary h2::after { content: " ▴"; }
/* 24/10/2026: secciones de Consulta plegables (cerradas por defecto, salvo el Grafo) */
#tab-consulta .cq-plegable > h2 { cursor: pointer; user-select: none; }
#tab-consulta .cq-plegable > h2::after { content: " ▴"; font-size: 0.8em; color: var(--muted); }
#tab-consulta .cq-plegable.plegada > h2::after { content: " ▾"; }
#tab-consulta .cq-plegable.plegada > :not(h2) { display: none !important; }
#tab-consulta .cq-plegable.plegada > h2 { margin-bottom: 0; }
/* 24/10/2026: si la columna derecha de Consulta no tiene nada visible, el grafo ocupa su sitio */
@media (min-width: 1100px) {
  main.is-full-tab #consulta-contenido:not([hidden]):not(:has(.consulta-der > .card:not([hidden]))) { grid-template-columns: minmax(280px, 22%) minmax(0, 1fr); }
  main.is-full-tab #consulta-contenido:not(:has(.consulta-der > .card:not([hidden]))) .consulta-der { display: none; }
}
#tab-consulta #query-summary:empty, #tab-consulta #query-results:empty { display: none; }
.learn-split-izq #learn-flow-ampliar { position: absolute; top: 8px; left: 40px; z-index: 3; font-size: 0.72rem; padding: 0.2rem 0.6rem; }
.vg-explica { margin: 0.2rem 0 0.6rem; font-size: 0.92rem; line-height: 1.45; }
.vg-revisar > summary { cursor: pointer; margin: 0.4rem 0; }

/* 25/10/2026: ⚖️ Pesos (js/47-pesos.js) y ⭐ en la ficha del nodo (23-grafo.js) */
.btn-estrella { font-size: 0.85rem; padding: 0.15rem 0.5rem; }
.ps-fuerzas { display: flex; gap: 0.4rem; align-items: flex-end; margin: 0.6rem 0 0.8rem; }
.ps-barra { flex: 0 0 64px; text-align: center; font-size: 0.8rem; }
.ps-barra i { display: block; background: #c9a227; border-radius: 4px 4px 0 0; margin: 0 auto 0.2rem; width: 36px; }
.ps-barra.f1 i { opacity: 0.45; } .ps-barra.f2 i { opacity: 0.7; } .ps-barra.sin i { background: var(--border); }
.ps-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.8rem; }
.ps-lista { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ps-lista td { padding: 0.18rem 0.35rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ps-lista td.ps-num { text-align: right; width: 3.5rem; font-variant-numeric: tabular-nums; }
.ps-peso { display: inline-block; height: 8px; background: #c9a227; border-radius: 4px; vertical-align: middle; }

/* 25/10/2026: 🧭 Recorrido (js/48-recorrido.js): migas arriba y lista de vecinos a la derecha */
.gr-recorrido-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.3rem 0; padding: 0.3rem 0.5rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); font-size: 0.88rem; }
.gr-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; flex: 1 1 auto; }
.gr-miga { font-size: 0.85rem; padding: 0.1rem 0.45rem; }
.gr-miga.actual { font-weight: 700; border-color: #f59f00; }
.gr-miga-sep { opacity: 0.6; }
#graph-wrap.con-vecinos { display: flex; align-items: stretch; --vec-w: 300px; }
#graph-wrap.con-vecinos #graph-container { flex: 1 1 auto; min-width: 0; width: auto; }
#graph-wrap.con-vecinos .graph-node-info { right: calc(var(--vec-w) + 1.5rem); }
.gr-vec-asa { flex: 0 0 8px; cursor: col-resize; background: var(--border); border-radius: 4px; margin: 0 4px; }
.gr-vec-asa:hover { background: #f59f00; }
.gr-vecinos { flex: 0 0 var(--vec-w); width: var(--vec-w); overflow: auto; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-bg); padding: 0.5rem; font-size: 0.86rem; }
.gr-vec-cab { position: sticky; top: -0.5rem; background: var(--card-bg); padding: 0.2rem 0 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.gr-vec-buscar { width: 100%; }
.gr-vec-lista { list-style: none; margin: 0; padding: 0; }
.gr-vec-lista li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0 0.3rem; padding: 0.25rem 0.2rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.gr-vec-lista li:hover { background: rgba(245, 159, 0, 0.12); }
.gr-vec-lista li.en-camino .gr-vec-tit { font-weight: 700; color: #f59f00; }
.gr-vec-lista li.no-dibujado .gr-vec-tit { opacity: 0.55; }
.gr-vec-dir { grid-row: span 2; opacity: 0.7; }
.gr-vec-rel { font-size: 0.78rem; }
#graph-lista-btn.activo, #graph-titulos-btn.activo, #graph-mapa.activo { border-color: #f59f00; font-weight: 600; }

/* 25/10/2026: 📂 Explorador (js/48-recorrido.js): carpetas que se abren y cierran */
.gr-arbol li { padding-top: 0.15rem; padding-bottom: 0.15rem; }
.gr-arbol li.carpeta { font-weight: 600; }
.gr-arb-flecha { grid-row: span 2; opacity: 0.8; text-align: center; }
.gr-arbol li.carpeta .gr-arb-flecha:hover { color: #f59f00; opacity: 1; }

/* 25/10/2026: línea viva (ruedecita + reloj) en pasos sin progreso propio */
.progress-latido { color: #b06000; font-weight: 600; }
.progress-latido .progress-spinner-icon { display: inline-block; vertical-align: middle; }

/* 26/10/2026: fases de Atlas en el diagrama del proceso (recuadro de color detrás de sus pasos) */
.lf-fase-atlas { position: absolute; border-radius: 10px; border: 1.5px dashed var(--fase);
  background: color-mix(in srgb, var(--fase) 12%, transparent); z-index: 0; pointer-events: auto; }
.lf-fase-atlas-etiqueta { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 22%;
  font-size: 17px; font-weight: 700; color: var(--fase); text-align: right; line-height: 1.2;
  filter: brightness(.8); }
.lf-fase-atlas-etiqueta small { font-weight: 600; font-size: 14px; }
.learn-flow-pill { position: absolute; z-index: 1; }

/* 26/10/2026: «Estado del proceso» dentro de la columna derecha, encima de «Pasos que se van haciendo» */
#tab-aprendizaje .learn-estado { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); }
#tab-aprendizaje .learn-estado .pipeline-stages { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 0.25rem 0.6rem; min-height: 0; margin: 0; }
#tab-aprendizaje .learn-estado .pipeline-stage { min-width: 0; padding: 0; margin: 0; }
#tab-aprendizaje .learn-estado .pipeline-value { font-size: 0.8rem !important; font-weight: 600; line-height: 1.15; }
#tab-aprendizaje .learn-estado .pipeline-label { font-size: 0.66rem; line-height: 1.15; }
#tab-aprendizaje .learn-estado .pipeline-pending { font-size: 0.62rem; }
#learn-pasos-titulo .learn-trabajando { margin-left: 0.5rem; font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; gap: 0.3rem; }
#learn-pasos-titulo .learn-trabajando[hidden] { display: none; }

/* 26/10/2026, pedido de Javi: más altura para el diagrama — fuera el título grande de la página
   (ya lo dice la pestaña) y el de «Diagrama del proceso» (ya lo dice el carril), y menos márgenes. */
#tab-aprendizaje > h1 { display: none; }
#tab-aprendizaje .learn-diagram-header { display: none; }
#tab-aprendizaje #learn-diagram-card { padding: 0.5rem 0.6rem; margin-top: 0.4rem; }
/* 26/10/2026: «Diagrama del proceso» dentro del diagrama, arriba a la izquierda (a la altura de Inicio) */
.learn-split-izq .learn-flow-titulo-dentro { position: absolute; top: 6px; left: 44px; z-index: 3; height: 28px; display: flex; align-items: center; font-weight: 700; font-size: 1.05rem; color: var(--accent); pointer-events: none; }
/* 26/10/2026, pedido de Javi: «Ejecutar todo» alineado con el título, misma altura */
.learn-split-izq #learn-flow-run-all-btn { top: 6px !important; margin: 0 !important; height: 28px; display: inline-flex; align-items: center; font-size: 0.82rem !important; padding: 0 0.7rem !important; }
/* 26/10/2026, pedido de Javi: letra de los pasos más grande (las flechas se acortan solas) */
.learn-flow-pill { font-size: 0.85rem; line-height: 1.2; padding: 0.25rem 0.8rem; }
/* 26/10/2026, pedido de Javi: fases a la IZQUIERDA (se lee primero): «1. Preparar» y debajo «de datos a información» */
.lf-fase-atlas-etiqueta { right: auto !important; left: 10px; align-items: flex-start !important; text-align: left !important; max-width: 31% !important; }
/* 26/10/2026: fases 5 y 6 (fuera de esta app), en gris */
.lf-fase-fuera { opacity: 0.85; }
.lf-paso-fuera { position: absolute; display: flex !important; align-items: center; justify-content: center; background: transparent !important; color: #8a8a8a !important; border: 1.5px dashed #9a9a9a; box-shadow: none !important; z-index: 1; cursor: help; }
.lf-paso-fuera--enlace { cursor: pointer; }
.lf-paso-fuera--enlace:hover { color: var(--accent) !important; border-color: var(--accent); }
.lf-fase-atlas-etiqueta { pointer-events: none; }
/* 26/10/2026: árbol de «Qué es Atlas hoy» (se abre y se cierra) */
.docrama-arbol { border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0; margin: 0.4rem 0 0.6rem; max-width: 640px; background: var(--card-bg); }
.docrama-fila { display: flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; cursor: pointer; border-radius: 6px; }
.docrama-fila:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.docrama-elegida { background: color-mix(in srgb, var(--accent) 20%, transparent); font-weight: 600; }
.docrama-flecha { width: 1.4rem; display: inline-flex; justify-content: center; border: none; background: transparent; padding: 0; cursor: pointer; color: var(--text, inherit); font-size: 1.15rem; }
/* 26/10/2026: historial de Síntesis que se abre y se cierra, papelera e índice con enlaces */
.sintesis-version-row { display: flex; align-items: center; gap: 0.4rem; }
.sintesis-version-row .sintesis-version-open { flex: 1; text-align: left; }
.sintesis-version-papelera { background: transparent !important; border: none !important; cursor: pointer; opacity: 0.6; font-size: 1rem; }
.sintesis-version-papelera:hover { opacity: 1; }
#sintesis-versions-list #sintesis-preview-card { margin: 0.4rem 0 0.8rem 1.2rem; }
.sintesis-papelera { margin-top: 0.6rem; }
.sintesis-index-enlace { color: inherit; text-decoration: none; }
.sintesis-index-enlace:hover { color: var(--accent); text-decoration: underline; }
/* 26/10/2026: índice en árbol y apartados plegables en la vista de Síntesis */
.sintesis-index-hijos { margin-left: 1.3rem; }
.sintesis-index-fila { display: flex; align-items: baseline; gap: 0.2rem; padding: 0.05rem 0; }
.sintesis-index-flecha { width: 1.3rem; border: none; background: transparent; cursor: pointer; padding: 0; font-size: 1rem; color: inherit; }
.sintesis-index-flecha:disabled { cursor: default; }
.sintesis-apartado { margin: 0.2rem 0 0.2rem 0.6rem; }
.sintesis-apartado > summary { cursor: pointer; list-style: none; }
.sintesis-apartado > summary::-webkit-details-marker { display: none; }
.sintesis-apartado > summary > * { display: inline; margin: 0.3rem 0; }
.sintesis-apartado > summary::before { content: '▸ '; color: var(--muted); }
.sintesis-apartado[open] > summary::before { content: '▾ '; }
/* 26/10/2026: selector de 🧭 Ejes del grafo */
.gr-ejes-caja { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.gr-eje { border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 150px; }
.gr-eje legend { font-weight: 600; padding: 0 0.3rem; }
/* 26/10/2026, pedido de Javi: lo elegido en el 📂 Explorador se ILUMINA (fondo, barra a la izquierda) */
.gr-vec-lista li.en-camino { background: rgba(245, 159, 0, 0.28) !important; box-shadow: inset 5px 0 0 #f59f00; border-radius: 4px; }
.gr-vec-lista li.en-camino .gr-vec-tit { font-weight: 800; color: inherit !important; }
.gr-arbol.con-eleccion li:not(.en-camino):not(.carpeta) { opacity: 0.55; }
.gr-pop-cab, .schema-modal-header { cursor: move; user-select: none; }
.gr-pop-cab button, .schema-modal-header button { cursor: pointer; }
/* 26/10/2026: el botón «Poner al día» late mientras trabaja */
#learn-flow-run-all-btn.pad-trabajando { animation: padLatido 0.9s ease-in-out infinite alternate !important; opacity: 1 !important; cursor: progress; }
@keyframes padLatido {
  from { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.7); background: #2ea043; }
  to { transform: scale(1.07); box-shadow: 0 0 0 10px rgba(46, 160, 67, 0); background: #f59f00; } }
/* 26/10/2026: ⏹ Parar de «Poner al día», junto a «Pasos que se van haciendo» */
.pad-parar { margin-left: auto; padding: 0.15rem 0.7rem; font-size: 0.85rem; background: #c92a2a !important; color: #fff !important; border: none; border-radius: 6px; cursor: pointer; }
.pad-parar[hidden] { display: none; }
#learn-pasos-titulo { display: flex; align-items: center; gap: 0.4rem; }
/* 🧭 ¿Qué quieres hacer? (26/10/2026) */
.qh-modal { max-width: 620px; }
.qh-opciones { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.8rem 0; }
.qh-opcion { display: flex; gap: 0.9rem; align-items: flex-start; text-align: left; width: 100%; box-sizing: border-box; padding: 0.8rem 1rem; border: 1px solid #dfe3e8; border-radius: 12px; background: #fff; font: inherit; color: inherit; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
div.qh-opcion { cursor: default; }
.qh-opcion:hover { border-color: #3b6fd8; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.qh-icono { font-size: 1.8rem; width: 2.8rem; height: 2.8rem; border-radius: 10px; background: #f2f4f6; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.qh-texto { display: flex; flex-direction: column; gap: 0.2rem; }
.qh-texto strong { font-size: 1.1rem; }
.qh-texto small { color: #5f6b7a; }
.qh-sub { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.qh-luego { font-style: italic; }
.qh-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.qh-abrir { position: absolute; z-index: 2; margin: 0; font-size: 1.05rem; line-height: 1; padding: 0 0.55rem; box-sizing: border-box; border-radius: 999px; }
.qh-resalta { outline: 3px solid #f2b705; outline-offset: 3px; transition: outline-color 1s; }
.qh-apagada { opacity: 0.45; pointer-events: none; }

/* 🌌 Pastilla «estás aquí» del universo activo (27/10/2026) */
.uni-pastilla { color: #fff; border: none; border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.uni-pastilla:hover { filter: brightness(1.08); }
body.app-elementos .uni-pastilla { display: none; }
/* 27/10/2026: 🏛 universo Base (cimientos, solo lectura) */
.uni-base { font-size: 0.75rem; color: #8a6a22; background: #f6eedb; border-radius: 999px; padding: 0.05rem 0.45rem; margin-left: 0.3rem; }
.badge-base { background: #f6eedb; color: #7a5c1c; border: 1px solid #e2cf9f; }
.universe-row-base { background: linear-gradient(90deg, #fbf6ea, transparent); border-radius: 8px; }
body.no-admin .universe-row-base .solo-super { display: none; }
.uni-lista { position: fixed; z-index: 3000; background: var(--card-bg, #fff); border: 1px solid rgba(0,0,0,.12); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 0.4rem; min-width: 240px; max-height: 70vh; overflow-y: auto; }
.uni-lista-titulo { font-size: 0.8rem; color: var(--muted, #666); padding: 0.3rem 0.5rem 0.4rem; }
.uni-op { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; background: none; border: none; border-radius: 6px; padding: 0.45rem 0.5rem; cursor: pointer; font-size: 0.92rem; color: inherit; }
.uni-op:hover { background: rgba(0,0,0,.06); }
.uni-op-activo { font-weight: 600; }
.uni-punto { width: 0.75rem; height: 0.75rem; border-radius: 50%; flex: none; }
.uni-aqui { font-size: 0.75rem; font-weight: 400; color: var(--muted, #666); margin-left: auto; }
.uni-gestionar { border-top: 1px solid rgba(0,0,0,.08); margin-top: 0.3rem; color: var(--muted, #555); }

/* 27/10/2026: 🏛 cabecera común (cabecera.css) dentro de la topbar de siempre */
header.topbar.topbar-acab { padding: 0; display: block; border-bottom: none; }
header.topbar.topbar-acab .acab { position: static; }
/* los desplegables de la cabecera por encima de las pestañas (Javi: «se monta información») */
header.topbar.topbar-acab { position: relative; z-index: 1000; }
.acab-estado .badge { font-size: 0.72rem; padding: 0.05rem 0.45rem; }
.acab-hueco #active-universe-label { display: none; }

/* 27/10/2026 (Javi): fuentes de universos de TEXTO más claras — una marca de estado en vez de 4 casillas grises;
   «👂 Volver a escuchar» solo en sonido; queda solo la casilla «Seleccionada» (marcar). */
body:not(.universo-sonido) .source-row-checks .source-check-label { display: none; }
body:not(.universo-sonido) .fuentes-seleccion [data-sel="analizar"] { display: none; }
body.universo-sonido .source-estado { display: none; }
.source-estado { font-size: 0.82rem; color: #52606d; background: #f0f3f6; border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.4rem; white-space: nowrap; }
.fuentes-seleccion select[data-sel-mover] { margin: 0 0.3rem; }
.fuentes-pista-clasificar { margin: 0.3rem 0 0.6rem; }

/* 27/10/2026 (Javi): en TEXTO la tarjeta de carpetas/ficheros solo sale al pulsar «➕ Añadir ▾» */
body:not(.universo-sonido) #source-roots-card:not(.anadiendo) { display: none; }
body:not(.universo-sonido) #source-roots-card .subidas-plegadas > summary { display: none; }

/* 27/10/2026: «➕ Añadir» + soltar carpetas/ficheros encima de las fuentes */
#sources-card.soltar-aqui { outline: 3px dashed #4a72c4; outline-offset: -6px; background: #eef4ff; }
#sources-card > h2 .sc-arrastra { font-size: 0.8rem; margin-left: 0.4rem; }

/* 27/10/2026 (Javi): el 🏛 universo Base no tiene «Captura al vuelo» */
body.universo-base #capture-card { display: none; }

body.universo-base [data-qh="escribir"] { display: none; }

/* 27/10/2026 (Javi): barra de las marcadas abajo y siempre a la vista mientras haya alguna */
#sources-list .fuentes-seleccion, .fuentes-seleccion { position: sticky; bottom: 8px; z-index: 20; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.fila-elegir { margin-right: 0.4rem; cursor: pointer; }
/* 27/10/2026 (Javi: «alinea esta línea»): buscador, «＋ Grupo» y ⓘ a la misma altura */
.fuentes-grupos-barra { display: flex; align-items: center; gap: 0.6rem; }
.fuentes-grupos-barra > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.fuentes-grupos-barra .fg-nuevo { height: 2.2rem; display: inline-flex; align-items: center; white-space: nowrap; }
.fuentes-grupos-barra .fuentes-buscar { height: 2.2rem; box-sizing: border-box; }
/* 28/10/2026 (Javi: «unir a Atlas la mesa de mezclas»): la mesa, debajo de la cabecera común de Atlas y con su fondo;
   sin el «💻 Local/🌐 Servidor» ni el «🏠 Tu menú» propios (ya están en la cabecera: 🌐 y 🏛 Atlas / 👤). */
body:has(header.topbar-acab) .pagina-mesa { inset: var(--acab-h, 47px) 0 0 0;
  background: radial-gradient(60rem 30rem at 15% -10%, rgba(47,143,92,0.10), transparent), radial-gradient(50rem 30rem at 110% 10%, rgba(47,143,92,0.08), transparent), #eef3ee; }
body:has(header.topbar-acab) .pagina-mesa-cab { background: rgba(255,255,255,0.85); }
body:has(header.topbar-acab) .pagina-mesa-cab .pm-entorno, body:has(header.topbar-acab) .pagina-mesa-cab .pagina-mesa-menu { display: none; }

/* 29/10/2026: 🔗 relaciones con propiedades — «✏️ Cambiar» en la ficha de una relación */
.rel-cambiar { margin: 0.4rem 0; }
.rel-cambiar > summary { cursor: pointer; }
.rel-props { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 6px; font-size: 0.85rem; }
.rel-props label { display: flex; flex-direction: column; gap: 2px; }
.rel-props label:has(input) { grid-column: 1 / -1; }
.rel-props button, .rel-props .rel-msg { grid-column: auto; }

/* 29/10/2026: 🌸 grafo con forma — leyenda de los anillos */
.gr-forma-leyenda { font-size: 0.82rem; color: #555; margin: 0 0 4px; }
#graph-forma.activo { background: #fde7f3; border-color: #e64980; }

/* 29/10/2026: 🏛 universo Base para quien no es superadministrador — solo lectura, sin botones de escribir */
body.universo-base.no-super #learn-flow-run-all-btn,
body.universo-base.no-super #sources-card button:not([data-ver]),
body.universo-base.no-super #sources-card input[type="file"],
body.universo-base.no-super .graph-complex-actions,
body.universo-base.no-super .rel-cambiar,
body.universo-base.no-super .flow-node-run,
body.universo-base.no-super [data-escribe] { display: none !important; }
body.universo-base.no-super #aprendizaje::before { content: '🏛 Base: los cimientos de Atlas son de solo lectura (solo el superadministrador los cambia).'; display: block; margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: #fff7e0; color: #7a5b00; font-size: 0.88rem; }

/* 29/10/2026: 🪞 comparar grafos */
.pagina-comparar .cmp-barra { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 8px 0; }
.cmp-rejilla { display: grid; gap: 10px; }
.cmp-panel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cmp-lienzo { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; display: block; }
.cmp-tip { min-height: 1.2em; font-size: 0.82rem; }
.cmp-num { font-size: 0.85rem; }
.cmp-ley { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.78rem; color: #555; }
.cmp-ley i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* 🗑 Papelera de universos (29/10/2026) */
.papelera-universos { margin-top: .75rem; }
.papelera-universos summary { cursor: pointer; color: #52606d; }