From 00725ccd11c7ec698627518e2d9914e0e2eac2b6 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Fri, 3 Jul 2026 14:15:41 -0500
Subject: [PATCH] Redesign lugar.php UI/UX: patient-first, better cola, sticky
 actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bloque 1 - Cola:
- Separate sections for "en servicio" vs "en espera" with headers
- Time-in-queue badges (green <10min, amber <25min, red 25min+) from creado_at
- Prominent EN SERVICIO pill (solid green) instead of subtle border
- Larger touch targets on queue cards, bigger bell button
- Count chips show espera + servicio counts separately

Bloque 2 - Ficha header + action bar:
- Patient name is now the dominant element (1.35rem bold) with skeleton
  loader animation while async data loads; turno code becomes a secondary chip
- Action bar restructured: full-width primary button (blue "Anunciar turno" /
  green "Finalizar atención") + smaller secondary row (Re-llamar, Regresar, Ausente)
- Consent warning strip added inside action bar showing pending count;
  blocks Finalizar visually and functionally

Bloque 3 - Sections + mobile:
- Section headers use consistent .ficha-sec-hdr style with icon
- Mobile: fixed sticky "← Cola" top bar inside ficha panel (always visible,
  no hunting for back button)
- ficha-turno uses flex-column so action bar sticks to bottom without scroll

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 modules/turnero/views/lugar.php | 1032 ++++++++++++++++++-------------
 1 file changed, 612 insertions(+), 420 deletions(-)

diff --git a/modules/turnero/views/lugar.php b/modules/turnero/views/lugar.php
index aaa351a..9b941bf 100644
--- a/modules/turnero/views/lugar.php
+++ b/modules/turnero/views/lugar.php
@@ -2,10 +2,6 @@
 /**
  * Puesto Lugar / Estación de Servicio — Módulo Turnero
  * Genérica: sirve para Toma de Muestras 1, 2, Rayos X, etc.
- * Requiere login + módulo turnero.
- *
- * URL: /modules/turnero/views/lugar.php?lugar_id=X
- * Si no se pasa lugar_id, muestra un selector al entrar.
  */
 require_once __DIR__ . '/../../../config/config.php';
 if (!isUserLoggedIn()) {
@@ -13,7 +9,6 @@ if (!isUserLoggedIn()) {
     exit;
 }
 
-// Cargar lista de lugares activos
 try {
     $pdo    = Database::getInstance()->getConnection();
     $lugares = $pdo->query(
@@ -25,9 +20,8 @@ try {
 
 $lugarIdParam  = isset($_GET['lugar_id']) ? (int)$_GET['lugar_id'] : 0;
 
-// Resolver nombre y modo del lugar para el título
 $lugarNombre     = 'Estación de Servicio';
-$lugarFormModo   = 'link'; // 'link' | 'embebido'
+$lugarFormModo   = 'link';
 foreach ($lugares as $l) {
     if ((int)$l['id'] === $lugarIdParam) {
         $lugarNombre   = $l['nombre'];
@@ -48,87 +42,206 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <link href="<?= BASE_URL ?>assets/css/styles.css?v=12" rel="stylesheet">
     <style>
-        /* ── Layout ── */
+        /* ── Layout ─────────────────────────────────────────────── */
         .lugar-layout {
             display: grid;
-            grid-template-columns: 300px 1fr;
+            grid-template-columns: 290px 1fr;
             height: calc(100vh - 52px);
             overflow: hidden;
         }
         @media (max-width: 860px) {
             .lugar-layout { grid-template-columns: 1fr; position: relative; overflow: hidden; }
-            .lugar-cola { transition: transform .2s ease; }
+            .lugar-cola   { transition: transform .22s ease; }
             .lugar-cola.mobile-oculta { transform: translateX(-100%); position: absolute; inset: 0; pointer-events: none; }
-            .lugar-ficha { position: absolute; inset: 0; background: #fff; z-index: 10; transform: translateX(100%); transition: transform .2s ease; overflow-y: auto; }
+            .lugar-ficha  { position: absolute; inset: 0; background: #fff; z-index: 10;
+                            transform: translateX(100%); transition: transform .22s ease; overflow-y: auto; }
             .lugar-ficha.mobile-visible { transform: translateX(0); }
-            .btn-volver-cola { display: inline-flex !important; align-items: center; gap: 6px; }
         }
 
-        /* ── Columna cola ── */
+        /* ── Cola ───────────────────────────────────────────────── */
         .lugar-cola {
             background: #f8fafc;
             border-right: 1px solid #e2e8f0;
             display: flex; flex-direction: column; overflow: hidden;
         }
         .lugar-cola-hdr {
-            padding: .85rem 1rem .5rem;
+            padding: .85rem 1rem .65rem;
             background: #fff; border-bottom: 1px solid #e2e8f0;
             flex-shrink: 0;
         }
-        .cola-items { flex: 1; overflow-y: auto; padding: .4rem; }
-        .cola-card {
-            background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
-            padding: .55rem .8rem; margin-bottom: .35rem;
-            display: flex; align-items: center; gap: .55rem;
+        .cola-hdr-row {
+            display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem;
         }
-        .cola-card.activo { border-color: #6366f1; box-shadow: 0 0 0 2px #c7d2fe; }
-        .cola-card.en-servicio-card { border-color: #16a34a; background: #f0fdf4; }
-        .cola-card.en-servicio-card.activo { border-color: #16a34a; box-shadow: 0 0 0 2px #bbf7d0; }
+        .cola-hdr-title {
+            font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
+            color: #64748b; font-weight: 700;
+        }
+        .cola-counts { display: flex; gap: .4rem; align-items: center; }
+        .cola-count-chip {
+            font-size: .68rem; font-weight: 700; border-radius: 99px;
+            padding: 1px 9px; border: 1px solid;
+        }
+        .cola-count-chip.espera   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
+        .cola-count-chip.servicio { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
+
+        .btn-llamar-next {
+            width: 100%; padding: .6rem 1rem; border: none; border-radius: 10px;
+            background: #2563eb; color: #fff; font-weight: 700; font-size: .92rem;
+            cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem;
+            transition: background .15s, transform .1s;
+        }
+        .btn-llamar-next:hover    { background: #1d4ed8; }
+        .btn-llamar-next:active   { transform: scale(.98); }
+        .btn-llamar-next:disabled { background: #94a3b8; cursor: not-allowed; }
+
+        .cola-items { flex: 1; overflow-y: auto; padding: .5rem; }
+
+        .cola-section-sep {
+            font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
+            color: #94a3b8; padding: .3rem .4rem .15rem; margin-top: .25rem;
+        }
+
+        .cola-card {
+            background: #fff; border: 1.5px solid #e2e8f0; border-radius: 11px;
+            padding: .6rem .8rem .6rem .7rem; margin-bottom: .3rem;
+            display: flex; align-items: center; gap: .55rem;
+            cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
+            min-height: 58px;
+        }
+        .cola-card:hover              { border-color: #a5b4fc; box-shadow: 0 2px 8px rgba(99,102,241,.12); }
+        .cola-card.activo             { border-color: #6366f1; box-shadow: 0 0 0 2px #c7d2fe; }
+        .cola-card.en-servicio-card   { border-color: #16a34a; background: #f0fdf4; }
+        .cola-card.en-servicio-card:hover  { border-color: #15803d; }
+        .cola-card.en-servicio-card.activo { box-shadow: 0 0 0 2px #bbf7d0; }
+
         .prio-dot {
-            width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
+            width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
             display: flex; align-items: center; justify-content: center;
             font-size: 1rem; font-weight: 800; color: #fff;
         }
-        .turno-info .cod { font-size: .98rem; font-weight: 700; }
-        .turno-info .pac { font-size: .75rem; color: #64748b;
-            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .turno-info { flex: 1; min-width: 0; }
+        .turno-info .cod { font-size: .95rem; font-weight: 700; line-height: 1.2; }
+        .turno-info .pac {
+            font-size: .74rem; color: #64748b;
+            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+        }
+        .turno-info .t-badge-row { display: flex; align-items: center; gap: .3rem; margin-top: 2px; flex-wrap: wrap; }
+        .tiempo-chip {
+            font-size: .6rem; font-weight: 700; border-radius: 99px;
+            padding: 0 6px; line-height: 1.7;
+        }
+        .tiempo-chip.ok   { background: #f0fdf4; color: #166534; }
+        .tiempo-chip.warn { background: #fffbeb; color: #92400e; }
+        .tiempo-chip.crit { background: #fef2f2; color: #991b1b; }
+        .muestra-chip {
+            font-size: .6rem; font-weight: 700; color: #ea580c;
+            background: #fff7ed; border-radius: 99px; padding: 0 6px; line-height: 1.7;
+        }
+
+        .card-en-servicio-pill {
+            flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
+            background: #16a34a; color: #fff; border-radius: 7px;
+            padding: 3px 7px; font-size: .6rem; font-weight: 800; letter-spacing: .03em;
+            gap: 1px; text-align: center;
+        }
+        .card-en-servicio-pill i { font-size: .75rem; }
+
+        .card-bell-btn {
+            flex-shrink: 0; background: #2563eb; border: none; color: #fff;
+            border-radius: 8px; width: 34px; height: 34px;
+            display: flex; align-items: center; justify-content: center;
+            font-size: .82rem; cursor: pointer; transition: background .12s;
+        }
+        .card-bell-btn:hover { background: #1d4ed8; }
+
         .cola-vacia { text-align: center; padding: 2.5rem 1rem; color: #94a3b8; font-size: .88rem; }
 
-        /* ── Columna ficha ── */
-        .lugar-ficha { overflow-y: auto; padding: 1.2rem 1.5rem; background: #fff; }
+        /* ── Ficha ──────────────────────────────────────────────── */
+        .lugar-ficha { overflow-y: auto; padding: 0; background: #fff; display: flex; flex-direction: column; }
+        .ficha-inner { flex: 1; padding: 1.2rem 1.4rem 1rem; }
+
         .ficha-placeholder {
-            height: 100%; display: flex; flex-direction: column;
+            flex: 1; display: flex; flex-direction: column;
             align-items: center; justify-content: center;
-            color: #94a3b8; text-align: center;
+            color: #94a3b8; text-align: center; padding: 3rem 1rem;
         }
 
-        /* ── Secciones ── */
+        /* Mobile top bar (back button) */
+        .ficha-mobile-topbar {
+            display: none; align-items: center; gap: .6rem;
+            padding: .55rem 1rem; background: #f8fafc;
+            border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
+            position: sticky; top: 0; z-index: 20;
+        }
+        @media (max-width: 860px) {
+            .ficha-mobile-topbar { display: flex; }
+        }
+        .ficha-mobile-topbar .btn-back {
+            background: none; border: none; padding: 4px 6px;
+            color: #2563eb; font-size: .88rem; font-weight: 600;
+            cursor: pointer; display: flex; align-items: center; gap: .3rem;
+        }
+        .ficha-mobile-topbar .m-cod { font-size: .78rem; color: #64748b; font-weight: 600; }
+
+        /* ── Ficha header ───────────────────────────────────────── */
+        .ficha-turno-hdr {
+            background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 13px;
+            padding: .9rem 1.1rem; margin-bottom: 1rem;
+        }
+        .fth-top {
+            display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem;
+        }
+        .prio-dot-sm {
+            width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
+            display: flex; align-items: center; justify-content: center;
+            font-size: .82rem; font-weight: 800; color: #fff;
+        }
+        .fth-meta { flex: 1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+        .fth-cod  { font-size: .82rem; font-weight: 800; color: #334155; }
+        .fth-prio { font-size: .75rem; color: #64748b; }
+        .fth-pac-nom {
+            font-size: 1.35rem; font-weight: 800; color: #1e293b; line-height: 1.2;
+            letter-spacing: -.01em;
+        }
+        .fth-pac-nom.loading {
+            height: 22px; width: 60%; border-radius: 6px;
+            background: linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
+            background-size: 200% 100%; animation: skel-wave 1.4s infinite;
+        }
+        @keyframes skel-wave {
+            0%   { background-position: 200% 0 }
+            100% { background-position: -200% 0 }
+        }
+
+        /* ── Secciones ──────────────────────────────────────────── */
         .ficha-sec {
             background: #f8fafc; border: 1px solid #e2e8f0;
-            border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1rem;
+            border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .85rem;
         }
-        .ficha-sec h6 {
-            font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
-            color: #475569; margin-bottom: .75rem;
+        .ficha-sec-hdr {
+            display: flex; align-items: center; gap: .4rem;
+            font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
+            color: #475569; font-weight: 700; margin-bottom: .7rem;
         }
+        .ficha-sec-hdr i { font-size: .85rem; }
 
         /* ── Datos paciente ── */
-        .pac-dato { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .3rem; }
-        .pac-dato .lbl { font-size: .75rem; color: #94a3b8; min-width: 80px; }
-        .pac-dato .val { font-size: .88rem; color: #1e293b; font-weight: 500; }
+        .pac-dato { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .25rem; }
+        .pac-dato .lbl { font-size: .72rem; color: #94a3b8; min-width: 78px; flex-shrink: 0; }
+        .pac-dato .val { font-size: .87rem; color: #1e293b; font-weight: 500; }
 
         /* ── Exámenes ── */
         .exam-pill {
             display: inline-flex; align-items: center; gap: .3rem;
             background: #eff6ff; color: #1d4ed8; border-radius: 20px;
-            padding: .2rem .65rem; font-size: .78rem; font-weight: 600;
-            margin: .15rem;
+            padding: .22rem .7rem; font-size: .78rem; font-weight: 600; margin: .15rem;
+            border: 1px solid #bfdbfe;
         }
 
         /* ── Consentimientos ── */
         .consent-row {
             display: flex; align-items: center; gap: .6rem;
-            padding: .55rem .7rem; border-radius: 10px; margin-bottom: .4rem;
+            padding: .55rem .7rem; border-radius: 10px; margin-bottom: .35rem;
             font-size: .84rem; border: 1px solid transparent;
         }
         .consent-row.firmado   { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
@@ -137,7 +250,7 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
         .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;
+        .consent-row .c-badge  { font-size: .67rem; 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; }
@@ -145,13 +258,57 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
         /* ── Barra de acciones ── */
         .ficha-acciones {
             position: sticky; bottom: 0;
-            background: #fff; border-top: 1px solid #e2e8f0;
-            padding: .85rem 0 .2rem; margin-top: 1rem;
-            display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
+            background: rgba(255,255,255,.97);
+            backdrop-filter: blur(6px);
+            border-top: 1px solid #e2e8f0;
+            padding: .8rem 1.4rem .9rem;
+            margin-top: auto; flex-shrink: 0;
+        }
+        .accion-consent-warn {
+            display: flex; align-items: center; gap: .5rem;
+            background: #fffbeb; border: 1px solid #fcd34d; border-radius: 9px;
+            padding: .5rem .8rem; font-size: .8rem; color: #92400e; font-weight: 600;
+            margin-bottom: .65rem;
+        }
+        .accion-consent-warn i { color: #f59e0b; flex-shrink: 0; }
+        .accion-primary-row { margin-bottom: .45rem; }
+        .btn-accion-primary {
+            width: 100%; padding: .7rem; border: none; border-radius: 11px;
+            font-size: .97rem; font-weight: 700; cursor: pointer;
+            display: flex; align-items: center; justify-content: center; gap: .45rem;
+            transition: background .15s, transform .1s, opacity .15s;
+        }
+        .btn-accion-primary:active   { transform: scale(.98); }
+        .btn-accion-primary:disabled { opacity: .5; cursor: not-allowed; }
+        .btn-accion-primary.azul  { background: #2563eb; color: #fff; }
+        .btn-accion-primary.azul:hover  { background: #1d4ed8; }
+        .btn-accion-primary.verde { background: #16a34a; color: #fff; }
+        .btn-accion-primary.verde:hover { background: #15803d; }
+        .accion-secondary-row {
+            display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
+        }
+        .btn-accion-sec {
+            flex: 1; min-width: 80px;
+            padding: .45rem .5rem; border-radius: 9px;
+            font-size: .8rem; font-weight: 600; cursor: pointer;
+            display: flex; align-items: center; justify-content: center; gap: .35rem;
+            border: 1.5px solid; background: transparent; transition: background .12s;
+        }
+        .btn-accion-sec.warning { color: #92400e; border-color: #fcd34d; }
+        .btn-accion-sec.warning:hover { background: #fffbeb; }
+        .btn-accion-sec.info    { color: #1e40af; border-color: #93c5fd; }
+        .btn-accion-sec.info:hover    { background: #eff6ff; }
+        .btn-accion-sec.danger  { color: #991b1b; border-color: #fca5a5; }
+        .btn-accion-sec.danger:hover  { background: #fef2f2; }
+
+        /* ── Bloqueo banner ── */
+        .bloqueo-banner {
+            background: #fef2f2; border: 1px solid #fca5a5; border-radius: 10px;
+            padding: .6rem .9rem; font-size: .82rem; color: #991b1b;
+            display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem;
         }
 
-        /* ── Modal de firma ── */
-/* ── Selector de lugar (pantalla inicial) ── */
+        /* ── Selector ── */
         .selector-lugar-overlay {
             position: fixed; inset: 0; background: #f1f5f9;
             z-index: 200; display: flex; align-items: center; justify-content: center;
@@ -174,23 +331,16 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
             transition: transform .3s ease, opacity .3s ease;
             pointer-events: none;
         }
-        .rec-toast.show  { transform: translateY(0); opacity: 1; }
+        .rec-toast.show    { transform: translateY(0); opacity: 1; }
         .rec-toast.success { border-left: 4px solid #22c55e; }
         .rec-toast.info    { border-left: 4px solid #3b82f6; }
         .rec-toast.warn    { border-left: 4px solid #f59e0b; }
         .rec-toast.error   { border-left: 4px solid #ef4444; }
-        .rec-toast .ico    { font-size: 1.2rem; }
+        .rec-toast .ico { font-size: 1.2rem; }
         .rec-toast.success .ico { color: #22c55e; }
         .rec-toast.info    .ico { color: #3b82f6; }
         .rec-toast.warn    .ico { color: #f59e0b; }
         .rec-toast.error   .ico { color: #ef4444; }
-
-        /* ── Indicador de bloqueo ── */
-        .bloqueo-banner {
-            background: #fef2f2; border: 1px solid #fca5a5; border-radius: 10px;
-            padding: .65rem 1rem; font-size: .85rem; color: #991b1b;
-            display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
-        }
     </style>
 </head>
 <body>
@@ -201,7 +351,7 @@ $SIDEBAR_ICON  = 'fas fa-ticket-alt';
 require_once __DIR__ . '/../../../shared/components/sidebar.php';
 ?>
 
-<!-- ══ Selector inicial de lugar (si no viene en URL) ════════ -->
+<!-- ══ Selector inicial ══════════════════════════════════════════ -->
 <div id="overlay-selector" class="selector-lugar-overlay" <?= $lugarIdParam ? 'style="display:none"' : '' ?>>
     <div class="selector-lugar-box">
         <i class="fas fa-map-marker-alt fa-2x text-primary mb-3"></i>
@@ -220,13 +370,13 @@ require_once __DIR__ . '/../../../shared/components/sidebar.php';
 
 <main class="main-content" style="padding:0">
 
-    <!-- ── Top bar ──────────────────────────────────────────── -->
+    <!-- ── Top bar ──────────────────────────────────────────────── -->
     <div class="content-header d-flex align-items-center justify-content-between px-3 py-2 border-bottom bg-white"
          style="position:sticky;top:0;z-index:100;min-height:52px">
         <div class="d-flex align-items-center gap-2">
             <i class="fas fa-map-marker-alt text-primary"></i>
             <strong id="lbl-lugar-titulo"><?= htmlspecialchars($lugarNombre) ?></strong>
-            <span id="badge-turno-activo" class="badge bg-primary ms-1 d-none" id="badge-cod-activo"></span>
+            <span id="badge-turno-activo" class="badge bg-primary ms-1 d-none"></span>
         </div>
         <div class="d-flex align-items-center gap-2">
             <span class="text-muted small d-none d-md-inline"><?= htmlspecialchars($adminNombre) ?></span>
@@ -238,17 +388,18 @@ require_once __DIR__ . '/../../../shared/components/sidebar.php';
 
     <div class="lugar-layout">
 
-        <!-- ══ Cola ═══════════════════════════════════════════ -->
+        <!-- ══ Cola ═══════════════════════════════════════════════ -->
         <div class="lugar-cola">
             <div class="lugar-cola-hdr">
-                <div class="d-flex align-items-center justify-content-between mb-2">
-                    <span class="fw-semibold text-secondary" style="font-size:.78rem;text-transform:uppercase;letter-spacing:.05em">
-                        <i class="fas fa-list-ol me-1"></i>EN ESPERA
-                    </span>
-                    <span class="badge bg-primary rounded-pill" id="badge-count">0</span>
+                <div class="cola-hdr-row">
+                    <span class="cola-hdr-title"><i class="fas fa-list-ol me-1"></i>Cola</span>
+                    <div class="cola-counts">
+                        <span class="cola-count-chip espera"   id="badge-count">0 espera</span>
+                        <span class="cola-count-chip servicio d-none" id="badge-servicio">0 servicio</span>
+                    </div>
                 </div>
-                <button class="btn btn-primary w-100 py-2" id="btn-llamar" onclick="llamarSiguiente()">
-                    <i class="fas fa-bell me-2"></i>Llamar siguiente
+                <button class="btn-llamar-next" id="btn-llamar" onclick="llamarSiguiente()">
+                    <i class="fas fa-bell"></i>Llamar siguiente
                 </button>
             </div>
             <div class="cola-items" id="cola-items">
@@ -259,121 +410,149 @@ require_once __DIR__ . '/../../../shared/components/sidebar.php';
             </div>
         </div>
 
-        <!-- ══ Ficha del turno ════════════════════════════════ -->
+        <!-- ══ Ficha del turno ════════════════════════════════════ -->
         <div class="lugar-ficha" id="lugar-ficha">
 
-            <button class="btn btn-sm btn-outline-secondary btn-volver-cola mb-3"
-                    style="display:none" onclick="volverACola()">
-                <i class="fas fa-arrow-left"></i> Cola
-            </button>
+            <!-- Barra back en móvil -->
+            <div class="ficha-mobile-topbar" id="ficha-mobile-topbar">
+                <button class="btn-back" onclick="volverACola()">
+                    <i class="fas fa-arrow-left"></i> Cola
+                </button>
+                <span class="m-cod" id="ficha-mobile-cod"></span>
+            </div>
 
+            <!-- Estado vacío -->
             <div class="ficha-placeholder" id="ficha-placeholder">
                 <i class="fas fa-stethoscope fa-3x mb-3" style="color:#cbd5e1"></i>
                 <p class="fw-semibold mb-1">Sin turno activo</p>
-                <small class="text-muted">Pulse "Llamar siguiente" o espere a que llegue el turno</small>
+                <small class="text-muted">Pulse "Llamar siguiente" o seleccione un turno de la cola</small>
             </div>
 
-            <div id="ficha-turno" class="d-none">
+            <div id="ficha-turno" class="d-none" style="display:flex;flex-direction:column;flex:1">
 
-                <!-- Encabezado turno -->
-                <div class="d-flex align-items-center gap-3 mb-3">
-                    <div id="ficha-prio-dot" class="prio-dot"
-                         style="width:52px;height:52px;border-radius:12px;font-size:1.6rem;font-weight:900">—</div>
-                    <div>
-                        <div class="h4 mb-0 fw-bold" id="ficha-codigo">—</div>
-                        <div class="text-muted small" id="ficha-prio-nombre"></div>
-                    </div>
-                    <span class="ms-auto badge bg-success-subtle text-success border border-success-subtle"
-                          id="ficha-estado-badge">en espera</span>
-                </div>
+                <div class="ficha-inner">
 
-                <!-- ── Sección: Paciente ── -->
-                <div class="ficha-sec">
-                    <h6><i class="fas fa-user me-1"></i>Paciente</h6>
-                    <div id="bloque-pac-info">
-                        <div class="pac-dato"><span class="lbl">Nombre</span><span class="val" id="pac-nombre">—</span></div>
-                        <div class="pac-dato"><span class="lbl">Documento</span><span class="val" id="pac-doc">—</span></div>
-                        <div class="pac-dato"><span class="lbl">Fecha nac.</span><span class="val" id="pac-fec">—</span></div>
-                        <div class="pac-dato"><span class="lbl">Celular</span><span class="val" id="pac-cel">—</span></div>
+                    <!-- ── Header: paciente + turno ── -->
+                    <div class="ficha-turno-hdr">
+                        <div class="fth-top">
+                            <div id="ficha-prio-dot" class="prio-dot-sm" style="background:#6366f1">—</div>
+                            <div class="fth-meta">
+                                <span class="fth-cod"  id="ficha-codigo">—</span>
+                                <span class="fth-prio" id="ficha-prio-nombre"></span>
+                            </div>
+                            <span class="badge bg-success-subtle text-success border border-success-subtle"
+                                  id="ficha-estado-badge">en espera</span>
+                        </div>
+                        <div id="ficha-pac-nombre-hdr" class="fth-pac-nom loading">&nbsp;</div>
                     </div>
-                    <div id="pac-embarazada" class="d-none mt-2">
-                        <span class="badge text-bg-danger">
-                            <i class="fas fa-baby me-1"></i>Paciente embarazada
-                        </span>
-                    </div>
-                    <div id="pac-medico" class="d-none mt-2">
-                        <div class="pac-dato">
-                            <span class="lbl">Médico</span>
-                            <span class="val" id="pac-medico-nombre" style="color:#4f46e5"></span>
+
+                    <!-- ── Paciente ── -->
+                    <div class="ficha-sec">
+                        <div class="ficha-sec-hdr"><i class="fas fa-user"></i>Paciente</div>
+                        <div id="bloque-pac-info">
+                            <div class="pac-dato"><span class="lbl">Nombre</span><span class="val" id="pac-nombre">—</span></div>
+                            <div class="pac-dato"><span class="lbl">Documento</span><span class="val" id="pac-doc">—</span></div>
+                            <div class="pac-dato"><span class="lbl">Fecha nac.</span><span class="val" id="pac-fec">—</span></div>
+                            <div class="pac-dato"><span class="lbl">Celular</span><span class="val" id="pac-cel">—</span></div>
+                        </div>
+                        <div id="pac-embarazada" class="d-none mt-2">
+                            <span class="badge text-bg-danger"><i class="fas fa-baby me-1"></i>Paciente embarazada</span>
+                        </div>
+                        <div id="pac-medico" class="d-none mt-2">
+                            <div class="pac-dato">
+                                <span class="lbl">Médico</span>
+                                <span class="val" id="pac-medico-nombre" style="color:#4f46e5"></span>
+                            </div>
+                        </div>
+                        <div id="bloque-pac-sin" class="text-muted small">
+                            <i class="fas fa-info-circle me-1"></i>Sin paciente vinculado
                         </div>
                     </div>
 
-                    <div id="bloque-pac-sin" class="text-muted small">
-                        <i class="fas fa-info-circle me-1"></i>Sin paciente vinculado
-                    </div>
-                </div>
-
-                <!-- ── Sección: Exámenes ── -->
-                <div class="ficha-sec">
-                    <h6><i class="fas fa-vial me-1"></i>Exámenes solicitados</h6>
-                    <div id="lista-examenes-ficha">
-                        <span class="text-muted small">Sin exámenes registrados</span>
-                    </div>
-                </div>
-
-
-
-                <div class="ficha-sec" id="sec-consent">
-                    <h6><i class="fas fa-file-signature me-1"></i>Consentimientos informados</h6>
-
-                    <div id="bloqueo-banner" class="bloqueo-banner d-none">
-                        <i class="fas fa-lock"></i>
-                        <span>Hay consentimientos pendientes. No puede <strong>finalizar</strong> la atención hasta que estén <strong>firmados</strong> o <strong>rechazados</strong>.</span>
+                    <!-- ── Exámenes ── -->
+                    <div class="ficha-sec">
+                        <div class="ficha-sec-hdr"><i class="fas fa-vial"></i>Exámenes solicitados</div>
+                        <div id="lista-examenes-ficha">
+                            <span class="text-muted small">Sin exámenes registrados</span>
+                        </div>
                     </div>
 
-                    <div id="lista-consent"></div>
-
-                    <div id="sin-consent" class="text-muted small">
-                        <i class="fas fa-check-circle text-success me-1"></i>No se requieren consentimientos
+                    <!-- ── Formulario embebido (iframe, modo link) ── -->
+                    <div class="ficha-sec d-none" id="sec-form-embebido">
+                        <div class="ficha-sec-hdr"><i class="fas fa-file-alt"></i>Formulario de consentimiento</div>
+                        <div id="form-embebido-loading" class="text-muted small py-2">
+                            <i class="fas fa-spinner fa-spin me-1"></i>Cargando formulario...
+                        </div>
+                        <iframe id="form-embebido-iframe" src="" frameborder="0"
+                                style="width:100%;min-height:520px;border-radius:8px;border:1px solid #e2e8f0;display:none"
+                                onload="this.style.display='block';document.getElementById('form-embebido-loading').style.display='none'">
+                        </iframe>
                     </div>
-                </div>
 
-                <!-- ── Sección: Comentarios y Notas ── -->
-                <div class="ficha-sec" id="sec-comentarios">
-                    <div class="d-flex align-items-center justify-content-between mb-2">
-                        <h6 class="mb-0"><i class="fas fa-comments me-1" style="color:#8b5cf6"></i>Comentarios del seguimiento</h6>
+                    <!-- ── Consentimientos ── -->
+                    <div class="ficha-sec" id="sec-consent">
+                        <div class="ficha-sec-hdr"><i class="fas fa-file-signature"></i>Consentimientos informados</div>
+                        <div id="bloqueo-banner" class="bloqueo-banner d-none">
+                            <i class="fas fa-lock"></i>
+                            <span>Hay consentimientos pendientes. No puede <strong>finalizar</strong> hasta que estén <strong>firmados</strong> o <strong>rechazados</strong>.</span>
+                        </div>
+                        <div id="lista-consent"></div>
+                        <div id="sin-consent" class="text-muted small">
+                            <i class="fas fa-check-circle text-success me-1"></i>No se requieren consentimientos
+                        </div>
                     </div>
-                    <div style="display:flex;gap:8px;margin-bottom:10px">
-                        <textarea id="inp-comentario" class="form-control form-control-sm"
-                                  rows="2" placeholder="Añade un comentario sobre este turno…"
-                                  maxlength="500" style="resize:vertical"></textarea>
-                        <button class="btn btn-sm btn-primary" onclick="guardarComentario()"
-                                style="height:fit-content;align-self:flex-end">
-                            <i class="fas fa-paper-plane"></i>
+
+                    <!-- ── Comentarios ── -->
+                    <div class="ficha-sec" id="sec-comentarios">
+                        <div class="ficha-sec-hdr"><i class="fas fa-comments" style="color:#8b5cf6"></i>Comentarios del seguimiento</div>
+                        <div style="display:flex;gap:8px;margin-bottom:10px">
+                            <textarea id="inp-comentario" class="form-control form-control-sm"
+                                      rows="2" placeholder="Añade un comentario sobre este turno…"
+                                      maxlength="500" style="resize:vertical"></textarea>
+                            <button class="btn btn-sm btn-primary" onclick="guardarComentario()"
+                                    style="height:fit-content;align-self:flex-end">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
+                        <div id="lista-comentarios" class="text-muted small py-2">
+                            <i class="fas fa-spinner fa-spin me-1"></i>Cargando comentarios…
+                        </div>
+                    </div>
+
+                </div><!-- /ficha-inner -->
+
+                <!-- ── Barra de acciones sticky ── -->
+                <div class="ficha-acciones">
+
+                    <!-- Aviso de consentimientos pendientes -->
+                    <div id="accion-consent-warn" class="accion-consent-warn d-none">
+                        <i class="fas fa-exclamation-triangle"></i>
+                        <span id="accion-warn-txt">Consentimientos pendientes</span> — No puede finalizar la atención
+                    </div>
+
+                    <!-- Botón primario -->
+                    <div class="accion-primary-row">
+                        <button class="btn-accion-primary azul"  id="btn-iniciar"   onclick="iniciarAtencion()">
+                            <i class="fas fa-volume-up"></i>Anunciar turno
+                        </button>
+                        <button class="btn-accion-primary verde d-none" id="btn-finalizar" onclick="finalizarAtencion()">
+                            <i class="fas fa-flag-checkered"></i>Finalizar atención
+                        </button>
+                    </div>
+
+                    <!-- Botones secundarios -->
+                    <div class="accion-secondary-row">
+                        <button class="btn-accion-sec info d-none"    id="btn-rellamar" onclick="rellamarTurno()">
+                            <i class="fas fa-bullhorn"></i>Re-llamar
+                        </button>
+                        <button class="btn-accion-sec warning d-none" id="btn-regresar" onclick="regresarCola()">
+                            <i class="fas fa-undo"></i>Regresar cola
+                        </button>
+                        <button class="btn-accion-sec danger"         id="btn-ausente"  onclick="marcarAusente()">
+                            <i class="fas fa-user-slash"></i>Ausente
                         </button>
                     </div>
-                    <div id="lista-comentarios" class="text-muted small py-2">
-                        <i class="fas fa-spinner fa-spin me-1"></i>Cargando comentarios…
-                    </div>
-                </div>
 
-                <!-- ── Barra de acciones ── -->
-                <div class="ficha-acciones">
-                    <button class="btn btn-primary" id="btn-iniciar" onclick="iniciarAtencion()">
-                        <i class="fas fa-bell me-1"></i>Llamar
-                    </button>
-                    <button class="btn btn-primary d-none" id="btn-finalizar" onclick="finalizarAtencion()">
-                        <i class="fas fa-flag-checkered me-1"></i>Finalizar
-                    </button>
-                    <button class="btn btn-outline-warning d-none" id="btn-regresar" onclick="regresarCola()">
-                        <i class="fas fa-undo me-1"></i>Regresar a cola
-                    </button>
-                    <button class="btn btn-outline-info d-none" id="btn-rellamar" onclick="rellamarTurno()">
-                        <i class="fas fa-bullhorn me-1"></i>Re-llamar
-                    </button>
-                    <button class="btn btn-secondary ms-auto" id="btn-ausente" onclick="marcarAusente()">
-                        <i class="fas fa-user-slash me-1"></i>Ausente
-                    </button>
                 </div>
 
             </div><!-- /ficha-turno -->
@@ -382,7 +561,7 @@ require_once __DIR__ . '/../../../shared/components/sidebar.php';
     </div><!-- /lugar-layout -->
 </main>
 
-<!-- ── Modal de consentimiento embebido ──────────────────────── -->
+<!-- ── Modal de consentimiento embebido (modo embebido) ────────── -->
 <div id="modal-consentimiento" style="
     display:none;position:fixed;inset:0;z-index:9000;
     background:rgba(0,0,0,.55);align-items:center;justify-content:center;padding:16px">
@@ -390,10 +569,8 @@ require_once __DIR__ . '/../../../shared/components/sidebar.php';
         background:#fff;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.25);
         width:min(96vw,680px);max-height:92vh;
         display:flex;flex-direction:column;overflow:hidden">
-        <!-- Header modal -->
-        <div style="
-            display:flex;align-items:center;justify-content:space-between;
-            padding:12px 18px;border-bottom:1px solid #e2e8f0;flex-shrink:0">
+        <div style="display:flex;align-items:center;justify-content:space-between;
+                    padding:12px 18px;border-bottom:1px solid #e2e8f0;flex-shrink:0">
             <span style="font-weight:700;font-size:.95rem;color:#1e293b">
                 <i class="fas fa-file-signature me-2 text-primary"></i>Formulario de consentimiento
             </span>
@@ -402,11 +579,9 @@ require_once __DIR__ . '/../../../shared/components/sidebar.php';
                 <i class="fas fa-times"></i>
             </button>
         </div>
-        <!-- Loading -->
         <div id="modal-consent-loading" style="padding:32px;text-align:center;color:#64748b;flex-shrink:0">
             <i class="fas fa-spinner fa-spin fa-2x mb-2 d-block"></i>Cargando formulario…
         </div>
-        <!-- Iframe -->
         <iframe id="modal-consent-iframe" src="" frameborder="0"
                 style="flex:1;border:none;display:none;min-height:60vh"
                 onload="document.getElementById('modal-consent-loading').style.display='none';this.style.display='block'">
@@ -417,40 +592,35 @@ require_once __DIR__ . '/../../../shared/components/sidebar.php';
 
 <script>
 // ── Estado global ─────────────────────────────────────────────
-let lugarId       = <?= $lugarIdParam ?: 0 ?>;
-let turnoActivo   = null;
-let tieneConsent  = false;
-let hayPendientes = false;
-let pollingColaId = null;
+let lugarId          = <?= $lugarIdParam ?: 0 ?>;
+let turnoActivo      = null;
+let tieneConsent     = false;
+let hayPendientes    = false;
+let pollingColaId    = null;
 let pollingConsentId = null;
+let _consentTokenCache = null;
 
-const API           = '<?= BASE_URL ?>modules/turnero/api/';
-const BASE_WA       = '<?= BASE_URL ?>';
-const LUGAR_NOMBRE  = document.getElementById('lbl-lugar-titulo')?.textContent || '<?= addslashes($lugarNombre) ?>';
+const API             = '<?= BASE_URL ?>modules/turnero/api/';
+const BASE_WA         = '<?= BASE_URL ?>';
+const LUGAR_NOMBRE    = document.getElementById('lbl-lugar-titulo')?.textContent || '<?= addslashes($lugarNombre) ?>';
 const LUGAR_FORM_MODO = '<?= $lugarFormModo ?>';
 
-
 // ── Arranque ──────────────────────────────────────────────────
 document.addEventListener('DOMContentLoaded', () => {
-    if (lugarId) {
-        iniciarPuesto();
-    }
+    if (lugarId) iniciarPuesto();
 });
 
 function iniciarPuesto() {
-    recuperarTurnoActivo(); // ver si ya hay un turno en_servicio en esta estación
+    recuperarTurnoActivo();
     cargarCola();
     pollingColaId = setInterval(cargarCola, 7000);
 }
 
-// Recupera el turno en_servicio de ESTA estación (si existe) al cargar la página
 async function recuperarTurnoActivo() {
     try {
         const res  = await fetch(`${API}get_cola.php?area=lugar&lugar_id=${lugarId}`);
         const json = await res.json();
-        if (json.ok && json.activo) {
-            await abrirFicha(json.activo);
-        }
+        if (json.ok && json.activo) await abrirFicha(json.activo);
     } catch (_) {}
 }
 
@@ -486,14 +656,31 @@ async function cargarCola() {
     } catch (_) {}
 }
 
-let _colaMap = new Map(); // id → turno object
+let _colaMap = new Map();
+
+function tiempoEspera(iso) {
+    if (!iso) return null;
+    const mins = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
+    if (mins < 1)  return { txt: 'recién',  cls: 'ok' };
+    if (mins < 10) return { txt: mins + ' min', cls: 'ok' };
+    if (mins < 25) return { txt: mins + ' min', cls: 'warn' };
+    return { txt: mins + ' min', cls: 'crit' };
+}
 
 function renderCola(snap) {
-    const items  = snap.cola || [];
-    const espera = items.filter(t => t.estado === 'en_espera_lugar');
-    document.getElementById('badge-count').textContent = espera.length;
+    const items    = snap.cola || [];
+    const enEspera = items.filter(t => t.estado === 'en_espera_lugar');
+    const enServ   = items.filter(t => t.estado === 'en_servicio');
+
+    document.getElementById('badge-count').textContent = enEspera.length + ' espera';
+    const badgeServ = document.getElementById('badge-servicio');
+    if (enServ.length) {
+        badgeServ.textContent = enServ.length + ' servicio';
+        badgeServ.classList.remove('d-none');
+    } else {
+        badgeServ.classList.add('d-none');
+    }
 
-    // Guardar mapa para selección sin llamar
     _colaMap = new Map(items.map(t => [t.id, t]));
 
     const lista = document.getElementById('cola-items');
@@ -502,88 +689,74 @@ function renderCola(snap) {
             <i class="fas fa-hourglass-start fa-2x mb-2 d-block"></i>Cola vacía</div>`;
         return;
     }
-    lista.innerHTML = items.map(t => {
-        const enServicio = t.estado === 'en_servicio';
-        const esActivo   = turnoActivo?.id == t.id;
-        const indicador  = enServicio
-            ? `<div class="ms-auto d-flex flex-column align-items-center" style="gap:1px;flex-shrink:0">
-                   <i class="fas fa-stethoscope text-success" style="font-size:.85rem"></i>
-                   <span style="font-size:.58rem;color:#16a34a;font-weight:700">EN SERVICIO</span>
-               </div>`
-            : `<button onclick="event.stopPropagation();llamarTurnoEspecifico(${t.id})"
-                       title="Llamar turno ${escHtml(t.codigo)}"
-                       style="flex-shrink:0;background:#2563eb;border:none;color:#fff;
-                              border-radius:7px;padding:5px 9px;font-size:.78rem;cursor:pointer">
-                   <i class="fas fa-bell"></i>
-               </button>`;
-        const esMuestra  = t.solo_muestras == 1;
-        const muestraBadge = esMuestra
-            ? `<div style="font-size:.6rem;font-weight:700;color:#ea580c;letter-spacing:.04em;margin-top:1px">
-                   <i class="fas fa-plus-square me-1"></i>ENTREGA DE MUESTRAS
-               </div>`
-            : '';
-        const cardStyle  = esMuestra
-            ? 'cursor:pointer;border:2px solid #ea580c!important;background:#fff7ed!important'
-            : 'cursor:pointer';
-        return `
-        <div class="cola-card ${enServicio ? 'en-servicio-card' : ''} ${esActivo ? 'activo' : ''}"
-             style="${cardStyle}" onclick="seleccionarSinLlamar(${t.id})"
-             title="${enServicio ? 'Ver turno en servicio' : `Ver turno ${escHtml(t.codigo)}`}">
-            <div class="prio-dot" style="background:${esMuestra ? '#ea580c' : t.prioridad_color}">${esMuestra ? '<i class="fas fa-plus"></i>' : escHtml(t.prioridad_codigo)}</div>
-            <div class="turno-info">
-                <div class="cod">${escHtml(t.codigo)}</div>
-                <div class="pac">${escHtml(t.paciente_nombre || 'Paciente')}</div>
-                ${muestraBadge}
-            </div>
-            ${indicador}
-        </div>`;
-    }).join('');
+
+    let html = '';
+    if (enServ.length) {
+        html += `<div class="cola-section-sep"><i class="fas fa-stethoscope me-1"></i>En servicio</div>`;
+        html += enServ.map(t => renderColaCard(t)).join('');
+    }
+    if (enEspera.length) {
+        if (enServ.length) html += `<div class="cola-section-sep" style="margin-top:.4rem"><i class="fas fa-clock me-1"></i>En espera</div>`;
+        html += enEspera.map(t => renderColaCard(t)).join('');
+    }
+    lista.innerHTML = html;
 }
 
-// Abre la ficha SIN llamar ni cambiar estado
+function renderColaCard(t) {
+    const enServicio = t.estado === 'en_servicio';
+    const esActivo   = turnoActivo?.id == t.id;
+    const esMuestra  = t.solo_muestras == 1;
+
+    const tiempo = tiempoEspera(t.creado_at);
+    const tiempoBadge = tiempo
+        ? `<span class="tiempo-chip ${tiempo.cls}">${escHtml(tiempo.txt)}</span>`
+        : '';
+    const muestraBadge = esMuestra
+        ? `<span class="muestra-chip"><i class="fas fa-plus me-1"></i>MUESTRAS</span>`
+        : '';
+    const badgeRow = (tiempoBadge || muestraBadge)
+        ? `<div class="t-badge-row">${tiempoBadge}${muestraBadge}</div>`
+        : '';
+
+    const rightEl = enServicio
+        ? `<div class="card-en-servicio-pill"><i class="fas fa-stethoscope"></i>EN<br>SERV.</div>`
+        : `<button onclick="event.stopPropagation();llamarTurnoEspecifico(${t.id})"
+                   title="Anunciar turno ${escHtml(t.codigo)}" class="card-bell-btn">
+               <i class="fas fa-bell"></i>
+           </button>`;
+
+    const bg     = esMuestra ? 'border:2px solid #ea580c!important;background:#fff7ed!important' : '';
+    const prioBg = esMuestra ? '#ea580c' : (t.prioridad_color || '#6366f1');
+    const prioLbl = esMuestra ? '<i class="fas fa-plus"></i>' : escHtml(t.prioridad_codigo || '?');
+
+    return `<div class="cola-card ${enServicio ? 'en-servicio-card' : ''} ${esActivo ? 'activo' : ''}"
+                 style="${bg}" onclick="seleccionarSinLlamar(${t.id})">
+        <div class="prio-dot" style="background:${prioBg}">${prioLbl}</div>
+        <div class="turno-info">
+            <div class="cod">${escHtml(t.codigo)}</div>
+            <div class="pac">${escHtml(t.paciente_nombre || 'Paciente')}</div>
+            ${badgeRow}
+        </div>
+        ${rightEl}
+    </div>`;
+}
+
+// ── Seleccionar sin llamar ────────────────────────────────────
 async function seleccionarSinLlamar(turnoId) {
     const t = _colaMap.get(turnoId);
     if (!t) return;
     turnoActivo = t;
-    document.getElementById('ficha-placeholder').classList.add('d-none');
-    document.getElementById('ficha-turno').classList.remove('d-none');
-    document.getElementById('ficha-codigo').textContent      = t.codigo;
-    document.getElementById('ficha-prio-nombre').textContent = t.prioridad_nombre || '';
-    const dot = document.getElementById('ficha-prio-dot');
-    dot.textContent      = t.prioridad_codigo || '—';
-    dot.style.background = t.prioridad_color  || '#6366f1';
-    const badgeCod = document.getElementById('badge-turno-activo');
-    badgeCod.textContent = t.codigo;
-    badgeCod.classList.remove('d-none');
-    actualizarEstadoBadge(t.estado);
+    mostrarCabeceraTurno(t);
     await cargarFichaSolicitud(t.id);
     clearInterval(pollingConsentId);
     pollingConsentId = setInterval(() => actualizarConsentimientos(turnoActivo?.id), 5000);
-    if (LUGAR_FORM_MODO === 'embebido' && lugarId) {
-        cargarFormEmbebido(t.id);
-    }
+    if (LUGAR_FORM_MODO === 'embebido' && lugarId) cargarFormEmbebido(t.id);
     mostrarFichaMobile();
 }
 
-async function rellamarDesdeCard(turnoId) {
-    const res  = await fetch(API + 'llamar_turno.php', {
-        method:  'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body:    JSON.stringify({ area: 'lugar', lugar_id: lugarId, turno_id: turnoId }),
-    });
-    const json = await res.json();
-    if (!json.ok || !json.turno) return;
-    await abrirFicha(json.turno);
-}
-
-// ── Llamar siguiente: llama al primero en espera ──────────────
-async function llamarSiguiente() {
-    await _llamar({});
-}
-
-async function llamarTurnoEspecifico(turnoId) {
-    await _llamar({ turno_id: turnoId });
-}
+// ── Llamar ────────────────────────────────────────────────────
+async function llamarSiguiente()              { await _llamar({}); }
+async function llamarTurnoEspecifico(turnoId) { await _llamar({ turno_id: turnoId }); }
 
 async function _llamar(extra) {
     if (!lugarId) { mostrarError('Primero seleccione un lugar.'); return; }
@@ -612,39 +785,40 @@ async function _llamar(extra) {
 // ── Abrir ficha ───────────────────────────────────────────────
 async function abrirFicha(turno) {
     turnoActivo = turno;
+    mostrarCabeceraTurno(turno);
+    await cargarFichaSolicitud(turno.id);
+    clearInterval(pollingConsentId);
+    pollingConsentId = setInterval(() => actualizarConsentimientos(turnoActivo?.id), 5000);
+    if (LUGAR_FORM_MODO === 'embebido' && lugarId) cargarFormEmbebido(turno.id);
+    mostrarFichaMobile();
+}
 
+function mostrarCabeceraTurno(turno) {
     document.getElementById('ficha-placeholder').classList.add('d-none');
-    document.getElementById('ficha-turno').classList.remove('d-none');
+    const fichaEl = document.getElementById('ficha-turno');
+    fichaEl.classList.remove('d-none');
+    fichaEl.style.display = 'flex';
 
-    // Header
-    document.getElementById('ficha-codigo').textContent  = turno.codigo;
+    document.getElementById('ficha-codigo').textContent      = turno.codigo;
     document.getElementById('ficha-prio-nombre').textContent = turno.prioridad_nombre || '';
     const dot = document.getElementById('ficha-prio-dot');
-    dot.textContent     = turno.prioridad_codigo || '—';
-    dot.style.background = turno.prioridad_color || '#6366f1';
+    dot.textContent      = turno.prioridad_codigo || '—';
+    dot.style.background = turno.prioridad_color  || '#6366f1';
 
     const badgeCod = document.getElementById('badge-turno-activo');
     badgeCod.textContent = turno.codigo;
     badgeCod.classList.remove('d-none');
 
+    const nomHdr = document.getElementById('ficha-pac-nombre-hdr');
+    nomHdr.textContent = '';
+    nomHdr.classList.add('loading');
+
+    document.getElementById('ficha-mobile-cod').textContent = turno.codigo;
+
     actualizarEstadoBadge(turno.estado);
-
-    // Cargar ficha del paciente/exámenes desde la solicitud
-    await cargarFichaSolicitud(turno.id);
-
-    // Iniciar polling de consentimientos
-    clearInterval(pollingConsentId);
-    pollingConsentId = setInterval(() => actualizarConsentimientos(turnoActivo?.id), 5000);
-
-    // Formulario embebido
-    if (LUGAR_FORM_MODO === 'embebido' && lugarId) {
-        cargarFormEmbebido(turno.id);
-    }
-
-    mostrarFichaMobile();
 }
 
-// ── Cargar datos de la solicitud del turno ────────────────────
+// ── Cargar solicitud ──────────────────────────────────────────
 async function cargarFichaSolicitud(turnoId) {
     try {
         const res  = await fetch(`${API}get_consentimientos.php?turno_id=${turnoId}&incluir_solicitud=1`);
@@ -654,13 +828,18 @@ async function cargarFichaSolicitud(turnoId) {
         const sol   = json.solicitud;
         const pac   = json.paciente;
         const exams = json.examenes || [];
-        let consts  = json.consentimientos || [];
+        const consts = json.consentimientos || [];
 
-        // Datos del paciente
-        // Badge embarazada
+        // Nombre en el header
+        const nomHdr = document.getElementById('ficha-pac-nombre-hdr');
+        nomHdr.classList.remove('loading');
+        nomHdr.textContent = pac ? (pac.nombre_completo || pac.full_name || '—') : '—';
+
+        // Embarazada
         const badgeEmb = document.getElementById('pac-embarazada');
         if (badgeEmb) badgeEmb.classList.toggle('d-none', !(sol && sol.embarazada == 1));
 
+        // Médico
         const medDiv = document.getElementById('pac-medico');
         if (medDiv) {
             const tieneMedico = sol && sol.medico_nombre;
@@ -677,7 +856,7 @@ async function cargarFichaSolicitud(turnoId) {
             document.getElementById('pac-nombre').textContent =
                 pac.nombre_completo || pac.full_name || '—';
             document.getElementById('pac-doc').textContent =
-                ((pac.tipo_documento||'') + ' ' + (pac.numero_documento||pac.documento||'')).trim() || '—';
+                ((pac.tipo_documento || '') + ' ' + (pac.numero_documento || pac.documento || '')).trim() || '—';
             document.getElementById('pac-fec').textContent = pac.fecha_nacimiento || '—';
             document.getElementById('pac-cel').textContent = pac.telefono || pac.celular || '—';
         } else {
@@ -695,10 +874,7 @@ async function cargarFichaSolicitud(turnoId) {
             listaEx.innerHTML = '<span class="text-muted small">Sin exámenes registrados</span>';
         }
 
-        // Consentimientos
         renderConsentimientos(consts);
-
-        // Comentarios
         cargarComentarios(turnoId);
 
     } catch (_) {}
@@ -715,26 +891,36 @@ const CONSENT_LBL = {
 
 function renderConsentimientos(lista) {
     tieneConsent  = lista.length > 0;
-    hayPendientes = lista.some(c => !['firmado', 'rechazado'].includes(c.estado));
+    hayPendientes = lista.some(c => !['firmado','rechazado'].includes(c.estado));
+    const pendCount = lista.filter(c => !['firmado','rechazado'].includes(c.estado)).length;
 
-    const sec      = document.getElementById('sec-consent');
-    const listEl   = document.getElementById('lista-consent');
-    const sinEl    = document.getElementById('sin-consent');
-    const banner   = document.getElementById('bloqueo-banner');
-    const btnIni   = document.getElementById('btn-iniciar');
+    const listEl = document.getElementById('lista-consent');
+    const sinEl  = document.getElementById('sin-consent');
+    const banner = document.getElementById('bloqueo-banner');
+    const btnFin = document.getElementById('btn-finalizar');
+
+    // Aviso en barra de acciones
+    const warnStrip = document.getElementById('accion-consent-warn');
+    const warnTxt   = document.getElementById('accion-warn-txt');
+    if (warnStrip) {
+        if (hayPendientes) {
+            warnStrip.classList.remove('d-none');
+            warnTxt.textContent = pendCount + ' consentimiento' + (pendCount > 1 ? 's' : '') + ' pendiente' + (pendCount > 1 ? 's' : '');
+        } else {
+            warnStrip.classList.add('d-none');
+        }
+    }
 
     if (!tieneConsent) {
         listEl.innerHTML = '';
         sinEl.classList.remove('d-none');
         banner.classList.add('d-none');
-        btnIni.disabled = false;
+        if (btnFin) btnFin.disabled = false;
         return;
     }
 
     sinEl.classList.add('d-none');
     banner.classList.toggle('d-none', !hayPendientes);
-    btnIni.disabled = false;
-    const btnFin = document.getElementById('btn-finalizar');
     if (btnFin) btnFin.disabled = hayPendientes;
 
     listEl.innerHTML = lista.map(c => {
@@ -746,24 +932,22 @@ function renderConsentimientos(lista) {
         const idJs  = parseInt(c.id) || 0;
         const tId   = parseInt(c.turno_id) || (turnoActivo?.id) || 0;
 
-        // Botón ver (firmado)
+        // Botón ver
         const btnVer = (ya && c.token)
             ? `<a href="${BASE_WA}ver_formulario_enviado.php?token=${token}" target="_blank"
                   class="btn btn-outline-secondary" title="Ver firmado">
                   <i class="fas fa-eye"></i> Ver
                </a>` : '';
 
-        // Acción principal según modo y estado
+        // Acción de firma según modo
         let btnAccion = '';
         if (!ya && c.token) {
             if (LUGAR_FORM_MODO === 'embebido') {
-                // Modo embebido: abrir modal directamente
                 btnAccion = `<button class="btn btn-primary" title="Abrir formulario"
                                onclick="abrirModalConsentimientoPorToken('${token}')">
                                <i class="fas fa-pen me-1"></i>Firmar
                              </button>`;
             } else {
-                // Modo link: firmar presencial o reenviar WA
                 btnAccion = `<button class="btn btn-outline-primary" title="Firmar aquí"
                                onclick="abrirFirmaPresencial('${token}', ${idJs}, ${nomJs.replace(/"/g,'&quot;')})">
                                <i class="fas fa-signature"></i> Firmar
@@ -809,7 +993,6 @@ async function reenviarConsentimiento(turnoId) {
     }
 }
 
-// ── Modal de firma presencial ─────────────────────────────────
 async function abrirFirmaPresencial(token, consentId, nombreForm) {
     try {
         const res = await fetch(API + 'crear_envio_presencial.php', {
@@ -825,6 +1008,64 @@ async function abrirFirmaPresencial(token, consentId, nombreForm) {
     }
 }
 
+// ── Modal de consentimiento embebido ─────────────────────────
+function _abrirModalConToken(token) {
+    const modal  = document.getElementById('modal-consentimiento');
+    const iframe = document.getElementById('modal-consent-iframe');
+    const load   = document.getElementById('modal-consent-loading');
+    iframe.style.display = 'none';
+    iframe.src   = '';
+    load.style.display = '';
+    modal.style.display = 'flex';
+    setTimeout(() => {
+        iframe.src = `${BASE_WA}ver_formulario_enviado.php?token=${encodeURIComponent(token)}&embed=1`;
+    }, 80);
+}
+
+function abrirModalConsentimientoPorToken(token) {
+    _abrirModalConToken(token);
+}
+
+function cerrarModalConsentimiento() {
+    const modal  = document.getElementById('modal-consentimiento');
+    const iframe = document.getElementById('modal-consent-iframe');
+    modal.style.display = 'none';
+    iframe.src = '';
+    iframe.style.display = 'none';
+    document.getElementById('modal-consent-loading').style.display = '';
+    if (turnoActivo) actualizarConsentimientos(turnoActivo.id);
+}
+
+window.addEventListener('message', function(e) {
+    if (e.data && e.data.type === 'turneroFirmado') {
+        cerrarModalConsentimiento();
+        mostrarToast('Consentimiento firmado ✓', 'success', 3000);
+        if (turnoActivo) actualizarConsentimientos(turnoActivo.id);
+    }
+});
+
+// ── Formulario embebido (iframe, modo link) ───────────────────
+async function cargarFormEmbebido(turnoId) {
+    if (LUGAR_FORM_MODO === 'embebido') return; // token llega vía renderConsentimientos → modal
+    const sec    = document.getElementById('sec-form-embebido');
+    const iframe = document.getElementById('form-embebido-iframe');
+    const load   = document.getElementById('form-embebido-loading');
+    if (!sec || !iframe) return;
+    sec.classList.remove('d-none');
+    iframe.style.display = 'none';
+    load.style.display   = '';
+    try {
+        const res  = await fetch(`${API}get_consent_token.php?turno_id=${turnoId}&lugar_id=${lugarId}`);
+        const json = await res.json();
+        if (json.ok && json.token) {
+            iframe.src = `${BASE_WA}ver_formulario_enviado.php?token=${encodeURIComponent(json.token)}`;
+        } else {
+            load.innerHTML = '<span class="text-danger small"><i class="fas fa-exclamation-triangle me-1"></i>' + escHtml(json.error || 'No hay formulario configurado') + '</span>';
+        }
+    } catch (e) {
+        load.innerHTML = '<span class="text-danger small"><i class="fas fa-exclamation-triangle me-1"></i>Error al cargar formulario</span>';
+    }
+}
 
 // ── Acciones del turno ────────────────────────────────────────
 async function iniciarAtencion() {
@@ -834,36 +1075,25 @@ async function iniciarAtencion() {
 
 async function finalizarAtencion() {
     if (!turnoActivo) return;
-    if (hayPendientes) {
-        alert('Debe firmar todos los consentimientos antes de finalizar la atención.');
-        return;
-    }
+    if (hayPendientes) { mostrarError('Debe firmar todos los consentimientos antes de finalizar.'); return; }
     if (!confirm(`¿Finalizar atención del turno ${turnoActivo.codigo}?`)) return;
-
     await cambiarEstadoTurno('finalizado');
 }
 
 async function marcarAusente() {
     if (!turnoActivo) return;
     if (!confirm(`¿Marcar turno ${turnoActivo.codigo} como AUSENTE?`)) return;
-
     await cambiarEstadoTurno('ausente');
 }
 
 async function regresarCola() {
     if (!turnoActivo) return;
-    if (!confirm(`¿Regresar turno ${turnoActivo.codigo} a la cola del lugar?`)) return;
-
-    // Regresar a en_espera_lugar
+    if (!confirm(`¿Regresar turno ${turnoActivo.codigo} a la cola?`)) return;
     try {
         const res  = await fetch(API + 'cambiar_estado.php', {
             method:  'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                turno_id:     turnoActivo.id,
-                nuevo_estado: 'en_espera_lugar',
-                lugar_id:     lugarId,
-            }),
+            body: JSON.stringify({ turno_id: turnoActivo.id, nuevo_estado: 'en_espera_lugar', lugar_id: lugarId }),
         });
         const json = await res.json();
         if (!json.ok) { mostrarError(json.error); return; }
@@ -890,92 +1120,61 @@ async function cambiarEstadoTurno(nuevoEstado) {
     }
 }
 
-// ── Embebido como modal ───────────────────────────────────────
-let _consentTokenCache = null; // { turnoId, token }
-
-// cargarFormEmbebido ya no necesita hacer nada (el token viene de la fila de consentimiento)
-async function cargarFormEmbebido(turnoId) { /* token llega vía renderConsentimientos */ }
-
-function _abrirModalConToken(token) {
-    const modal  = document.getElementById('modal-consentimiento');
-    const iframe = document.getElementById('modal-consent-iframe');
-    const load   = document.getElementById('modal-consent-loading');
-    iframe.style.display = 'none';
-    iframe.src   = '';
-    load.style.display = '';
-    modal.style.display = 'flex';
-    setTimeout(() => {
-        iframe.src = `${BASE_WA}ver_formulario_enviado.php?token=${encodeURIComponent(token)}&embed=1`;
-    }, 80);
-}
-
-function abrirModalConsentimiento() {
-    if (!_consentTokenCache?.token) { mostrarError('Token de consentimiento no disponible.'); return; }
-    _abrirModalConToken(_consentTokenCache.token);
-}
-
-function abrirModalConsentimientoPorToken(token) {
-    _abrirModalConToken(token);
-}
-
-function cerrarModalConsentimiento() {
-    const modal  = document.getElementById('modal-consentimiento');
-    const iframe = document.getElementById('modal-consent-iframe');
-    modal.style.display = 'none';
-    iframe.src = '';
-    iframe.style.display = 'none';
-    document.getElementById('modal-consent-loading').style.display = '';
-    // Refrescar estado del consentimiento
-    if (turnoActivo) actualizarConsentimientos(turnoActivo.id);
-}
-
-// Cerrar modal si se firma desde el iframe
-window.addEventListener('message', function(e) {
-    if (e.data && e.data.type === 'turneroFirmado') {
-        cerrarModalConsentimiento();
-        mostrarToast('Consentimiento firmado ✓', 'success', 3000);
-        if (turnoActivo) actualizarConsentimientos(turnoActivo.id);
-        // Ocultar botón de firma
-        const sec = document.getElementById('sec-form-embebido');
-        if (sec) sec.classList.add('d-none');
-    }
-});
-
+// ── Reset ficha ───────────────────────────────────────────────
 function resetFicha() {
     clearInterval(pollingConsentId);
-    turnoActivo   = null;
-    tieneConsent  = false;
-    hayPendientes = false;
+    turnoActivo        = null;
+    tieneConsent       = false;
+    hayPendientes      = false;
     _consentTokenCache = null;
+
     cerrarModalConsentimiento();
 
-    document.getElementById('ficha-turno').classList.add('d-none');
+    const iframe = document.getElementById('form-embebido-iframe');
+    const sec    = document.getElementById('sec-form-embebido');
+    const load   = document.getElementById('form-embebido-loading');
+    if (iframe) { iframe.src = ''; iframe.style.display = 'none'; }
+    if (sec)    { sec.classList.add('d-none'); }
+    if (load)   { load.style.display = ''; load.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Cargando formulario...'; }
+
+    const fichaEl = document.getElementById('ficha-turno');
+    fichaEl.classList.add('d-none');
+    fichaEl.style.display = 'none';
     document.getElementById('ficha-placeholder').classList.remove('d-none');
     document.getElementById('badge-turno-activo').classList.add('d-none');
 
-    // Botones al estado inicial
+    const nomHdr = document.getElementById('ficha-pac-nombre-hdr');
+    if (nomHdr) { nomHdr.textContent = ''; nomHdr.classList.remove('loading'); }
+
+    const warn = document.getElementById('accion-consent-warn');
+    if (warn) warn.classList.add('d-none');
+
     document.getElementById('btn-iniciar').classList.remove('d-none');
     document.getElementById('btn-iniciar').disabled = false;
     document.getElementById('btn-finalizar').classList.add('d-none');
     document.getElementById('btn-regresar').classList.add('d-none');
+    document.getElementById('btn-rellamar').classList.add('d-none');
 
     volverACola();
 }
 
+// ── Mobile ────────────────────────────────────────────────────
 function esMobile() { return window.innerWidth <= 860; }
+
 function mostrarFichaMobile() {
     if (!esMobile()) return;
     document.getElementById('lugar-ficha').classList.add('mobile-visible');
     document.querySelector('.lugar-cola').classList.add('mobile-oculta');
 }
+
 function volverACola() {
     document.getElementById('lugar-ficha').classList.remove('mobile-visible');
     document.querySelector('.lugar-cola').classList.remove('mobile-oculta');
 }
 
-// ── Helpers ───────────────────────────────────────────────────
+// ── Estado badge + botones ────────────────────────────────────
 function actualizarEstadoBadge(estado) {
-    const el = document.getElementById('ficha-estado-badge');
+    const el   = document.getElementById('ficha-estado-badge');
     const mapa = {
         'en_espera_lugar': ['bg-warning-subtle text-warning border border-warning-subtle',  'En espera'],
         'en_servicio':     ['bg-success-subtle text-success border border-success-subtle',  'En servicio'],
@@ -983,14 +1182,14 @@ function actualizarEstadoBadge(estado) {
         'ausente':         ['bg-danger-subtle text-danger border border-danger-subtle',      'Ausente'],
     };
     const [cls, lbl] = mapa[estado] || ['bg-secondary-subtle text-secondary border', estado];
-    el.className = 'ms-auto badge ' + cls;
+    el.className   = 'badge ' + cls;
     el.textContent = lbl;
 
-    // Sincronizar botones según estado
-    const btnIni     = document.getElementById('btn-iniciar');
-    const btnFin     = document.getElementById('btn-finalizar');
-    const btnReg     = document.getElementById('btn-regresar');
+    const btnIni      = document.getElementById('btn-iniciar');
+    const btnFin      = document.getElementById('btn-finalizar');
+    const btnReg      = document.getElementById('btn-regresar');
     const btnRellamar = document.getElementById('btn-rellamar');
+
     if (estado === 'en_espera_lugar') {
         btnIni.classList.remove('d-none'); btnIni.disabled = false;
         btnFin.classList.add('d-none');
@@ -1016,7 +1215,7 @@ async function rellamarTurno() {
         });
         const json = await res.json();
         if (!json.ok) mostrarError(json.error);
-        else if (json.turno) { mostrarLlamando(json.turno.codigo); }
+        else if (json.turno) mostrarLlamando(json.turno.codigo);
     } catch (err) {
         mostrarError(err.message);
     } finally {
@@ -1024,46 +1223,23 @@ async function rellamarTurno() {
     }
 }
 
-function escHtml(str) {
-    const d = document.createElement('div');
-    d.appendChild(document.createTextNode(String(str ?? '')));
-    return d.innerHTML;
-}
-
-// ── Toast (igual que recepción) ───────────────────────────────
-let _toastTimer = null;
-function mostrarToast(msg, type = 'info', duration = 2500) {
-    const el  = document.getElementById('lug-toast');
-    const ico = document.getElementById('lug-toast-ico');
-    const txt = document.getElementById('lug-toast-msg');
-    const icons = { success: 'fa-check-circle', info: 'fa-info-circle', warn: 'fa-exclamation-triangle', error: 'fa-times-circle' };
-    el.className = 'rec-toast ' + type;
-    ico.innerHTML = '<i class="fas ' + (icons[type] || icons.info) + '"></i>';
-    txt.textContent = msg;
-    el.classList.add('show');
-    clearTimeout(_toastTimer);
-    _toastTimer = setTimeout(() => el.classList.remove('show'), duration);
-}
-function mostrarError(msg)     { mostrarToast(msg, 'error', 4000); }
-function mostrarLlamando(cod)  { mostrarToast('Llamando turno ' + cod + '…', 'info', 2000); }
-
-// ── Comentarios y notas ───────────────────────────────────────
+// ── Comentarios ───────────────────────────────────────────────
 async function cargarComentarios(turnoId) {
     if (!turnoId) return;
     const cont = document.getElementById('lista-comentarios');
     cont.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Cargando…';
     try {
-        const res = await fetch(`${API}comentarios.php?turno_id=${turnoId}`);
+        const res  = await fetch(`${API}comentarios.php?turno_id=${turnoId}`);
         const json = await res.json();
         if (!json.ok || !json.comentarios) { cont.innerHTML = '<small class="text-muted">Sin comentarios</small>'; return; }
-        if (json.comentarios.length === 0) { cont.innerHTML = '<small class="text-muted">Sin comentarios aún</small>'; return; }
+        if (!json.comentarios.length)      { cont.innerHTML = '<small class="text-muted">Sin comentarios aún</small>'; return; }
         cont.innerHTML = json.comentarios.map(c => `
             <div style="background:#f8fafc;border-left:3px solid #8b5cf6;padding:8px 10px;margin-bottom:8px;border-radius:4px">
                 <div style="font-size:.7rem;color:#94a3b8;margin-bottom:2px">${escHtml(c.usuario_nombre)} • ${new Date(c.creado_at).toLocaleString()}</div>
                 <div style="font-size:.82rem;color:#334155">${escHtml(c.comentario)}</div>
             </div>
         `).join('');
-    } catch(_) {
+    } catch (_) {
         cont.innerHTML = '<small class="text-danger">Error al cargar comentarios</small>';
     }
 }
@@ -1074,7 +1250,7 @@ async function guardarComentario() {
     const txt = (inp.value || '').trim();
     if (!txt) { mostrarError('El comentario no puede estar vacío'); return; }
     try {
-        const res = await fetch(API + 'comentarios.php', {
+        const res  = await fetch(API + 'comentarios.php', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ turno_id: turnoActivo.id, comentario: txt, tipo: 'muestras' }),
@@ -1084,11 +1260,34 @@ async function guardarComentario() {
         inp.value = '';
         await cargarComentarios(turnoActivo.id);
         mostrarToast('Comentario guardado', 'success', 2000);
-    } catch(err) {
+    } catch (err) {
         mostrarError(err.message);
     }
 }
 
+// ── Helpers ───────────────────────────────────────────────────
+function escHtml(str) {
+    const d = document.createElement('div');
+    d.appendChild(document.createTextNode(String(str ?? '')));
+    return d.innerHTML;
+}
+
+let _toastTimer = null;
+function mostrarToast(msg, type = 'info', duration = 2500) {
+    const el  = document.getElementById('lug-toast');
+    const ico = document.getElementById('lug-toast-ico');
+    const txt = document.getElementById('lug-toast-msg');
+    const icons = { success:'fa-check-circle', info:'fa-info-circle', warn:'fa-exclamation-triangle', error:'fa-times-circle' };
+    el.className    = 'rec-toast ' + type;
+    ico.innerHTML   = '<i class="fas ' + (icons[type] || icons.info) + '"></i>';
+    txt.textContent = msg;
+    el.classList.add('show');
+    clearTimeout(_toastTimer);
+    _toastTimer = setTimeout(() => el.classList.remove('show'), duration);
+}
+function mostrarError(msg)    { mostrarToast(msg, 'error', 4000); }
+function mostrarLlamando(cod) { mostrarToast('Llamando turno ' + cod + '…', 'info', 2000); }
+
 /* ── Ocupación exclusiva del puesto ──────────────────────────── */
 (function(_ID, _NOMBRE, _VIEW, _PARAM) {
     if (!_ID) return;
@@ -1112,7 +1311,6 @@ async function guardarComentario() {
         }
     }
 
-    /* Pantalla de bloqueo */
     function _mostrarBloqueado(ocupadoPor) {
         document.body.innerHTML =
             '<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;' +
@@ -1138,7 +1336,6 @@ async function guardarComentario() {
         if (el) el.innerHTML = '<span style="color:' + (color||'#555') + '">' + msg + '</span>';
     }
 
-    /* Solicitar toma de control */
     let _checkTransferTimer = null;
     window._ocToma = async function() {
         const btn = document.getElementById('_btn-solicitar');
@@ -1164,15 +1361,14 @@ async function guardarComentario() {
                         _setEstado('❌ La solicitud fue denegada.', '#c62828');
                         if (btn) { btn.disabled = false; btn.textContent = '📢 Volver a solicitar'; }
                     }
-                } catch(_) {}
+                } catch (_) {}
             }, 1500);
-        } catch(e) {
+        } catch (e) {
             _setEstado('Error de red: ' + e.message, '#c62828');
             if (btn) btn.disabled = false;
         }
     };
 
-    /* Ir al siguiente disponible */
     window._ocSiguiente = async function() {
         const btn = document.getElementById('_btn-siguiente');
         if (btn) btn.disabled = true;
@@ -1185,13 +1381,12 @@ async function guardarComentario() {
                 return;
             }
             _redirigirSiguiente(j.disponibles);
-        } catch(e) {
+        } catch (e) {
             _setEstado('Error de red.', '#c62828');
             if (btn) btn.disabled = false;
         }
     };
 
-    /* Modal de solicitud entrante (para el ocupante actual) */
     let _modalActivo = false;
     function _mostrarModalSolicitud(solicitante) {
         if (_modalActivo) return;
@@ -1225,7 +1420,7 @@ async function guardarComentario() {
             try {
                 const j = await _post({ action: 'disponibles' });
                 _redirigirSiguiente(j.disponibles || []);
-            } catch(_) {
+            } catch (_) {
                 window.location.href = BASE_WA + 'erp.php?m=turnero';
             }
         }
@@ -1239,23 +1434,20 @@ async function guardarComentario() {
         };
     }
 
-    /* Arranque */
     async function _iniciar() {
         try {
             const j = await _post({ action: 'claim' });
             if (!j.ok) return;
             if (!j.disponible) { _mostrarBloqueado(j.ocupado_por); return; }
-            // Heartbeat cada 60 s
             setInterval(() => _post({ action: 'ping' }).catch(() => {}), 60000);
-            // Polling de solicitudes entrantes cada 2 s
             setInterval(async () => {
                 if (_modalActivo) return;
                 try {
                     const r = await _post({ action: 'check_solicitud' });
                     if (r.hay_solicitud) _mostrarModalSolicitud(r.solicitante);
-                } catch(_) {}
+                } catch (_) {}
             }, 2000);
-        } catch(_) {}
+        } catch (_) {}
     }
 
     window.addEventListener('beforeunload', () => {