From 4b8b66877479dd0e9aefe8f1e2089120b973c520 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Tue, 21 Apr 2026 21:36:24 -0500
Subject: [PATCH] uo

---
 modules/turnero/api/_helpers.php              |  12 +
 modules/turnero/api/get_cola.php              |  22 +-
 modules/turnero/api/get_display_global.php    |   9 +-
 modules/turnero/api/get_display_recepcion.php |  15 +-
 modules/turnero/views/kiosko.php              | 437 +++++++++++-------
 modules/turnero/views/lugar.php               |  81 ++--
 modules/turnero/views/recepcion.php           | 188 ++++++--
 7 files changed, 541 insertions(+), 223 deletions(-)

diff --git a/modules/turnero/api/_helpers.php b/modules/turnero/api/_helpers.php
index 54448cf..4d341df 100644
--- a/modules/turnero/api/_helpers.php
+++ b/modules/turnero/api/_helpers.php
@@ -142,6 +142,18 @@ function obtenerOCrearSesionHoy(): int
     return (int) $pdo->lastInsertId();
 }
 
+/**
+ * Devuelve ['id', 'fin_at'] de la sesión de hoy si existe, o null.
+ * Para uso en pantallas: NO crea sesión nueva.
+ */
+function sesionHoy(): ?array
+{
+    $pdo  = db();
+    $stmt = $pdo->prepare('SELECT id, fin_at FROM turnero_sesiones WHERE fecha = CURDATE() LIMIT 1');
+    $stmt->execute();
+    return $stmt->fetch(PDO::FETCH_ASSOC) ?: null;
+}
+
 /**
  * Genera el siguiente número correlativo de turno para una sesión.
  * Usa bloqueo a nivel de fila para evitar duplicados en concurrencia.
diff --git a/modules/turnero/api/get_cola.php b/modules/turnero/api/get_cola.php
index 6b5c500..a41030d 100644
--- a/modules/turnero/api/get_cola.php
+++ b/modules/turnero/api/get_cola.php
@@ -25,7 +25,27 @@ if ($area === 'lugar' && !$lugarId) {
 $pdo = db();
 
 // ── Sesión de hoy ─────────────────────────────────────────────
-$sesionId = obtenerOCrearSesionHoy();
+// Si no existe sesión hoy o está cerrada (fin_at set), pantalla limpia.
+$_ses = sesionHoy();
+$sesionCerrada = (!$_ses || $_ses['fin_at'] !== null);
+// Usar sesion_id real solo si está abierta; 0 hace que las queries devuelvan vacío.
+$sesionId = ($sesionCerrada) ? 0 : (int)$_ses['id'];
+
+if ($sesionCerrada) {
+    jsonOk([
+        'sesion_cerrada' => true,
+        'activo'  => null,
+        'cola'    => [],
+        'stats'   => [
+            'total' => 0, 'en_espera' => 0, 'en_recepcion' => 0,
+            'en_espera_lugar' => 0, 'en_servicio' => 0,
+            'finalizados' => 0, 'no_atendidos' => 0,
+            'tiempo_promedio_atencion' => null,
+        ],
+        'timestamp' => date('c'),
+    ]);
+    exit;
+}
 
 // ── Cola según área ───────────────────────────────────────────
 if ($area === 'recepcion') {
diff --git a/modules/turnero/api/get_display_global.php b/modules/turnero/api/get_display_global.php
index ecc0daf..2c225d5 100644
--- a/modules/turnero/api/get_display_global.php
+++ b/modules/turnero/api/get_display_global.php
@@ -9,8 +9,12 @@
 require_once __DIR__ . '/_helpers.php';
 requireMethod('GET');
 
-$pdo      = db();
-$sesionId = obtenerOCrearSesionHoy();
+$pdo = db();
+
+// Si no hay sesión hoy o está cerrada → $sesionId = 0 (queries devuelven vacío).
+$_ses = sesionHoy();
+$sesionCerrada = (!$_ses || $_ses['fin_at'] !== null);
+$sesionId = ($sesionCerrada) ? 0 : (int)$_ses['id'];
 
 // ── 1. Escritorios de Recepción activos + su turno en_recepcion ─
 // Cada escritorio puede tener un turno distinto (varios recepcionistas).
@@ -175,6 +179,7 @@ $stats = $stmtStats->fetch(PDO::FETCH_ASSOC);
 
 jsonOk([
     'sesion_id'        => $sesionId,
+    'sesion_cerrada'   => $sesionCerrada,
     'activos_recepcion'=> $activosRecepcion,   // array de desks con su turno
     'lugares'          => $lugaresActivos,     // array de estaciones de muestras
     'cola'             => $cola,
diff --git a/modules/turnero/api/get_display_recepcion.php b/modules/turnero/api/get_display_recepcion.php
index 19a52a2..db3c453 100644
--- a/modules/turnero/api/get_display_recepcion.php
+++ b/modules/turnero/api/get_display_recepcion.php
@@ -22,7 +22,20 @@ $desk = $stmtDesk->fetch(PDO::FETCH_ASSOC);
 
 if (!$desk) jsonError('Escritorio no encontrado.', 404);
 
-$sesionId = obtenerOCrearSesionHoy();
+$_ses = sesionHoy();
+$sesionCerrada = (!$_ses || $_ses['fin_at'] !== null);
+if ($sesionCerrada) {
+    jsonOk([
+        'sesion_cerrada' => true,
+        'desk_id'    => (int)$desk['id'],
+        'desk_nombre'=> $desk['nombre'],
+        'turno'      => null,
+        'stats'      => ['en_espera' => 0, 'en_atencion' => 0, 'finalizados' => 0],
+        'timestamp'  => date('c'),
+    ]);
+    exit;
+}
+$sesionId = (int)$_ses['id'];
 
 // Turno activo en este escritorio (el más reciente llamado_recepcion_at)
 $stmtT = $pdo->prepare(
diff --git a/modules/turnero/views/kiosko.php b/modules/turnero/views/kiosko.php
index 25ea320..b6e9038 100644
--- a/modules/turnero/views/kiosko.php
+++ b/modules/turnero/views/kiosko.php
@@ -6,11 +6,27 @@
  */
 require_once __DIR__ . '/../../../config/config.php';
 
-// Cargar prioridades activas desde BD
+// ── Configuración visual del laboratorio ──────────────────────
+$_kioskoCfg = [];
+try {
+    $_kpdo  = Database::getInstance()->getConnection();
+    $_krows = $_kpdo->query(
+        "SELECT clave, valor FROM lab_config
+          WHERE clave IN ('empresa_nombre','doc_logo_base64','doc_color')"
+    )->fetchAll(PDO::FETCH_KEY_PAIR);
+    $_kioskoCfg = $_krows ?: [];
+} catch (\Throwable $_) {}
+
+$_kNombre = htmlspecialchars($_kioskoCfg['empresa_nombre'] ?? 'Laboratorio Clínico');
+$_kLogo   = $_kioskoCfg['doc_logo_base64'] ?? '';
+$_kColor  = preg_match('/^#[0-9a-fA-F]{3,8}$/', $_kioskoCfg['doc_color'] ?? '')
+            ? $_kioskoCfg['doc_color'] : '#1565c0';
+
+// ── Cargar prioridades activas desde BD ───────────────────────
 $prioridades = [];
 try {
-    $pdo  = Database::getInstance()->getConnection();
-    $stmt = $pdo->query(
+    $_pdo  = Database::getInstance()->getConnection();
+    $stmt  = $_pdo->query(
         "SELECT id, codigo, nombre, color, icono, descripcion, orden_peso
            FROM turnero_prioridades
           WHERE activo = 1
@@ -21,11 +37,11 @@ try {
     // Fallback con prioridades por defecto si la BD no está disponible
     $prioridades = [
         ['codigo'=>'A','nombre'=>'Niños',           'color'=>'#ef4444','icono'=>'fas fa-child',          'descripcion'=>'Pacientes menores de edad'],
-        ['codigo'=>'B','nombre'=>'Embarazadas',       'color'=>'#f97316','icono'=>'fas fa-heart',          'descripcion'=>'Mujeres en estado de embarazo'],
-        ['codigo'=>'C','nombre'=>'Adulto mayor',      'color'=>'#eab308','icono'=>'fas fa-person-cane',    'descripcion'=>'Mayores de 60 años'],
-        ['codigo'=>'D','nombre'=>'Discapacidad',      'color'=>'#8b5cf6','icono'=>'fas fa-wheelchair',     'descripcion'=>'Personas con discapacidad'],
-        ['codigo'=>'E','nombre'=>'Paciente general',  'color'=>'#3b82f6','icono'=>'fas fa-user',           'descripcion'=>'Atención general'],
-        ['codigo'=>'F','nombre'=>'Muestra pendiente', 'color'=>'#6b7280','icono'=>'fas fa-vial',           'descripcion'=>'Entrega de muestra tomada'],
+        ['codigo'=>'B','nombre'=>'Embarazadas',      'color'=>'#f97316','icono'=>'fas fa-heart',          'descripcion'=>'Mujeres en estado de embarazo'],
+        ['codigo'=>'C','nombre'=>'Adulto mayor',     'color'=>'#eab308','icono'=>'fas fa-person-cane',    'descripcion'=>'Mayores de 60 años'],
+        ['codigo'=>'D','nombre'=>'Discapacidad',     'color'=>'#8b5cf6','icono'=>'fas fa-wheelchair',     'descripcion'=>'Personas con discapacidad'],
+        ['codigo'=>'E','nombre'=>'Paciente general', 'color'=>'#3b82f6','icono'=>'fas fa-user',           'descripcion'=>'Atención general'],
+        ['codigo'=>'F','nombre'=>'Muestra pendiente','color'=>'#6b7280','icono'=>'fas fa-vial',           'descripcion'=>'Entrega de muestra tomada'],
     ];
 }
 
@@ -50,176 +66,312 @@ unset($p);
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>Kiosko de Turnos</title>
+    <title>Kiosko – <?= $_kNombre ?></title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <style>
+        :root {
+            --brand:       <?= $_kColor ?>;
+            --brand-dark:  color-mix(in srgb, <?= $_kColor ?> 75%, #000);
+            --brand-light: color-mix(in srgb, <?= $_kColor ?> 10%, #fff);
+            --brand-mid:   color-mix(in srgb, <?= $_kColor ?> 22%, #fff);
+        }
+
         /* ── Reset fullscreen ── */
         *, *::before, *::after { box-sizing: border-box; }
         html, body {
             margin: 0; padding: 0;
             height: 100%; width: 100%;
             overflow: hidden;
-            background: #0f172a;
-            color: #f8fafc;
+            background: var(--brand-light);
+            color: #1e293b;
             font-family: 'Segoe UI', system-ui, sans-serif;
             touch-action: manipulation;
             -webkit-tap-highlight-color: transparent;
         }
 
+        /* ── Layout general ── */
+        .kiosko-wrap {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        /* ── Header con logo ── */
+        .kiosko-topbar {
+            background: var(--brand);
+            padding: 14px 28px;
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            flex-shrink: 0;
+            box-shadow: 0 2px 12px rgba(0,0,0,.18);
+        }
+        .kiosko-topbar .logo-img {
+            height: 48px;
+            max-width: 140px;
+            object-fit: contain;
+            filter: brightness(0) invert(1);
+        }
+        .kiosko-topbar .logo-fallback {
+            width: 46px; height: 46px;
+            background: rgba(255,255,255,.2);
+            border-radius: 10px;
+            display: flex; align-items: center; justify-content: center;
+            color: #fff; font-size: 1.3rem;
+        }
+        .kiosko-topbar .lab-nombre {
+            color: #fff;
+            font-size: clamp(1rem, 2.5vw, 1.4rem);
+            font-weight: 700;
+            letter-spacing: -.3px;
+            flex: 1;
+        }
+        .kiosko-topbar .turno-badge {
+            background: rgba(255,255,255,.15);
+            border: 1.5px solid rgba(255,255,255,.3);
+            color: #fff;
+            border-radius: 8px;
+            padding: 4px 12px;
+            font-size: .8rem;
+            font-weight: 600;
+        }
+
         /* ── Pantalla / paso ── */
         .screen {
-            position: fixed; inset: 0;
-            display: flex; flex-direction: column;
-            align-items: center; justify-content: center;
-            padding: 2rem;
-            transition: opacity .35s ease, transform .35s ease;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem 1.5rem;
+            transition: opacity .3s ease, transform .3s ease;
+            overflow: hidden;
         }
-        .screen.hidden   { opacity: 0; pointer-events: none; transform: scale(.97); }
-        .screen.visible  { opacity: 1; pointer-events: all;  transform: scale(1); }
+        .screen.hidden   { opacity: 0; pointer-events: none; transform: scale(.98); position: absolute; }
+        .screen.visible  { opacity: 1; pointer-events: all;  transform: scale(1); position: relative; }
 
-        /* ── Logo / cabecera ── */
-        .kiosko-header { text-align: center; margin-bottom: 2.5rem; }
-        .kiosko-header h1 { font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 700; letter-spacing: -.5px; }
-        .kiosko-header p  { font-size: clamp(.9rem, 2vw, 1.2rem); color: #94a3b8; margin: 0; }
+        /* ── Instrucción central ── */
+        .kiosko-titulo {
+            font-size: clamp(1.4rem, 3.5vw, 2.2rem);
+            font-weight: 700;
+            color: var(--brand-dark);
+            text-align: center;
+            margin-bottom: .4rem;
+        }
+        .kiosko-subtitulo {
+            font-size: clamp(.85rem, 1.8vw, 1.05rem);
+            color: #64748b;
+            text-align: center;
+            margin-bottom: 2rem;
+        }
 
-        /* ── Botones de prioridad ── */
+        /* ── Grid de prioridades ── */
         .prioridad-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
             gap: 1rem;
             width: 100%;
-            max-width: 900px;
+            max-width: 860px;
         }
         .btn-prioridad {
-            border: none; border-radius: 16px;
+            border: 2px solid transparent;
+            border-radius: 18px;
             padding: 1.6rem 1.2rem;
             cursor: pointer;
             display: flex; flex-direction: column;
             align-items: center; justify-content: center;
-            gap: .6rem;
+            gap: .5rem;
             transition: transform .12s, box-shadow .12s, filter .12s;
-            color: #fff; font-weight: 600;
-            box-shadow: 0 4px 20px rgba(0,0,0,.35);
+            font-weight: 600;
+            box-shadow: 0 2px 12px rgba(0,0,0,.10);
             -webkit-user-select: none; user-select: none;
+            background: #fff;
         }
-        .btn-prioridad:active  { transform: scale(.95); filter: brightness(.88); }
-        .btn-prioridad .letra  { font-size: clamp(2rem, 6vw, 4rem); line-height: 1; font-weight: 800; }
-        .btn-prioridad .nombre { font-size: clamp(.85rem, 2vw, 1.1rem); text-align: center; line-height: 1.2; }
-        .btn-prioridad .desc   { font-size: clamp(.7rem, 1.5vw, .85rem); opacity: .8; text-align: center; }
-        .btn-prioridad i       { font-size: clamp(1.4rem, 3.5vw, 2.2rem); }
+        .btn-prioridad:active  { transform: scale(.95); filter: brightness(.93); }
+        .btn-prioridad:hover   { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.13); }
+        .btn-prioridad .icon-wrap {
+            width: 52px; height: 52px;
+            border-radius: 14px;
+            display: flex; align-items: center; justify-content: center;
+            font-size: 1.5rem;
+            color: #fff;
+            margin-bottom: .2rem;
+        }
+        .btn-prioridad .letra  { font-size: clamp(1rem, 2.5vw, 1.4rem); font-weight: 800; color: #1e293b; }
+        .btn-prioridad .nombre { font-size: clamp(.82rem, 1.8vw, 1rem); color: #334155; text-align: center; }
+        .btn-prioridad .desc   { font-size: clamp(.68rem, 1.3vw, .8rem); color: #94a3b8; text-align: center; }
 
-        /* ── Formulario opcional ── */
-        .form-kiosko { width: 100%; max-width: 520px; }
-        .form-kiosko label   { color: #cbd5e1; font-size: 1rem; margin-bottom: .35rem; }
+        /* ── Formulario de datos ── */
+        .form-kiosko { width: 100%; max-width: 480px; }
+        .badge-prio-mini {
+            display: inline-flex; align-items: center; gap: 8px;
+            padding: .45rem 1.2rem; border-radius: 99px;
+            font-size: 1rem; font-weight: 700; color: #fff;
+            margin-bottom: 1.5rem;
+        }
+        .form-kiosko label { color: #475569; font-size: .95rem; margin-bottom: .35rem; font-weight: 500; }
         .form-kiosko .form-control {
-            background: #1e293b; border: 1.5px solid #334155;
-            color: #f8fafc; border-radius: 12px;
-            padding: .8rem 1rem; font-size: 1.1rem;
+            background: #fff;
+            border: 1.5px solid #e2e8f0;
+            color: #1e293b;
+            border-radius: 14px;
+            padding: .85rem 1.1rem;
+            font-size: 1.05rem;
+            box-shadow: 0 1px 4px rgba(0,0,0,.05);
+            transition: border-color .2s, box-shadow .2s;
         }
         .form-kiosko .form-control:focus {
-            background: #1e293b; border-color: #60a5fa;
-            box-shadow: 0 0 0 3px rgba(96,165,250,.2); color: #f8fafc;
+            border-color: var(--brand);
+            box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
+            outline: none;
         }
-        .form-kiosko .hint { color: #64748b; font-size: .85rem; margin-top: .4rem; }
+        .form-kiosko .hint { color: #94a3b8; font-size: .82rem; margin-top: .35rem; }
         .btn-kiosko-main {
             border: none; border-radius: 14px;
-            padding: 1rem 2.5rem; font-size: 1.15rem; font-weight: 700;
+            padding: 1rem 2rem; font-size: 1.05rem; font-weight: 700;
             cursor: pointer; color: #fff;
-            background: linear-gradient(135deg, #3b82f6, #6366f1);
-            box-shadow: 0 4px 16px rgba(99,102,241,.4);
-            transition: transform .12s, box-shadow .12s;
+            background: var(--brand);
+            box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 40%, transparent);
+            transition: transform .12s, box-shadow .12s, filter .12s;
             width: 100%; margin-top: 1rem;
         }
-        .btn-kiosko-main:active { transform: scale(.97); }
+        .btn-kiosko-main:active { transform: scale(.97); filter: brightness(.9); }
         .btn-kiosko-back {
-            background: transparent; border: 1.5px solid #475569;
+            background: transparent;
+            border: 1.5px solid #e2e8f0;
             color: #94a3b8; border-radius: 12px; padding: .7rem 1.5rem;
-            font-size: .95rem; cursor: pointer; margin-top: .6rem; width: 100%;
-            transition: background .12s;
+            font-size: .92rem; cursor: pointer; margin-top: .6rem; width: 100%;
+            transition: background .12s, border-color .12s;
         }
-        .btn-kiosko-back:active { background: #1e293b; }
+        .btn-kiosko-back:hover { background: var(--brand-mid); border-color: var(--brand); color: var(--brand-dark); }
 
-        /* ── Pantalla de ticket ── */
+        /* ── Ticket ── */
         .ticket-box {
-            background: #1e293b; border-radius: 24px;
-            padding: 2.5rem 3rem; text-align: center;
-            box-shadow: 0 8px 40px rgba(0,0,0,.5);
-            max-width: 480px; width: 100%;
+            background: #fff;
+            border-radius: 24px;
+            padding: 2.5rem 3rem;
+            text-align: center;
+            box-shadow: 0 4px 30px rgba(0,0,0,.10);
+            max-width: 460px; width: 100%;
+            border-top: 6px solid var(--brand);
         }
+        .ticket-label { color: #94a3b8; font-size: .85rem; text-transform: uppercase;
+                        letter-spacing: .08em; margin-bottom: .3rem; }
         .ticket-codigo {
             font-size: clamp(4rem, 18vw, 9rem);
             font-weight: 900; line-height: 1;
             letter-spacing: -2px;
+            color: var(--brand);
         }
-        .ticket-subtitle { color: #94a3b8; font-size: 1rem; margin-top: .5rem; }
-        .ticket-prioridad { font-size: 1.05rem; margin-top: .8rem; }
-        .ticket-numero { font-size: 2rem; font-weight: 700; color: #e2e8f0; }
-        .ticket-instruc {
-            margin-top: 1.5rem; color: #64748b; font-size: .9rem; line-height: 1.5;
+        .ticket-prio-badge {
+            display: inline-block; padding: .3rem 1.1rem;
+            border-radius: 99px; font-weight: 700; color: #fff;
+            font-size: .95rem; margin-top: .8rem;
         }
+        .ticket-pos {
+            margin-top: 1.2rem;
+            background: var(--brand-light);
+            border-radius: 12px;
+            padding: .8rem;
+        }
+        .ticket-pos .lbl { font-size: .78rem; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
+        .ticket-pos .num { font-size: 1.8rem; font-weight: 800; color: var(--brand-dark); }
+        .ticket-instruc { margin-top: 1.4rem; color: #94a3b8; font-size: .88rem; line-height: 1.5; }
         .btn-nuevo {
-            margin-top: 2rem; border: none; border-radius: 14px;
-            padding: .85rem 2rem; font-size: 1rem; font-weight: 600;
-            cursor: pointer; color: #fff;
-            background: #475569;
-            transition: background .15s;
+            margin-top: 1.8rem; border: 2px solid var(--brand-mid);
+            border-radius: 12px; padding: .75rem 2rem;
+            font-size: .95rem; font-weight: 600; cursor: pointer;
+            color: var(--brand-dark); background: #fff;
+            transition: background .15s, border-color .15s;
         }
-        .btn-nuevo:hover { background: #64748b; }
+        .btn-nuevo:hover { background: var(--brand-light); border-color: var(--brand); }
 
         /* ── Spinner ── */
         .spinner-overlay {
             position: fixed; inset: 0;
-            background: rgba(15,23,42,.75);
+            background: rgba(248,250,252,.8);
             display: flex; align-items: center; justify-content: center;
             z-index: 999; opacity: 0; pointer-events: none;
             transition: opacity .2s;
         }
         .spinner-overlay.active { opacity: 1; pointer-events: all; }
-        .spinner { width: 56px; height: 56px; border: 5px solid #334155;
-                   border-top-color: #60a5fa; border-radius: 50%; animation: spin .8s linear infinite; }
+        .spinner {
+            width: 52px; height: 52px;
+            border: 4px solid var(--brand-mid);
+            border-top-color: var(--brand);
+            border-radius: 50%;
+            animation: spin .75s linear infinite;
+        }
         @keyframes spin { to { transform: rotate(360deg); } }
 
-        /* ── Error toast ── */
+        /* ── Toast de error ── */
         .toast-error {
             position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
-            background: #ef4444; color: #fff; padding: .8rem 1.6rem;
-            border-radius: 12px; font-size: .95rem; font-weight: 600;
-            box-shadow: 0 4px 20px rgba(0,0,0,.4);
+            background: #ef4444; color: #fff; padding: .75rem 1.5rem;
+            border-radius: 12px; font-size: .92rem; font-weight: 600;
+            box-shadow: 0 4px 20px rgba(0,0,0,.2);
             opacity: 0; pointer-events: none; transition: opacity .25s;
             z-index: 1000; white-space: nowrap;
         }
         .toast-error.show { opacity: 1; }
 
-        /* ── Responsive: pantalla grande (TV táctil) ── */
+        /* ── Footer discreto ── */
+        .kiosko-footer {
+            text-align: center;
+            padding: 8px;
+            font-size: .7rem;
+            color: color-mix(in srgb, var(--brand) 55%, #fff);
+            background: var(--brand-mid);
+            flex-shrink: 0;
+        }
+
+        /* ── Responsive ── */
         @media (min-height: 800px) {
-            .prioridad-grid { gap: 1.4rem; }
-            .btn-prioridad { padding: 2rem 1.5rem; }
+            .prioridad-grid { gap: 1.3rem; }
+            .btn-prioridad { padding: 1.9rem 1.4rem; }
+        }
+        @media (max-width: 480px) {
+            .kiosko-topbar { padding: 10px 16px; }
+            .ticket-box { padding: 1.8rem 1.5rem; }
         }
     </style>
 </head>
 <body>
 
+<div class="kiosko-wrap">
+
+<!-- ══ Top bar con logo ════════════════════════════════════════ -->
+<header class="kiosko-topbar">
+    <?php if ($_kLogo): ?>
+    <img src="<?= htmlspecialchars($_kLogo) ?>" alt="Logo" class="logo-img">
+    <?php else: ?>
+    <div class="logo-fallback"><i class="fas fa-flask"></i></div>
+    <?php endif; ?>
+    <div class="lab-nombre"><?= $_kNombre ?></div>
+    <div class="turno-badge"><i class="fas fa-ticket-alt me-1"></i>Turnero</div>
+</header>
+
+
 <!-- ══ PASO 1: Selección de prioridad ══════════════════════════ -->
 <div id="screen-prio" class="screen visible">
-    <div class="kiosko-header">
-        <i class="fas fa-ticket-alt fa-2x mb-3" style="color:#60a5fa"></i>
-        <h1>Solicitar Turno</h1>
-        <p>Seleccione su tipo de atención</p>
-    </div>
-
+    <div class="kiosko-titulo">Seleccione su tipo de atención</div>
+    <div class="kiosko-subtitulo">Toque la categoría que le corresponde para obtener su turno</div>
     <div class="prioridad-grid">
         <?php foreach ($prioridades as $prio): ?>
         <button
             class="btn-prioridad"
-            style="background: <?= htmlspecialchars($prio['color']) ?>;"
+            style="border-color:<?= htmlspecialchars($prio['color']) ?>22"
             data-codigo="<?= htmlspecialchars($prio['codigo']) ?>"
             data-nombre="<?= htmlspecialchars($prio['nombre']) ?>"
             data-color="<?= htmlspecialchars($prio['color']) ?>"
             onclick="seleccionarPrioridad(this)"
         >
-            <i class="<?= htmlspecialchars($prio['icono']) ?>"></i>
-            <span class="letra"><?= htmlspecialchars($prio['codigo']) ?></span>
+            <div class="icon-wrap" style="background:<?= htmlspecialchars($prio['color']) ?>">
+                <i class="<?= htmlspecialchars($prio['icono']) ?>"></i>
+            </div>
+            <span class="letra" style="color:<?= htmlspecialchars($prio['color']) ?>"><?= htmlspecialchars($prio['codigo']) ?></span>
             <span class="nombre"><?= htmlspecialchars($prio['nombre']) ?></span>
             <?php if (!empty($prio['descripcion'])): ?>
             <span class="desc"><?= htmlspecialchars($prio['descripcion']) ?></span>
@@ -231,33 +383,31 @@ unset($p);
 
 <!-- ══ PASO 2: Datos del paciente ═══════════════════════════════ -->
 <div id="screen-datos" class="screen hidden">
-    <div class="kiosko-header">
-        <div id="badge-prio" style="display:inline-block; padding:.5rem 1.4rem; border-radius:40px; font-size:1.2rem; font-weight:700; margin-bottom:1rem;"></div>
-        <h1>Ingresa tu cédula</h1>
-        <p>Escribe tu número de documento de identidad</p>
-    </div>
+    <div id="badge-prio" class="badge-prio-mini"></div>
+    <div class="kiosko-titulo">Ingrese su número de cédula</div>
+    <div class="kiosko-subtitulo">Le ayudará a identificar su turno correctamente</div>
 
     <div class="form-kiosko">
-        <div class="mb-4">
+        <div class="mb-3">
             <label for="inp-cedula">Número de cédula <span style="color:#ef4444">*</span></label>
             <input type="text" id="inp-cedula" class="form-control"
                    placeholder="Ej: 1234567890" maxlength="20"
                    autocomplete="off" inputmode="numeric">
         </div>
-        <div class="mb-4">
+        <div class="mb-3">
             <label for="inp-cel">WhatsApp
-                <span style="color:#64748b;font-size:.85rem;font-weight:400"> (opcional)</span>
+                <span style="color:#94a3b8;font-size:.82rem;font-weight:400"> (opcional)</span>
             </label>
             <input type="tel" id="inp-cel" class="form-control"
                    placeholder="Ej: 3001234567" maxlength="20"
                    autocomplete="off" inputmode="numeric">
-            <div class="hint">Para recibir notificaciones de su turno</div>
+            <div class="hint"><i class="fas fa-bell me-1"></i>Para recibir notificaciones de su turno</div>
         </div>
         <button class="btn-kiosko-main" onclick="confirmarTurno()">
             <i class="fas fa-ticket-alt me-2"></i>Obtener mi turno
         </button>
         <button class="btn-kiosko-back" onclick="volverPrioridades()">
-            <i class="fas fa-arrow-left me-1"></i>Cambiar tipo
+            <i class="fas fa-arrow-left me-1"></i>Cambiar tipo de atención
         </button>
     </div>
 </div>
@@ -265,13 +415,15 @@ unset($p);
 <!-- ══ PASO 3: Ticket asignado ══════════════════════════════════ -->
 <div id="screen-ticket" class="screen hidden">
     <div class="ticket-box">
-        <div class="ticket-subtitle">Su número de turno es</div>
+        <div class="ticket-label">Su número de turno es</div>
         <div id="tick-codigo" class="ticket-codigo">—</div>
-        <div id="tick-prioridad" class="ticket-prioridad"></div>
-        <div class="ticket-subtitle mt-2">Posición en cola</div>
-        <div id="tick-posicion" class="ticket-numero">—</div>
+        <div id="tick-prio-badge"></div>
+        <div class="ticket-pos">
+            <div class="lbl">Posición en cola</div>
+            <div class="num" id="tick-posicion">—</div>
+        </div>
         <div class="ticket-instruc">
-            Por favor espere ser llamado.<br>
+            Por favor espere a ser llamado.<br>
             Recuerde traer su documento de identidad y la orden médica.
         </div>
     </div>
@@ -280,23 +432,24 @@ unset($p);
     </button>
 </div>
 
-<!-- ══ Spinner de carga ════════════════════════════════════════ -->
-<div class="spinner-overlay" id="spinner">
-    <div class="spinner"></div>
-</div>
+<!-- ══ Footer ═════════════════════════════════════════════════ -->
+<footer class="kiosko-footer"><?= $_kNombre ?> · Sistema de Turnos</footer>
+
+</div><!-- /kiosko-wrap -->
+
+<!-- ══ Spinner ════════════════════════════════════════════════ -->
+<div class="spinner-overlay" id="spinner"><div class="spinner"></div></div>
 
 <!-- ══ Toast de error ════════════════════════════════════════ -->
 <div class="toast-error" id="toast-error"></div>
 
 <script>
-    // ── Estado local ──────────────────────────────────────────
     let prioCodigo = '';
     let prioNombre = '';
     let prioColor  = '';
 
     const API_URL = '<?= BASE_URL ?>modules/turnero/api/create_turno.php';
 
-    // ── Navegación entre pasos ────────────────────────────────
     function mostrar(id) {
         document.querySelectorAll('.screen').forEach(s => {
             s.classList.toggle('visible', s.id === id);
@@ -309,57 +462,34 @@ unset($p);
         prioNombre = btn.dataset.nombre;
         prioColor  = btn.dataset.color;
 
-        document.getElementById('badge-prio').textContent = prioCodigo + ' — ' + prioNombre;
-        document.getElementById('badge-prio').style.background = prioColor;
+        const badge = document.getElementById('badge-prio');
+        badge.textContent = prioCodigo + ' — ' + prioNombre;
+        badge.style.background = prioColor;
 
         mostrar('screen-datos');
         document.getElementById('inp-cedula').focus();
     }
 
-    function volverPrioridades() {
-        mostrar('screen-prio');
-    }
+    function volverPrioridades() { mostrar('screen-prio'); }
 
-    // ── Crear turno ───────────────────────────────────────────
     async function confirmarTurno() {
         const cedula = document.getElementById('inp-cedula').value.trim();
         const cel    = document.getElementById('inp-cel').value.trim();
 
-        if (!cedula) {
-            mostrarError('Por favor ingresa tu número de cédula.');
-            return;
-        }
-        if (!/^\d{5,15}$/.test(cedula)) {
-            mostrarError('La cédula debe contener solo dígitos (mínimo 5).');
-            return;
-        }
-        if (cel && !/^\+?\d{7,15}$/.test(cel.replace(/\s/g, ''))) {
-            mostrarError('Ingresa un número de WhatsApp válido.');
-            return;
-        }
+        if (!cedula) { mostrarError('Por favor ingrese su número de cédula.'); return; }
+        if (!/^\d{5,15}$/.test(cedula)) { mostrarError('La cédula debe tener solo dígitos (mínimo 5).'); return; }
+        if (cel && !/^\+?\d{7,15}$/.test(cel.replace(/\s/g,''))) { mostrarError('Ingrese un número de WhatsApp válido.'); return; }
 
         setSpinner(true);
-
         try {
             const res  = await fetch(API_URL, {
                 method:  'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    prioridad_codigo: prioCodigo,
-                    paciente_nombre:  cedula,   // se guarda como referencia de identificación
-                    paciente_cel:     cel || null,
-                }),
+                body: JSON.stringify({ prioridad_codigo: prioCodigo, paciente_nombre: cedula, paciente_cel: cel || null }),
             });
-
             const json = await res.json();
-
-            if (!json.ok) {
-                throw new Error(json.error ?? 'Error al crear turno');
-            }
-
-            const t = json.turno ?? json.data?.turno;
-            mostrarTicket(t);
-
+            if (!json.ok) throw new Error(json.error ?? 'Error al crear turno');
+            mostrarTicket(json.turno ?? json.data?.turno);
         } catch (err) {
             mostrarError(err.message);
         } finally {
@@ -367,34 +497,26 @@ unset($p);
         }
     }
 
-    // ── Mostrar ticket ────────────────────────────────────────
     function mostrarTicket(t) {
-        document.getElementById('tick-codigo').textContent   = t.codigo;
-        document.getElementById('tick-codigo').style.color   = prioColor;
-        document.getElementById('tick-prioridad').innerHTML  =
-            '<span style="background:' + prioColor + ';padding:.3rem .9rem;border-radius:20px;font-weight:700;">'
-            + prioCodigo + ' — ' + prioNombre + '</span>';
+        document.getElementById('tick-codigo').textContent  = t.codigo;
+        document.getElementById('tick-codigo').style.color  = prioColor;
         document.getElementById('tick-posicion').textContent = '#' + t.posicion_cola;
+        document.getElementById('tick-prio-badge').innerHTML =
+            `<span class="ticket-prio-badge" style="background:${prioColor}">${prioCodigo} — ${prioNombre}</span>`;
         mostrar('screen-ticket');
-
-        // Auto-reinicio tras 30 s para liberar el kiosko
-        clearTimeout(window._reinicioTimer);
-        window._reinicioTimer = setTimeout(reiniciar, 30000);
+        clearTimeout(window._timer);
+        window._timer = setTimeout(reiniciar, 30000);
     }
 
-    // ── Reinicio ──────────────────────────────────────────────
     function reiniciar() {
-        clearTimeout(window._reinicioTimer);
+        clearTimeout(window._timer);
         document.getElementById('inp-cedula').value = '';
         document.getElementById('inp-cel').value    = '';
         prioCodigo = prioNombre = prioColor = '';
         mostrar('screen-prio');
     }
 
-    // ── Utilidades ────────────────────────────────────────────
-    function setSpinner(on) {
-        document.getElementById('spinner').classList.toggle('active', on);
-    }
+    function setSpinner(on) { document.getElementById('spinner').classList.toggle('active', on); }
 
     function mostrarError(msg) {
         const el = document.getElementById('toast-error');
@@ -405,3 +527,4 @@ unset($p);
 </script>
 </body>
 </html>
+
diff --git a/modules/turnero/views/lugar.php b/modules/turnero/views/lugar.php
index 3727bf8..c92e76f 100644
--- a/modules/turnero/views/lugar.php
+++ b/modules/turnero/views/lugar.php
@@ -120,16 +120,19 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
         /* ── Consentimientos ── */
         .consent-row {
             display: flex; align-items: center; gap: .6rem;
-            padding: .5rem .65rem; border-radius: 8px; margin-bottom: .35rem;
-            font-size: .85rem;
+            padding: .55rem .7rem; border-radius: 10px; margin-bottom: .4rem;
+            font-size: .84rem; border: 1px solid transparent;
         }
-        .consent-row.firmado   { background: #f0fdf4; color: #166534; }
-        .consent-row.rechazado { background: #f1f5f9; color: #475569; }
-        .consent-row.enviado   { background: #eff6ff; color: #1e40af; }
-        .consent-row.pendiente { background: #fffbeb; color: #92400e; }
-        .consent-row.visto     { background: #faf5ff; color: #6b21a8; }
-        .consent-row .nom-form { flex: 1; }
-        .consent-row .acciones-consent { display: flex; gap: .4rem; }
+        .consent-row.firmado   { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
+        .consent-row.rechazado { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
+        .consent-row.enviado   { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
+        .consent-row.pendiente { background: #fffbeb; color: #92400e; border-color: #fde68a; }
+        .consent-row.visto     { background: #faf5ff; color: #6b21a8; border-color: #ddd6fe; }
+        .consent-row .nom-form { flex: 1; font-weight: 500; }
+        .consent-row .c-badge  { font-size: .68rem; padding: 1px 8px; border-radius: 99px;
+                                  border: 1px solid currentColor; font-weight: 700; opacity: .85; }
+        .consent-row .acciones-consent { display: flex; gap: .3rem; flex-shrink: 0; }
+        .consent-row .acciones-consent .btn { font-size: .72rem; padding: 2px 9px; border-radius: 7px; }
 
         /* ── Barra de acciones ── */
         .ficha-acciones {
@@ -518,6 +521,14 @@ async function cargarFichaSolicitud(turnoId) {
 }
 
 // ── Consentimientos ───────────────────────────────────────────
+const CONSENT_IC = {
+    firmado:'fa-check-circle', rechazado:'fa-ban',
+    enviado:'fa-envelope', visto:'fa-eye', pendiente:'fa-clock',
+};
+const CONSENT_LBL = {
+    firmado:'Firmado', rechazado:'Rechazado', enviado:'Enviado', visto:'Visto', pendiente:'Pendiente',
+};
+
 function renderConsentimientos(lista) {
     tieneConsent  = lista.length > 0;
     hayPendientes = lista.some(c => !['firmado', 'rechazado'].includes(c.estado));
@@ -541,35 +552,37 @@ function renderConsentimientos(lista) {
     btnIni.disabled = hayPendientes;
 
     listEl.innerHTML = lista.map(c => {
-        const cls = c.estado;
-        const ico = c.estado === 'firmado'   ? 'fa-check-circle'
-                  : c.estado === 'rechazado' ? 'fa-ban'
-                  : c.estado === 'enviado'   ? 'fa-envelope'
-                  : c.estado === 'visto'     ? 'fa-eye'
-                  : 'fa-clock';
-        const label = c.estado === 'firmado'   ? 'Firmado'
-                    : c.estado === 'rechazado' ? 'Rechazado'
-                    : c.estado === 'enviado'   ? 'Enviado'
-                    : c.estado === 'visto'     ? 'Visto'
-                    : 'Pendiente';
+        const ya    = ['firmado','rechazado'].includes(c.estado);
+        const ico   = CONSENT_IC[c.estado]  || 'fa-clock';
+        const label = CONSENT_LBL[c.estado] || c.estado;
+        const token = escHtml(c.token || '');
+        const nomJs = JSON.stringify(c.formulario_nombre || 'Consentimiento');
+        const idJs  = parseInt(c.id) || 0;
+        const tId   = parseInt(c.turno_id) || (turnoActivo?.id) || 0;
 
-        const botonesAccion = !['firmado','rechazado'].includes(c.estado) ? `
-            <div class="acciones-consent">
-                <button class="btn btn-outline-secondary btn-sm py-0" title="Reenviar WhatsApp"
-                        onclick="reenviarConsentimiento(${c.turno_id})">
-                    <i class="fas fa-paper-plane" style="font-size:.75rem"></i>
-                </button>
-                <button class="btn btn-outline-primary btn-sm py-0" title="Firmar presencialmente"
-                        onclick="abrirFirmaPresencial('${c.token}', ${c.id}, ${JSON.stringify(c.formulario_nombre).replace(/"/g,'&quot;')})">
-                    <i class="fas fa-signature" style="font-size:.75rem"></i> Firmar aquí
-                </button>
-            </div>` : '';
+        // Firmar aquí: solo si no completado y hay token
+        const btnFirmar = (!ya && c.token)
+            ? `<button class="btn btn-outline-primary" title="Firmar aquí"
+                       onclick="abrirFirmaPresencial('${token}', ${idJs}, ${nomJs.replace(/"/g,'&quot;')})">
+                   <i class="fas fa-signature"></i> Firmar
+               </button>` : '';
 
-        return `<div class="consent-row ${cls}" data-consent-id="${c.id}">
+        // WA / Ver: según estado
+        const btnWa = ya
+            ? (c.token ? `<button class="btn btn-outline-secondary" title="Ver firmado"
+                       onclick="window.open(BASE_WA+'ver_formulario_enviado.php?token='+encodeURIComponent('${token}'),'_blank')">
+                   <i class="fas fa-eye"></i> Ver
+               </button>` : '')
+            : `<button class="btn btn-outline-success" title="Reenviar por WhatsApp"
+                       onclick="reenviarConsentimiento(${tId})">
+                   <i class="fab fa-whatsapp"></i> WA
+               </button>`;
+
+        return `<div class="consent-row ${c.estado}" data-consent-id="${c.id}">
             <i class="fas ${ico}"></i>
             <span class="nom-form">${escHtml(c.formulario_nombre || 'Consentimiento')}</span>
-            <span class="badge">${escHtml(label)}</span>
-            ${botonesAccion}
+            <span class="c-badge">${label}</span>
+            <div class="acciones-consent">${btnFirmar}${btnWa}</div>
         </div>`;
     }).join('');
 }
diff --git a/modules/turnero/views/recepcion.php b/modules/turnero/views/recepcion.php
index c92dbcb..e4ca094 100644
--- a/modules/turnero/views/recepcion.php
+++ b/modules/turnero/views/recepcion.php
@@ -147,13 +147,41 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
 
         /* ── Consentimientos ── */
         .consent-item {
-            display: flex; align-items: center; gap: .6rem;
-            padding: .4rem .6rem; border-radius: 8px;
-            font-size: .85rem; margin-bottom: .3rem;
+            display: flex; align-items: center; gap: .5rem;
+            padding: .5rem .7rem; border-radius: 10px;
+            font-size: .84rem; margin-bottom: .4rem;
+            border: 1px solid transparent;
         }
-        .consent-item.firmado  { background: #f0fdf4; color: #166534; }
-        .consent-item.pendiente{ background: #fffbeb; color: #92400e; }
-        .consent-item.enviado  { background: #eff6ff; color: #1e40af; }
+        .consent-item.firmado   { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
+        .consent-item.pendiente { background: #fffbeb; color: #92400e; border-color: #fde68a; }
+        .consent-item.enviado   { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
+        .consent-item.visto     { background: #faf5ff; color: #6b21a8; border-color: #ddd6fe; }
+        .consent-item.rechazado { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
+        .consent-item .c-nom    { flex: 1; font-weight: 500; }
+        .consent-item .c-badge  { font-size: .7rem; font-weight: 700; padding: 1px 8px;
+                                   border-radius: 99px; border: 1px solid currentColor; opacity: .85; }
+        .consent-acciones       { display: flex; gap: .3rem; flex-shrink: 0; }
+        .consent-acciones .btn  { font-size: .72rem; padding: 2px 8px; border-radius: 7px; }
+
+        /* ── Modal firma presencial ── */
+        .modal-firma-backdrop {
+            display: none; position: fixed; inset: 0;
+            background: rgba(15,23,42,.65); z-index: 1050;
+            align-items: center; justify-content: center;
+        }
+        .modal-firma-backdrop.open { display: flex; }
+        .modal-firma-box {
+            background: #fff; border-radius: 16px;
+            width: min(94vw, 860px); height: min(88vh, 720px);
+            display: flex; flex-direction: column; overflow: hidden;
+            box-shadow: 0 8px 40px rgba(0,0,0,.35);
+        }
+        .modal-firma-hdr {
+            padding: 12px 18px; border-bottom: 1px solid #e2e8f0;
+            display: flex; align-items: center; justify-content: space-between;
+            font-size: .95rem; font-weight: 600; flex-shrink: 0;
+        }
+        .modal-firma-box iframe { flex: 1; border: 0; }
 
         /* ── Barra de acciones ── */
         .ficha-acciones {
@@ -344,12 +372,15 @@ require_once __DIR__ . '/../../../shared/components/sidebar.php';
 
                 <!-- ── Sección 5: Consentimientos ── -->
                 <div class="ficha-section" id="sec-consentimientos" style="display:none!important">
-                    <h6><i class="fas fa-file-signature me-1"></i>Consentimientos</h6>
+                    <div class="d-flex align-items-center justify-content-between mb-2">
+                        <h6 class="mb-0"><i class="fas fa-file-signature me-1"></i>Consentimientos informados</h6>
+                        <button class="btn btn-sm btn-outline-primary py-0 px-2"
+                                id="btn-reenviar-consent" onclick="enviarConsentimientosTodos()"
+                                title="Enviar todos por WhatsApp">
+                            <i class="fas fa-paper-plane me-1"></i>Enviar todos
+                        </button>
+                    </div>
                     <div id="lista-consentimientos"></div>
-                    <button class="btn btn-outline-primary btn-sm mt-2"
-                            id="btn-reenviar-consent" onclick="enviarConsentimientos()">
-                        <i class="fas fa-paper-plane me-1"></i>Enviar / Reenviar por WhatsApp
-                    </button>
                 </div>
 
                 <!-- ── Acciones ── -->
@@ -373,6 +404,19 @@ require_once __DIR__ . '/../../../shared/components/sidebar.php';
     </div><!-- /rec-layout -->
 </main>
 
+<!-- ══ Modal firma presencial ═════════════════════════════════ -->
+<div class="modal-firma-backdrop" id="modal-firma-rec">
+    <div class="modal-firma-box">
+        <div class="modal-firma-hdr">
+            <span><i class="fas fa-signature me-2 text-primary"></i><span id="modal-firma-titulo-rec">Firmar consentimiento</span></span>
+            <button class="btn btn-sm btn-outline-secondary" onclick="cerrarModalFirmaRec()">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <iframe id="firma-iframe-rec" src="" title="Formulario de consentimiento"></iframe>
+    </div>
+</div>
+
 <script>
 // ── Estado ────────────────────────────────────────────────────
 let turnoActivo     = null;
@@ -650,26 +694,93 @@ async function guardarSolicitud() {
     }
 }
 
+// ── Labels / iconos para estados ─────────────────────────────
+const CONSENT_META = {
+    firmado   : { cls:'firmado',   ico:'fa-check-circle', lbl:'Firmado'   },
+    enviado   : { cls:'enviado',   ico:'fa-envelope',     lbl:'Enviado'   },
+    visto     : { cls:'visto',     ico:'fa-eye',          lbl:'Visto'     },
+    rechazado : { cls:'rechazado', ico:'fa-ban',          lbl:'Rechazado' },
+    pendiente : { cls:'pendiente', ico:'fa-clock',        lbl:'Pendiente' },
+};
+
 function renderConsentimientos(lista) {
-    document.getElementById('lista-consentimientos').innerHTML = lista.map(c => {
-        const cls = c.estado === 'firmado'  ? 'firmado'
-                  : c.estado === 'enviado'  ? 'enviado'
-                  : 'pendiente';
-        const ico = c.estado === 'firmado'  ? 'fa-check-circle'
-                  : c.estado === 'enviado'  ? 'fa-envelope'
-                  : 'fa-clock';
-        return `<div class="consent-item ${cls}">
-            <i class="fas ${ico}"></i>
-            <span class="flex-1">${escHtml(c.formulario_nombre || 'Consentimiento')}</span>
-            <span class="badge">${escHtml(c.estado)}</span>
+    const el = document.getElementById('lista-consentimientos');
+    if (!lista.length) {
+        el.innerHTML = '<div class="text-muted small"><i class="fas fa-check-circle text-success me-1"></i>Sin consentimientos requeridos</div>';
+        return;
+    }
+    el.innerHTML = lista.map(c => {
+        const m   = CONSENT_META[c.estado] || CONSENT_META.pendiente;
+        const ya  = ['firmado','rechazado'].includes(c.estado);
+        const token = escHtml(c.token || '');
+        const nom   = escHtml(c.formulario_nombre || 'Consentimiento');
+        const nomJs = JSON.stringify(c.formulario_nombre || 'Consentimiento');
+
+        // Botón de firma (solo si no está firmado/rechazado)
+        const btnFirmar = (!ya && c.token)
+            ? `<button class="btn btn-outline-primary" onclick="abrirFirmaPresencialRec('${token}', ${nomJs})"
+                       title="Firmar aquí en pantalla">
+                   <i class="fas fa-signature"></i> Firmar
+               </button>` : '';
+
+        // Botón enviar/reenviar WhatsApp
+        const btnWa = ya
+            ? (c.token ? `<button class="btn btn-outline-secondary" onclick="verFirmado('${token}')" title="Ver formulario firmado">
+                   <i class="fas fa-eye"></i> Ver
+               </button>` : '')
+            : `<button class="btn btn-outline-success" onclick="enviarConsentimientoUno(${c.turno_id || turnoActivo?.id})"
+                       title="Enviar enlace de firma por WhatsApp">
+                   <i class="fab fa-whatsapp"></i> WhatsApp
+               </button>`;
+
+        return `<div class="consent-item ${m.cls}">
+            <i class="fas ${m.ico}"></i>
+            <span class="c-nom">${nom}</span>
+            <span class="c-badge">${m.lbl}</span>
+            <div class="consent-acciones">${btnFirmar}${btnWa}</div>
         </div>`;
     }).join('');
 }
 
-// ── Enviar consentimientos ────────────────────────────────────
-async function enviarConsentimientos() {
+// ── Firmar presencialmente (modal iframe) ─────────────────────
+function abrirFirmaPresencialRec(token, nombreForm) {
+    const url = BASE_WA + 'ver_formulario_enviado.php?token=' + encodeURIComponent(token);
+    document.getElementById('modal-firma-titulo-rec').textContent = 'Firmar: ' + nombreForm;
+    document.getElementById('firma-iframe-rec').src = url;
+    document.getElementById('modal-firma-rec').classList.add('open');
+}
+function cerrarModalFirmaRec() {
+    document.getElementById('modal-firma-rec').classList.remove('open');
+    document.getElementById('firma-iframe-rec').src = '';
+    // Refrescar consentimientos al cerrar
+    if (turnoActivo) refrescarConsentimientos(turnoActivo.id);
+}
+function verFirmado(token) {
+    window.open(BASE_WA + 'ver_formulario_enviado.php?token=' + encodeURIComponent(token), '_blank');
+}
+// Cerrar modal al clic fuera
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('modal-firma-rec').addEventListener('click', function(e) {
+        if (e.target === this) cerrarModalFirmaRec();
+    });
+});
+
+// ── Refrescar estado de consentimientos ───────────────────────
+async function refrescarConsentimientos(turnoId) {
+    try {
+        const res  = await fetch(`${API}get_consentimientos.php?turno_id=${turnoId}`);
+        const json = await res.json();
+        if (json.ok) {
+            consentimientos = json.consentimientos || [];
+            renderConsentimientos(consentimientos);
+        }
+    } catch(_) {}
+}
+
+// ── Enviar consentimientos (todos) ───────────────────────────
+async function enviarConsentimientosTodos() {
     if (!turnoActivo || !solicitudActiva) return;
-    const btn = document.getElementById('btn-enviar-consent');
+    const btn = document.getElementById('btn-reenviar-consent');
     btn.disabled = true;
     btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Enviando…';
     try {
@@ -680,18 +791,39 @@ async function enviarConsentimientos() {
         });
         const json = await res.json();
         if (!json.ok) { mostrarError(json.error); return; }
-
-        consentimientos = json.consentimientos ?? json.data?.consentimientos ?? consentimientos;
+        consentimientos = json.consentimientos ?? consentimientos;
         renderConsentimientos(consentimientos);
         btn.innerHTML = '<i class="fas fa-check me-1"></i>Enviado';
+        setTimeout(() => { btn.innerHTML = '<i class="fas fa-paper-plane me-1"></i>Enviar todos'; }, 3000);
     } catch (err) {
         mostrarError(err.message);
-        btn.innerHTML = '<i class="fas fa-paper-plane me-1"></i>Enviar consentimientos';
+        btn.innerHTML = '<i class="fas fa-paper-plane me-1"></i>Enviar todos';
     } finally {
         btn.disabled = false;
     }
 }
 
+// ── Enviar consentimiento individual ─────────────────────────
+async function enviarConsentimientoUno(turnoId) {
+    if (!turnoId) return;
+    try {
+        const res  = await fetch(API + 'send_consentimiento.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ turno_id: turnoId }),
+        });
+        const json = await res.json();
+        if (!json.ok) { mostrarError(json.error); return; }
+        consentimientos = json.consentimientos ?? consentimientos;
+        renderConsentimientos(consentimientos);
+    } catch (err) {
+        mostrarError(err.message);
+    }
+}
+
+// ── Enviar consentimientos (legacy — usado por btn-enviar-consent) ──
+async function enviarConsentimientos() { return enviarConsentimientosTodos(); }
+
 // ── Pasar a lugar ─────────────────────────────────────────────
 async function pasarALugar() {
     if (!turnoActivo || !solicitudActiva) return;