feat(turnero): UI/UX tablet improvements for recepcion and lugar views

- recepcion: wider queue column (370px), breakpoint at 680px so portrait
  tablets get 2-column layout; prominent "Llamar siguiente" button in queue
  column header; searchable exam filter; touch-friendly action bar with
  large primary/secondary button rows; larger touch targets for cards,
  checkboxes and consent items
- lugar: wider queue column (340px), breakpoint at 680px; larger action
  buttons (.8rem padding, 1rem font) and secondary buttons; consistent
  mobile breakpoint

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-03 18:55:07 -05:00
co-authored by Claude Sonnet 4.6
parent b55c7c1a19
commit 5af985581c
2 changed files with 121 additions and 31 deletions
+13 -9
View File
@@ -45,11 +45,11 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
/* ── Layout ─────────────────────────────────────────────── */
.lugar-layout {
display: grid;
grid-template-columns: 290px 1fr;
grid-template-columns: 340px 1fr;
height: calc(100vh - 52px);
overflow: hidden;
}
@media (max-width: 860px) {
@media (max-width: 680px) {
.lugar-layout { grid-template-columns: 1fr; position: relative; overflow: hidden; }
.lugar-cola { transition: transform .22s ease; }
.lugar-cola.mobile-oculta { transform: translateX(-100%); position: absolute; inset: 0; pointer-events: none; }
@@ -173,7 +173,7 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
position: sticky; top: 0; z-index: 20;
}
@media (max-width: 860px) {
@media (max-width: 680px) {
.ficha-mobile-topbar { display: flex; }
}
.ficha-mobile-topbar .btn-back {
@@ -273,8 +273,8 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
.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;
width: 100%; padding: .8rem; border: none; border-radius: 11px;
font-size: 1rem; font-weight: 700; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: .45rem;
transition: background .15s, transform .1s, opacity .15s;
}
@@ -289,8 +289,8 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
}
.btn-accion-sec {
flex: 1; min-width: 80px;
padding: .45rem .5rem; border-radius: 9px;
font-size: .8rem; font-weight: 600; cursor: pointer;
padding: .55rem .5rem; border-radius: 9px;
font-size: .82rem; font-weight: 600; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: .35rem;
border: 1.5px solid; background: transparent; transition: background .12s;
}
@@ -921,11 +921,15 @@ async function cargarFichaSolicitud(turnoId) {
const pac = json.paciente;
_solicitudActiva = sol || null;
// Número de orden
// Número de orden (F-... azul, D-... verde)
const ordenEl = document.getElementById('ficha-orden');
const ordenValEl = document.getElementById('ficha-orden-val');
if (sol && sol.numero_orden) {
ordenValEl.textContent = sol.numero_orden;
const isDom = sol.numero_orden.startsWith('D-');
ordenEl.style.background = isDom ? '#f0fdf4' : '#eff6ff';
ordenEl.style.color = isDom ? '#15803d' : '#1d4ed8';
ordenEl.style.borderColor = isDom ? '#86efac' : '#bfdbfe';
ordenEl.classList.remove('d-none');
} else {
ordenEl.classList.add('d-none');
@@ -1271,7 +1275,7 @@ function resetFicha() {
}
// ── Mobile ────────────────────────────────────────────────────
function esMobile() { return window.innerWidth <= 860; }
function esMobile() { return window.innerWidth <= 680; }
function mostrarFichaMobile() {
if (!esMobile()) return;