fix(kiosko): corregir touch en Edge kiosk mode

- touch-action: manipulation directo en cada botón e input (no solo en body)
- -ms-touch-action para compatibilidad Edge legacy
- position: relative en .kiosko-wrap para contener screens absolutas
- inset: 0 en .screen.hidden para que no se salga del contenedor

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-22 22:12:19 -05:00
co-authored by Claude Sonnet 4.6
parent 868263fe6f
commit 728d78f606
+14 -1
View File
@@ -96,6 +96,7 @@ unset($p);
flex-direction: column;
height: 100vh;
overflow: hidden;
position: relative;
}
/* ── Header con logo ── */
@@ -150,6 +151,8 @@ unset($p);
transition: background .15s;
flex-shrink: 0;
line-height: 1;
touch-action: manipulation;
-ms-touch-action: manipulation;
}
.btn-fullscreen:hover { background: rgba(255,255,255,.28); }
@@ -164,7 +167,7 @@ unset($p);
transition: opacity .3s ease, transform .3s ease;
overflow: hidden;
}
.screen.hidden { opacity: 0; pointer-events: none; transform: scale(.98); position: absolute; }
.screen.hidden { opacity: 0; pointer-events: none; transform: scale(.98); position: absolute; inset: 0; }
.screen.visible { opacity: 1; pointer-events: all; transform: scale(1); position: relative; }
/* ── Instrucción central ── */
@@ -203,6 +206,8 @@ unset($p);
box-shadow: 0 2px 12px rgba(0,0,0,.10);
-webkit-user-select: none; user-select: none;
background: #fff;
touch-action: manipulation;
-ms-touch-action: manipulation;
}
.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); }
@@ -236,6 +241,8 @@ unset($p);
font-size: 1.2rem;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
transition: border-color .2s, box-shadow .2s;
touch-action: manipulation;
-ms-touch-action: manipulation;
}
.form-kiosko .form-control:focus {
border-color: var(--brand);
@@ -251,6 +258,8 @@ unset($p);
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;
touch-action: manipulation;
-ms-touch-action: manipulation;
}
.btn-kiosko-main:active { transform: scale(.97); filter: brightness(.9); }
.btn-kiosko-back {
@@ -259,6 +268,8 @@ unset($p);
color: #94a3b8; border-radius: 12px; padding: .7rem 1.5rem;
font-size: 1.07rem; cursor: pointer; margin-top: .6rem; width: 100%;
transition: background .12s, border-color .12s;
touch-action: manipulation;
-ms-touch-action: manipulation;
}
.btn-kiosko-back:hover { background: var(--brand-mid); border-color: var(--brand); color: var(--brand-dark); }
@@ -328,6 +339,8 @@ unset($p);
font-size: 1.1rem; font-weight: 600; cursor: pointer;
color: var(--brand-dark); background: #fff;
transition: background .15s, border-color .15s;
touch-action: manipulation;
-ms-touch-action: manipulation;
}
.btn-nuevo:hover { background: var(--brand-light); border-color: var(--brand); }