:root {
  color-scheme: light;
  /* Con viewport-fit=cover el layout llega hasta el borde fisico: estas
     variables devuelven el margen del notch y del home indicator. En un
     navegador sin safe areas valen 0 y nada cambia. */
  --borde-seguro-arriba: env(safe-area-inset-top, 0px);
  --borde-seguro-abajo: env(safe-area-inset-bottom, 0px);
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-100: #eef6ff;
  --color-accent-800: #2c455d;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --color-error: #b3453f;
  /* El resaltador. Amarillo de marcador sobre el papel claro. */
  --color-resaltado: #fbeaa0;
  /* El color de un bloque entero: siete, cada uno en dos modos. Los de FONDO
     son tintes pálidos, para que la letra normal siga leyéndose encima; los
     de TEXTO son tonos medios, oscuros como para leerse sobre el papel.
     Medidos: todos pasan WCAG AA (4.5:1). El mínimo es el naranja de texto,
     5.37. */
  --bloque-rojo-fondo: #fbdad7;     --bloque-rojo-texto: #b3261e;
  --bloque-naranja-fondo: #fde2c8;  --bloque-naranja-texto: #a14a00;
  --bloque-amarillo-fondo: #fbeaa0; --bloque-amarillo-texto: #7a5c00;
  --bloque-verde-fondo: #d4efd6;    --bloque-verde-texto: #1e6b2e;
  --bloque-azul-fondo: #d6e6fb;     --bloque-azul-texto: #1f5aa6;
  --bloque-violeta-fondo: #e6dcf7;  --bloque-violeta-texto: #6a3fa0;
  --bloque-gris-fondo: #e0e0e2;     --bloque-gris-texto: #55585c;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  /* Alto de la barra inferior y del FAB. Los usan la propia barra, el FAB y el
     aviso de acción para apilarse sin taparse: el FAB estaba fijo al borde y
     quedaba justo encima de la pestaña de Ajustes. */
  --alto-barra-inferior: 3.25rem;
  --alto-fab: 56px;
  /* Lo que flota sobre el contenido de una nota (menús, barras, la pregunta de
     descartar) tiene que quedar por encima de Leaflet, que se reparte z-index
     hasta 1000 entre sus paneles y controles: sin esto el menú del handle
     quedaba debajo del mapa. Es el único contenido que declara z-index —ni
     mermaid, ni las imágenes anotadas, ni el audio lo hacen—, pero el valor los
     cubre a todos. */
  --z-flotante-nota: 2000;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #1a1b1c;
  --color-surface: #232425;
  --color-text: #e8e8e9;
  --color-accent: #7aa5c9;
  --color-accent-600: #8fb8d8;
  --color-accent-700: #a9cbe6;
  --color-accent-100: #16232c;
  --color-accent-800: #cfe4f5;
  --color-divider: color-mix(in srgb, #e8e8e9 18%, transparent);
  --color-error: #d9736c;
  /* En oscuro un amarillo de marcador es ilegible: el texto negro sobre
     amarillo chillón encandila y el blanco sobre amarillo no se lee. Va un
     ambar apagado, y el color del texto se fuerza para no depender del tema. */
  --color-resaltado: #6b5a1f;
  /* En oscuro se invierte la lógica: los de FONDO son tintes apagados, para
     que la letra clara siga leyéndose, y los de TEXTO se aclaran. Un tinte
     vivo sobre #1a1b1c encandila — ya se vio con el resaltado. Medidos: todos
     pasan AA; el mínimo es el amarillo de fondo, 5.52. */
  --bloque-rojo-fondo: #4a1f1c;     --bloque-rojo-texto: #f28b82;
  --bloque-naranja-fondo: #4a2d12;  --bloque-naranja-texto: #fbb66b;
  --bloque-amarillo-fondo: #6b5a1f; --bloque-amarillo-texto: #f5d76e;
  --bloque-verde-fondo: #1f3d25;    --bloque-verde-texto: #81c995;
  --bloque-azul-fondo: #1c2f4a;     --bloque-azul-texto: #8ab4f8;
  --bloque-violeta-fondo: #33264a;  --bloque-violeta-texto: #c7a4f5;
  --bloque-gris-fondo: #34363a;     --bloque-gris-texto: #b0b3b8;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #000 40%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #000 45%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #000 55%, transparent);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  /* En iOS Safari 100vh es el viewport "grande", el de barras retraídas: con la
     barra inferior a la vista el fondo de la página queda tapado. dvh sigue el
     viewport dinámico y deja la barra de herramientas del modal siempre visible. */
  min-height: 100dvh;
  display: grid;
  /* `safe`: si el contenido es más alto que la pantalla, se apoya arriba en vez
     de centrarse. Centrado, el desborde de arriba no se puede scrollear y la
     primera fila —el "← Notas" de Ajustes— queda fuera de alcance. */
  place-items: safe center;
  /* Ajustes y el login también se dibujan bajo la barra de estado del iPhone
     (`viewport-fit=cover`). La pantalla de notas compensa la safe area en su
     propia barra; acá no lo hacía nadie, así que el "← Notas" caía debajo de la
     barra de estado y el sistema se quedaba con los toques. */
  padding: calc(var(--space-4) + var(--borde-seguro-arriba)) var(--space-4)
           calc(var(--space-4) + var(--borde-seguro-abajo));
  background: var(--color-bg);
  color: var(--color-text);
  font: 1rem/1.5 var(--font-body);
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); margin-top: 0; }
h1 { font-size: 1.4rem; }

/* — wireframe: los componentes son cuadrados, de borde fino, sin relleno salvo el acento — */
main {
  position: relative;
  width: min(28rem, 92vw);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
}

label { display: block; margin-bottom: var(--space-4); }
label span {
  display: block;
  margin-bottom: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  font-size: .85rem;
}

.input, input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  color: var(--color-text);
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--color-accent);
  outline-offset: 0;
}

.btn[hidden] { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: .95rem;
  padding: var(--space-3) calc(var(--space-4) * 1.2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-accent); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-block { width: 100%; }

.error { color: var(--color-error); min-height: 1.5rem; margin: 0 0 var(--space-3); font-size: .9rem; }

#google-boton { margin-top: var(--space-4); }

/* — esquineros tipo plano técnico: decoran main/.nota/dialog cuando llevan class="blueprint" — */
.blueprint { position: relative; }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; pointer-events: none; }
.blueprint > .corner::before, .blueprint > .corner::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.barra-ajustes { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.barra-ajustes .volver {
  display: inline-flex;
  align-items: center;
  /* Es el único camino de vuelta desde Ajustes: no puede ser un target chico. */
  min-height: 2.75rem;
  padding-right: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-heading);
  touch-action: manipulation;
}

.tamanos-fuente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-6); }
.tamanos-fuente .btn.elegido { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.tamanos-fuente .btn { width: 2.6rem; height: 2.6rem; padding: 0; }
.tamanos-fuente .tamano-14 { font-size: 14px; }
.tamanos-fuente .tamano-16 { font-size: 16px; }
.tamanos-fuente .tamano-18 { font-size: 18px; }
.tamanos-fuente .tamano-20 { font-size: 20px; }

pre {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: .85rem;
  color: var(--color-text);
}

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

.barra-notas {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  padding-top: calc(var(--space-4) + var(--borde-seguro-arriba));
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.barra-notas h1 { margin: 0; font-size: 1.3rem; letter-spacing: .01em; flex: none; }
#buscador { flex: 1 1 12rem; min-width: 10rem; }
.barra-notas nav { flex: none; display: flex; align-items: center; gap: var(--space-3); }
.barra-notas nav a { color: var(--color-accent-700); text-decoration: none; font-family: var(--font-heading); }
.barra-notas select { width: auto; padding: var(--space-2) var(--space-3); }

.grid-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-width: none;
  padding: 0;
  border: none;
  background: transparent;
}

.grid-notas {
  /* `--columnas` lo pone app.js. El segundo valor es un ancho mínimo: si la
     ventana no da para tantas columnas, el navegador pone menos en vez de
     dejarlas ilegibles. */
  columns: var(--columnas, 4) 8rem;
  column-gap: var(--space-6);
  padding: var(--space-6) var(--space-6) 6rem;
}

@media (max-width: 640px) {
  /* Dos columnas en un teléfono no entran con el aire del escritorio. */
  .grid-notas { column-gap: var(--space-3); }

  /* La versión debajo del nombre, muy chica. Las dos líneas van con
     `line-height: 1` para que apilarlas le sume ~5 px a la cabecera y no 12:
     es un dato de diagnóstico y no puede costar una franja de la grilla.
     `align-items: flex-start` la alinea con la N y no la centra bajo el
     título, que se leería como un subtítulo. */
  .barra-notas-titulo {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .barra-notas h1 { line-height: 1; }
  .version-app { font-size: .55rem; line-height: 1; }
}

.nota {
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-top: 4px solid var(--color-divider);
  cursor: pointer;
}

.nota h3 { margin: 0 0 var(--space-2); font-size: 1rem; overflow-wrap: anywhere; }
.nota p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  font-size: .9rem;
}
.nota.fijada { border-color: var(--color-accent); }

.nota-miniaturas { display: flex; gap: 2px; margin: 0 0 var(--space-2); }
.nota-miniaturas > img { flex: 1; aspect-ratio: 1; min-width: 0; object-fit: cover; border: 1px solid var(--color-divider); }

.nota-fechas {
  margin: var(--space-2) 0 0;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .7rem;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.nota.color-rojo     { border-top-color: #a15a4a; }
.nota.color-naranja  { border-top-color: #b8804a; }
.nota.color-amarillo { border-top-color: #b8a84a; }
.nota.color-verde    { border-top-color: #5a9068; }
.nota.color-celeste  { border-top-color: #5a8ca0; }
.nota.color-azul     { border-top-color: #5a76a0; }
.nota.color-violeta  { border-top-color: #7a5aa0; }
.nota.color-rosa     { border-top-color: #a0567e; }

#fab {
  position: fixed;
  right: var(--space-6);
  /* Arriba de la barra inferior, no encima: pegado al borde tapaba la pestaña
     de Ajustes, que es la de la derecha. */
  bottom: calc(var(--space-3) + var(--alto-barra-inferior) + env(safe-area-inset-bottom, 0px));
  width: var(--alto-fab);
  height: var(--alto-fab);
  border-radius: 0;
  font-size: 1.8rem;
  line-height: 1;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-bg);
  box-shadow: var(--shadow-md);
}
#fab:hover { background: var(--color-accent-600); }

dialog#modal-nota:not([open]) { display: none; }

dialog#modal-nota {
  /* El inset va explícito y completo. El alto sigue al viewport *visual* (ver
     abajo) pero el diálogo se ancla al de *layout*, y con el teclado abierto iOS
     desplaza uno dentro del otro: el diálogo quedaba arriba de la banda visible
     y por debajo de la nota asomaba la grilla de la app. `--desplazamiento-visible`
     lo publica viewport-alto.js justo para esto. Sin `bottom: auto` y
     `right: auto` mandan los insets del navegador para un <dialog> modal, que
     con `margin: auto` lo centran en la banda equivocada. */
  position: fixed;
  top: var(--desplazamiento-visible, 0px);
  left: 0;
  right: auto;
  bottom: auto;
  margin: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  /* --alto-visible lo publica viewport-alto.js: en iOS es lo único que refleja
     la barra del navegador Y el teclado abierto. dvh/vh quedan de fallback. */
  height: var(--alto-visible, 100dvh);
  max-width: none;
  max-height: none;
  border: none;
  padding: 1em;
  padding-top: calc(1em + var(--borde-seguro-arriba));
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  overflow: hidden;
}

dialog#modal-nota form {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.contenido-nota {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

/* El + del final del cuerpo de la nota. Ocupa todo el ancho para que la zona
   tocable sea grande, pero se dibuja apagado: es una pista, no un botón que
   compita con el contenido. */
.bloque-agregar {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: var(--space-2);
  background: none;
  border: 1px dashed var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  font-size: 1.25rem;
  line-height: 1;
  cursor: text;
  touch-action: manipulation;
}
.bloque-agregar:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* La fecha va debajo de las etiquetas, en la misma zona de "datos de la nota".
   El ✕ sólo aparece si hay algo que sacar: un botón que no hace nada confunde. */
/* La fecha de la nota pesa más que "Creada/Editada": es un dato del contenido,
   no metadato del archivo. */
/* La agenda va en una sola columna, a diferencia de la grilla de notas: el
   masonry reparte por columnas y se lee de arriba abajo en cada una, así que con
   dos columnas la tercera cita aparece antes que la segunda. En Notas el orden
   es una comodidad; acá es todo el punto. */
#agenda-proximas,
#agenda-pasadas { column-count: 1; }

/* Mismo alto visible que el resto de los diálogos a pantalla completa, y la
   safe area de abajo compensada: es el error que ya se pagó tres veces —el ✕ del
   visor, el "← Notas" de Ajustes y la barra del anotador—. */
.dialogo-versiculo {
  width: 100vw;
  height: var(--alto-visible, 100dvh);
  max-width: none;
  max-height: none;
  margin: 0;
  border: none;
  padding: var(--space-3);
  padding-top: calc(var(--space-3) + var(--borde-seguro-arriba));
  padding-bottom: calc(var(--space-3) + var(--borde-seguro-abajo));
  background: var(--color-bg);
  color: var(--color-text);
  flex-direction: column;
  gap: var(--space-2);
}
.dialogo-versiculo[open] { display: flex; }
.versiculo-barra { display: flex; gap: var(--space-2); }
/* `width: auto` y `flex: none` en el selector: la regla global le pone
   `width: 100%` a todo `select`, y en un flex eso se convierte en su
   `flex-basis`. El input tiene `flex: 1` —basis 0— así que se achicaba a nada
   mientras el selector se comía la fila entera. Mismo arreglo que ya llevaba
   `.barra-notas select`. */
.versiculo-barra select {
  width: auto;
  flex: none;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
}
/* El buscador se queda con todo lo que sobre; `min-width: 0` para que pueda
   achicarse por debajo de su contenido en pantallas angostas. */
.versiculo-barra input { flex: 1 1 0; min-width: 0; min-height: 2.75rem; }
.versiculo-barra button { flex: none; min-height: 2.75rem; }
.versiculo-resultados {
  flex: 1;
  overflow-y: auto;
  /* En iOS, un arrastre que empieza sobre texto seleccionable arranca una
     SELECCION en vez de un scroll, y una vez que arranco, el scroll muere: la
     lista de 66 libros no se podia recorrer con el dedo. El contenedor
     scrollea bien; lo que pasaba es que le robaban el gesto.

     Con prefijo porque Safari no entendio `user-select` sin el hasta la 17, y
     con `touch-callout` para que mantener pulsado tampoco saque el menu de
     Copiar/Consultar/Traducir encima.

     Es la misma leccion que ya se habia pagado en las tarjetas de la grilla
     (`.nota`), y vale por el mismo motivo: este dialogo es para ELEGIR, y el
     texto se lee y se copia adentro de la nota, que es donde queda despues de
     insertarlo. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* La fila ENTERA es el label de la casilla, asi que tocar cualquier parte
   —casilla o texto— la marca, y nada mas que eso: insertar es cosa del boton
   del pie. La casilla nativa mide 13 px y apuntarle con el dedo no funciona,
   pero ahora no hace falta: el area tocable es todo el renglon. */
.versiculo-fila {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-bottom: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  cursor: pointer;
  touch-action: manipulation;
}
/* Marcada se ve marcada: con veinte resultados en pantalla, la casilla sola es
   muy poca senal para saber que se lleva. */
.versiculo-fila:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.versiculo-fila input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; }
.versiculo-resultado {
  flex: 1;
  min-width: 0;
  text-align: left;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .9rem;
}
.versiculo-resultado mark { background: var(--color-accent-100); color: inherit; }
/* Tres botones: Libros, Insertar y Cerrar. A 320 px dan 91 px cada uno, bien
   por encima del minimo tactil. */
.versiculo-pie { display: flex; gap: var(--space-2); }
.versiculo-pie button { flex: 1; min-height: 2.75rem; }

/* — Navegar por libro — */

/* Las migas: cada tramo vuelve a su nivel. El ultimo es donde estas, y no es
   un boton porque no lleva a ningun lado. */
.versiculo-migas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
.versiculo-migas[hidden] { display: none; }
.versiculo-migas button {
  min-height: 2.75rem;
  padding: 0 var(--space-2);
  border: none;
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: .9rem;
  cursor: pointer;
  touch-action: manipulation;
}
.versiculo-migas span { color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* Los 66 libros, agrupados por testamento. Se listan enteros: paginar 66
   filas seria peor que scrollear. */
.versiculo-testamento {
  margin: var(--space-3) 0 var(--space-2);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.versiculo-libro {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  margin-bottom: var(--space-1);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .95rem;
  cursor: pointer;
  touch-action: manipulation;
}

/* Los capitulos en grilla: auto-fill con minimo 2.75rem, asi entran los que
   entren en el ancho que haya y todos siguen siendo tocables. */
.versiculo-capitulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: var(--space-2); }
/* Capítulo anterior / siguiente, arriba y abajo del capítulo. */
.versiculo-vecinos { display: flex; justify-content: space-between; gap: var(--space-2); }
.versiculo-vecino { min-height: 44px; font-weight: 600; }

.versiculo-capitulo {
  min-height: 2.75rem;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  cursor: pointer;
  touch-action: manipulation;
}
.versiculo-referencia {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: .85rem;
  color: var(--color-accent);
}
.versiculo-aviso {
  margin: 0;
  font-size: .8rem;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.agenda-titulo {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1rem;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.agenda-titulo[hidden] { display: none; }

.nota-cuando {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: .85rem;
  color: var(--color-accent);
}

.fecha-nota {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

/* El aviso cuelga de la fecha: va en el mismo panel, debajo. */
.aviso-nota { display: flex; align-items: center; gap: var(--space-2); }
/* `width: auto` y no el `width: 100%` global de los select: ese global ya se
   comio una fila una vez, cuando el selector de version de la Biblia dejo al
   buscador en una tira. */
.aviso-nota select { width: auto; flex: 1; min-height: 2.75rem; }
.aviso-nota select:disabled { opacity: .5; }
.aviso-explicacion {
  margin: var(--space-2) 0 0;
  font-size: .85rem;
  color: var(--color-error);
}
.aviso-explicacion[hidden] { display: none; }
.nota-fecha {
  min-height: 2.75rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
}
.fecha-todo-el-dia {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-size: .85rem;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
#nota-fecha-borrar { min-height: 2.75rem; min-width: 2.75rem; }

.aviso-conflicto[hidden] { display: none; }
.aviso-conflicto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: .9rem;
}
.aviso-conflicto button { border-color: var(--color-error); color: var(--color-error); width: auto; padding: var(--space-1) var(--space-3); }

@media (min-width: 641px) {
  dialog#modal-nota {
    /* En el escritorio no hay teclado que desplace nada: vuelve a centrarse,
       para lo cual los cuatro insets tienen que estar puestos. */
    inset: 0;
    margin: auto;
    width: 80vw;
    height: 92vh;
    height: 92dvh;
    max-width: 60rem;
    padding: var(--space-8);
    border: 1px solid var(--color-divider);
  }
}

dialog#modal-nota::backdrop { background: rgba(29, 31, 32, .5); }

#nota-titulo, #nota-cuerpo {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  padding: var(--space-2) 0;
}

#nota-titulo { font-family: var(--font-heading); font-size: 1.2rem; font-weight: var(--font-heading-weight); }

.colores { display: flex; gap: var(--space-2); margin: var(--space-4) 0; flex-wrap: wrap; }
.colores .color {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--color-divider);
  padding: 0;
  cursor: pointer;
}
.colores .color.elegido { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.colores .color-default   { background: var(--color-bg); }
.colores .color-rojo      { background: #a15a4a; }
.colores .color-naranja   { background: #b8804a; }
.colores .color-amarillo  { background: #b8a84a; }
.colores .color-verde     { background: #5a9068; }
.colores .color-celeste   { background: #5a8ca0; }
.colores .color-azul      { background: #5a76a0; }
.colores .color-violeta   { background: #7a5aa0; }
.colores .color-rosa      { background: #a0567e; }

.barra-herramientas-nota {
  flex: none;
  display: flex;
  /* Una sola fila: si envuelve, la segunda queda tapada por la barra de Safari
     o por el teclado, y "Cerrar" deja de verse. Prefiere apretar el espacio
     entre iconos antes que partirse. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  /* iPhone con home indicator: sin esto la última fila de botones queda pegada
     al borde. Vale 0 en cualquier navegador sin safe area. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--color-divider);
}
.herramientas-izquierda, .herramientas-derecha { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); }
.herramientas-izquierda, .herramientas-derecha { min-width: 0; }
.boton-adjunto, #nota-pin, #nota-cerrar { flex: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Telefono angosto: los iconos ya estan en su tamaño minimo, asi que lo unico
   que puede ceder es el aire entre ellos y el relleno de "Cerrar". Sin esto los
   dos grupos se montan uno sobre el otro por debajo de ~343 px: el pin queda
   encima del icono de mapa. */
@media (max-width: 420px) {
  .barra-herramientas-nota,
  .herramientas-izquierda,
  .herramientas-derecha { gap: 4px; }
  #nota-cerrar { padding-left: var(--space-3); padding-right: var(--space-3); }
}
/* Los telefonos mas angostos que quedan (320 px): un escalon mas de apriete. */
@media (max-width: 360px) {
  .barra-herramientas-nota,
  .herramientas-izquierda,
  .herramientas-derecha { gap: 2px; }
  #nota-cerrar { padding-left: var(--space-2); padding-right: var(--space-2); }
  #nota-mas { padding-left: var(--space-2); padding-right: var(--space-2); }
}

.menu-mas-contenedor { position: relative; }
#nota-mas { padding: var(--space-2) var(--space-3); font-weight: 700; }
.menu-mas {
  /* Fija, no absoluta: la posicion la calcula app.js contra el viewport para
     que no se salga de la pantalla en el telefono. */
  position: fixed;
  z-index: var(--z-flotante-nota);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  min-width: 9rem;
  max-width: calc(100vw - 2em);
  /* Si no entra en una pantalla baja, scrollea: recortado esconde justo las
     últimas opciones (Enviar a board, Archivar, Papelera). */
  max-height: calc(var(--alto-visible, 100vh) - 1em);
  overflow-y: auto;
  padding: var(--space-2) var(--space-3);
}
.menu-mas .btn { border: none; text-align: left; }
.menu-mas .colores { margin: 0 0 var(--space-2); }
.menu-mas[hidden] { display: none; }

.editor-bloques { margin: var(--space-2) 0; overflow-x: hidden; }

.bloque-fila { display: flex; align-items: flex-start; gap: var(--space-2); position: relative; padding: 2px 0; }
.bloque-fila:hover .bloque-handle { opacity: 1; }
.bloque-handle {
  flex: none;
  width: 2.0rem;
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  overflow: hidden;
  touch-action: none;
  opacity: 0;
  cursor: grab;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  /* Con prefijo: Safari no entendió `user-select` sin él hasta la 17, y este es
     un handle de texto (⠿), así que mantenerlo pulsado en un iPhone arrancaba
     la selección. `touch-callout` es lo que además suprime el menú de
     Copiar/Consultar/Traducir, que tapaba el menú del bloque. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  position: relative;
}
/* En un teléfono no hay hover: el handle quedaba invisible aunque se pudiera
   tocar, y ahora es el único camino a "Eliminar bloque". Se muestra apagado,
   para que se vea que está sin competir con el texto. */
@media (hover: none) {
  .bloque-handle { opacity: .5; }
}
/* La columna de la izquierda: hoy el handle, y en los bloques grandes también
   el botón de colapsar, apilados. */
.bloque-columna { display: flex; flex-direction: column; flex: none; }
/* Escondida, le devuelve 39 px a cada bloque —2rem de handle más el gap de la
   fila—, que en un teléfono de 320 px es el 12 % del ancho.

   Se esconde la COLUMNA y no sólo el handle: con el contenedor presente pero
   vacío, el `gap: var(--space-2)` de la fila seguiría aplicando y quedarían
   6,8 px de los 39 que esto vino a recuperar. Y `display: none` y no
   `visibility: hidden`, por lo mismo: hay que sacarlo del flujo.

   Ojo con la consecuencia: sin handle no hay cómo eliminar un bloque ni
   cambiarle el tipo. Hay que deslizar a la derecha primero. Es el precio
   aceptado de ganar el ancho. */
.editor-bloques.sin-columna .bloque-columna { display: none; }

/* Colapsado a dos lineas, con un degradado al pie que dice que hay mas. El
   alto lo pone el JS en linea, calculado contra la `line-height` real: el
   tamano de letra es configurable en Ajustes y un valor fijo en px
   significaria cosas distintas en cada tamano. */
/* La vista previa ocupa el ancho del bloque; el alto sale del aspecto de la
   pagina, que puede venir apaisada. */
.bloque-pdf { flex: 1; min-width: 0; cursor: pointer; }

/* El visor a pantalla completa. El alto sale de --alto-visible y no de vh ni
   dvh: en iOS aquellos miden el viewport con las barras retraidas. */
.visor-pdf {
  width: 100vw;
  height: var(--alto-visible, 100dvh);
  max-width: none;
  max-height: none;
  margin: 0;
  border: none;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  flex-direction: column;
}
.visor-pdf[open] { display: flex; }
/* La barra compensa la safe area de arriba: instalada como PWA, la barra de
   estado del iPhone se queda con los toques y el cerrar quedaba debajo, sin
   forma de salir. Es el mismo error que ya se pago con el visor de imagen. */
.visor-pdf-barra {
  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);
}
.visor-pdf-boton { min-width: 2.75rem; min-height: 2.75rem; font-size: 1.2rem; }
.visor-pdf-boton:disabled { opacity: .35; }
.visor-pdf-contador { flex: 1; text-align: center; font-size: .9rem; }
.visor-pdf-hoja {
  flex: 1;
  overflow: auto;
  padding: var(--space-3);
  padding-bottom: calc(var(--space-3) + var(--borde-seguro-abajo));
  /* Lo mismo que se aprendio con la lista de libros de la Biblia: en iOS un
     arrastre sobre algo seleccionable secuestra el scroll. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.visor-pdf-hoja canvas { display: block; width: 100%; height: auto; }
.visor-pdf-aviso { margin: 0; padding: var(--space-3); color: var(--color-error); }
.visor-pdf-aviso[hidden] { display: none; }
.bloque-pdf-pagina {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.bloque-pdf-pie {
  margin: var(--space-1) 0 0;
  font-size: .8rem;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.bloque-contenido.colapsado { overflow: hidden; position: relative; }
.bloque-contenido.colapsado::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.4em;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}
/* Va debajo del handle, en la misma columna, y se esconde con ella. */
.bloque-colapsar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-height: 2.75rem;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.bloque-colapsar[hidden] { display: none; }

.bloque-marcador { flex: none; padding-top: 2px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
/* — Color del bloque entero — */
/* El color de cada bloque se elige por NOMBRE (`data-color`) y el valor lo
   pone el tema: por eso el .md guarda `verde` y no un hex, y pasar de claro a
   oscuro recolorea todo sin tocar la nota. Cada color sólo fija dos variables
   locales; los dos modos las consumen. */
.bloque-contenido[data-color="rojo"]     { --tinte: var(--bloque-rojo-fondo);     --tinta: var(--bloque-rojo-texto); }
.bloque-contenido[data-color="naranja"]  { --tinte: var(--bloque-naranja-fondo);  --tinta: var(--bloque-naranja-texto); }
.bloque-contenido[data-color="amarillo"] { --tinte: var(--bloque-amarillo-fondo); --tinta: var(--bloque-amarillo-texto); }
.bloque-contenido[data-color="verde"]    { --tinte: var(--bloque-verde-fondo);    --tinta: var(--bloque-verde-texto); }
.bloque-contenido[data-color="azul"]     { --tinte: var(--bloque-azul-fondo);     --tinta: var(--bloque-azul-texto); }
.bloque-contenido[data-color="violeta"]  { --tinte: var(--bloque-violeta-fondo);  --tinta: var(--bloque-violeta-texto); }
.bloque-contenido[data-color="gris"]     { --tinte: var(--bloque-gris-fondo);     --tinta: var(--bloque-gris-texto); }

/* Fondo: un tinte detrás del bloque, con aire para que no parezca una celda.
   El padding lateral se compensa con un margen negativo, o el texto de un
   bloque coloreado dejaría de alinearse con el de sus vecinos. */
.bloque-contenido[data-modo="fondo"] {
  background: var(--tinte);
  border-radius: .3em;
  padding: .15em .45em;
  margin-left: -.45em;
  margin-right: -.45em;
}
/* Texto: el color va a las letras. `color` se hereda, así que alcanza a la
   negrita, la cursiva y los links de adentro. */
.bloque-contenido[data-modo="texto"] { color: var(--tinta); }
/* Un resaltado dentro de un bloque con letra de color conserva esa letra, en
   vez de volver al color normal del `mark`. */
.bloque-contenido[data-modo="texto"] mark { color: inherit; }

/* La paleta del menú del bloque. */
.bloque-menu-color {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.bloque-menu-modo { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.bloque-menu-modo button {
  flex: 1;
  min-height: 44px;
  font-size: 1rem;
  border: 1px solid var(--color-divider);
  border-radius: .3em;
  background: transparent;
  color: inherit;
}
.bloque-menu-modo button[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
/* Cuatro por fila: ocho muestras de 44 px en una sola son 352 px, y no entran
   en un teléfono de 320. */
.bloque-menu-paleta {
  display: grid;
  grid-template-columns: repeat(4, 44px);
  gap: var(--space-2);
  justify-content: center;
}
.bloque-menu-muestra {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--color-divider);
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
  /* Las muestras usan los MISMOS valores que el bloque, así lo que se ve en
     el menú es exactamente lo que se va a aplicar. */
  --tinte: transparent;
  --tinta: inherit;
}
.bloque-menu-muestra[data-color="rojo"]     { --tinte: var(--bloque-rojo-fondo);     --tinta: var(--bloque-rojo-texto); }
.bloque-menu-muestra[data-color="naranja"]  { --tinte: var(--bloque-naranja-fondo);  --tinta: var(--bloque-naranja-texto); }
.bloque-menu-muestra[data-color="amarillo"] { --tinte: var(--bloque-amarillo-fondo); --tinta: var(--bloque-amarillo-texto); }
.bloque-menu-muestra[data-color="verde"]    { --tinte: var(--bloque-verde-fondo);    --tinta: var(--bloque-verde-texto); }
.bloque-menu-muestra[data-color="azul"]     { --tinte: var(--bloque-azul-fondo);     --tinta: var(--bloque-azul-texto); }
.bloque-menu-muestra[data-color="violeta"]  { --tinte: var(--bloque-violeta-fondo);  --tinta: var(--bloque-violeta-texto); }
.bloque-menu-muestra[data-color="gris"]     { --tinte: var(--bloque-gris-fondo);     --tinta: var(--bloque-gris-texto); }
/* La muestra dibuja el modo que se va a aplicar: con Fondo, un círculo teñido
   con la letra normal; con Texto, la letra de color sobre nada. Sin esto el
   conmutador cambiaría algo que no se ve. */
.bloque-menu-paleta[data-modo="fondo"] .bloque-menu-muestra { background: var(--tinte); color: var(--color-text); }
.bloque-menu-paleta[data-modo="texto"] .bloque-menu-muestra { background: transparent; color: var(--tinta); }
.bloque-menu-muestra[aria-pressed="true"] { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.bloque-menu-sin-color { background: transparent !important; color: var(--color-text) !important; }

/* El resaltado de un versículo: fondo tipo marcador. `color: inherit` porque el
   `mark` del navegador fuerza texto negro, que en tema oscuro desaparece contra
   el fondo del propio resaltado. Va con un respiro lateral y las esquinas
   redondeadas para que se lea como un trazo y no como una celda de tabla. */
.bloque-contenido mark {
  background: var(--color-resaltado);
  color: var(--color-text);
  padding: 0 .15em;
  border-radius: .15em;
  /* Un resaltado que cruza de renglon no se parte en dos cajas sueltas. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.bloque-contenido { flex: 1; min-width: 0; overflow-wrap: anywhere; outline: none; min-height: 1.4em; margin-bottom: 1em; }
.bloque-heading1 { font-size: 1.4rem; }
.bloque-heading2 { font-size: 1.2rem; }
.bloque-heading3 { font-size: 1.05rem; }
/* Sin esto el <blockquote> se queda con el margen del navegador (1em 40px):
   la franja de color arrancaba 40 px a la derecha del handle y otros 40 px se
   perdian del lado derecho, que en un telefono es donde mas aprieta. El
   padding-left si va: es el aire entre la franja y las letras. */
.bloque-quote { border-left: 3px solid var(--color-accent); margin-left: 0; margin-right: 0; padding-left: var(--space-3); color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.bloque-fila hr { flex: 1; border: none; border-top: 1px solid var(--color-divider); margin: var(--space-3) 0; }
.bloque-fila.arrastrar-antes { box-shadow: inset 0 2px 0 var(--color-accent); }
.bloque-fila.arrastrar-despues { box-shadow: inset 0 -2px 0 var(--color-accent); }
.bloque-fila.bloque-seleccionado { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }

.bloque-mermaid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bloque-mermaid-codigo {
  width: 100%;
  min-height: 4.5em;
  resize: vertical;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .85rem;
  padding: var(--space-2) var(--space-3);
}
.bloque-mermaid-preview { overflow-x: auto; }
.bloque-mermaid-preview svg { max-width: 100%; height: auto; cursor: zoom-in; }
.bloque-mermaid-error { color: var(--color-error); font-size: .85rem; margin: 0; }

.bloque-audio { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bloque-audio audio { flex: 1; min-width: 12rem; max-width: 100%; }
.bloque-audio-convertir {
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .8rem;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  touch-action: manipulation;
}
.bloque-audio-estado { font-size: .8rem; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* Detener una grabación es un target de dedo, no de mouse: 44px es el mínimo
   que recomienda Apple y por debajo de eso el tap falla y hay que repetirlo.
   `touch-action: manipulation` saca la espera del doble-tap-zoom de iOS. */
.bloque-audio-detener {
  flex: 1;
  min-width: 8rem;
  min-height: 3rem;
  border: 1px solid var(--color-error);
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1rem;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--color-error) 25%, transparent);
}
.bloque-audio-detener:disabled { opacity: .5; }

.bloque-audio-grabando,
.bloque-audio-subiendo {
  border: 1px dashed var(--color-divider);
  padding: var(--space-3);
  min-height: 3.5rem;
}
.bloque-audio-grabando .bloque-audio-tiempo { font-size: 1.1rem; }
.bloque-audio-punto { color: var(--color-error); }
.bloque-audio-grabando .bloque-audio-punto { animation: latido-grabacion 1.2s infinite; }
.bloque-audio-subiendo .bloque-audio-punto { opacity: .4; }
.bloque-audio-tiempo {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .85rem;
}

/* La foto que todavía se está comprimiendo y subiendo. Se muestra la imagen
   misma, atenuada, con el aviso encima: se ve enseguida que la app hizo algo, y
   el bloque ya ocupa el alto real, así que al llegar la url no salta el texto
   de abajo. El borde punteado es el mismo que usa el testigo de una grabación. */
.bloque-imagen-pendiente {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3.5rem;
  border: 1px dashed var(--color-divider);
}
.bloque-imagen-pendiente .bloque-imagen {
  grid-area: 1 / 1;
  opacity: .35;
}
.bloque-imagen-pendiente-aviso {
  grid-area: 1 / 1;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  color: var(--color-text);
  font-size: .85rem;
  animation: latido-grabacion 1.6s infinite;
}
.bloque-imagen-pendiente-fallo { border-color: var(--color-error); }
.bloque-imagen-pendiente-fallo .bloque-imagen-pendiente-aviso {
  color: var(--color-error);
  animation: none; /* un error no parpadea: no está pasando nada */
}
.bloque-imagen-reintentar {
  grid-area: 1 / 1;
  align-self: end;
  min-height: 44px;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-error);
  color: var(--color-error);
  touch-action: manipulation;
}

@keyframes latido-grabacion { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

#boton-voz.grabando { color: var(--color-error); border-color: var(--color-error); }

.aviso-grabacion[hidden] { display: none; }
.aviso-grabacion {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  border: 1px solid var(--color-divider);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: .85rem;
}

.nota-marca-voz {
  margin: 0 0 var(--space-2);
  font-size: .75rem;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.btn-peligro {
  border-color: var(--color-error);
  color: var(--color-error);
  background: transparent;
}
.btn-peligro:hover { background: color-mix(in srgb, var(--color-error) 10%, transparent); }
.btn-peligro:disabled { opacity: .45; cursor: not-allowed; }

/* Biblioteca: lista de obras y lector de una norma. */
.lector-filas { list-style: none; margin: 0; padding: 0; }
.lector-fila {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  text-align: left;
  align-items: baseline;
  border: none;
}
.lector-rotulo { font-weight: 600; white-space: nowrap; }
.lector-titulo { opacity: .8; overflow-wrap: anywhere; }
.lector-resultado .lector-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lector-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); margin: var(--space-2) 0; }
.lector-miga { min-height: 44px; padding: 0 var(--space-1); border: none; }
.lector-separador { opacity: .5; }
.lector-buscar input { width: 100%; min-height: 44px; box-sizing: border-box; }
.lector-articulo-titulo { margin: var(--space-3) 0 var(--space-1); }
.lector-nodo {
  margin: 0 0 var(--space-3) calc(var(--nivel, 0) * 1rem);
  padding: var(--space-1) var(--space-2);
  border-left: 3px solid transparent;
}
/* Entre párrafos, aire; entre incisos de una enumeración, menos. */
.lector-inciso, .lector-subinciso { margin-bottom: var(--space-2); }

/* Con espacio para dos columnas: el texto a la izquierda y todas las notas del artículo a la
   derecha, quietas mientras se lee. Sin él, las notas se despliegan debajo de cada párrafo. */
.lector-articulo { display: block; }
.lector-columna-notas { display: none; }
@media (min-width: 900px) {
  .lector-articulo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: var(--space-6); align-items: start; }
  .lector-columna-notas {
    display: block;
    position: sticky;
    top: var(--space-2);
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-divider);
  }
  .lector-notas-en-linea { display: none; }
}
.lector-notas-grupo { margin-bottom: var(--space-4); padding: var(--space-1); }
.lector-notas-grupo.destacado { background: var(--color-accent-100); }
.lector-notas-nodo { margin: 0 0 var(--space-1); font-size: .85rem; font-weight: 600; opacity: .8; }
.lector-notas-vacia { opacity: .6; font-size: .9rem; }
.lector-nodo.resaltado { border-left-color: var(--color-accent); background: var(--color-accent-100); }
.lector-texto { margin: 0; overflow-wrap: anywhere; }
/* Los iconos van al final del párrafo, en la misma línea que el texto. La caja táctil es de 44 px
   (control táctil) pero los márgenes negativos la sacan del alto de la línea: sin eso, cada párrafo
   se estiraba 44 px. */
.lector-iconos { display: inline-flex; align-items: center; vertical-align: middle; white-space: nowrap; margin-left: var(--space-1); }
.lector-icono, .lector-contador {
  min-width: 44px;
  min-height: 44px;
  margin: -13px 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-accent-700);
  cursor: pointer;
}
.lector-icono svg { width: 1.15rem; height: 1.15rem; }
.lector-num { font-weight: 600; }
.lector-aviso { min-height: 1.5em; }
.lector-contador { font-weight: 700; font-size: .85rem; }
.anotaciones-eleccion { max-height: 50vh; overflow-y: auto; margin-bottom: var(--space-2); }
.anotacion-opcion { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 44px; text-align: left; border: none; border-bottom: 1px solid var(--color-divider); }
.anotacion-opcion .lector-titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.anotaciones-filtro { width: 100%; min-height: 44px; box-sizing: border-box; margin-bottom: var(--space-2); }
.lector-volver { min-height: 44px; padding-left: 0; }
/* Artículo anterior / siguiente, a los dos lados. */
.lector-vecinos { display: flex; justify-content: space-between; gap: var(--space-2); margin: var(--space-2) 0; }
.lector-vecino { min-height: 44px; font-weight: 600; }

/* El Índice se abre desde Buscar y vuelve a Buscar. */
.enlace-indice { min-height: 44px; padding-left: 0; }

/* Ajustes › Contactos y Grupos: una fila por persona, controles de 44 px. */
.lista-simple { list-style: none; margin: 0; padding: 0; }
.fila-agregar { display: flex; gap: var(--space-2); }
.fila-agregar input { flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; }
.fila-agregar .btn { min-height: 44px; }
.fila-contacto { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.fila-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fila-boton { min-height: 44px; }
.grupo { border-top: 1px solid var(--color-divider); padding: var(--space-2) 0; }

/* Ajustes › Biblioteca sin conexión: una fila por obra, casilla de 44 px. */
.biblioteca-obras { list-style: none; margin: 0; padding: 0; }
.biblioteca-obra {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  min-height: 44px;
  column-gap: var(--space-2);
}
.biblioteca-obra input { width: 22px; height: 22px; margin: 0; justify-self: center; }
.biblioteca-estado { grid-column: 2; font-size: .85rem; opacity: .7; }

.zona-riesgo { border: 1px solid var(--color-error); padding: var(--space-4); margin-top: var(--space-6); }
.zona-riesgo h2 { margin-top: 0; color: var(--color-error); }
.zona-riesgo-detalle { font-size: .9rem; margin-top: 0; }
.zona-riesgo-opcion { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.zona-riesgo-opcion input { width: auto; }
.zona-riesgo-resultado { font-size: .9rem; margin-bottom: 0; }
#confirmar-borrado p { font-size: .9rem; }
#confirmar-cantidad { margin-bottom: var(--space-3); }

.bloque-mapa { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bloque-mapa-lienzo {
  width: 100%;
  height: 280px;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  font-size: .85rem;
}
.bloque-mapa-editar {
  align-self: flex-start;
  min-height: 2.75rem;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .8rem;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  touch-action: manipulation;
}

/* El editor de mapa vive en el top layer, como el visor de imagen. */
.mapa-editor {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: var(--alto-visible, 100dvh);
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
}
.mapa-editor::backdrop { background: rgba(29, 31, 32, .5); }
.mapa-editor-lienzo { flex: 1; min-height: 0; }

.mapa-editor-barra {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  padding-top: calc(var(--space-2) + var(--borde-seguro-arriba));
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg);
}
/* Dibujar es una tarea de dedo: 44px es el mínimo táctil, como en la grabación. */
.mapa-editor-barra button {
  min-height: 2.75rem;
  min-width: 3.5rem;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: .85rem;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  touch-action: manipulation;
}
.mapa-editor-barra button.elegido { border-color: var(--color-accent); color: var(--color-accent); }
.mapa-editor-barra button[hidden] { display: none; }
.mapa-editor-terminar { border-color: var(--color-accent) !important; }
.mapa-editor-listo { background: var(--color-accent) !important; color: #fff !important; border-color: var(--color-accent) !important; }

/* La caja del ícono es más grande que el dibujo para dar target táctil: el
   contenido se centra y el sobrante queda transparente pero tocable. */
.mapa-icono-punto {
  color: var(--color-accent);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mapa-icono-vertice i {
  display: block;
  margin: 8px; /* (36 - 20) / 2: centra el circulo dentro de la caja tocable */
  width: 20px;
  height: 20px;
  background: var(--color-bg);
  border: 3px solid var(--color-accent);
  border-radius: 50%;
  box-sizing: border-box;
}

/* En modo Borrar todo se pinta de rojo: es una acción destructiva y conviene
   que se vea antes de tocar. */
.mapa-editor[data-modo="borrar"] .leaflet-interactive { stroke: var(--color-error); }
.mapa-editor[data-modo="borrar"] .mapa-icono-punto { color: var(--color-error); }
.mapa-editor[data-modo="borrar"] .mapa-editor-ayuda { color: var(--color-error); }
.mapa-editor[data-modo="borrar"] [data-modo="borrar"] { border-color: var(--color-error); color: var(--color-error); }

.mapa-editor-ayuda {
  flex: none;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: .8rem;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  border-bottom: 1px solid var(--color-divider);
}

/* Leaflet trae su propio look; sólo se alinean los colores del tema. */
.leaflet-container { background: var(--color-surface); font: inherit; }
.leaflet-tooltip { font-size: .75rem; }

/* --- Capa de anotaciones sobre imágenes --- */

/* El SVG de la capa siempre calza exactamente sobre la imagen: mismo marco,
   inset 0, y sin robar toques salvo dentro del editor. */
.capa-anotaciones { width: 100%; height: 100%; display: block; }
/* Con recorte la <img> es más grande que su marco y está corrida para que se
   vea sólo la ventana: lo que sobra se esconde. El resto de la geometría la pone
   `encuadrarImagen()` inline, porque depende de cada recorte. */
.con-recorte { overflow: hidden; }
.imagen-anotada-capa,
.visor-imagen-capa,
.nota-miniatura-capa {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bloque-imagen-anotada { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.imagen-anotada-marco { position: relative; width: 100%; cursor: zoom-in; }
.imagen-anotada-marco img { width: 100%; display: block; }
.bloque-imagen-anotar {
  align-self: flex-start;
  min-height: 2.75rem;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .8rem;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  touch-action: manipulation;
}

.nota-miniatura { position: relative; flex: 1; min-width: 0; aspect-ratio: 1; }
.nota-miniatura img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--color-divider); }

.visor-imagen-marco { position: relative; display: flex; max-width: 90vw; max-height: 90dvh; }
.visor-imagen-marco .visor-imagen-img { max-width: 90vw; max-height: 90dvh; }

/* El editor a pantalla completa, mismo molde que el de mapa. */
.anotador {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: var(--alto-visible, 100dvh);
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
}
.anotador::backdrop { background: rgba(29, 31, 32, .5); }

/* La barra va abajo y oscura. Abajo porque es donde llega el pulgar y arriba
   competía con la barra de estado; oscura porque una barra clara sobre una foto
   clara se pierde, y acá siempre hay una foto atrás. `--borde-seguro-abajo` no
   es opcional: sin él la última fila queda debajo del indicador de inicio del
   iPhone, que es el mismo error que ya se pagó con el ✕ del visor y con el
   "← Notas" de Ajustes. */
.anotador-barra {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  padding-bottom: calc(var(--space-2) + var(--borde-seguro-abajo));
  background: #1d1f20;
  color: #f2f2f3;
  border-top: 1px solid rgba(242, 242, 243, .18);
}
/* Dibujar es tarea de dedo: 44px de mínimo, como en el mapa y en la grabación. */
.anotador-barra button {
  min-height: 2.75rem;
  min-width: 2.75rem;
  border: 1px solid rgba(242, 242, 243, .25);
  background: transparent;
  color: #f2f2f3;
  font-family: var(--font-heading);
  font-size: .85rem;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  touch-action: manipulation;
}

/* Siete herramientas a 44px son 308px y no entran en un teléfono angosto junto
   a nada más: la fila scrollea en vez de esconder tres detrás de un "más". */
.anotador-herramientas {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.anotador-herramientas::-webkit-scrollbar { display: none; }
.anotador-herramientas button {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 3.5rem;
  padding: var(--space-2);
  border-color: transparent;
  font-size: .7rem;
}
.anotador-herramientas svg { width: 22px; height: 22px; }
.anotador-barra .anotador-herramientas button.elegido {
  border-color: var(--color-accent);
  background: rgba(122, 165, 201, .18);
  color: #fff;
}

.anotador-colores,
.anotador-tamanos,
.anotador-cierre { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
/* Barlow liga `--` en una raya larga: "A--" se leía "A—", que no dice lo mismo.
   El tamaño del glifo además crece con el escalón, así el botón muestra lo que
   hace sin depender de leer los signos. */
.anotador-tamanos button { font-variant-ligatures: none; }
.anotador-tamanos button:nth-child(1) { font-size: .7rem; }
.anotador-tamanos button:nth-child(2) { font-size: .8rem; }
.anotador-tamanos button:nth-child(3) { font-size: .9rem; }
.anotador-tamanos button:nth-child(4) { font-size: 1rem; }
.anotador-tamanos button:nth-child(5) { font-size: 1.15rem; }
.anotador-cierre { margin-top: var(--space-1); }
/* Sin `min-width: 0` un hijo flex no baja de su ancho de contenido: la fila de
   herramientas ensanchaba la barra entera a 486px en vez de scrollear. */
.anotador-barra,
.anotador-barra > * { min-width: 0; max-width: 100%; }
.anotador-barra button.elegido { border-color: var(--color-accent); color: var(--color-accent); }
/* Los colores son puntos, no botones cuadrados: es mucho menos peso visual para
   elegir un color, y es lo que hace la referencia. La caja tocable sigue en
   44px aunque el punto mida 28. */
.anotador-color {
  padding: 0 !important;
  border-width: 2px !important;
  border-radius: 999px;
  width: 2.75rem;
  background-clip: content-box !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 8px transparent;
}
.anotador-color.elegido { outline: 2px solid #f2f2f3; outline-offset: -6px; }
.anotador-listo { background: var(--color-accent) !important; color: #fff !important; border-color: var(--color-accent) !important; }

.anotador-acciones { display: flex; gap: var(--space-2); }
.anotador-acciones[hidden] { display: none; }
.anotador-borrar-seleccion { border-color: var(--color-error) !important; color: var(--color-error) !important; }
/* Mismo criterio que el modo borrar: con `all` el relleno vacio de una figura
   tambien recibe el toque, y los trazos finos se engordan para poder acertarlos
   con el dedo mientras dura el modo. */
.anotador[data-herramienta="seleccionar"] .anotador-capa { pointer-events: auto; }
.anotador[data-herramienta="seleccionar"] .anotador-capa [data-i] { pointer-events: all; cursor: grab; }
.anotador[data-herramienta="seleccionar"] .anotador-capa [data-tipo="trazo"],
.anotador[data-herramienta="seleccionar"] .anotador-capa [data-tipo="flecha"],
.anotador[data-herramienta="seleccionar"] .anotador-capa [data-tipo="rect"] { stroke-width: 0.03; }

/* La ayuda es parte de la barra, no una franja aparte: clara entre la foto y la
   barra oscura se leía como una costura. */
.anotador-ayuda {
  flex: none;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: .8rem;
  background: #1d1f20;
  color: rgba(242, 242, 243, .7);
}
.anotador[data-herramienta="borrar"] .anotador-ayuda { color: #ff9a94; }
/* Sólo en modo borrar la capa recibe toques: el resto del tiempo el dibujo
   ocurre sobre el marco entero. */
.anotador[data-herramienta="borrar"] .anotador-capa { pointer-events: auto; }
/* `all` hace tocable también el relleno de una figura sin fill: sin esto, tocar
   el centro de un rectángulo no borra nada porque el hueco no existe para el
   hit-testing. Y los trazos finos se engordan mientras dura el modo borrar, que
   además muestra qué es tocable — la misma lección de los 44 px del mapa. */
.anotador[data-herramienta="borrar"] .anotador-capa [data-i] { pointer-events: all; cursor: pointer; }
.anotador[data-herramienta="borrar"] .anotador-capa [data-tipo="trazo"],
.anotador[data-herramienta="borrar"] .anotador-capa [data-tipo="flecha"],
.anotador[data-herramienta="borrar"] .anotador-capa [data-tipo="rect"] { stroke-width: 0.03; }

.anotador-escenario {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: var(--color-surface);
  overflow: hidden;
}
.anotador-marco {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  touch-action: none; /* el dedo dibuja; sin esto el navegador scrollea o hace zoom */
}
.anotador-imagen { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.anotador-capa { position: absolute; inset: 0; pointer-events: none; }
/* La capa del recorte va ENCIMA de las anotaciones y nunca recibe toques. Los
   modos Seleccionar y Borrar prenden `pointer-events` en `.anotador-capa` para
   que `elementFromPoint` encuentre la anotación tocada: sin esta regla, con un
   recorte puesto, el toque le pegaba al SVG del recorte y seleccionar o borrar
   dejaban de andar. Los gestos del recorte los maneja el marco. */
.anotador .anotador-capa-recorte,
.anotador .anotador-capa-recorte * { pointer-events: none !important; }

.aviso-instalar {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(var(--space-3) + var(--borde-seguro-abajo));
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  box-shadow: var(--shadow-md);
}
.aviso-instalar p { margin: 0; flex: 1; min-width: 12rem; font-size: .9rem; }
.aviso-instalar button { min-height: 2.75rem; touch-action: manipulation; }

.estado-conexion {
  font-size: .75rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-error);
  color: var(--color-error);
}
.estado-conexion[hidden] { display: none; }

.pendientes {
  font: inherit;
  font-size: .75rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  /* Es un botón (abre el panel de qué falta subir): mínimo táctil. */
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}
.pendientes[hidden] { display: none; }

/* Un adjunto que todavía no subió: se ve, pero se distingue del resto. */
.adjunto-pendiente { position: relative; }
.adjunto-pendiente::after {
  content: 'sin subir';
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 2px var(--space-2);
  font-size: .7rem;
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.bloque-menu {
  position: fixed;
  z-index: var(--z-flotante-nota);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  min-width: 11rem;
  max-width: calc(100vw - 2em);
  /* Con las filas a 44 px el menu se hace alto. `posicion-menu.js` lo abre
     hacia arriba si no entra abajo, pero si no entra de ningun lado quedaria
     cortado justo en las opciones de mas abajo. */
  max-height: calc(var(--alto-visible, 100vh) - 4rem);
  overflow-y: auto;
}
/* 44 px, como cualquier control tactil. Con el relleno solo median 29 y habia
   que apuntarle a un renglon de texto con el dedo: la mitad de los toques
   caian en la opcion de al lado, y ahi cada opcion CAMBIA el tipo del bloque.
   La de eliminar ya se habia arreglado sola en su momento; el resto no. */
.bloque-menu button {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  border: none;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  font-family: var(--font-body);
  /* Un <button> NO hereda el tamaño de letra: se quedaba con el del navegador
     —13.3 px en Chrome—, más chico que el propio texto de la nota. Va en rem y
     no en px para que siga el tamaño elegido en Ajustes, como todo lo demás. */
  font-size: 1.25rem;
  font-weight: 400;
  touch-action: manipulation;
}
.bloque-menu button:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.bloque-menu-separador { width: 100%; border: none; border-top: 1px solid var(--color-divider); margin: var(--space-1) 0; }
.bloque-menu-eliminar {
  color: var(--color-error);
  /* El alto minimo ya lo pone `.bloque-menu button` para todas. Lo que queda
     propio es el color y el aire de mas a la derecha, para que sea la opcion
     mas ancha del menu y no se toque de casualidad. */
  padding-right: var(--space-6);
}
.bloque-menu-eliminar:hover { background: color-mix(in srgb, var(--color-error) 10%, transparent); }

.toolbar-seleccion[hidden], .barra-multibloque[hidden] { display: none; }

.toolbar-seleccion, .barra-multibloque {
  position: fixed;
  transform: translate(-50%, -100%);
  display: flex;
  gap: var(--space-1);
  background: var(--color-text);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  z-index: var(--z-flotante-nota);
}
.toolbar-seleccion button, .barra-multibloque button {
  border: none;
  background: transparent;
  color: var(--color-bg);
  width: auto;
  padding: var(--space-1) var(--space-2);
}
.barra-multibloque select {
  width: auto;
  background: transparent;
  color: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-bg) 40%, transparent);
}

.boton-adjunto, #nota-pin, #toggle-tema {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
}
.boton-adjunto svg, #nota-pin svg, #toggle-tema svg { width: 1.3rem; height: 1.3rem; }
#nota-pin.activo { color: var(--color-accent); border-color: var(--color-accent); }

.bloque-imagenes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.bloque-imagenes .bloque-fila { width: 100%; }
@media (min-width: 641px) {
  .bloque-imagenes .bloque-fila { width: calc(30% - var(--space-2)); }
}
.bloque-imagen { flex: 1; min-width: 0; max-width: 100%; display: block; border: 1px solid var(--color-divider); cursor: zoom-in; }

dialog.visor-imagen {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: var(--alto-visible, 100dvh);
  max-width: none;
  max-height: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 16, 17, .92);
  overflow: hidden;
  touch-action: none;
}
.visor-imagen::backdrop { background: transparent; }
.visor-imagen-img {
  max-width: 90vw;
  max-height: 90dvh;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
}
.visor-imagen-cerrar {
  position: fixed;
  /* Instalada como PWA la pagina llega hasta el borde (`viewport-fit=cover`), y
     arriba de todo esta la barra de estado del iPhone, que se queda con los
     toques. Sin compensar la safe area este boton cae debajo y no hay forma de
     cerrar el visor: el usuario queda encerrado y tiene que matar la app. Las
     barras del anotador y del editor de mapa ya lo hacen; esta se habia quedado
     afuera. */
  top: calc(var(--borde-seguro-arriba) + var(--space-4));
  right: calc(env(safe-area-inset-right, 0px) + var(--space-4));
  /* 44 px: por debajo de eso hay que repetir el toque. */
  width: 2.75rem;
  height: 2.75rem;
  touch-action: manipulation;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1;
}

/* — Llaves para compartir desde el teléfono (Ajustes) — */
.ayuda-seccion { font-size: .9rem; color: var(--color-text-suave, inherit); margin-top: 0; }
.token-alta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.token-alta input { flex: 1; min-width: 12rem; width: auto; }
.token-nuevo {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-accent);
}
.token-nuevo[hidden] { display: none; }
.token-nuevo-aviso { margin: 0 0 var(--space-2); font-size: .9rem; }
/* La llave es larga y no tiene espacios: sin esto se sale de la pantalla. */
.token-valor { display: block; word-break: break-all; font-size: .85rem; margin-bottom: var(--space-2); }
.lista-tokens { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.token-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: .9rem;
}
.token-instrucciones { margin-top: var(--space-4); font-size: .9rem; }
.token-instrucciones summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; }
.token-instrucciones ol { padding-left: 1.2em; }
.token-instrucciones li { margin-bottom: var(--space-2); }
.token-instrucciones code { word-break: break-all; }

/* — Estado vacío de la grilla — */
.grid-vacia {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.grid-vacia[hidden] { display: none; }
.grid-vacia-titulo { font-family: var(--font-heading); font-weight: var(--font-heading-weight); margin: 0 0 var(--space-2); }
.grid-vacia-detalle { margin: 0; font-size: .9rem; }

/* — Hoja de captura: lo que abre el + — */
.hoja-captura {
  /* Pegada abajo: es donde llega el pulgar, y es de donde sale el +. */
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--color-divider);
  border-bottom: none;
  background: var(--color-surface, var(--color-bg));
  color: var(--color-text);
}
.hoja-captura::backdrop { background: rgb(0 0 0 / .45); }
.hoja-captura-titulo {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}
.hoja-captura-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.captura-ancha { grid-column: 1 / -1; }
.captura-opcion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  /* Muy por encima de los 44 px: son los objetivos más grandes de la app y se
     tocan con el teléfono en una mano. */
  min-height: 5rem;
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.captura-opcion:hover { border-color: var(--color-accent); }
.captura-opcion svg { width: 1.4rem; height: 1.4rem; color: var(--color-accent); margin-bottom: var(--space-2); }
.captura-nombre { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.captura-pista { font-size: .8rem; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* — Aviso de acción, con deshacer — */
.aviso-accion {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  /* Arriba del FAB y de la safe area: si tapa el +, estorba en vez de ayudar. */
  bottom: calc(var(--space-3) * 2 + var(--alto-barra-inferior) + var(--alto-fab) + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 32rem;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-accent);
  background: var(--color-surface, var(--color-bg));
  color: var(--color-text);
  font-size: .9rem;
}
.aviso-accion[hidden] { display: none; }
#aviso-accion-deshacer { flex: none; min-height: 2.75rem; color: var(--color-accent); font-weight: 700; }

/* — Chips de tipo — */
.chips-tipo {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-2);
  /* Se desplazan en horizontal: en un teléfono no entran de otra forma, y
     partirlos en dos filas le come alto a la grilla. */
  overflow-x: auto;
  scrollbar-width: none;
}
.chips-tipo::-webkit-scrollbar { display: none; }
.chip-tipo {
  flex: none;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-size: .85rem;
  font-family: var(--font-heading);
  cursor: pointer;
  touch-action: manipulation;
}
.chip-tipo[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

/* El chip que abre los estados. La flecha va en ::after para no meterla en el
   textContent, que es lo que se lee y lo que se compara. Gira al desplegarse:
   el control dice qué va a pasar si se lo toca, igual que la lupa que se vuelve
   ✕ en la búsqueda rápida. */
.chip-estado-abrir::after {
  content: "▾";
  margin-left: var(--space-2);
  font-size: .7em;
  display: inline-block;
  transition: transform .12s ease;
}
.chip-estado-abrir[aria-expanded="true"]::after { transform: rotate(180deg); }

/* — Barra de selección múltiple — */
.barra-seleccion {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-accent);
  background: var(--color-surface, var(--color-bg));
  font-size: .9rem;
}
.barra-seleccion[hidden] { display: none; }
.barra-seleccion-acciones { display: flex; gap: var(--space-2); margin-left: auto; }
.barra-seleccion .btn { min-height: 2.75rem; padding: 0 var(--space-2); }

/* La tarjeta seleccionada tiene que distinguirse de un vistazo, sin depender
   del color de la nota, que ya lo usa el usuario para otra cosa. */
.nota.seleccionada { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* Sin esto el navegador se queda con el gesto horizontal y la tarjeta no se
   mueve; el scroll vertical de la grilla sigue funcionando. */
.nota {
  touch-action: pan-y;
  /* Mantener pulsada una tarjeta entra en selección múltiple: en un iPhone eso
     también empezaba a seleccionar el texto de la card y sacaba el menú de
     copiar encima. El texto de la nota se lee y se copia adentro de la nota. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* — Barra inferior: la navegación al alcance del pulgar — */
.barra-inferior {
  flex: none;
  display: flex;
  /* Del borde para arriba: en un teléfono grande la parte de arriba de la
     pantalla no se alcanza con una mano. */
  border-top: 1px solid var(--color-divider);
  background: var(--color-bg);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pestana {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Por encima de los 44 px, que es lo mínimo para un control táctil. */
  min-height: var(--alto-barra-inferior);
  padding: var(--space-2) 0;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  font-family: var(--font-heading);
  font-size: .7rem;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.pestana svg { width: 1.35rem; height: 1.35rem; }
.pestana.activa { color: var(--color-accent); }

.pantalla { display: block; }
.pantalla[hidden] { display: none; }
#pantalla-buscar, #pantalla-indice, #pantalla-biblioteca, #pantalla-anotaciones { padding: var(--space-4); }
#pantalla-buscar #buscador { width: 100%; margin-bottom: var(--space-4); }
.titulo-seccion {
  margin: var(--space-4) 0 var(--space-2);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
#pantalla-buscar .titulo-seccion:first-of-type { margin-top: 0; }
.recientes[hidden] { display: none; }
.recientes-lista { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.resultado-linea { margin: var(--space-4) 0 var(--space-2); font-size: .85rem; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.resultado-linea[hidden] { display: none; }

/* — Índice — */
.indice-filas { list-style: none; padding: 0; margin: 0; }
.indice-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Fila entera tocable: apuntarle al texto con el dedo no funciona. */
  min-height: 3rem;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
  cursor: pointer;
  touch-action: manipulation;
}
.indice-cuenta { font-size: .85rem; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* Los filtros de estado, arriba de la grilla. */
.filtros-estado { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-4); }
.barra-notas-estado { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* — Atributos de la nota: etiquetas, fecha y pin plegados — */
/*
   Los tres gastaban tres filas fijas antes del cuerpo, usadas o no. Plegados
   son una sola fila de iconos, y cada icono lleva su estado al lado para que
   plegar no esconda que la nota tiene fecha o cuatro etiquetas.
*/
.atributos-nota { display: flex; gap: var(--space-2); margin: var(--space-2) 0; }
.atributo-nota {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  /* 44 px en las dos direcciones aunque no lleven texto de estado: sin el
     min-width, el de fecha vacio medía 34 y quedaba por debajo del minimo
     tactil. Con estado puesto crece solo. */
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--space-2);
  justify-content: center;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  cursor: pointer;
  touch-action: manipulation;
}
.atributo-nota svg { width: 1.15rem; height: 1.15rem; flex: none; }
/* Puesto se ve puesto: con los tres apagados no habria como saber de un
   vistazo si la nota ya tiene fecha sin abrir el panel. */
.atributo-nota.activo,
.atributo-nota[aria-expanded="true"] { color: var(--color-accent); border-color: var(--color-accent); }
.atributo-estado { font-size: .8rem; white-space: nowrap; }
.atributo-estado:empty { display: none; }
.panel-atributo[hidden] { display: none; }

/* — Etiquetas — */
.etiquetas-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.etiquetas-puestas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.etiqueta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  font-size: .8rem;
  color: var(--color-accent);
}
.etiqueta-sacar {
  /* Chico a la vista pero con caja tocable: el sobrante transparente es igual
     de tocable que el dibujo. */
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: .75rem;
  cursor: pointer;
  touch-action: manipulation;
}
.etiqueta-nueva {
  flex: 1;
  min-width: 8rem;
  width: auto;
  padding: var(--space-2);
  font-size: .85rem;
}
.nota-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-2); }
.nota-etiqueta {
  padding: 1px var(--space-2);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  font-size: .7rem;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* — Descartar la nota: sale de mantener pulsado "Cerrar" — */
.descartar-nota {
  position: absolute;
  right: var(--space-4);
  /* Encima de la barra de herramientas, no debajo: si se abriera hacia abajo
     quedaría fuera de la pantalla en una nota larga. */
  bottom: calc(100% + var(--space-2));
  z-index: var(--z-flotante-nota);
  width: max-content;
  max-width: min(20rem, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-3);
  border: 1px solid var(--color-error);
  background: var(--color-surface, var(--color-bg));
  color: var(--color-text);
}
.descartar-nota[hidden] { display: none; }
.descartar-nota p { margin: 0 0 var(--space-3); font-size: .9rem; }
.descartar-acciones { display: flex; justify-content: flex-end; gap: var(--space-2); }
.descartar-acciones .btn { min-height: 2.75rem; }
/* El ancla del popup: sin esto se posicionaría contra el diálogo entero. */
.herramientas-derecha { position: relative; }

/* — Etiquetas que ya se usaron, para elegirlas sin escribirlas — */
.etiquetas-sugeridas {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  /* En horizontal: con muchas etiquetas, partirlas en varias filas le comería
     alto al cuerpo de la nota. */
  overflow-x: auto;
  scrollbar-width: none;
}
.etiquetas-sugeridas::-webkit-scrollbar { display: none; }
.etiquetas-sugeridas[hidden] { display: none; }
.etiqueta-sugerida {
  flex: none;
  /* Apagadas: son una oferta, no algo que la nota ya tenga. Al tocarlas pasan
     a la fila de arriba con el color de las puestas. */
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 1px dashed var(--color-divider);
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  font-size: .8rem;
  cursor: pointer;
  touch-action: manipulation;
}
.etiqueta-sugerida:hover { border-style: solid; border-color: var(--color-accent); color: var(--color-accent); }

/* La pista del gesto en el menú del bloque: no es una opción, no se toca. */
.bloque-menu-pista {
  margin: var(--space-2) 0 0;
  padding: 0 var(--space-2);
  /* Sube con las opciones, pero se queda por debajo: es una pista, no una de
     ellas, y a .75rem al lado de 1.25 parecía un error de maquetado. */
  font-size: .95rem;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  pointer-events: none;
}

/* El aviso de un diagrama que no se pudo dibujar. */
.bloque-mermaid-error { padding: var(--space-3); border: 1px dashed var(--color-error); color: var(--color-error); font-size: .85rem; }
.bloque-mermaid-error p { margin: 0 0 var(--space-2); }
.bloque-mermaid-error .btn { min-height: 2.75rem; color: var(--color-accent); }
/* El detalle trae el código del usuario: se desplaza en vez de estirar el bloque. */
.bloque-mermaid-detalle {
  margin: 0 0 var(--space-2);
  padding: var(--space-2);
  max-height: 8rem;
  overflow: auto;
  background: color-mix(in srgb, var(--color-error) 6%, transparent);
  font-size: .75rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* — Búsqueda rápida, al lado del título — */
/* La versión, al lado del título: chica y apagada porque es un dato de
   diagnóstico, no contenido. `align-self: center` y no `baseline`: con baseline
   el navegador la subía a la altura de un exponente, que se lee como un error de
   maquetado y no como un dato al costado. */
/* El título y la versión son una unidad. En escritorio van uno al lado del
   otro, como siempre; en el teléfono la versión baja debajo del nombre, que es
   donde no le pelea el ancho a la búsqueda rápida. */
.barra-notas-titulo {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.version-app {
  font-family: var(--font-body);
  font-size: .65rem;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
  white-space: nowrap;
}
.version-app:empty { display: none; }

.busqueda-rapida {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Cede antes que el título y que los botones de la derecha: en un teléfono
     angosto se encoge en vez de empujar la cabecera a dos filas. */
  flex: 1 1 6rem;
  min-width: 0;
  /* Del alto del título (1.3rem de fuente): la cabecera se lee como una línea
     sola, no como un formulario metido al lado. */
  height: 1.9rem;
  padding: 0 var(--space-2);
  border: 1px solid color-mix(in srgb, var(--color-divider) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}
.busqueda-rapida:focus-within { border-color: var(--color-accent); }
.busqueda-rapida input {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-size: .85rem;
  color: var(--color-text);
}
.busqueda-rapida input:focus { outline: none; }
/* El ✕ nativo del type=search desentona con el resto y en iOS no aparece. */
.busqueda-rapida input::-webkit-search-decoration,
.busqueda-rapida input::-webkit-search-cancel-button { -webkit-appearance: none; }
.busqueda-rapida-ir {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No llega a los 44 px del resto de la app: el campo tiene que medir lo mismo
     que el título, y ahí no entran. Se estira a todo el alto disponible y se
     ensancha, y el dibujo queda más chico que su caja. Enter hace lo mismo, así
     que el icono es un atajo, no el único camino. */
  width: 2.1rem;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  touch-action: manipulation;
}
.busqueda-rapida-ir[hidden] { display: none; }
.busqueda-rapida-ir svg { width: 1.05rem; height: 1.05rem; }

/* Teléfono angosto: sin esto la cabecera se parte en dos filas por debajo de
   ~380 px. El buscador es lo que más puede ceder — sigue siendo usable con
   pocos caracteres a la vista —, después el aire entre los controles. */
@media (max-width: 420px) {
  .barra-notas { gap: var(--space-2); padding-left: var(--space-4); padding-right: var(--space-4); }
  .busqueda-rapida { flex-basis: 3rem; }
  .barra-notas h1 { font-size: 1.1rem; }
}

/* El botón de columnas dibuja la disposición: barras apiladas para una sola
   columna, barras paradas para varias. */
#toggle-columnas { padding: var(--space-2); }
#toggle-columnas svg { width: 1.25rem; height: 1.25rem; display: block; }

/* Las etiquetas de lo que se viene mirando, después de los chips de estado.
   La fila se desplaza en horizontal: son 3 + 4 y no entran en un teléfono. */
.filtros-estado { overflow-x: auto; scrollbar-width: none; }
.filtros-estado::-webkit-scrollbar { display: none; }
.filtros-estado .chip-tipo { flex: none; }
.chips-separador {
  flex: none;
  align-self: center;
  width: 1px;
  height: 1.25rem;
  background: var(--color-divider);
}
/* Se distinguen de los de estado sin gritar: el estado es uno de tres y siempre
   hay uno puesto; la etiqueta es opcional. */
.chip-etiqueta { border-style: dashed; }
.chip-etiqueta[aria-pressed="true"] { border-style: solid; }

/* El enlace a Boards en la cabecera de Notas. Mide lo mismo que el botón de
   columnas que tiene al lado: 44 px es el mínimo táctil. */
.board-icono-cabecera {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  flex: none;
}

/* — El panel de "cambios sin subir" — */

.dialogo-pendientes {
  width: min(34rem, 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);
}
.dialogo-pendientes::backdrop { background: color-mix(in srgb, #000 45%, transparent); }
.dialogo-pendientes h2 { margin: 0 0 var(--space-3); font-size: 1.2rem; }
.dialogo-pendientes .btn { min-height: 44px; }
.pendiente-item {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.pendiente-item h3 { margin: 0 0 var(--space-1); font-size: 1rem; }
.pendiente-nota { margin: 0 0 var(--space-2); overflow-wrap: anywhere; opacity: .75; }
.pendiente-estado {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .75rem;
  color: var(--color-accent);
}
.pendiente-estado[data-estado="huerfana"],
.pendiente-estado[data-estado="sesion"],
.pendiente-estado[data-estado="sin-red"],
.pendiente-estado[data-estado="servidor"] { color: var(--color-error); }
.pendiente-motivo { margin: var(--space-2) 0; font-size: .9rem; }
.pendiente-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pendiente-aviso { min-height: 1.4rem; margin: var(--space-2) 0; font-size: .9rem; }

/* — Enviar la nota a un board — */
/* Anotaciones: la tarjeta (lector y lista) y el editor. */
.anotacion { border-left: 3px solid var(--color-accent); padding: var(--space-1) var(--space-2); margin: var(--space-1) 0; background: var(--color-surface); }
.anotacion-referencia { min-height: 44px; padding-left: 0; border: none; font-weight: 600; text-align: left; }
.anotacion-cuerpo { overflow-wrap: anywhere; }
.anotacion-cuerpo mark { background: var(--color-resaltado); color: inherit; }
.anotacion-aviso { color: var(--color-error); font-size: .9rem; margin: var(--space-1) 0; }
.anotacion-detalle { font-size: .85rem; opacity: .75; margin: var(--space-1) 0; }
.anotacion-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.anotacion-accion { min-height: 44px; border: none; padding-left: 0; font-size: .9rem; }
.dialogo-anotacion {
  width: min(32rem, 100vw);
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  background: var(--color-surface, var(--color-bg));
  color: var(--color-text);
}
.dialogo-anotacion::backdrop { background: rgb(0 0 0 / .45); }
.dialogo-anotacion textarea { width: 100%; min-height: 8rem; box-sizing: border-box; font: inherit; }
.dialogo-anotacion-pie { display: flex; gap: var(--space-2); justify-content: flex-end; }
.dialogo-anotacion-pie .btn { min-height: 44px; }

.dialogo-enviar-board {
  width: min(28rem, 100vw);
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  background: var(--color-surface, var(--color-bg));
  color: var(--color-text);
}
.dialogo-enviar-board::backdrop { background: rgb(0 0 0 / .45); }
.enviar-boards { display: grid; gap: var(--space-1); max-height: 40vh; overflow-y: auto; margin-bottom: var(--space-3); }
.enviar-opcion { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.enviar-opcion input[type="text"] { flex: 1; min-width: 0; min-height: 44px; }
.enviar-estado { min-height: 1.4em; margin: var(--space-2) 0; }
.enviar-botones { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.enviar-botones .btn { min-height: 44px; }

/* Observación: un párrafo con una hoja de papel adelante, para citas, autores,
   bibliografía y notas al pie. */
.bloque-contenido.bloque-observacion {
  position: relative;
  padding-left: 1.9rem;
  font-size: .9em;
  color: color-mix(in srgb, var(--color-text) 85%, transparent);
}
.bloque-observacion::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .25em;
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  opacity: .6;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ajustes › Usuarios */
.usuarios-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.usuario-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.usuario-nombre { min-width: 0; overflow-wrap: anywhere; }
.usuario-rol { min-height: 44px; flex: none; }

/* Reportes de error de una norma (auditor y admin) */
.lector-reportes { min-height: 44px; margin: var(--space-2) 0; }
.reportes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.reporte-fila { display: grid; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--color-divider); }
.reporte-tipo, .reporte-autor { color: var(--color-text-muted, inherit); font-size: .9rem; }
.reporte-mensaje { margin: 0; overflow-wrap: anywhere; }
.reporte-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reporte-acciones .btn, .reporte-categoria { min-height: 44px; }
.dialogo-anotacion select { width: 100%; margin-bottom: var(--space-2); }

/* Edición de normas (admin) */
.admin-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.admin-barra .btn { min-height: 44px; }
.admin-resumen { color: var(--color-text-muted, inherit); font-size: .9rem; }
.admin-nodo { display: grid; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-3); border: 1px solid var(--color-divider); }
.admin-nodo-titulo { margin: 0; font-size: 1rem; }
.admin-texto { width: 100%; box-sizing: border-box; font: inherit; }
.admin-nodo input, .admin-nodo select, .admin-nodo .btn, .admin-mas summary { min-height: 44px; box-sizing: border-box; }
.admin-mas summary { display: flex; align-items: center; cursor: pointer; }
.admin-peligro { color: var(--color-danger, #c0392b); }
.admin-estructura-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.admin-deshecho { opacity: .6; text-decoration: line-through; }