/*
 * D-DIARIO F1 (claude/_CLAUDE_D_DIARIO_MESA.md, D-DI-6/7) y D-DIARIO-LIBRO (claude/_CLAUDE_D_DIARIO_LIBRO_MESA.md) — el libro del Diario.
 *
 * Ventana flotante (como la de la I) con doble página y etiquetas en el canto izquierdo. Desde D-DIARIO-LIBRO el libro es arte: el
 * mismo en los dos acabados (D-DL-1); las páginas son transparentes sobre él. D-DI-6h — todas las clases llevan el prefijo diario-.
 *
 * Proporción (D-DL-1): el libro mide 1030 × 691 «unidades» y todo lo de dentro se expresa en --diario-u, que es lo que vale una
 * unidad en esta pantalla (1 px a 1366 × 768). Así escala entero y los bordes de las páginas caen siempre sobre el arte: en el
 * original de 2528 × 1696 van de x ≈ 290 a 2230 y de y ≈ 150 a 1450, con el lomo en x ≈ 1265.
 *
 * El arte, en public/assets/ui/diario/ (el fondo, las etiquetas y las cintas) y en assets/icons/secciones/ (los iconos):
 *   --diario-libro-a / -b     libro_diario.webp      (alfa fuera del libro; D-DL-1: el mismo en A y en B)
 *   --diario-separador        etiqueta_diario.webp   (sin teñir: se tiñe por pestaña con --diario-tono, en ::after)
 *   --diario-cinta            cinta_diario.webp      (ídem, la marca de la fijada)
 *   --diario-boceto-*         boceto_*.webp          (sólo la tinta, en alfa: se funde con el pergamino)
 *   --diario-icono-ahora / -historias                (los separadores «Ahora» e «Historias»)
 *   --diario-chincheta        sin arte: la dibuja el CSS (ya sólo en el botón de fijar; D-DL-3)
 * El icono del menú (icono_sitio_diario) entra por .ui-icono--diario en marco.css.
 *
 * D-DL-5 — la letra: IM Fell English, local, con licencia en assets/fonts/OFL-IMFellEnglish.txt. La regla «* { font-family: … !important }»
 * de v2-theme_v0.8.9.css:18 se gana sólo aquí, con .diario-ventana *. Con «normal» (Opciones › Estilo), la de la UI.
 */

@font-face { font-family: 'IM Fell English'; src: url('../assets/fonts/IMFellEnglish-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url('../assets/fonts/IMFellEnglish-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --diario-libro-a: url('../assets/ui/diario/libro_diario.webp');
  --diario-libro-b: url('../assets/ui/diario/libro_diario.webp');
  --diario-separador: url('../assets/ui/diario/etiqueta_diario.webp');
  --diario-cinta: url('../assets/ui/diario/cinta_diario.webp');
  --diario-boceto-ciudad: url('../assets/ui/diario/boceto_ciudad.webp');
  --diario-boceto-exterior: url('../assets/ui/diario/boceto_exterior.webp');
  --diario-boceto-mazmorra: url('../assets/ui/diario/boceto_mazmorra.webp');
  --diario-icono-ahora: url('../assets/icons/secciones/icono_sec_diario_ahora.webp');
  --diario-icono-historias: url('../assets/icons/secciones/icono_sec_diario_historias.webp');
  --diario-chincheta: none;
  --diario-letra-mano: "IM Fell English", Georgia, "Times New Roman", serif;
  --diario-letra-ui: var(--ui-fuente-texto, "Nunito", system-ui, sans-serif);
  --diario-tinta: #2e1b0d;
  --diario-tinta-suave: #5c3f24;
  --diario-oro: #d8b25a;
}

/* ───────── la ventana ───────── */
.diario-ventana {
  /* D-DL-1 — lo que vale una unidad: que quepa de alto (90 %) y de ancho (el libro y las etiquetas que sobresalen a los dos lados, 1210 unidades) */
  --diario-u: min(calc(90vh / 691), calc(96vw / 1210));
  position: fixed; inset: 0; z-index: 9100;
  display: grid; place-items: center;
  box-sizing: border-box;
  background: rgba(4, 3, 2, 0.72);
  color: var(--diario-tinta);
  animation: diario-entra 180ms ease-out;
}
/* D-DL-5 — gana a la regla global de v2-theme sólo dentro del Diario. Sin negrita ni cursiva falsas: IM Fell English tiene una sola cara de cada */
.diario-ventana, .diario-ventana * { font-family: var(--diario-letra-mano) !important; }
.diario-ventana:not([data-letra="normal"]) { font-synthesis: none; }
@keyframes diario-entra { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
.diario-ventana button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; text-align: inherit; }
.diario-ventana button:focus-visible { outline: 2px solid #8a2d1c; outline-offset: 2px; }
.diario-ventana img { display: block; }

/* ───────── la tapa: el arte, encima de las etiquetas (que asoman por debajo) ───────── */
.diario-tapa {
  position: relative; box-sizing: border-box; isolation: isolate;
  width: calc(var(--diario-u) * 1030); height: calc(var(--diario-u) * 691);
  padding: calc(var(--diario-u) * 61) calc(var(--diario-u) * 120) calc(var(--diario-u) * 94) calc(var(--diario-u) * 118);
}
.diario-tapa::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--diario-libro-a) center / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(var(--diario-u) * 10) calc(var(--diario-u) * 26) rgba(0, 0, 0, 0.7));
}
/* D-DL-1 — el mismo libro en los dos acabados (--diario-libro-b es la misma pieza) */
.diario-ventana[data-estilo="B"] .diario-tapa::before { background-image: var(--diario-libro-b); }

/* ───────── el libro: dos páginas y el lomo, transparentes sobre el arte ───────── */
.diario-libro {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--diario-u) * 6) minmax(0, 1fr);
  height: 100%; min-height: 0;
}
.diario-pagina {
  position: relative; display: flex; flex-direction: column; gap: calc(var(--diario-u) * 10);
  min-width: 0; min-height: 0; overflow: hidden; box-sizing: border-box;
  padding: calc(var(--diario-u) * 16) calc(var(--diario-u) * 26) calc(var(--diario-u) * 10) calc(var(--diario-u) * 30);
}
.diario-pagina--izq, .diario-pagina--der { background: transparent; }
.diario-lomo { background: transparent; }

/* ───────── página izquierda: cabecera, «¿Qué hago ahora?», la lista y las flechas ───────── */
.diario-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--diario-u) * 10); border-bottom: 1px solid rgba(90, 55, 25, 0.35); padding-bottom: calc(var(--diario-u) * 5); }
.diario-titulo { margin: 0; font-style: italic; font-weight: 400; font-size: max(14px, calc(var(--diario-u) * 35.2)); line-height: 1.1; color: var(--diario-tinta); text-transform: none; letter-spacing: 0.01em; }
.diario-ayuda { font-size: max(9px, calc(var(--diario-u) * 13)); color: var(--diario-tinta-suave); white-space: nowrap; }
.diario-que-hago { align-self: flex-start; }
.diario-lista { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.diario-vacio { margin: calc(var(--diario-u) * 12) 0 0; font-style: italic; font-size: max(11px, calc(var(--diario-u) * 18)); color: var(--diario-tinta-suave); }
.diario-fila {
  position: relative; display: grid; grid-template-columns: calc(var(--diario-u) * 34) minmax(0, 1fr) auto; align-items: center; column-gap: calc(var(--diario-u) * 10);
  width: 100%; box-sizing: border-box; padding: calc(var(--diario-u) * 5) calc(var(--diario-u) * 10) calc(var(--diario-u) * 5) calc(var(--diario-u) * 6) !important; min-height: calc(var(--diario-u) * 50);
  border-radius: 5px; border-bottom: 1px dashed rgba(90, 55, 25, 0.3) !important;
}
.diario-fila:hover { background: rgba(140, 95, 40, 0.10) !important; }
.diario-fila--sel { background: rgba(140, 95, 40, 0.18) !important; box-shadow: inset 3px 0 0 #8a2d1c; }
.diario-fila--fijada { padding-right: calc(var(--diario-u) * 30) !important; }
.diario-fila__icono { width: calc(var(--diario-u) * 34); height: calc(var(--diario-u) * 34); object-fit: contain; border-radius: 5px; }
.diario-fila__texto { display: flex; flex-direction: column; min-width: 0; }
.diario-fila__titulo { font-weight: 600; font-size: max(11px, calc(var(--diario-u) * 17.3)); line-height: 1.15; color: var(--diario-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diario-fila__linea { font-size: max(10px, calc(var(--diario-u) * 14.4)); line-height: 1.15; color: var(--diario-tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diario-fila--listo .diario-fila__linea { color: #2a5f1e; font-weight: 600; }
.diario-fila--bloqueado .diario-fila__icono, .diario-fila--espera .diario-fila__icono { filter: grayscale(0.85) opacity(0.75); }
.diario-fila--bloqueado .diario-fila__titulo { color: var(--diario-tinta-suave); }
.diario-fila__nuevo { width: calc(var(--diario-u) * 9); height: calc(var(--diario-u) * 9); border-radius: 50%; background: #b3261e; box-shadow: 0 0 0 2px rgba(243, 230, 196, 0.9); }
.diario-paginas { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--diario-u) * 10); padding-top: calc(var(--diario-u) * 3); border-top: 1px solid rgba(90, 55, 25, 0.25); }
.diario-paginas__n { font-size: max(10px, calc(var(--diario-u) * 14)); color: var(--diario-tinta-suave); }
.diario-flecha { width: calc(var(--diario-u) * 34); height: calc(var(--diario-u) * 28); border-radius: 4px; font-size: max(14px, calc(var(--diario-u) * 22)) !important; line-height: 1; text-align: center !important; color: var(--diario-tinta) !important; }
.diario-flecha:hover:not([disabled]) { background: rgba(140, 95, 40, 0.15) !important; }
.diario-flecha[disabled] { opacity: 0.3; cursor: default; }
.diario-flecha--atras { order: 0; }
.diario-flecha--adelante { order: 2; }

/* ───────── página derecha: la entrada ───────── */
.diario-entrada { display: flex; flex-direction: column; gap: calc(var(--diario-u) * 10); min-height: 0; height: 100%; }
.diario-entrada__titulo { margin: 0; font-style: italic; font-weight: 400; font-size: max(13px, calc(var(--diario-u) * 28)); line-height: 1.15; color: var(--diario-tinta); flex: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.diario-entrada--fijada .diario-entrada__titulo { padding-right: calc(var(--diario-u) * 36); }
.diario-nota { margin: 0; font-style: italic; font-size: max(11px, calc(var(--diario-u) * 19.5)); line-height: 1.32; color: #2a190c; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; flex: 0 1000 auto; min-height: 1.32em; } /* D-DL-7 — sin sitio cede la nota, antes que los campos; los botones no ceden */
/* confirmando «Abandonar», los botones y la pregunta caben porque la nota cede */
.diario-entrada:has(.diario-confirmar) .diario-nota { -webkit-line-clamp: 2; }
.diario-campos { display: flex; flex-direction: column; gap: calc(var(--diario-u) * 3); min-height: 0; border-top: 1px solid rgba(90, 55, 25, 0.3); padding-top: calc(var(--diario-u) * 8); flex: 0 1 auto; overflow: hidden; }
.diario-campo { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); gap: calc(var(--diario-u) * 8); align-items: baseline; font-size: max(10px, calc(var(--diario-u) * 15.6)); line-height: 1.22; }
.diario-campo__k { white-space: nowrap; color: var(--diario-tinta-suave); font-size: 0.86em; text-transform: uppercase; letter-spacing: 0.05em; }
/* D-DL-7 — los campos parten línea (dos como mucho; el texto entero, en el tooltip). La recompensa, seis: cortada esconde información. Lo que crezcan lo cede el boceto. */
.diario-campo__v { color: var(--diario-tinta); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.diario-campo--recompensa .diario-campo__v { -webkit-line-clamp: 6; }
/* D-SMOKE-8 D-SM8-9c — «Lo siguiente», en negrita: el que más se lee */
.diario-campo--siguiente .diario-campo__v { font-weight: 700; white-space: normal; -webkit-line-clamp: 2; }
.diario-campo--bloqueo .diario-campo__v { color: #7a2a18; }
.diario-campo--bloqueo .diario-campo__k::before { content: ""; display: inline-block; width: 0.5em; height: 0.56em; margin-right: 0.3em; border: 2px solid currentColor; border-radius: 2px; vertical-align: -1px; box-shadow: 0 -0.3em 0 -2px currentColor; }
/*
 * D-DL-4 — el boceto: ocupa sólo lo que sobre (base 0: no empuja a nadie) y, si eso se queda en nada, no sale (la consulta de abajo).
 * La tinta va sola en alfa: se funde con el pergamino del arte.
 */
.diario-boceto { flex: 1 1 0; min-height: 0; container-type: size; pointer-events: none; }
.diario-boceto__img { width: 100%; height: 100%; background: center / contain no-repeat; opacity: 0.82; }
.diario-boceto__img--ciudad { background-image: var(--diario-boceto-ciudad); }
.diario-boceto__img--exterior { background-image: var(--diario-boceto-exterior); }
.diario-boceto__img--mazmorra { background-image: var(--diario-boceto-mazmorra); }
@container (max-height: 72px) { .diario-boceto__img { display: none; } }
.diario-acciones { display: flex; flex-wrap: wrap; gap: calc(var(--diario-u) * 7); margin-top: auto; padding-top: calc(var(--diario-u) * 4); align-items: center; flex: none; }
.diario-boton {
  display: inline-flex; align-items: center; gap: calc(var(--diario-u) * 7);
  padding: calc(var(--diario-u) * 5) calc(var(--diario-u) * 13) !important; border-radius: 4px;
  font-size: max(10px, calc(var(--diario-u) * 15)) !important; font-weight: 600; color: #3a2414 !important;
  background: linear-gradient(180deg, rgba(255, 245, 220, 0.85), rgba(225, 205, 160, 0.85)) !important;
  border: 1px solid rgba(110, 70, 30, 0.6) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 3px rgba(60, 30, 10, 0.25);
}
.diario-boton:hover { filter: brightness(1.06); }
.diario-boton--principal { color: #fff6df !important; background: linear-gradient(180deg, #8a2d1c, #5e1b10) !important; border-color: #3d0f08 !important; }
.diario-boton--peligro { color: #7a1d10 !important; }
.diario-boton--fijar { gap: calc(var(--diario-u) * 8); }
.diario-boton--fijada { box-shadow: inset 0 0 0 2px rgba(138, 45, 28, 0.55); }
.diario-confirmar { flex-basis: 100%; font-size: max(10px, calc(var(--diario-u) * 14.5)); color: #7a1d10; }

/* ───────── la chincheta: ya sólo en el botón de fijar (D-DL-3) ───────── */
.diario-chincheta {
  display: inline-block; flex: none; width: calc(var(--diario-u) * 14); height: calc(var(--diario-u) * 14); border-radius: 50%;
  background-image: var(--diario-chincheta), radial-gradient(circle at 35% 30%, #fff1b8 0 18%, #e2b24a 32%, #9a6a1c 72%, #5c3b0c);
  background-size: contain, auto; background-repeat: no-repeat;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.diario-chincheta--hueco { background-image: none; background-color: transparent; box-shadow: inset 0 0 0 2px #9a6a1c; }

/*
 * D-DL-3 — la cinta de la fijada, teñida con el tono de su pestaña: una en la fila y otra colgando del canto de arriba de la página
 * derecha, cuando se lee esa entrada. La fijada sola (nadie la fijó a mano) va más apagada.
 */
.diario-cinta { position: absolute; display: block; isolation: isolate; pointer-events: none; background: var(--diario-cinta) center / 100% 100% no-repeat; filter: drop-shadow(0 1px 2px rgba(30, 15, 5, 0.5)); }
.diario-cinta::after { content: ""; position: absolute; inset: 0; background: var(--diario-tono, #8a2d1c); -webkit-mask: var(--diario-cinta) center / 100% 100% no-repeat; mask: var(--diario-cinta) center / 100% 100% no-repeat; mix-blend-mode: multiply; }
.diario-cinta--fila { top: 0; bottom: 0; right: calc(var(--diario-u) * 8); width: calc(var(--diario-u) * 15); }
.diario-cinta--canto { z-index: 3; top: calc(var(--diario-u) * 40); right: calc(var(--diario-u) * 136); width: calc(var(--diario-u) * 22); height: calc(var(--diario-u) * 84); }
.diario-cinta--auto { opacity: 0.62; }

/* ───────── las etiquetas, en el canto izquierdo: asoman por debajo de la tapa ───────── */
/* D-DL-2 — el nombre entero y sin partir palabras; la activa asoma más, a todo color y con filo dorado */
.diario-separadores { position: absolute; z-index: 0; top: calc(var(--diario-u) * 66); left: calc(var(--diario-u) * -90); display: flex; flex-direction: column; gap: calc(var(--diario-u) * 6); width: calc(var(--diario-u) * 168); }
.diario-separador {
  --diario-tono: #8a6a2c;
  position: relative; isolation: isolate; display: flex; align-items: center; gap: calc(var(--diario-u) * 5); box-sizing: border-box;
  width: 100%; min-height: calc(var(--diario-u) * 62);
  padding: calc(var(--diario-u) * 5) calc(var(--diario-u) * 28) calc(var(--diario-u) * 5) calc(var(--diario-u) * 9) !important;
  color: #fff6df !important; font-size: max(9px, calc(var(--diario-u) * 14.4)) !important; line-height: 1.05 !important; text-align: left !important;
  filter: brightness(0.78) saturate(0.85);
  transform: translateX(calc(var(--diario-u) * 10)); transition: transform 120ms ease, filter 120ms ease;
}
.diario-separador::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--diario-separador) center / 100% 100% no-repeat; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.diario-separador::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--diario-tono); -webkit-mask: var(--diario-separador) center / 100% 100% no-repeat; mask: var(--diario-separador) center / 100% 100% no-repeat; mix-blend-mode: multiply; }
.diario-separador:hover { transform: translateX(calc(var(--diario-u) * 4)); filter: brightness(0.92); }
.diario-separador--activo { transform: none; filter: drop-shadow(0 0 calc(var(--diario-u) * 5) rgba(255, 214, 120, 0.85)); }
.diario-separador--activo:hover { transform: none; filter: drop-shadow(0 0 calc(var(--diario-u) * 5) rgba(255, 214, 120, 0.85)); }
.diario-separador--ahora, .diario-cinta--ahora { --diario-tono: #a8781e; }
.diario-separador--encargos, .diario-cinta--encargos { --diario-tono: #3f6b2a; }
.diario-separador--historias, .diario-cinta--historias { --diario-tono: #8a2d1c; }
.diario-separador--gremios, .diario-cinta--gremios { --diario-tono: #2d4f7a; }
.diario-separador--completadas { --diario-tono: #5d5448; }
/* el icono es un span: el arte nuevo (variable) va encima del icono de F1 (la url que pone la vista en --diario-icono-f1) */
.diario-separador__icono { display: block; flex: none; width: calc(var(--diario-u) * 28); height: calc(var(--diario-u) * 28); border-radius: 4px; background-image: var(--diario-icono-f1); background-size: contain; background-position: center; background-repeat: no-repeat; }
.diario-separador--ahora .diario-separador__icono { background-image: var(--diario-icono-ahora), var(--diario-icono-f1); }
.diario-separador--historias .diario-separador__icono { background-image: var(--diario-icono-historias), var(--diario-icono-f1); }
.diario-separador__nombre { min-width: 0; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
.diario-separador__n { position: absolute; top: calc(var(--diario-u) * 3); left: calc(var(--diario-u) * 28); font-weight: 700; font-size: max(9px, calc(var(--diario-u) * 11)); line-height: 1.3; padding: 0 calc(var(--diario-u) * 4); border-radius: 8px; background: rgba(0, 0, 0, 0.6); }
.diario-separador__nuevo { position: absolute; top: calc(var(--diario-u) * 6); left: calc(var(--diario-u) * 6); width: calc(var(--diario-u) * 9); height: calc(var(--diario-u) * 9); border-radius: 50%; background: #ff5a43; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); }

/* ───────── cerrar: fuera del libro, junto a la cantonera ───────── */
.diario-cerrar {
  position: absolute; z-index: 3; top: calc(var(--diario-u) * 14); right: calc(var(--diario-u) * -30); width: max(24px, calc(var(--diario-u) * 32)); height: max(24px, calc(var(--diario-u) * 32)); border-radius: 50%;
  font-size: max(16px, calc(var(--diario-u) * 21)) !important; line-height: 1; text-align: center !important; color: #f3dfa0 !important;
  background: rgba(0, 0, 0, 0.55) !important; border: 1px solid rgba(216, 178, 90, 0.6) !important;
}
.diario-cerrar:hover { color: #fff !important; border-color: #f3dfa0 !important; }

/* ───────── B · Estandartes: el mismo libro (D-DL-1); sólo cambia el color de la marca y del botón ───────── */
.diario-ventana[data-estilo="B"] .diario-fila--sel { box-shadow: inset 3px 0 0 #2d4f7a; }
.diario-ventana[data-estilo="B"] .diario-boton--principal { background: linear-gradient(180deg, #34507a, #1d2b40) !important; border-color: #121b28 !important; }

/* ───────── la letra (D-DI-7): «normal» = la de la interfaz ───────── */
.diario-ventana[data-letra="normal"] { --diario-letra-mano: var(--diario-letra-ui); }
.diario-ventana[data-letra="normal"] .diario-titulo,
.diario-ventana[data-letra="normal"] .diario-entrada__titulo,
.diario-ventana[data-letra="normal"] .diario-nota { font-style: normal; }
/* la letra de la UI es más ancha: «Completadas» tiene que caber igual en la etiqueta */
.diario-ventana[data-letra="normal"] .diario-separador { font-size: max(9px, calc(var(--diario-u) * 12.2)) !important; }

/* ───────── la chapita de la J en el botón del menú (D-DI-9) ───────── */
.diario-tecla {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  min-width: 18px; padding: 0 5px; border-radius: 4px; box-sizing: border-box;
  font: 700 11px/18px var(--diario-letra-ui); text-align: center; color: #f3dfa0;
  background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(216, 178, 90, 0.55);
  pointer-events: none;
}

/* ───────── pantallas muy bajas (móvil apaisado): lo que no quepa se recorta antes que los botones ───────── */
@media (max-height: 480px) {
  .diario-nota { -webkit-line-clamp: 2; }
  .diario-ayuda { display: none; }
  .diario-boceto { display: none; }
  .diario-entrada { gap: 2px; }
  .diario-campos { padding-top: 2px; gap: 0; }
  .diario-campo--recompensa .diario-campo__v { -webkit-line-clamp: 5; }
  .diario-entrada__titulo { -webkit-line-clamp: 1; }
  .diario-separador__icono { display: none; }
  .diario-separador__n { left: auto; right: calc(var(--diario-u) * 42); }
}
/* ───────── móvil de pie: el libro no cabe con letra legible; un pliego apilado, sin el arte ───────── */
@media (max-width: 760px) and (orientation: portrait) {
  .diario-ventana { --diario-u: calc(100vw / 560); }
  .diario-tapa { width: 96vw; height: 92vh; padding: 8px 8px 8px 50px; border-radius: 8px; background: linear-gradient(90deg, #e2cd9b, #f3e6c4 9%, #f3e6c4 91%, #e2cd9b); box-shadow: 0 0 0 3px #4a2a14, 0 10px 30px rgba(0, 0, 0, 0.7); }
  .diario-tapa::before { display: none; }
  .diario-libro { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1.1fr); }
  .diario-lomo { display: none; }
  .diario-separadores { z-index: 3; top: 8px; left: 2px; width: 46px; }
  .diario-separador { min-height: 46px; padding: 4px !important; justify-content: center; transform: none; }
  .diario-separador__nombre { display: none; }
  .diario-separador--activo { transform: none; }
  .diario-ayuda { display: none; }
  .diario-cerrar { top: 4px; right: 4px; }
  .diario-cinta--canto { display: none; }
}
@media (prefers-reduced-motion: reduce) { .diario-ventana { animation: none; } .diario-separador { transition: none; } }