Agrego boton para el syncing de dispositivos de laboratorio en la UI de desktop

css/styles.css

@@ -224,11 +224,13 @@ header .barra-paciente select option {
 }
 
 header .boton-tema,
+header .boton-lab,
 header .boton-usuario {
     color: var(--header-text-action);
 }
 
 header .boton-tema:hover,
+header .boton-lab:hover,
 header .boton-usuario:hover {
     color: var(--header-text-hover);
 }
@@ -1652,8 +1654,9 @@ footer {
     background: var(--surface-2);
 }
 
-/*  THEME TOGGLE  */
-.boton-tema {
+/*  THEME TOGGLE + ANALIZADOR (mismos botones de icono de la cabecera)  */
+.boton-tema,
+.boton-lab {
     background: transparent;
     color: var(--text-2);
     border: 1px solid var(--border-1);
@@ -1664,12 +1667,25 @@ footer {
     min-height: 32px;
 }
 
-.boton-tema:hover {
+.boton-tema:hover,
+.boton-lab:hover {
     background: var(--surface-2);
     color: var(--text-1);
     border-color: var(--border-2);
 }
 
+.boton-lab svg {
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+}
+
+.boton-lab[aria-expanded="true"] {
+    background: var(--surface-2);
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
 .icono-sol {
     display: none;
     width: 14px;
@@ -2108,6 +2124,12 @@ main {
         align-self: center;
     }
 
+    /* En móvil los controles del analizador están en línea dentro del panel de paciente: el
+       botón de la cabecera sobraría y abriría un modal con el mismo contenido. */
+    .boton-lab {
+        display: none;
+    }
+
     .acciones-cabecera .boton {
         padding: 6px 12px;
         font-size: var(--fs-sm);
@@ -2328,7 +2350,8 @@ main {
 }
 
 /* Modal*/
-.modal-auth {
+.modal-auth,
+.modal-lab {
     position: fixed;
     top: 50%;
     left: 50%;
@@ -2344,11 +2367,29 @@ main {
     transition: opacity var(--dur-base), transform var(--dur-base);
 }
 
-.modal-auth.visible {
+.modal-auth.visible,
+.modal-lab.visible {
     opacity: 1;
     transform: translate(-50%, -50%);
 }
 
+.modal-lab-ayuda {
+    margin: 0 0 var(--space-4);
+    font-size: var(--fs-sm);
+    color: var(--text-3);
+    line-height: 1.5;
+}
+
+/* Los controles del analizador se dimensionan para la columna estrecha del panel móvil; en el
+   modal comparten ancho, así que el ID de muestra ocupa la fila entera. */
+#modal-lab-cuerpo .fila-importar-lab {
+    margin-top: 0;
+}
+
+#modal-lab-cuerpo #lab-muestra-id {
+    width: 100%;
+}
+
 .modal-cerrar svg {
     width: 16px;
     height: 16px;

frontend/src/lab-import.ts

@@ -174,6 +174,72 @@ export function inicializarImportLab(evaluar: () => void): void {
   }));
 
   inicializarCola(cargarYAplicar, detener);
+  inicializarModalLab(detener);
+}
+
+// El botón del analizador en la cabecera (sólo escritorio, donde #panel-paciente está oculto).
+// En vez de duplicar los controles —que duplicaría los IDs y, peor, el estado del sondeo, con
+// dos búsquedas vivas a la vez— se MUEVE el nodo #lab-controles entre su sitio en el panel de
+// paciente (móvil) y el modal (escritorio). Al mover un elemento se conservan sus listeners,
+// así que el cableado de arriba sigue valiendo para los dos casos.
+function inicializarModalLab(detenerBusqueda: () => void): void {
+  const btn = document.getElementById('btn-lab');
+  const modal = document.getElementById('modal-lab');
+  const overlay = document.getElementById('modal-lab-overlay');
+  const cuerpo = document.getElementById('modal-lab-cuerpo');
+  const controles = document.getElementById('lab-controles');
+  const anclaje = document.getElementById('lab-anclaje-mob');
+  if (!btn || !modal || !overlay || !cuerpo || !controles || !anclaje) return;
+
+  const esEscritorio = (): boolean => window.innerWidth > 1100;
+
+  // Idempotente: si ya está donde toca no toca el DOM (se llama en cada `resize`).
+  const ubicar = (): void => {
+    if (esEscritorio()) {
+      if (controles.parentElement !== cuerpo) cuerpo.appendChild(controles);
+    } else if (controles.previousElementSibling !== anclaje) {
+      anclaje.after(controles);
+    }
+  };
+
+  const cerrar = (): void => {
+    modal.classList.remove('visible');
+    overlay.classList.remove('activo');
+    btn.setAttribute('aria-expanded', 'false');
+    setTimeout(() => modal.setAttribute('hidden', ''), 250);
+  };
+
+  const abrir = (): void => {
+    ubicar();
+    modal.removeAttribute('hidden');
+    overlay.classList.add('activo');
+    btn.setAttribute('aria-expanded', 'true');
+    requestAnimationFrame(() => modal.classList.add('visible'));
+    (document.getElementById('lab-muestra-id') as HTMLInputElement | null)?.focus();
+  };
+
+  btn.addEventListener('click', () => {
+    if (modal.hasAttribute('hidden')) abrir();
+    else cerrar();
+  });
+  overlay.addEventListener('click', cerrar);
+  document.getElementById('modal-lab-cerrar')?.addEventListener('click', cerrar);
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && !modal.hasAttribute('hidden')) cerrar();
+  });
+
+  // Al cruzar el breakpoint hacia móvil los controles vuelven al panel de paciente. Si el modal
+  // estaba abierto se cierra, y con él cualquier búsqueda en curso: su botón dejaría de estar a
+  // la vista y el sondeo seguiría vivo en segundo plano sin forma de cancelarlo.
+  window.addEventListener('resize', () => {
+    if (!esEscritorio() && !modal.hasAttribute('hidden')) {
+      detenerBusqueda();
+      cerrar();
+    }
+    ubicar();
+  });
+
+  ubicar();
 }
 
 // Cola de resultados recibidos: lista para elegir sin teclear el ID de muestra.

index.html

@@ -51,6 +51,11 @@
         </select>
     </div>
     <div class="acciones-cabecera">
+        <!-- Sólo escritorio: en móvil los mismos controles van en línea dentro del panel de
+             paciente, que aquí está oculto (>1100px). -->
+        <button class="boton boton-lab" id="btn-lab" type="button" aria-label="Conectar con el analizador" data-tooltip="Analizador de laboratorio" aria-haspopup="dialog" aria-expanded="false">
+            <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="M200-120q-51 0-72.5-45.5T138-250l222-270v-240h-40q-17 0-28.5-11.5T280-800q0-17 11.5-28.5T320-840h320q17 0 28.5 11.5T680-800q0 17-11.5 28.5T640-760h-40v240l222 270q32 39 10.5 84.5T760-120H200Zm0-80h560L520-492v-268h-80v268L200-200Zm280-280Z"/></svg>
+        </button>
         <button class="boton boton-tema" id="btn-tema" type="button" aria-label="Cambiar tema" data-tooltip="Cambiar tema">
             <svg class="icono-sol" viewBox="0 -960 960 960" aria-hidden="true"><path d="M565-395q35-35 35-85t-35-85q-35-35-85-35t-85 35q-35 35-35 85t35 85q35 35 85 35t85-35Zm-226.5 56.5Q280-397 280-480t58.5-141.5Q397-680 480-680t141.5 58.5Q680-563 680-480t-58.5 141.5Q563-280 480-280t-141.5-58.5ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
             <svg class="icono-luna" viewBox="0 -960 960 960" aria-hidden="true"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
@@ -106,13 +111,19 @@
                     <option value="Hembra">Hembra</option>
                 </select>
             </div>
-            <div class="fila-paciente fila-importar-lab">
-                <label for="lab-muestra-id">ID de muestra</label>
-                <input id="lab-muestra-id" type="text" placeholder="escanea o teclea el ID" autocomplete="off">
+            <!-- Controles del analizador. En móvil viven aquí; en escritorio este mismo nodo se
+                 traslada al modal #modal-lab (lab-import.ts). Se MUEVE, no se duplica: los IDs
+                 son únicos y el estado del sondeo es uno solo. -->
+            <div id="lab-anclaje-mob"></div>
+            <div id="lab-controles">
+                <div class="fila-paciente fila-importar-lab">
+                    <label for="lab-muestra-id">ID de muestra</label>
+                    <input id="lab-muestra-id" type="text" placeholder="escanea o teclea el ID" autocomplete="off">
+                </div>
+                <button class="btn-importar-lab" id="btn-importar-lab" type="button">Importar del analizador</button>
+                <button class="btn-importar-lab btn-pendientes-lab" id="btn-pendientes-lab" type="button">Ver resultados recibidos</button>
+                <ul class="lab-pendientes" id="lab-pendientes" hidden></ul>
             </div>
-            <button class="btn-importar-lab" id="btn-importar-lab" type="button">Importar del analizador</button>
-            <button class="btn-importar-lab btn-pendientes-lab" id="btn-pendientes-lab" type="button">Ver resultados recibidos</button>
-            <ul class="lab-pendientes" id="lab-pendientes" hidden></ul>
             <input type="file" id="pdf-input-paciente" class="pdf-input" accept=".pdf" hidden>
             <button class="btn-importar-pdf btn-adjuntar-mob" type="button" data-panel="paciente" aria-label="Adjuntar PDF de exámenes">
                 <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350V-700q0-42-29-71t-71-29q-42 0-71 29t-29 71v370q0 71 49.5 120.5T470-160q71 0 120.5-49.5T640-330v-390h80v390Z"/></svg>
@@ -1111,6 +1122,18 @@
     <div id="papers-paginacion" class="papers-paginacion"></div>
 </div>
 
+<!-- MODAL DEL ANALIZADOR (sólo escritorio; en móvil los controles van en el panel de paciente) -->
+<div id="modal-lab-overlay" class="modal-overlay" aria-hidden="true"></div>
+<div id="modal-lab" class="modal-lab" role="dialog" aria-modal="true" aria-labelledby="modal-lab-titulo" hidden>
+    <button id="modal-lab-cerrar" class="modal-cerrar" type="button" aria-label="Cerrar" data-tooltip="Cerrar">
+        <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="m336-280-56-56 144-144-144-143 56-56 144 144 143-144 56 56-144 143 144 144-56 56-143-144-144 144Z"/></svg>
+    </button>
+    <h2 id="modal-lab-titulo" class="modal-titulo">Analizador de laboratorio</h2>
+    <p class="modal-lab-ayuda">Escanea o teclea el ID de muestra: en cuanto el equipo envíe ese resultado, sus valores se cargan en el formulario. También puedes elegir de los ya recibidos.</p>
+    <!-- Aquí se traslada #lab-controles en escritorio. -->
+    <div id="modal-lab-cuerpo"></div>
+</div>
+
 <!-- MODAL DE AUTENTICACIÓN -->
 <div id="modal-auth-overlay" class="modal-overlay" aria-hidden="true"></div>
 <div id="modal-auth" class="modal-auth" role="dialog" aria-modal="true" aria-labelledby="modal-auth-titulo" hidden>