From 3bf70f48d08681754dc9fbd617f888157e371dbc Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 9 Jul 2026 12:06:01 -0500
Subject: [PATCH] fix: convert detail panel from col-lg-5 inline to fixed
 drawer overlay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Table now uses full col-12 width — no more horizontal scroll.
Detail panel slides in from right as a fixed overlay with backdrop.
Also renames stats card from "Importados RIPS" to "Importados Lab".

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 lab_pacientes.php | 61 +++++++++++++++++++++++++++++++++--------------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/lab_pacientes.php b/lab_pacientes.php
index 927b321..72549b1 100644
--- a/lab_pacientes.php
+++ b/lab_pacientes.php
@@ -56,7 +56,28 @@ $brandDark = sprintf('#%02x%02x%02x',
             color: #64748b;
         }
         .hist-badge { font-size: .72rem; }
-        #detail-panel { display: none; }
+        /* Drawer de detalle (fixed overlay) */
+        #detail-backdrop {
+            display: none;
+            position: fixed; inset: 0;
+            background: rgba(0,0,0,.25);
+            z-index: 1049;
+        }
+        #detail-panel {
+            position: fixed;
+            top: 0; right: 0;
+            height: 100vh;
+            width: 420px;
+            z-index: 1050;
+            background: #fff;
+            box-shadow: -4px 0 24px rgba(0,0,0,.18);
+            transform: translateX(110%);
+            transition: transform .25s cubic-bezier(.4,0,.2,1);
+            display: flex; flex-direction: column;
+        }
+        #detail-panel.open { transform: translateX(0); }
+        @media (max-width: 480px) { #detail-panel { width: 100vw; } }
+        #detail-body { flex: 1; overflow-y: auto; padding: 1rem; }
 
         /* ── Modal header ──────────────────────────────── */
         .modal-header-brand {
@@ -125,9 +146,10 @@ $brandDark = sprintf('#%02x%02x%02x',
         /* ── Panel detalle ─────────────────────────────── */
         .detail-header-band {
             background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
-            color: #fff; border-radius: .5rem .5rem 0 0;
+            color: #fff;
             padding: .75rem 1rem;
             display: flex; align-items: center; justify-content: space-between;
+            flex-shrink: 0;
         }
         .detail-header-band .btn-close { filter: invert(1) brightness(2); }
 
@@ -165,9 +187,9 @@ require_once __DIR__ . '/shared/components/sidebar.php';
                 </div>
             </div>
             <div class="col-6 col-md-3">
-                <div class="card border-0 shadow-sm rounded-3 text-center py-2" style="cursor:pointer" onclick="filtrarOrigen('rips')">
+                <div class="card border-0 shadow-sm rounded-3 text-center py-2" style="cursor:pointer" onclick="filtrarOrigen('lab')">
                     <div class="fw-bold fs-4 text-primary" id="stat-rips">—</div>
-                    <div class="text-muted small"><i class="fas fa-database me-1 text-primary"></i>Importados RIPS</div>
+                    <div class="text-muted small"><i class="fas fa-flask me-1 text-primary"></i>Importados Lab</div>
                 </div>
             </div>
             <div class="col-6 col-md-3">
@@ -211,7 +233,7 @@ require_once __DIR__ . '/shared/components/sidebar.php';
 
         <div class="row g-3">
             <!-- Lista -->
-            <div class="col-lg-7" id="lista-col">
+            <div class="col-12" id="lista-col">
                 <div class="card border-0 shadow-sm rounded-3">
                     <div class="card-body p-0">
                         <div class="table-responsive">
@@ -241,21 +263,22 @@ require_once __DIR__ . '/shared/components/sidebar.php';
                     </div>
                 </div>
             </div>
-
-            <!-- Panel de detalle -->
-            <div class="col-lg-5" id="detail-panel">
-                <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
-                    <div class="detail-header-band">
-                        <span class="fw-semibold" id="detail-nombre">Paciente</span>
-                        <button class="btn-close" onclick="cerrarDetalle()"></button>
-                    </div>
-                    <div class="card-body" id="detail-body"></div>
-                </div>
-            </div>
         </div>
     </div>
 </main>
 
+<!-- Backdrop para el drawer de detalle -->
+<div id="detail-backdrop" onclick="cerrarDetalle()"></div>
+
+<!-- Drawer de detalle (fixed overlay) -->
+<div id="detail-panel">
+    <div class="detail-header-band">
+        <span class="fw-semibold" id="detail-nombre">Paciente</span>
+        <button class="btn-close" onclick="cerrarDetalle()"></button>
+    </div>
+    <div id="detail-body"></div>
+</div>
+
 <!-- Modal Formulario Paciente -->
 <div class="modal fade" id="modalPaciente" tabindex="-1">
     <div class="modal-dialog modal-lg modal-dialog-scrollable">
@@ -505,7 +528,8 @@ async function cargarLista(pag = 1) {
 // ── Detalle ────────────────────────────────────────────────────────────────
 async function verDetalle(id) {
     const panel = document.getElementById('detail-panel');
-    panel.style.display = 'block';
+    panel.classList.add('open');
+    document.getElementById('detail-backdrop').style.display = 'block';
     document.getElementById('detail-body').innerHTML = '<div class="text-center py-4"><i class="fas fa-spinner fa-spin fa-lg text-muted"></i></div>';
 
     const r = await fetch(`api/lab/get_pacientes.php?id=${id}`);
@@ -555,7 +579,8 @@ async function verDetalle(id) {
 }
 
 function cerrarDetalle() {
-    document.getElementById('detail-panel').style.display = 'none';
+    document.getElementById('detail-panel').classList.remove('open');
+    document.getElementById('detail-backdrop').style.display = 'none';
 }
 
 // ── Formulario ─────────────────────────────────────────────────────────────