Update kiosko.php

This commit is contained in:
Lizandro Guarnizo
2026-06-11 20:32:56 -05:00
parent 2149938178
commit 34ab846acc
+23 -23
View File
@@ -125,7 +125,7 @@ unset($p);
} }
.kiosko-topbar .lab-nombre { .kiosko-topbar .lab-nombre {
color: #fff; color: #fff;
font-size: clamp(1rem, 2.5vw, 1.4rem); font-size: clamp(1.15rem, 2.8vw, 1.55rem);
font-weight: 700; font-weight: 700;
letter-spacing: -.3px; letter-spacing: -.3px;
flex: 1; flex: 1;
@@ -136,7 +136,7 @@ unset($p);
color: #fff; color: #fff;
border-radius: 8px; border-radius: 8px;
padding: 4px 12px; padding: 4px 12px;
font-size: .8rem; font-size: .95rem;
font-weight: 600; font-weight: 600;
} }
.btn-fullscreen { .btn-fullscreen {
@@ -145,7 +145,7 @@ unset($p);
color: #fff; color: #fff;
border-radius: 8px; border-radius: 8px;
padding: 6px 10px; padding: 6px 10px;
font-size: 1rem; font-size: 1.15rem;
cursor: pointer; cursor: pointer;
transition: background .15s; transition: background .15s;
flex-shrink: 0; flex-shrink: 0;
@@ -169,14 +169,14 @@ unset($p);
/* ── Instrucción central ── */ /* ── Instrucción central ── */
.kiosko-titulo { .kiosko-titulo {
font-size: clamp(1.4rem, 3.5vw, 2.2rem); font-size: clamp(1.55rem, 3.8vw, 2.35rem);
font-weight: 700; font-weight: 700;
color: var(--brand-dark); color: var(--brand-dark);
text-align: center; text-align: center;
margin-bottom: .4rem; margin-bottom: .4rem;
} }
.kiosko-subtitulo { .kiosko-subtitulo {
font-size: clamp(.85rem, 1.8vw, 1.05rem); font-size: clamp(1rem, 2.1vw, 1.2rem);
color: #64748b; color: #64748b;
text-align: center; text-align: center;
margin-bottom: 2rem; margin-bottom: 2rem;
@@ -210,30 +210,30 @@ unset($p);
width: 52px; height: 52px; width: 52px; height: 52px;
border-radius: 14px; border-radius: 14px;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-size: 1.5rem; font-size: 1.7rem;
color: #fff; color: #fff;
margin-bottom: .2rem; margin-bottom: .2rem;
} }
.btn-prioridad .letra { font-size: clamp(1rem, 2.5vw, 1.4rem); font-weight: 800; color: #1e293b; } .btn-prioridad .letra { font-size: clamp(1.15rem, 2.8vw, 1.55rem); font-weight: 800; color: #1e293b; }
.btn-prioridad .nombre { font-size: clamp(.82rem, 1.8vw, 1rem); color: #334155; text-align: center; } .btn-prioridad .nombre { font-size: clamp(.97rem, 2.1vw, 1.15rem); color: #334155; text-align: center; }
.btn-prioridad .desc { font-size: clamp(.68rem, 1.3vw, .8rem); color: #94a3b8; text-align: center; } .btn-prioridad .desc { font-size: clamp(.83rem, 1.6vw, .95rem); color: #94a3b8; text-align: center; }
/* ── Formulario de datos ── */ /* ── Formulario de datos ── */
.form-kiosko { width: 100%; max-width: 480px; } .form-kiosko { width: 100%; max-width: 480px; }
.badge-prio-mini { .badge-prio-mini {
display: inline-flex; align-items: center; gap: 8px; display: inline-flex; align-items: center; gap: 8px;
padding: .45rem 1.2rem; border-radius: 99px; padding: .45rem 1.2rem; border-radius: 99px;
font-size: 1rem; font-weight: 700; color: #fff; font-size: 1.15rem; font-weight: 700; color: #fff;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.form-kiosko label { color: #475569; font-size: .95rem; margin-bottom: .35rem; font-weight: 500; } .form-kiosko label { color: #475569; font-size: 1.1rem; margin-bottom: .35rem; font-weight: 500; }
.form-kiosko .form-control { .form-kiosko .form-control {
background: #fff; background: #fff;
border: 1.5px solid #e2e8f0; border: 1.5px solid #e2e8f0;
color: #1e293b; color: #1e293b;
border-radius: 14px; border-radius: 14px;
padding: .85rem 1.1rem; padding: .85rem 1.1rem;
font-size: 1.05rem; font-size: 1.2rem;
box-shadow: 0 1px 4px rgba(0,0,0,.05); box-shadow: 0 1px 4px rgba(0,0,0,.05);
transition: border-color .2s, box-shadow .2s; transition: border-color .2s, box-shadow .2s;
} }
@@ -242,10 +242,10 @@ unset($p);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
outline: none; outline: none;
} }
.form-kiosko .hint { color: #94a3b8; font-size: .82rem; margin-top: .35rem; } .form-kiosko .hint { color: #94a3b8; font-size: .97rem; margin-top: .35rem; }
.btn-kiosko-main { .btn-kiosko-main {
border: none; border-radius: 14px; border: none; border-radius: 14px;
padding: 1rem 2rem; font-size: 1.05rem; font-weight: 700; padding: 1rem 2rem; font-size: 1.2rem; font-weight: 700;
cursor: pointer; color: #fff; cursor: pointer; color: #fff;
background: var(--brand); background: var(--brand);
box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 40%, transparent);
@@ -257,7 +257,7 @@ unset($p);
background: transparent; background: transparent;
border: 1.5px solid #e2e8f0; border: 1.5px solid #e2e8f0;
color: #94a3b8; border-radius: 12px; padding: .7rem 1.5rem; color: #94a3b8; border-radius: 12px; padding: .7rem 1.5rem;
font-size: .92rem; cursor: pointer; margin-top: .6rem; width: 100%; font-size: 1.07rem; cursor: pointer; margin-top: .6rem; width: 100%;
transition: background .12s, border-color .12s; transition: background .12s, border-color .12s;
} }
.btn-kiosko-back:hover { background: var(--brand-mid); border-color: var(--brand); color: var(--brand-dark); } .btn-kiosko-back:hover { background: var(--brand-mid); border-color: var(--brand); color: var(--brand-dark); }
@@ -297,7 +297,7 @@ unset($p);
max-width: 460px; width: 100%; max-width: 460px; width: 100%;
border-top: 6px solid var(--brand); border-top: 6px solid var(--brand);
} }
.ticket-label { color: #94a3b8; font-size: .85rem; text-transform: uppercase; .ticket-label { color: #94a3b8; font-size: 1rem; text-transform: uppercase;
letter-spacing: .08em; margin-bottom: .3rem; } letter-spacing: .08em; margin-bottom: .3rem; }
.ticket-codigo { .ticket-codigo {
font-size: clamp(4rem, 18vw, 9rem); font-size: clamp(4rem, 18vw, 9rem);
@@ -308,7 +308,7 @@ unset($p);
.ticket-prio-badge { .ticket-prio-badge {
display: inline-block; padding: .3rem 1.1rem; display: inline-block; padding: .3rem 1.1rem;
border-radius: 99px; font-weight: 700; color: #fff; border-radius: 99px; font-weight: 700; color: #fff;
font-size: .95rem; margin-top: .8rem; font-size: 1.1rem; margin-top: .8rem;
} }
.ticket-pos { .ticket-pos {
margin-top: 1.2rem; margin-top: 1.2rem;
@@ -316,13 +316,13 @@ unset($p);
border-radius: 12px; border-radius: 12px;
padding: .8rem; padding: .8rem;
} }
.ticket-pos .lbl { font-size: .78rem; color: #64748b; text-transform: uppercase; letter-spacing: .06em; } .ticket-pos .lbl { font-size: .93rem; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.ticket-pos .num { font-size: 1.8rem; font-weight: 800; color: var(--brand-dark); } .ticket-pos .num { font-size: 1.95rem; font-weight: 800; color: var(--brand-dark); }
.ticket-instruc { margin-top: 1.4rem; color: #94a3b8; font-size: .88rem; line-height: 1.5; } .ticket-instruc { margin-top: 1.4rem; color: #94a3b8; font-size: 1.03rem; line-height: 1.5; }
.btn-nuevo { .btn-nuevo {
margin-top: 1.8rem; border: 2px solid var(--brand-mid); margin-top: 1.8rem; border: 2px solid var(--brand-mid);
border-radius: 12px; padding: .75rem 2rem; border-radius: 12px; padding: .75rem 2rem;
font-size: .95rem; font-weight: 600; cursor: pointer; font-size: 1.1rem; font-weight: 600; cursor: pointer;
color: var(--brand-dark); background: #fff; color: var(--brand-dark); background: #fff;
transition: background .15s, border-color .15s; transition: background .15s, border-color .15s;
} }
@@ -350,7 +350,7 @@ unset($p);
.toast-error { .toast-error {
position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
background: #ef4444; color: #fff; padding: .75rem 1.5rem; background: #ef4444; color: #fff; padding: .75rem 1.5rem;
border-radius: 12px; font-size: .92rem; font-weight: 600; border-radius: 12px; font-size: 1.07rem; font-weight: 600;
box-shadow: 0 4px 20px rgba(0,0,0,.2); box-shadow: 0 4px 20px rgba(0,0,0,.2);
opacity: 0; pointer-events: none; transition: opacity .25s; opacity: 0; pointer-events: none; transition: opacity .25s;
z-index: 1000; white-space: nowrap; z-index: 1000; white-space: nowrap;
@@ -361,7 +361,7 @@ unset($p);
.kiosko-footer { .kiosko-footer {
text-align: center; text-align: center;
padding: 8px; padding: 8px;
font-size: .7rem; font-size: .85rem;
color: color-mix(in srgb, var(--brand) 55%, #fff); color: color-mix(in srgb, var(--brand) 55%, #fff);
background: var(--brand-mid); background: var(--brand-mid);
flex-shrink: 0; flex-shrink: 0;