/* Boards: la lista y el lienzo. Usa los tokens de styles.css (colores, espacios,
   radios) y por eso sigue solo el tema claro/oscuro. */

body.pantalla-boards,
body.pantalla-board {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  height: var(--alto-visible, 100dvh);
  padding: 0;
  place-items: unset;
  overflow: hidden;
}

.board-barra {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  padding-top: calc(var(--space-2) + var(--borde-seguro-arriba));
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg);
}
.board-barra-titulo { margin: 0; font-size: 1.3rem; }

/* Un control táctil no baja de 44 px. */
.board-icono {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  touch-action: manipulation;
  font-size: 1.2rem;
}

.board-titulo {
  flex: 1 1 auto;
  min-width: 0; /* sin esto un input flex no baja de su ancho de contenido */
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text);
  font: 600 1.15rem var(--font-heading);
  text-overflow: ellipsis;
}
.board-titulo:not([readonly]):focus { border-color: var(--color-divider); background: var(--color-surface); }

.board-aviso {
  flex: none;
  max-width: 40%;
  font-size: .8rem;
  color: var(--color-error);
  line-height: 1.2;
}
.board-aviso[data-tipo="info"],
.board-aviso[data-tipo="fijo"] { color: var(--color-text); opacity: .7; }

.board-presencia { flex: none; display: flex; padding-left: 6px; }
.board-avatar {
  width: 28px;
  height: 28px;
  margin-left: -6px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--color-bg);
  color: #fff;
  font: 600 .72rem var(--font-body);
  text-transform: uppercase;
}

/* — Lienzo — */

/* Los dos son <main>, y styles.css le da a `main` la tarjeta angosta del login
   (28rem, relleno y borde): acá ocupan todo el ancho, sin borde. */
.board-lienzo,
.boards-cuerpo {
  width: 100%;
  border: 0;
}

.board-lienzo {
  position: relative;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* Los gestos los maneja board-gestos.js: el navegador no tiene que hacer pan
     ni zoom por su cuenta. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background-color: var(--color-bg);
  background-image: radial-gradient(color-mix(in srgb, var(--color-text) 20%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}

.board-mundo {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  --zoom: 1;
}

.board-conectores {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.board-conector-area { fill: none; stroke: transparent; stroke-width: 22; pointer-events: stroke; cursor: pointer; }
.board-conector-linea { fill: none; stroke: var(--color-text); stroke-width: 2; stroke-linecap: round; }
.board-conectores .seleccionado .board-conector-linea { stroke: var(--color-accent); stroke-width: 3.5; }
.board-conector-temporal { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 6 5; pointer-events: none; }

/* — Nodos — */

.board-nodo {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.board-nodo.seleccionado { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.board-nodo.con-presencia { outline: 2px solid var(--presencia); outline-offset: 1px; }

/* El color de un nodo es un tinte de fondo, con la tinta normal: los siete están
   medidos contra WCAG AA en los dos temas (ver styles.css). */
.board-nodo[data-color="rojo"]     { background: var(--bloque-rojo-fondo); }
.board-nodo[data-color="naranja"]  { background: var(--bloque-naranja-fondo); }
.board-nodo[data-color="amarillo"] { background: var(--bloque-amarillo-fondo); }
.board-nodo[data-color="verde"]    { background: var(--bloque-verde-fondo); }
.board-nodo[data-color="azul"]     { background: var(--bloque-azul-fondo); }
.board-nodo[data-color="violeta"]  { background: var(--bloque-violeta-fondo); }
.board-nodo[data-color="gris"]     { background: var(--bloque-gris-fondo); }

.board-texto {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: 1rem/1.4 var(--font-body); /* 16 px: debajo de eso iOS hace zoom al enfocar */
  resize: none;
  overflow: auto;
  /* Hasta que se edita, los toques son del nodo (seleccionar, mover). */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.board-nodo.editando .board-texto { pointer-events: auto; -webkit-user-select: text; user-select: text; }

/* Sin `overflow: hidden` en el nodo: las asas salen por fuera del borde y se
   recortarían. Las esquinas redondeadas las lleva la propia imagen. */
.board-nodo-imagen { padding: 0; }
.board-nodo-imagen img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; pointer-events: none; }

/* La franja de arriba es del nodo: es por donde se agarra para moverlo, porque
   el reproductor se queda con los toques. */
.board-nodo-audio { padding-top: 22px; }
.board-nodo-audio::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 2px;
  background: var(--color-divider);
}
.board-nodo-audio audio { display: block; width: 100%; height: calc(100% - 4px); }

/* El adjunto que todavía se está subiendo: sólo se ve en esta pantalla. */
.board-nodo-pendiente { overflow: hidden; display: grid; place-items: center; opacity: .85; }
.board-nodo-pendiente img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .45; }
.board-pendiente-texto { position: relative; font-size: .85rem; text-align: center; padding: 6px; }
.board-nodo-pendiente.con-error { border-color: var(--color-error); }
.board-nodo-pendiente.con-error button { position: relative; min-height: 44px; margin: 2px; }

/* — Asas del nodo seleccionado. Se compensa el zoom para que midan lo mismo en
   pantalla sin importar la escala: 44 px de zona tocable, dibujo más chico. — */
.board-asa {
  position: absolute;
  width: calc(44px / var(--zoom));
  height: calc(44px / var(--zoom));
  display: grid;
  place-items: center;
  touch-action: none;
}
.board-asa::after {
  content: "";
  width: calc(16px / var(--zoom));
  height: calc(16px / var(--zoom));
  border-radius: 50%;
  background: var(--color-accent);
  border: calc(2px / var(--zoom)) solid var(--color-bg);
}
.board-asa-resize { right: calc(-22px / var(--zoom)); bottom: calc(-22px / var(--zoom)); cursor: nwse-resize; }
.board-asa-conectar { right: calc(-22px / var(--zoom)); top: calc(50% - 22px / var(--zoom)); cursor: crosshair; }
.board-asa-conectar::after { border-radius: 3px; }
/* Cuadrado y no círculo: se distingue de las otras dos asas sin leer nada. */
.board-asa-estilo { left: calc(-22px / var(--zoom)); top: calc(-22px / var(--zoom)); cursor: pointer; }
.board-asa-estilo::after { border-radius: 4px; }

.board-etiqueta-presencia {
  position: absolute;
  left: -2px;
  bottom: 100%;
  margin-bottom: calc(4px / var(--zoom));
  padding: 0 calc(6px / var(--zoom));
  border-radius: calc(4px / var(--zoom));
  background: var(--presencia);
  color: #fff;
  font-size: calc(12px / var(--zoom));
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}

/* — Controles flotantes — */

.board-zoom {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.board-zoom .btn { background: var(--color-bg); border-color: var(--color-divider); }

.board-herramientas {
  flex: none;
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  padding-bottom: calc(var(--space-1) + var(--borde-seguro-abajo));
  border-top: 1px solid var(--color-divider);
  background: var(--color-bg);
  /* Seis a 44 px son 264: entran a 320, pero con la fuente al máximo no hay
     que partir la fila; si no entran, scrollea. `min-width: 0` hace falta o la
     barra se ensancha en vez de scrollear. */
  min-width: 0;
}
/* Lo que crea cosas scrollea; color y borrar quedan fijos a la derecha, donde
   siempre se alcanzan. */
.board-herramientas-crear { display: flex; gap: var(--space-1); flex: 1; min-width: 0; overflow-x: auto; }
.board-herramientas[hidden] { display: none; }
.board-herramientas .board-icono.grabando { color: var(--color-error); }

.board-colores {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-divider);
  background: var(--color-bg);
}
/* `hidden` pierde contra un `display` de clase: se lo reafirma, o la paleta se
   veía siempre, también para quien sólo mira. */
.board-colores[hidden],
.board-icono[hidden],
.board-aviso[hidden] { display: none; }

.board-color {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-divider);
  touch-action: manipulation;
  background: var(--tinte, var(--color-surface));
}
.board-color[aria-pressed="true"] { border-color: var(--color-accent); }
.board-color[data-color="rojo"]     { --tinte: var(--bloque-rojo-fondo); }
.board-color[data-color="naranja"]  { --tinte: var(--bloque-naranja-fondo); }
.board-color[data-color="amarillo"] { --tinte: var(--bloque-amarillo-fondo); }
.board-color[data-color="verde"]    { --tinte: var(--bloque-verde-fondo); }
.board-color[data-color="azul"]     { --tinte: var(--bloque-azul-fondo); }
.board-color[data-color="violeta"]  { --tinte: var(--bloque-violeta-fondo); }
.board-color[data-color="gris"]     { --tinte: var(--bloque-gris-fondo); }

/* — Lista de boards — */

.boards-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); padding-bottom: calc(var(--space-4) + var(--borde-seguro-abajo)); }
.boards-nuevo { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.boards-nuevo input { flex: 1; min-width: 0; }
.boards-nuevo .btn { min-height: 44px; }
.boards-estado { margin: 0 0 var(--space-3); font-size: .9rem; opacity: .75; }
.boards-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.board-tarjeta a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 44px;
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}
.board-tarjeta-detalle { font-size: .8rem; opacity: .7; }

/* — Panel de compartir — */

.board-compartir { width: min(32rem, calc(100vw - 2 * var(--space-3))); max-height: 85dvh; overflow-y: auto; padding: var(--space-4); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); }
.board-compartir::backdrop { background: color-mix(in srgb, #000 45%, transparent); }
.board-compartir h2 { margin: 0 0 var(--space-3); font-size: 1.2rem; }
.board-compartir h3 { margin: var(--space-4) 0 var(--space-2); font-size: 1rem; }
.board-compartir-fila { display: flex; align-items: center; gap: var(--space-2); }
.board-compartir-fila > :first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.board-compartir .btn { min-height: 44px; }
.board-compartir input[type="text"], .board-compartir input[type="email"] { flex: 1; min-width: 0; font-size: 1rem; }
.board-compartir-error { min-height: 1.4rem; margin: var(--space-2) 0 0; color: var(--color-error); font-size: .9rem; }
.board-compartir-peligro { margin-top: var(--space-6); border-top: 1px solid var(--color-divider); padding-top: var(--space-3); }
.board-compartir-peligro .btn { color: var(--color-error); }

/* — La anotación de una línea — */

.board-conector-etiqueta,
.board-conector-editor {
  position: absolute;
  transform: translate(-50%, -50%);
}
.board-conector-etiqueta {
  max-width: 220px;
  min-height: 26px;
  padding: 2px 10px;
  border: 1px solid var(--color-divider);
  /* Un texto largo ocupa dos líneas y recién ahí se corta con puntos suspensivos.
     El radio de una píldora (999px) sobre dos líneas se vería como un óvalo. */
  border-radius: 14px;
  background: var(--color-bg);
  color: var(--color-text);
  font: 500 .85rem/1.5 var(--font-body);
  text-align: center;
  /* Sin `width: max-content` el ancho de un elemento absoluto es el del texto más
     corto que se puede partir, y con overflow-wrap: anywhere eso es UNA letra: la
     etiqueta se veía como una columna de 2 caracteres. */
  width: max-content;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  cursor: pointer;
}
.board-conector-etiqueta.seleccionado { border-color: var(--color-accent); }
.board-conector-editor {
  width: 220px;
  padding: 4px 10px;
  border: 2px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font: 1rem var(--font-body); /* 16 px: debajo de eso iOS hace zoom al enfocar */
  text-align: center;
}

/* — Nodo bloque: la vista de sólo lectura de un bloque de nota — */
.board-nodo-bloque { padding: 0; }
.nb-contenido { box-sizing: border-box; width: 100%; height: 100%; padding: .5rem .75rem; overflow: auto; border-radius: inherit; line-height: 1.4; overflow-wrap: anywhere; }
.nb-h1 { font-size: 1.6rem; font-weight: 700; }
.nb-h2 { font-size: 1.3rem; font-weight: 700; }
.nb-h3 { font-size: 1.1rem; font-weight: 700; }
.nb-cita { border-left: 3px solid var(--color-divider); padding-left: .75rem; font-style: italic; }
.nb-versiculo { font-style: normal; font-weight: 600; }
.nb-versiculo strong { font-weight: 700; }
.nb-separador { border-top: 1px solid var(--color-divider); margin-top: .75rem; height: 0; }
.nb-mermaid, .nb-mapa, .nb-imagen-anotada, .nb-pdf { height: 100%; }
.nb-mermaid svg { max-width: 100%; height: auto; }
.nb-pdf img { display: block; width: 100%; height: calc(100% - 1.4rem); object-fit: contain; pointer-events: none; }
.nb-pdf-pie { margin: 0; font-size: .75rem; opacity: .7; }
.nb-imagen-anotada .imagen-anotada-marco { width: 100%; }
.nb-contenido[data-color="rojo"]     { --tinte: var(--bloque-rojo-fondo);     --tinta: var(--bloque-rojo-texto); }
.nb-contenido[data-color="naranja"]  { --tinte: var(--bloque-naranja-fondo);  --tinta: var(--bloque-naranja-texto); }
.nb-contenido[data-color="amarillo"] { --tinte: var(--bloque-amarillo-fondo); --tinta: var(--bloque-amarillo-texto); }
.nb-contenido[data-color="verde"]    { --tinte: var(--bloque-verde-fondo);    --tinta: var(--bloque-verde-texto); }
.nb-contenido[data-color="azul"]     { --tinte: var(--bloque-azul-fondo);     --tinta: var(--bloque-azul-texto); }
.nb-contenido[data-color="violeta"]  { --tinte: var(--bloque-violeta-fondo);  --tinta: var(--bloque-violeta-texto); }
.nb-contenido[data-color="gris"]     { --tinte: var(--bloque-gris-fondo);     --tinta: var(--bloque-gris-texto); }
.nb-contenido[data-modo="fondo"] { background: var(--tinte); }
.nb-contenido[data-modo="texto"] { color: var(--tinta); }

/* — Editar un bloque: el editor de notas en un diálogo — */
.dialogo-bloque {
  width: min(640px, 100vw);
  height: var(--alto-visible, 100dvh);
  max-height: none;
  margin: 0 auto;
  padding: var(--space-3);
  padding-top: calc(var(--space-3) + var(--borde-seguro-arriba));
  padding-bottom: calc(var(--space-3) + var(--borde-seguro-abajo));
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
}
.dialogo-bloque[open] { display: flex; flex-direction: column; gap: var(--space-2); }
.dialogo-bloque-cuerpo { flex: 1; min-height: 0; overflow-y: auto; margin: 0; }
.dialogo-bloque .btn { min-height: 44px; align-self: stretch; }

.hoja-bloque .captura-opcion { min-height: 3.25rem; }
.nb-imagen img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.nb-audio audio { display: block; width: 100%; }
.dialogo-bloque { text-align: left; }
.nb-separador { overflow: hidden; }

/* Zoom: el deslizador va en vertical entre + y −. */
.board-zoom-rango {
  writing-mode: vertical-lr;
  direction: rtl; /* arriba = acercar */
  align-self: center;
  width: 44px;
  height: 120px;
  margin: 0;
  touch-action: none;
  accent-color: var(--color-accent);
}
.nb-mapa, .nb-imagen, .nb-imagen-anotada, .nb-pdf, .nb-audio { padding: 0; overflow: hidden; }

/* — Menú del asa de estilo y color — */
.board-menu-nodo {
  position: fixed;
  z-index: 3000;
  display: grid;
  gap: var(--space-2);
  width: min(260px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface, var(--color-bg));
  color: var(--color-text);
  box-shadow: var(--shadow-md, var(--shadow-sm));
}
.board-menu-seccion { display: grid; gap: var(--space-1); }
.board-menu-titulo { margin: 0; font-size: .75rem; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.board-menu-opcion { min-height: 44px; justify-content: flex-start; text-align: left; }
.board-menu-opcion[aria-pressed="true"] { border-color: var(--color-accent); }
.board-menu-modos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
.board-menu-colores { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* — Borrar un board — */
.board-tarjeta { position: relative; }
.board-tarjeta-borrar { position: absolute; top: var(--space-1); right: var(--space-1); min-width: 44px; min-height: 44px; }
.board-tarjeta:has(.board-tarjeta-borrar) strong { padding-right: 44px; }
.boards-borrar { width: min(26rem, calc(100vw - 2 * var(--space-3))); padding: var(--space-4); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); }
.boards-borrar::backdrop { background: color-mix(in srgb, #000 45%, transparent); }
.boards-borrar h2 { margin: 0 0 var(--space-2); font-size: 1.2rem; }
.boards-borrar-error { color: var(--color-error); }
.boards-borrar-botones { display: flex; gap: var(--space-2); justify-content: flex-end; }
.boards-borrar-botones .btn { min-height: 44px; }
.boards-borrar { text-align: left; }

/* El marco de selección. Se compensa el zoom para que el borde mida lo mismo. */
.board-marco {
  position: absolute;
  border: calc(1.5px / var(--zoom)) dashed var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  pointer-events: none;
}

.nb-imagen { padding: 0; }

/* — Exportar como PDF (board-imprimir.js): una hoja A3 con todo el contenido — */
@media print {
  body.imprimiendo {
    display: block;
    height: auto;
    overflow: visible;
    background: #fff;
  }
  body.imprimiendo * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.imprimiendo .board-barra,
  body.imprimiendo .board-herramientas,
  body.imprimiendo .board-zoom,
  body.imprimiendo .board-colores,
  body.imprimiendo .board-menu-nodo,
  body.imprimiendo .board-aviso,
  body.imprimiendo .board-etiqueta-presencia,
  body.imprimiendo .board-marco,
  body.imprimiendo dialog { display: none !important; }
  body.imprimiendo .board-lienzo {
    position: relative;
    flex: none;
    width: var(--pagina-ancho);
    height: var(--pagina-alto);
    overflow: hidden;
    background: #fff;
    break-inside: avoid;
  }
  body.imprimiendo .board-nodo { box-shadow: none; break-inside: avoid; }
}

/* — Observación: un bloque de texto con icono de hoja, para referencias — */
.board-nodo-observacion { border-style: dashed; }
.board-nodo-observacion .nb-contenido { padding-left: 2.1rem; font-size: .85rem; }
.board-observacion-icono {
  position: absolute;
  left: .55rem;
  top: .55rem;
  display: grid;
  opacity: .65;
  pointer-events: none;
}

/* Nodos pegados: el borde en el color de acento, para leerlos como una pieza. */
.board-nodo[data-grupo] { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-divider)); }
.board-menu-separar { width: min(220px, calc(100vw - 16px)); }

/* — Exportar como presentación (board-imprimir.js): una hoja A4 apaisada por bloque — */
.diapositivas { position: fixed; left: -10000px; top: 0; }
.diapositiva {
  --d-fondo: #fff;
  --d-texto: #111;
  --d-titulo: #111;
  --d-acento: #2d5a8c;
  --d-nodo-fondo: #eee;
  --d-nodo-texto: #111;
  --d-nodo-borde: #ccc;
  --d-notas: #333;
  --d-linea: #999;
  --d-fuente-titulo: var(--font-heading);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4mm;
  width: var(--diapositiva-ancho);
  height: var(--diapositiva-alto);
  padding: 12mm 14mm;
  overflow: hidden;
  background: var(--d-fondo);
  color: var(--d-texto);
}
/* El título lleva una barra del color de acento: marca dónde empieza y con qué se llegó
   (el texto de la flecha). Es lo único con acento: el resto es tinta sobre fondo. */
.diapositiva-titulo {
  flex: none;
  margin: 0;
  padding-left: .45em;
  border-left: .22em solid var(--d-acento);
  color: var(--d-titulo);
  font: 700 24pt/1.15 var(--d-fuente-titulo);
}
.diapositiva-cuerpo { display: grid; place-items: center; flex: 1; min-height: 0; overflow: hidden; }
.diapositiva-lienzo { position: relative; flex: none; }
.diapositiva-notas {
  flex: none;
  margin: 0;
  padding: 3mm 0 0 5mm;
  border-top: 0.3mm solid var(--d-linea);
  font-size: 9pt;
  line-height: 1.35;
  color: var(--d-notas);
}
.diapositiva-notas li { margin-bottom: 1mm; }
.diapositiva-notas li > * { margin: 0; }
@media print {
  body.imprimiendo-diapositivas { display: block; height: auto; overflow: visible; background: #fff; }
  body.imprimiendo-diapositivas > *:not(#diapositivas) { display: none !important; }
  body.imprimiendo-diapositivas * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.imprimiendo-diapositivas .diapositivas { position: static; }
  body.imprimiendo-diapositivas .diapositiva { break-after: page; break-inside: avoid; }
  body.imprimiendo-diapositivas .diapositiva:last-child { break-after: auto; }
}

/* — Presentación: una diapositiva por bloque, a pantalla completa — */
.presentacion {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: #fff;
  color: #111;
  touch-action: none; /* el arrastre es para pasar de diapositiva, no para scrollear */
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
.presentacion.sin-controles { cursor: none; }
.presentacion-escena { position: absolute; inset: 0; }
.presentacion .diapositiva {
  width: 100%;
  height: 100%;
  padding: clamp(16px, 4vh, 48px) clamp(20px, 5vw, 72px);
}
.presentacion .diapositiva-titulo { font-size: clamp(1.6rem, 4.6vw, 3.4rem); }
.presentacion .diapositiva-notas { font-size: clamp(.85rem, 1.7vw, 1.3rem); }
.presentacion-controles {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgb(20 20 20 / .78);
  color: #fff;
  transition: opacity .25s;
}
.presentacion.sin-controles .presentacion-controles { opacity: 0; pointer-events: none; }
.presentacion-boton {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
}
.presentacion-contador { min-width: 4.5ch; text-align: center; font-size: .95rem; font-variant-numeric: tabular-nums; }

/* En una diapositiva no hay scroll: el recuadro crece hasta que el texto entre (ver
   encuadrarDiapositiva). Lo que no es texto conserva su recorte. */
.diapositiva .board-nodo { overflow: visible; }
.diapositiva .nb-contenido:not(.nb-mapa, .nb-imagen, .nb-imagen-anotada, .nb-pdf, .nb-audio) { overflow: visible; height: auto; min-height: 100%; }

/* Los recuadros de una diapositiva toman los colores del diseño; si el bloque trae color
   propio (su marca de color), ese manda. Sin sombra: en un proyector sólo ensucia. */
.diapositiva .board-nodo { border-color: var(--d-nodo-borde); border-radius: 6px; box-shadow: none; color: var(--d-nodo-texto); }
.diapositiva .board-nodo:not([data-color]) { background: var(--d-nodo-fondo); }
.presentacion { background: var(--d-fondo, #fff); }
.presentacion .diapositiva-titulo { font-size: clamp(1.6rem, 4.6vw, 3.4rem); }
.board-menu-muestra {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 1.6rem;
  margin-right: .6rem;
  border: 1px solid color-mix(in srgb, var(--m-texto) 35%, transparent);
  border-radius: 4px;
  background: var(--m-fondo);
  color: var(--m-texto);
  font: 700 .8rem/1 var(--font-heading);
  box-shadow: inset 0 -3px 0 var(--m-acento);
}