Render: chat pegado abajo, hojas sin desfase, separadores y fidelidad iOS

- scrollAbajo instantáneo + ResizeObserver 'pegado abajo' (imágenes tardías, pestaña oculta)
- Hoja de opciones busca la fila viva; re-render de su mensaje cierra la hoja
- Separadores de filas de la hoja, proporciones de lista, un solo separador entre grupos
- Home indicator sobre la hoja, composer oscuro #232626 con hairline, padding 7/12/6
- URLs sin puntuación final, www. -> https://, negrita/cursiva/tachado con reglas de WhatsApp
- Documento: 'tamaño • ext' o 'PDF'; transición de color al cambiar tema
- Presentación sin toolbar en escritorio (Esc para salir), hooks de zoom, móvil sin marco

Co-Authored-By: Claude Opus 5.5 <[email protected]>

css/iphone.css

@@ -43,6 +43,42 @@
    que el teléfono crezca (en 1280×720 pasa de .67 a ~.73). */
 body.presentacion #barra-movil { display: none; }
 
+/* Presentación en escritorio (ratón + teclado): captura limpia, sin toolbar.
+   Se sale con Esc o P (js/ux.js); una pista flotante lo recuerda. */
+@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
+  body.presentacion #toolbar { display: none; }
+  body.presentacion #panel-movil { position: relative; }
+  body.presentacion #panel-movil::before {
+    content: "Esc para salir";
+    position: absolute;
+    top: 12px;
+    right: 16px;
+    padding: 5px 10px;
+    border-radius: 999px;
+    background: rgba(11, 20, 26, .55);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+    pointer-events: none;
+    opacity: .75;
+    z-index: 5;
+  }
+  @supports (scale: calc(1vh / 1px)) {
+    body.presentacion {
+      --wam-escala: max(.3, min(1, (100vh - 32px) / 852px, (100vw - 64px) / 393px));
+    }
+  }
+}
+
+/* Zoom manual (lo fija js/ux.js con body[data-wam-zoom]; sin atributo =
+   "Ajustar", el cálculo automático). Con zoom fijo el panel hace scroll. */
+html body[data-wam-zoom="100"] { --wam-escala: 1; }
+html body[data-wam-zoom="125"] { --wam-escala: 1.25; }
+body[data-wam-zoom="100"] #panel-movil,
+body[data-wam-zoom="125"] #panel-movil { overflow: auto; }
+body[data-wam-zoom="100"] .iphone-escena,
+body[data-wam-zoom="125"] .iphone-escena { margin: 0 auto; }
+
 /* --- Columna de vista previa (#panel-movil) ---------------------------- */
 #panel-movil {
   min-width: 0;
@@ -185,7 +221,7 @@ body.presentacion #barra-movil { display: none; }
   height: 5px;
   border-radius: 3px;
   background: #fff; /* en oscuro */
-  z-index: 45;
+  z-index: 70;          /* encima de la hoja inferior (.sheet z 60), como en iOS */
   pointer-events: none;
 }
 #pantalla:not(.oscuro) .home-indicator { background: #000; } /* en claro, negro */
@@ -202,7 +238,7 @@ body.presentacion #barra-movil { display: none; }
   overflow-x: hidden;
   list-style: none;
   padding: 8px 0 14px;
-  scroll-behavior: smooth;
+  scroll-behavior: auto; /* el suave solo en enfocarEnChat (behavior explícito) */
   overscroll-behavior: contain;
 }
 
@@ -241,6 +277,37 @@ body.presentacion #barra-movil { display: none; }
 /* --- Modo presentación: el iPhone se centra y respira más --------------- */
 body.presentacion #panel-movil { padding: 14px 20px 22px; }
 
+/* --- Móvil real (≤ 520 px): sin marco ----------------------------------
+   En el propio teléfono del consultor sobra el iPhone dibujado: la pantalla
+   ocupa el ancho y el alto disponibles a escala 1 (sin isla, status bar ni
+   indicador home duplicados). body.con-marco lo desactiva. */
+@media (max-width: 520px) {
+  html body:not(.con-marco) { --wam-escala: 1; }
+  body:not(.con-marco) #panel-movil { padding-left: 0; padding-right: 0; }
+  body:not(.con-marco) #barra-movil { padding: 0 16px; margin-bottom: 8px; }
+  body:not(.con-marco) .iphone-escena {
+    flex: 1 1 auto;
+    width: 100%;
+    height: auto;
+    min-height: 420px;
+    margin: 0;
+  }
+  body:not(.con-marco) .iphone {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+    transform: none;
+    box-shadow: none;
+    background: transparent;
+  }
+  body:not(.con-marco) .pantalla { border-radius: 0; padding-top: 0; }
+  body:not(.con-marco) .island,
+  body:not(.con-marco) .statusbar,
+  body:not(.con-marco) .home-indicator { display: none; }
+  body:not(.con-marco) .wa #composer { padding-bottom: 8px; }
+  body:not(.con-marco) .wa .sheet-panel { padding-bottom: 12px; }
+}
+
 /* --- Accesibilidad: menos movimiento ------------------------------------- */
 @media (prefers-reduced-motion: reduce) {
   #btn-reproducir { transition: none; }