Estado vacío de los paneles de exámenes en escritorio

`panel-vacio.ts` sustituye el formulario por una zona de adjuntar (arrastrar /
explorar / «Insertar resultados manualmente») mientras el `<section>` lleva la
clase `.sin-datos`. Sólo en escritorio: el CSS que lo enciende vive dentro de
`@media (min-width: 1101px)`.

Depende sólo de `dom.ts` (`esGridEscritorio`, extraído ahí para que lo compartan
`ui.ts`, `lab-import.ts` y este módulo). Lo importa `form-inject.ts`, base común
de los dos importadores, que llama a `revelarPanelDeCampo()` por cada valor
inyectado: un panel que recibe datos sale del estado vacío solo. Colgarlo de
`ui.ts` —que toca el DOM al cargarse— rompería sus pruebas.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

css/styles.css

@@ -450,6 +450,62 @@ main {
     scrollbar-color: var(--border-2) transparent;
 }
 
+/*  ESTADO VACÍO DE LOS PANELES DE EXÁMENES (sólo escritorio)
+    En móvil los paneles son pestañas a pantalla completa y el formulario va directo: la zona de
+    arrastre no aporta (no se arrastra con el dedo) y metería un paso de más. Por eso el bloque
+    nace oculto y sólo la media query de escritorio lo enciende. */
+.panel-vacio {
+    display: none;
+}
+
+.panel-vacio svg {
+    width: 34px;
+    height: 34px;
+    fill: var(--text-4);
+}
+
+.panel-vacio-texto {
+    margin: 0;
+    font-size: var(--fs-sm);
+    line-height: 1.6;
+    color: var(--text-3);
+    text-align: center;
+    text-wrap: balance;
+}
+
+.panel-vacio-explorar {
+    padding: 0;
+    background: none;
+    border: none;
+    font: inherit;
+    color: var(--accent);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    cursor: pointer;
+}
+
+.panel-vacio-explorar:hover {
+    color: var(--accent-hover);
+}
+
+.panel-vacio-manual {
+    padding: var(--space-2) var(--space-4);
+    background: transparent;
+    color: var(--text-2);
+    border: 1px solid var(--border-2);
+    border-radius: var(--radius-md);
+    font: inherit;
+    font-size: var(--fs-sm);
+    cursor: pointer;
+    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
+}
+
+.panel-vacio-manual:hover {
+    background: var(--surface-2);
+    color: var(--text-1);
+    border-color: var(--accent);
+}
+
 /*  ENCABEZADOS DE COLUMNA  */
 .cabecera-columnas {
     display: flex;
@@ -1966,6 +2022,38 @@ main {
 
 /*  SOLO DESKTOP */
 @media (min-width: 1101px) {
+    /* Mientras el panel no tenga datos, su cuerpo es la zona de adjuntar: se oculta TODO lo
+       demás (cabecera de columnas y grupos de campos) en vez de enumerarlo, para que añadir un
+       grupo nuevo al formulario no obligue a tocar esta regla. */
+    .subpanel.sin-datos .panel-cuerpo > :not(.panel-vacio),
+    .subpanel.sin-datos .subpanel-cuerpo > :not(.panel-vacio) {
+        display: none;
+    }
+
+    .subpanel.sin-datos .panel-vacio {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-3);
+        /* Los dos paneles altos (hema/bioquim) centran el bloque en el alto disponible; los
+           colapsables se ajustan al contenido, que es lo que anima su altura. */
+        height: 100%;
+        min-height: 8rem;
+        padding: var(--space-5) var(--space-4);
+    }
+
+    /* Realce al arrastrar un fichero por encima. Va en el <section> porque el drop se escucha
+       ahí: también funciona sobre un panel que ya muestra el formulario. */
+    .subpanel.arrastrando {
+        outline: 2px dashed var(--accent);
+        outline-offset: -4px;
+    }
+
+    .subpanel.arrastrando .panel-vacio svg {
+        fill: var(--accent);
+    }
+
     .cabecera-columnas--mobile-only {
         display: none;
     }

frontend/src/dom.ts

@@ -19,3 +19,10 @@ export function qs<T extends Element = Element>(sel: string, root: ParentNode =
 export function qsa<T extends Element = Element>(sel: string, root: ParentNode = document): T[] {
   return Array.from(root.querySelectorAll<T>(sel));
 }
+
+// Punto de corte del grid de escritorio. Vive aquí, en el módulo hoja, porque lo consultan
+// varios módulos que no deben depender unos de otros, y debe coincidir con la media query
+// `min-width: 1101px` de css/styles.css.
+export function esGridEscritorio(): boolean {
+  return window.innerWidth > 1100;
+}

frontend/src/form-inject.ts

@@ -2,6 +2,8 @@
 // y el de analizadores (lab-import.ts). La clave de unión es el atributo `name` del input
 // (== clave canónica de valores_referencia.json). Fuente única para no duplicar la lógica.
 
+import { revelarPanelDeCampo } from './panel-vacio.js';
+
 export type ValoresInyectables = Record<string, number | string>;
 
 export interface PacienteInyectable {
@@ -32,6 +34,8 @@ export function aplicarValoresAFormulario(
   for (const [campo, value] of Object.entries(resultados)) {
     const el = document.querySelector(`[name="${campo}"]`) as HTMLInputElement | HTMLSelectElement | null;
     if (!el) continue;
+    // Un valor importado a un panel en estado vacío quedaría escondido tras la zona de arrastre.
+    revelarPanelDeCampo(el);
     const valorCadena = String(value);
     if (el.tagName === 'SELECT') {
       const select = el as HTMLSelectElement;

frontend/src/lab-import.ts

@@ -13,6 +13,7 @@ import {
   type PacienteInyectable,
 } from './form-inject.js';
 import { manejadorAsync } from './async.js';
+import { esGridEscritorio } from './dom.js';
 
 interface ValorAnalitoResp {
   clave: string;
@@ -191,7 +192,7 @@ function inicializarModalLab(detenerBusqueda: () => void): void {
   const anclaje = document.getElementById('lab-anclaje-mob');
   if (!btn || !modal || !overlay || !cuerpo || !controles || !anclaje) return;
 
-  const esEscritorio = (): boolean => window.innerWidth > 1100;
+  const esEscritorio = esGridEscritorio;
 
   // Idempotente: si ya está donde toca no toca el DOM (se llama en cada `resize`).
   const ubicar = (): void => {

frontend/src/panel-vacio.ts

@@ -0,0 +1,55 @@
+// Estado vacío de los paneles de exámenes (sólo escritorio).
+//
+// Cada panel arranca con `.sin-datos`: en vez del formulario muestra una zona para soltar el
+// PDF y un botón que devuelve al modo de captura manual. La entrada manual no desaparece, sólo
+// deja de ser lo primero que se ve: en la mayoría de los casos el veterinario llega con un PDF
+// del laboratorio, y teclear 90 analitos a mano es la excepción.
+//
+// El estado vive en una clase del <section>, no en JS, para que el CSS decida cuándo aplica
+// (el móvil lo ignora entero: allí los paneles son pestañas y el formulario va directo).
+
+// Sólo depende de `dom.ts` a propósito: `form-inject.ts` importa este módulo, y form-inject es
+// la base compartida de los dos importadores. Colgar de aquí a `ui.ts` —que toca el DOM al
+// cargarse— arrastraría esa dependencia hasta ellos y hasta sus tests.
+import { esGridEscritorio } from './dom.js';
+
+// Saca un panel del estado vacío. Idempotente: se llama tanto desde el botón como desde cada
+// valor inyectado por los importadores, que pueden ser decenas en una sola importación.
+export function revelarPanel(panel: HTMLElement | null): void {
+  if (!panel || !panel.classList.contains('sin-datos')) return;
+  panel.classList.remove('sin-datos');
+  reajustarAltura(panel);
+}
+
+// Los cuatro paneles colapsables llevan la altura de su animación fijada en píxeles inline (ver
+// ui.ts); sin reajustarla al cambiar el contenido, el formulario recién mostrado sale recortado.
+// No toca los colapsados —su altura debe seguir siendo 0— ni el móvil, donde no hay animación.
+function reajustarAltura(panel: HTMLElement): void {
+  if (!esGridEscritorio() || panel.classList.contains('collapsed')) return;
+  const animEl = panel.querySelector<HTMLElement>('.subpanel-anim');
+  if (!animEl || !animEl.style.height) return;
+  animEl.style.height = `${animEl.scrollHeight}px`;
+}
+
+// Revela el panel al que pertenece un campo. La usan los importadores (PDF y analizador) para
+// que un valor inyectado nunca quede escondido detrás del estado vacío.
+export function revelarPanelDeCampo(el: Element): void {
+  revelarPanel(el.closest<HTMLElement>('.subpanel'));
+}
+
+export function inicializarPanelesVacios(): void {
+  document.querySelectorAll<HTMLElement>('.panel-vacio-manual').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const panel = btn.closest<HTMLElement>('.subpanel');
+      revelarPanel(panel);
+      // El foco salta al primer campo: quien pulsa "manual" viene a teclear.
+      panel?.querySelector<HTMLInputElement>('.fila-campo input, .fila-campo select')?.focus();
+    });
+  });
+
+  document.querySelectorAll<HTMLElement>('.panel-vacio-explorar').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      (document.getElementById(`pdf-input-${btn.dataset.panel}`) as HTMLInputElement | null)?.click();
+    });
+  });
+}

frontend/src/ui.ts

@@ -1,7 +1,7 @@
 // Navegación, gestos, paneles colapsables, sincronización móvil, imágenes y cámara.
 // Puerto TS de js/ui.js — comportamiento idéntico; sólo tipado + helpers de DOM.
 
-import { elId, qs, qsa } from './dom.js';
+import { elId, esGridEscritorio, qs, qsa } from './dom.js';
 
 // Navegación-Pestañas
 
@@ -126,7 +126,8 @@ const mainEl = qs<HTMLElement>('main')!;
 let filaColapsada = '';
 let filaExpandida = '';
 
-const esGridEscritorio = (): boolean => window.innerWidth > 1100;
+// Reexportado desde dom.ts: el mismo corte lo consultan panel-vacio.ts y lab-import.ts, que no
+// deben depender de este módulo (toca el DOM al cargarse).
 
 function inicializarFilasGrid(): void {
   if (!esGridEscritorio()) return;

index.html

@@ -137,7 +137,7 @@
     </section>
 
     <!-- HEMATOLOGÍA -->
-    <section class="panel subpanel" id="panel-hema">
+    <section class="panel subpanel sin-datos" id="panel-hema">
         <h2 class="panel-titulo">Hematología</h2>
         <div class="panel-cabecera">
             Hematología
@@ -150,6 +150,11 @@
             </button>
         </div>
         <div class="subpanel-anim"><div class="panel-cuerpo" id="cuerpo-hema">
+            <div class="panel-vacio">
+                <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
+                <p class="panel-vacio-texto">Arrastra aquí el PDF de hematología<br>o <button class="panel-vacio-explorar" type="button" data-panel="hema">explora tus archivos</button></p>
+                <button class="panel-vacio-manual" type="button" data-panel="hema">Insertar resultados manualmente</button>
+            </div>
             <div class="cabecera-columnas" aria-hidden="true">
                 <span></span>
                 <span class="cabecera-col-label">Valor</span>
@@ -299,7 +304,7 @@
     </section>
 
     <!-- PERFIL ENDOCRINO -->
-    <section class="panel subpanel" id="panel-endo">
+    <section class="panel subpanel sin-datos" id="panel-endo">
         <h2 class="panel-titulo">Perfil Endocrino</h2>
         <div class="panel-cabecera">
             Perfil Endocrino
@@ -316,6 +321,11 @@
             </button>
         </div>
         <div class="subpanel-anim"><div class="subpanel-cuerpo" id="cuerpo-endo">
+            <div class="panel-vacio">
+                <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
+                <p class="panel-vacio-texto">Arrastra aquí el PDF de perfil endocrino<br>o <button class="panel-vacio-explorar" type="button" data-panel="endo">explora tus archivos</button></p>
+                <button class="panel-vacio-manual" type="button" data-panel="endo">Insertar resultados manualmente</button>
+            </div>
             <div class="cabecera-columnas cabecera-columnas--mobile-only" aria-hidden="true">
                 <span></span>
                 <button class="btn-limpiar-panel" type="button" data-panel="endo" aria-label="Limpiar campos Perfil Endocrino" data-tooltip="Limpiar formulario">
@@ -384,7 +394,7 @@
     </section>
 
     <!-- BIOQUÍMICA -->
-    <section class="panel subpanel" id="panel-bioquim">
+    <section class="panel subpanel sin-datos" id="panel-bioquim">
         <h2 class="panel-titulo">Bioquímica sanguínea</h2>
         <div class="panel-cabecera">
             Bioquímica sanguínea
@@ -397,6 +407,11 @@
             </button>
         </div>
         <div class="subpanel-anim"><div class="panel-cuerpo" id="cuerpo-bioquim">
+            <div class="panel-vacio">
+                <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
+                <p class="panel-vacio-texto">Arrastra aquí el PDF de bioquímica sanguínea<br>o <button class="panel-vacio-explorar" type="button" data-panel="bioquim">explora tus archivos</button></p>
+                <button class="panel-vacio-manual" type="button" data-panel="bioquim">Insertar resultados manualmente</button>
+            </div>
             <div class="cabecera-columnas" aria-hidden="true">
                 <span></span>
                 <span class="cabecera-col-label">Valor</span>
@@ -609,7 +624,7 @@
     </section>
 
     <!-- URIANÁLISIS  -->
-    <section class="panel subpanel" id="panel-uri">
+    <section class="panel subpanel sin-datos" id="panel-uri">
         <h2 class="panel-titulo">Urianálisis</h2>
         <div class="panel-cabecera">
             Urianálisis
@@ -626,6 +641,11 @@
             </button>
         </div>
         <div class="subpanel-anim"><div class="subpanel-cuerpo" id="cuerpo-uri">
+            <div class="panel-vacio">
+                <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
+                <p class="panel-vacio-texto">Arrastra aquí el PDF de urianálisis<br>o <button class="panel-vacio-explorar" type="button" data-panel="uri">explora tus archivos</button></p>
+                <button class="panel-vacio-manual" type="button" data-panel="uri">Insertar resultados manualmente</button>
+            </div>
             <div class="cabecera-columnas cabecera-columnas--mobile-only" aria-hidden="true">
                 <span></span>
                 <button class="btn-limpiar-panel" type="button" data-panel="uri" aria-label="Limpiar campos Urianálisis" data-tooltip="Limpiar formulario">
@@ -753,7 +773,7 @@
     </section>
 
     <!-- FACTORES DE COAGULACIÓN -->
-    <section class="panel subpanel" id="panel-coag">
+    <section class="panel subpanel sin-datos" id="panel-coag">
         <h2 class="panel-titulo">Factores de Coagulación</h2>
         <div class="panel-cabecera">
             Factores de Coagulación
@@ -770,6 +790,11 @@
             </button>
         </div>
         <div class="subpanel-anim"><div class="subpanel-cuerpo" id="cuerpo-coag">
+            <div class="panel-vacio">
+                <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
+                <p class="panel-vacio-texto">Arrastra aquí el PDF de factores de coagulación<br>o <button class="panel-vacio-explorar" type="button" data-panel="coag">explora tus archivos</button></p>
+                <button class="panel-vacio-manual" type="button" data-panel="coag">Insertar resultados manualmente</button>
+            </div>
             <div class="cabecera-columnas cabecera-columnas--mobile-only" aria-hidden="true">
                 <span></span>
                 <button class="btn-limpiar-panel" type="button" data-panel="coag" aria-label="Limpiar campos Coagulación" data-tooltip="Limpiar formulario">
@@ -823,7 +848,7 @@
     </section>
 
     <!-- GASOMETRÍA -->
-    <section class="panel subpanel" id="panel-gas">
+    <section class="panel subpanel sin-datos" id="panel-gas">
         <h2 class="panel-titulo">Gasometría</h2>
         <div class="panel-cabecera">
             Gasometría
@@ -840,6 +865,11 @@
             </button>
         </div>
         <div class="subpanel-anim"><div class="subpanel-cuerpo" id="cuerpo-gas">
+            <div class="panel-vacio">
+                <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
+                <p class="panel-vacio-texto">Arrastra aquí el PDF de gasometría<br>o <button class="panel-vacio-explorar" type="button" data-panel="gas">explora tus archivos</button></p>
+                <button class="panel-vacio-manual" type="button" data-panel="gas">Insertar resultados manualmente</button>
+            </div>
             <div class="cabecera-columnas cabecera-columnas--mobile-only" aria-hidden="true">
                 <span></span>
                 <button class="btn-limpiar-panel" type="button" data-panel="gas" aria-label="Limpiar campos Gasometría" data-tooltip="Limpiar formulario">