From 54fc986d8229cc96eb363107999c8a7c112af759 Mon Sep 17 00:00:00 2001 From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com> Date: Sat, 4 Jul 2026 12:57:50 -0500 Subject: [PATCH] style(turnero): homologar UI/UX entre lugar y recepcion MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit lugar.php: - Cola: 340px→370px, border 1.5px→1px, border-radius 11px, padding .65rem .9rem, min-height 58px→62px (touch target) - Cola header: font-size .72→.78rem, letter-spacing .06→.08em - btn-llamar-next: padding .6→.65rem - ficha-sec: padding 1rem 1.1rem→1.2rem, header .72→.78rem, .07→.08em - consent-row: padding .55→.5rem, min-height 46px añadido - Transición mobile: .22s→.2s - Modal paciente: header plano→gradiente azul (#1043a0→#1565c0) recepcion.php: - cola-card: border-radius 10→11px - prio-dot: border-radius 50%→9px (cuadrado redondeado, consistente con lugar) - btn-accion-sec: font-size .8→.82rem Co-Authored-By: Claude Sonnet 4.6 --- modules/turnero/views/lugar.php | 33 +++++++++++++++-------------- modules/turnero/views/recepcion.php | 6 +++--- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/modules/turnero/views/lugar.php b/modules/turnero/views/lugar.php index da10ed2..e54670b 100644 --- a/modules/turnero/views/lugar.php +++ b/modules/turnero/views/lugar.php @@ -45,16 +45,16 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user'][' /* ── Layout ─────────────────────────────────────────────── */ .lugar-layout { display: grid; - grid-template-columns: 340px 1fr; + grid-template-columns: 370px 1fr; height: calc(100vh - 52px); overflow: hidden; } @media (max-width: 680px) { .lugar-layout { grid-template-columns: 1fr; position: relative; overflow: hidden; } - .lugar-cola { transition: transform .22s ease; } + .lugar-cola { transition: transform .2s 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 .22s ease; overflow-y: auto; } + transform: translateX(100%); transition: transform .2s ease; overflow-y: auto; } .lugar-ficha.mobile-visible { transform: translateX(0); } } @@ -73,7 +73,7 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user'][' display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem; } .cola-hdr-title { - font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; + font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; font-weight: 700; } .cola-counts { display: flex; gap: .4rem; align-items: center; } @@ -85,7 +85,7 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user'][' .cola-count-chip.servicio { background: #f0fdf4; color: #166534; border-color: #bbf7d0; } .btn-llamar-next { - width: 100%; padding: .6rem 1rem; border: none; border-radius: 10px; + width: 100%; padding: .65rem 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; @@ -102,11 +102,11 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user'][' } .cola-card { - background: #fff; border: 1.5px solid #e2e8f0; border-radius: 11px; - padding: .6rem .8rem .6rem .7rem; margin-bottom: .3rem; + background: #fff; border: 1px solid #e2e8f0; border-radius: 11px; + padding: .65rem .9rem; margin-bottom: .3rem; display: flex; align-items: center; gap: .55rem; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; - min-height: 58px; + min-height: 62px; } .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; } @@ -216,11 +216,11 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user'][' /* ── Secciones ──────────────────────────────────────────── */ .ficha-sec { background: #f8fafc; border: 1px solid #e2e8f0; - border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .85rem; + border-radius: 12px; padding: 1.2rem; margin-bottom: .85rem; } .ficha-sec-hdr { display: flex; align-items: center; gap: .4rem; - font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; + font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #475569; font-weight: 700; margin-bottom: .7rem; } .ficha-sec-hdr i { font-size: .85rem; } @@ -241,8 +241,8 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user'][' /* ── Consentimientos ── */ .consent-row { display: flex; align-items: center; gap: .6rem; - padding: .55rem .7rem; border-radius: 10px; margin-bottom: .35rem; - font-size: .84rem; border: 1px solid transparent; + padding: .5rem .7rem; border-radius: 10px; margin-bottom: .35rem; + font-size: .84rem; border: 1px solid transparent; min-height: 46px; } .consent-row.firmado { background: #f0fdf4; color: #166534; border-color: #bbf7d0; } .consent-row.rechazado { background: #f8fafc; color: #64748b; border-color: #e2e8f0; } @@ -330,11 +330,12 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user'][' } .mpac-hdr { display:flex; align-items:center; justify-content:space-between; - padding:13px 18px; border-bottom:1px solid #e2e8f0; flex-shrink:0; background:#f8fafc; + padding:1.1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.15); flex-shrink:0; + background:linear-gradient(135deg,#1043a0 0%,#1565c0 100%); } - .mpac-hdr-title { font-weight:700; font-size:.97rem; color:#1e293b; display:flex; align-items:center; gap:.5rem; } - .mpac-close { background:none; border:none; font-size:1.2rem; color:#94a3b8; cursor:pointer; padding:2px 6px; border-radius:6px; } - .mpac-close:hover { background:#f1f5f9; color:#475569; } + .mpac-hdr-title { font-weight:700; font-size:.97rem; color:#fff; display:flex; align-items:center; gap:.5rem; } + .mpac-close { background:rgba(255,255,255,.15); border:none; font-size:1.1rem; color:#fff; cursor:pointer; padding:4px 8px; border-radius:6px; } + .mpac-close:hover { background:rgba(255,255,255,.25); } .mpac-body { overflow-y:auto; padding:18px; flex:1; } .mpac-dato { display:flex; gap:.5rem; align-items:baseline; margin-bottom:.4rem; } .mpac-dato .lbl { font-size:.72rem; color:#94a3b8; min-width:95px; flex-shrink:0; } diff --git a/modules/turnero/views/recepcion.php b/modules/turnero/views/recepcion.php index 4633cd4..a9d57eb 100644 --- a/modules/turnero/views/recepcion.php +++ b/modules/turnero/views/recepcion.php @@ -113,14 +113,14 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user'][' .cola-items { flex: 1; overflow-y: auto; padding: .5rem; } .cola-card { background: #fff; border: 1px solid #e2e8f0; - border-radius: 10px; padding: .65rem .9rem; + border-radius: 11px; padding: .65rem .9rem; margin-bottom: .4rem; cursor: default; display: flex; align-items: center; gap: .6rem; transition: box-shadow .15s; } .cola-card.activo { border-color: #3b82f6; box-shadow: 0 0 0 2px #bfdbfe; } .cola-card .prio-dot { - width: 36px; height: 36px; border-radius: 50%; + width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; color: #fff; flex-shrink: 0; } @@ -297,7 +297,7 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user'][' .accion-secondary-row { display: flex; gap: .4rem; flex-wrap: wrap; } .btn-accion-sec { flex: 1; min-width: 80px; padding: .55rem .5rem; border-radius: 9px; - font-size: .8rem; font-weight: 600; cursor: pointer; + 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; }