/* =========================================================
   Tótem de reserva de fichas — estética clínica, blanca y futurista
   Superficies blancas y de vidrio esmerilado, auroras suaves en menta
   y celeste, líneas finas y acentos verdes luminosos.
   Todo se mide en rem; la base escala con la pantalla (≈22 px en un
   tótem vertical de 1080×1920).
   ========================================================= */
:root {
    --green: #00a651;
    --green-600: #008a43;
    --green-400: #2fd07f;
    --green-200: #9eeec4;
    --green-50: #ecfaf3;
    --cyan: #19b8d8;
    --cyan-50: #e8f8fc;
    --navy: #0f2233;
    --ink: #1d2b33;
    --muted: #6b7a85;
    --faint: #a5b2bb;
    --line: rgba(15, 34, 51, .08);
    --line-2: rgba(15, 34, 51, .14);
    --surface: rgba(255, 255, 255, .78);
    --amber: #b7791f;
    --amber-50: #fff6e6;
    --display: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
    --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --r: 1.25rem;
    --touch: 4.4rem;
    --glow: 0 0 0 .3rem rgba(0, 166, 81, .12), 0 .8rem 2.4rem -.8rem rgba(0, 166, 81, .45);
    --shadow: 0 .05rem .1rem rgba(15,34,51,.04), 0 .4rem 1rem -.3rem rgba(15,34,51,.06), 0 1.6rem 3rem -1.6rem rgba(15,34,51,.14);
    --shadow-lg: 0 .1rem .2rem rgba(15,34,51,.04), 0 1rem 2rem -.6rem rgba(15,34,51,.1), 0 3rem 5rem -2rem rgba(15,34,51,.2);
    --accent: linear-gradient(135deg, #00b85a 0%, #00a651 45%, #0fae9a 100%);
}

html { font-size: clamp(15px, 1.3vmin + 8px, 32px); }
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; height: 100vh; height: 100dvh; overflow: hidden;
    font: 500 1rem/1.45 var(--sans); color: var(--ink); background: #f6faf9;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: .18rem solid var(--green); outline-offset: .2rem; }
h1, h2, h3 { margin: 0; line-height: 1.12; color: var(--navy); font-family: var(--display); font-weight: 600; letter-spacing: -.02em; }
p { margin: 0; }
.ico { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- fondo: auroras suaves y retícula de puntos ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #f4faf8 55%, #eef5f4 100%); }
.bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(15,34,51,.07) 1px, transparent 1.2px); background-size: 1.6rem 1.6rem; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent); }
.bg i { position: absolute; border-radius: 50%; filter: blur(4.5rem); opacity: .55; }
.bg i:nth-child(1) { width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle, #c9f3dd, transparent 65%); animation: aurora 22s ease-in-out infinite alternate; }
.bg i:nth-child(2) { width: 55vmax; height: 55vmax; right: -20vmax; top: 10vmax; background: radial-gradient(circle, #cdeffa, transparent 65%); animation: aurora 26s ease-in-out infinite alternate-reverse; }
.bg i:nth-child(3) { width: 45vmax; height: 45vmax; left: 20vmax; bottom: -25vmax; background: radial-gradient(circle, #e2f7ee, transparent 65%); animation: aurora 30s ease-in-out infinite alternate; }
@keyframes aurora { to { transform: translate(6vmax, 4vmax) scale(1.15); } }

/* ---------- botones ---------- */
.btn {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
    min-height: var(--touch); padding: 0 2.2rem; border: 0; border-radius: 99rem;
    font: 700 1.1rem var(--sans); letter-spacing: .01em; cursor: pointer; transition: transform .2s var(--ease), box-shadow .3s, opacity .2s, background .3s;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 .1rem 0 rgba(255,255,255,.35) inset, 0 1rem 2rem -.8rem rgba(0,166,81,.65); }
.btn--primary:disabled { background: #dfe7e4; color: #9aa9a3; box-shadow: none; cursor: default; }
.btn--ghost { background: rgba(255,255,255,.9); color: var(--navy); box-shadow: inset 0 0 0 .1rem var(--line-2); }
.btn svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* onda de luz al tocar */
.onda { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(0,166,81,.22), rgba(0,166,81,0) 60%); transform: scale(0); animation: onda .65s var(--ease) forwards; }
.btn--primary .onda { background: radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,0) 60%); }
@keyframes onda { to { transform: scale(1); opacity: 0; } }

/* superficie común de tarjetas */
.tile, .doc, .big, .quick button, .day, .ficha, .svc, .search, .field > b, .toggle, .pad button, .how span, .pay__how, .qrcard, .display {
    background: var(--surface); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* =========================================================
   PANTALLA DE ESPERA
   ========================================================= */
.idle { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; padding: 3vmin 4vmin 2.4vmin; overflow: hidden; cursor: pointer; }
.idle__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.idle__logo { height: 5rem; width: auto; }
.idle__status { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.2rem; border-radius: 99rem; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); font-size: .85rem; font-weight: 600; color: var(--muted); backdrop-filter: blur(12px); }
.idle__status b { margin-left: .4rem; padding-left: .8rem; border-left: 1px solid var(--line-2); color: var(--navy); font-variant-numeric: tabular-nums; }
.live { width: .6rem; height: .6rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(0,166,81,.5); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 .6rem rgba(0,166,81,0); } 100% { box-shadow: 0 0 0 0 rgba(0,166,81,0); } }
.idle__center { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.2rem; }
.idle__kicker { font-size: .9rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--green-600); }
.idle h1 { font: 300 clamp(2.6rem, 7.2vmin, 6rem)/1.04 var(--display); color: var(--navy); letter-spacing: -.035em; }
.idle h1 span { font-weight: 600; background: linear-gradient(90deg, #00a651, #0fae9a 50%, #19b8d8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.idle__rot { min-height: 1.6em; font-size: 1.3rem; color: var(--muted); transition: opacity .5s, transform .5s; }
.idle__rot.out { opacity: 0; transform: translateY(.4rem); }
.idle__touch { margin-top: 1.6rem; display: inline-flex; align-items: center; gap: 1rem; padding: .6rem 2.4rem .6rem .6rem; border: 0; border-radius: 99rem; background: #fff; color: var(--navy); font: 700 1.25rem var(--sans); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg); animation: float 4s ease-in-out infinite; }
.idle__touch-ico { display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--accent); box-shadow: 0 .8rem 1.6rem -.6rem rgba(0,166,81,.7); position: relative; }
.idle__touch-ico::after { content: ''; position: absolute; inset: -.4rem; border-radius: 50%; border: .12rem solid rgba(0,166,81,.4); animation: ring 2.4s ease-out infinite; }
.idle__touch svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@keyframes float { 50% { transform: translateY(-.4rem); } }
@keyframes ring { from { transform: scale(.95); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* núcleo luminoso con anillos */
.orb { position: relative; width: 15rem; height: 15rem; margin-bottom: .8rem; display: grid; place-items: center; }
.orb__ring { position: absolute; border-radius: 50%; }
.orb__ring--1 { inset: 0; border: 1px solid rgba(0,166,81,.18); background: radial-gradient(circle, rgba(255,255,255,.9) 30%, rgba(236,250,243,.6) 60%, transparent 70%); }
.orb__ring--2 { inset: 1.6rem; border: .1rem dashed rgba(0,166,81,.35); animation: spin 28s linear infinite; }
.orb__ring--3 { inset: -1.4rem; border: 1px solid rgba(25,184,216,.18); border-top-color: rgba(25,184,216,.7); animation: spin 9s linear infinite reverse; }
.orb__ring--3::after { content: ''; position: absolute; top: -.3rem; left: 50%; width: .6rem; height: .6rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 1rem var(--cyan); }
.orb__core { position: relative; display: grid; place-items: center; width: 7.4rem; height: 7.4rem; border-radius: 2.2rem; background: linear-gradient(145deg, #ffffff, #eef8f3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 1.4rem 3rem -1rem rgba(0,166,81,.45), 0 0 0 .6rem rgba(255,255,255,.6); animation: breathe 3.2s ease-in-out infinite; }
.orb__core svg { width: 3.8rem; height: 3.8rem; fill: var(--green); filter: drop-shadow(0 .3rem .6rem rgba(0,166,81,.4)); }
@keyframes breathe { 50% { transform: scale(1.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 1.8rem 3.6rem -1rem rgba(0,166,81,.55), 0 0 0 1rem rgba(255,255,255,.4); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* línea de pulso cardíaco */
.ecg { position: relative; z-index: 1; width: 100%; height: 5rem; margin-bottom: 1rem; }
.ecg path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ecg__base { stroke: rgba(0,166,81,.12); stroke-width: 2; }
.ecg__pulse { stroke: var(--green); stroke-width: 3; stroke-dasharray: 220 1400; animation: ecg 3.2s linear infinite; filter: drop-shadow(0 0 .35rem rgba(0,166,81,.6)); }
@keyframes ecg { from { stroke-dashoffset: 220; } to { stroke-dashoffset: -1400; } }
.idle__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .82rem; color: var(--muted); }
.idle__demo { padding: .35rem .9rem; border-radius: 99rem; background: var(--amber-50); color: var(--amber); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(183,121,31,.2); }
.idle__exit { color: var(--faint); font-size: .72rem; text-decoration: none; border-bottom: 1px solid currentColor; }

/* =========================================================
   ESTRUCTURA DEL TÓTEM
   ========================================================= */
.kiosk { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }

.top {
    display: flex; align-items: center; gap: 1.4rem; margin: .9rem 1.2rem 0; padding: .8rem 1rem .8rem 1.4rem;
    margin-top: max(.9rem, env(safe-area-inset-top, 0px));
    border-radius: 1.6rem; background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), var(--shadow);
}
.top__logo { height: 3rem; width: auto; }
.top__title { min-width: 0; display: flex; align-items: center; gap: .9rem; padding-left: 1.4rem; border-left: 1px solid var(--line-2); }
.top__title > div { min-width: 0; }
.top__title b { display: block; font: 600 1.45rem var(--display); color: var(--navy); letter-spacing: -.02em; }
.top__title small { color: var(--green-600); font-size: .85rem; font-weight: 600; }
.top__right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.top__clock { text-align: right; }
.top__clock b { display: block; font: 500 1.35rem var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.top__clock small { color: var(--muted); font-size: .78rem; }
.top__home { position: relative; overflow: hidden; display: flex; align-items: center; gap: .5rem; min-height: 3.6rem; padding: 0 1.3rem; border: 0; border-radius: 99rem; background: #fff; color: var(--navy); font-size: .9rem; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); }
.top__home svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* pasos: línea fina con nodos */
.steps { display: flex; padding: 1.1rem 2.2rem .4rem; overflow: hidden; }
.step { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
button.step { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
button.step:active i { box-shadow: 0 0 0 .4rem rgba(0,166,81,.18); }
button.step span { color: var(--muted); }
button.step:disabled { cursor: default; }
.step::before { content: ''; position: absolute; top: .45rem; left: -50%; right: 50%; height: .14rem; background: var(--line-2); }
.step:first-child::before { display: none; }
.step i { position: relative; z-index: 1; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .14rem var(--line-2); transition: all .4s var(--ease); }
.step span { font-size: .64rem; font-weight: 700; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.step.is-done::before, .step.is-on::before { background: linear-gradient(90deg, var(--green-400), var(--green)); }
.step.is-done i { background: var(--green); box-shadow: none; }
.step.is-on i { background: #fff; box-shadow: inset 0 0 0 .3rem var(--green), 0 0 0 .35rem rgba(0,166,81,.15), 0 0 1rem rgba(0,166,81,.5); }
.step.is-on span { color: var(--green-600); }

/* escenario: contenido + resumen */
.stage { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 0 1.2rem; padding: 0 1.2rem; }
.screen { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.4rem 1rem 2.6rem; scroll-behavior: smooth; scrollbar-width: none; }
.screen.anim > * { animation: in .5s var(--ease) both; }
@keyframes in { from { opacity: 0; transform: translateY(1.2rem) scale(.99); filter: blur(4px); } }
.screen__inner { max-width: 60rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.2rem; }
.anim .screen__inner > * { animation: in .55s var(--ease) both; }
.anim .screen__inner > *:nth-child(2) { animation-delay: .04s; }
.anim .screen__inner > *:nth-child(3) { animation-delay: .08s; }
.anim .screen__inner > *:nth-child(4) { animation-delay: .12s; }
.anim .screen__inner > *:nth-child(n+5) { animation-delay: .16s; }
.h { margin-top: .6rem; display: flex; align-items: center; gap: .8rem; font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.lead { font: 300 2rem/1.15 var(--display); color: var(--navy); letter-spacing: -.03em; }
.lead b { font-weight: 600; color: var(--green-600); }
.note { padding: 1rem 1.3rem; border-radius: var(--r); background: linear-gradient(90deg, var(--green-50), rgba(255,255,255,.6)); box-shadow: inset .25rem 0 0 var(--green); color: #0d4a2c; font-size: 1rem; }
.note--warn { background: linear-gradient(90deg, var(--amber-50), rgba(255,255,255,.6)); box-shadow: inset .25rem 0 0 #e9b04f; color: #6b4609; }

/* resumen lateral: panel de vidrio */
.summary { min-height: 0; overflow-y: auto; margin: 1.4rem 0 1.4rem; padding: 1.3rem 1.1rem 0; border-radius: 1.6rem; background: rgba(255,255,255,.7); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), var(--shadow); display: flex; flex-direction: column; gap: .55rem; scrollbar-width: none; }
.summary h3 { font: 600 1.15rem var(--display); padding: 0 .3rem .3rem; }
.sum__rows { display: flex; flex-direction: column; gap: .55rem; }
.sum__row { display: flex; gap: .8rem; align-items: center; padding: .65rem .8rem; border-radius: 1rem; background: rgba(15,34,51,.025); transition: background .4s, box-shadow .4s; }
.sum__row.is-set { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,166,81,.18); }
.sum__row i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .8rem; background: rgba(15,34,51,.05); color: var(--faint); flex-shrink: 0; transition: all .4s; }
.sum__row.is-set i { background: var(--green-50); color: var(--green); }
.sum__row .ico { width: 1.3rem; height: 1.3rem; }
.sum__row small { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sum__row b { display: block; font-size: .92rem; color: var(--navy); line-height: 1.3; }
.sum__row b.vacio { color: var(--faint); font-weight: 600; }
.sum__total { position: sticky; bottom: 0; margin: auto -1.1rem 0; padding: 1rem 1.5rem 1.2rem; background: linear-gradient(180deg, rgba(255,255,255,.6), #fff 40%); border-top: 1px solid var(--line); }
.sum__total small { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sum__total b { font: 600 2rem var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, #00a651, #0fae9a); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* barra de acciones flotante */
.actions { display: flex; align-items: center; gap: 1rem; margin: 0 1.2rem 1rem; padding: .8rem .8rem .8rem 1rem; margin-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); border-radius: 99rem; background: rgba(255,255,255,.82); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), var(--shadow-lg); }
.actions .btn--primary { margin-left: auto; min-width: 17rem; font-size: 1.2rem; }
.actions__info { font-size: .95rem; color: var(--muted); padding-left: .4rem; }
.actions__info b { color: var(--navy); }

/* =========================================================
   COMPONENTES DE LAS PANTALLAS
   ========================================================= */
/* tarjetas: base compartida */
.tile, .doc, .big, .quick button, .day, .ficha, .svc {
    position: relative; overflow: hidden; border: 0; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 0 0 0 .08rem var(--line), var(--shadow);
    transition: transform .25s var(--ease), box-shadow .3s, background .3s;
}
.tile:active, .doc:active, .big:active, .quick button:active, .day:active, .ficha:active:not(:disabled), .svc:active { transform: translateY(.1rem) scale(.985); }

/* íconos dentro de cápsulas suaves */
.cap { display: grid; place-items: center; border-radius: 1.1rem; color: var(--green); background: linear-gradient(145deg, #ffffff, var(--green-50)); box-shadow: inset 0 0 0 1px rgba(0,166,81,.14), 0 .6rem 1.2rem -.6rem rgba(0,166,81,.4); }

/* inicio */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.6rem; border-radius: 2rem; background: linear-gradient(120deg, rgba(255,255,255,.95), rgba(236,250,243,.9)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), var(--shadow-lg); }
.hero::before { content: ''; position: absolute; width: 22rem; height: 22rem; right: -6rem; top: -10rem; border-radius: 50%; background: radial-gradient(circle, rgba(47,208,127,.28), transparent 65%); }
.hero::after { content: ''; position: absolute; width: 14rem; height: 14rem; right: 8rem; bottom: -9rem; border-radius: 50%; border: 1px solid rgba(0,166,81,.18); }
.hero > * { position: relative; z-index: 1; }
.hero p { font: 300 2.5rem/1.08 var(--display); color: var(--navy); letter-spacing: -.035em; }
.hero p b { font-weight: 600; }
.hero small { display: block; margin-top: .7rem; font: 500 1rem var(--sans); color: var(--muted); }
.hero .btn { min-width: 15rem; font-size: 1.25rem; flex-shrink: 0; }
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.quick button { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1.5rem .8rem; min-height: 9.5rem; border-radius: 1.5rem; font-weight: 700; color: var(--navy); }
.quick i { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 1.2rem; color: var(--green); background: linear-gradient(145deg, #fff, var(--green-50)); box-shadow: inset 0 0 0 1px rgba(0,166,81,.14), 0 .6rem 1.2rem -.6rem rgba(0,166,81,.4); }
.quick .ico { width: 1.9rem; height: 1.9rem; }
.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.how span { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.1rem 1.2rem; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); font-size: .95rem; font-weight: 600; color: var(--navy); }
.how b { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .7rem; background: var(--navy); color: #fff; font: 600 .95rem var(--display); }

/* opciones grandes */
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.big { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2.2rem; min-height: 15rem; text-align: left; border-radius: 2rem; }
.big::after { content: '→'; position: absolute; right: 2rem; bottom: 1.8rem; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.4rem; box-shadow: 0 .8rem 1.4rem -.6rem rgba(0,166,81,.7); }
.big i { display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 1.5rem; color: var(--green); background: linear-gradient(145deg, #fff, var(--green-50)); box-shadow: inset 0 0 0 1px rgba(0,166,81,.14), 0 .8rem 1.6rem -.8rem rgba(0,166,81,.5); }
.big .ico { width: 2.6rem; height: 2.6rem; stroke-width: 1.5; }
.big b { font: 600 1.9rem var(--display); color: var(--navy); letter-spacing: -.03em; }
.big small { font-size: 1rem; color: var(--muted); max-width: 26ch; }

/* buscador */
.search { display: flex; align-items: center; gap: .9rem; min-height: var(--touch); padding: 0 .6rem 0 1.4rem; border-radius: 99rem; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); color: var(--faint); font-size: 1.05rem; cursor: text; }
.search b { color: var(--navy); font-weight: 600; }
.search svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; flex-shrink: 0; }
.search .clear { margin-left: auto; border: 0; background: var(--green-50); border-radius: 99rem; padding: .6rem 1.1rem; font-weight: 700; color: var(--green-600); cursor: pointer; }

/* especialidades */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; min-height: 10.5rem; padding: 1.4rem; text-align: left; border-radius: 1.6rem; }
.tile i { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 1.1rem; color: var(--green); background: linear-gradient(145deg, #fff, var(--green-50)); box-shadow: inset 0 0 0 1px rgba(0,166,81,.14), 0 .6rem 1.2rem -.6rem rgba(0,166,81,.45); transition: all .3s; }
.tile .ico { width: 1.8rem; height: 1.8rem; }
.tile b { font: 600 1.15rem var(--display); color: var(--navy); letter-spacing: -.01em; }
.tile small { color: var(--muted); font-size: .85rem; margin-top: auto; }

/* médicos */
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1rem; }
.doc { display: flex; align-items: center; gap: 1.1rem; min-height: 7.4rem; padding: 1.1rem 1.2rem 1.1rem 1.1rem; text-align: left; border-radius: 1.6rem; }
.av { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 1.3rem; background: linear-gradient(145deg, #e9f9f1, #d9f3f8); color: var(--green-600); font: 600 1.15rem var(--display); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); }
.doc b { display: block; font: 600 1.12rem var(--display); color: var(--navy); letter-spacing: -.01em; }
.doc small { display: block; color: var(--green-600); font-weight: 700; font-size: .88rem; }
.doc em { display: block; font-style: normal; font-size: .8rem; color: var(--muted); }
.doc .go { margin-left: auto; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 .6rem 1.2rem -.5rem rgba(0,166,81,.7); }
.doc--head { cursor: default; background: linear-gradient(110deg, rgba(255,255,255,.95), rgba(236,250,243,.85)); }

/* horarios */
.days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.day { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-height: 7.6rem; padding: 1rem .4rem; border-radius: 1.4rem; }
.day small { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.day b { font: 300 2.4rem var(--display); color: var(--navy); line-height: 1.05; letter-spacing: -.04em; }
.day em { font-style: normal; font-size: .7rem; font-weight: 700; color: var(--green-600); }
.day.is-full em { color: var(--faint); }
.day.is-full b { color: var(--faint); }
.day.is-on { background: var(--accent); box-shadow: var(--glow); }
.day.is-on small, .day.is-on em, .day.is-on b { color: #fff; }
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); gap: .8rem; }
.ficha { display: flex; flex-direction: column; align-items: center; gap: .05rem; min-height: 7.2rem; padding: .9rem .4rem; border-radius: 1.3rem; }
.ficha small { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ficha b { font: 300 2.2rem var(--display); color: var(--green-600); line-height: 1.1; letter-spacing: -.04em; }
.ficha span { font-size: .92rem; font-weight: 700; color: var(--navy); }
.ficha.is-on { background: var(--accent); box-shadow: var(--glow); transform: translateY(-.15rem); }
.ficha.is-on small, .ficha.is-on b, .ficha.is-on span { color: #fff; }
.ficha:disabled { cursor: default; background: rgba(15,34,51,.03); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: none; }
.ficha:disabled b, .ficha:disabled span { color: #c3ccd2; }
.ficha:disabled b { text-decoration: line-through; text-decoration-thickness: .08rem; }
.ficha:disabled small::after { content: ' · ocupada'; }
.empty { padding: 2.2rem; border-radius: 1.4rem; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 .1rem var(--line-2); text-align: center; color: var(--muted); font-size: 1.05rem; }

/* servicios */
.svcs { display: flex; flex-direction: column; gap: .8rem; }
.svc { display: flex; align-items: center; gap: 1.2rem; min-height: 5.6rem; padding: 1rem 1.5rem; text-align: left; border-radius: 1.4rem; }
.svc .box { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .75rem; box-shadow: inset 0 0 0 .14rem #cad4da; flex-shrink: 0; color: #fff; font-weight: 900; transition: all .3s var(--ease); }
.svc b { font: 600 1.12rem var(--display); color: var(--navy); }
.svc small { display: block; font-size: .85rem; color: var(--muted); }
.svc .pr { margin-left: auto; font: 500 1.4rem var(--display); color: var(--navy); white-space: nowrap; letter-spacing: -.02em; }
.svc.is-on { background: linear-gradient(90deg, rgba(236,250,243,.95), rgba(255,255,255,.9)); box-shadow: inset 0 0 0 .1rem rgba(0,166,81,.35), var(--shadow); }
.svc.is-on .box { background: var(--accent); box-shadow: 0 .4rem .8rem -.3rem rgba(0,166,81,.7); }
.svc.is-on .pr { color: var(--green-600); }

/* celular con teclado numérico */
.phone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.phone__left { display: flex; flex-direction: column; gap: 1.1rem; }
.display { display: flex; align-items: center; gap: 1rem; min-height: 6.2rem; padding: 0 1.6rem; border-radius: 1.6rem; box-shadow: inset 0 0 0 .14rem var(--green), var(--glow); }
.display span { font-size: 1.05rem; color: var(--muted); font-weight: 700; }
.display b { font: 300 2.7rem var(--display); letter-spacing: .1em; color: var(--navy); font-variant-numeric: tabular-nums; }
.display b.ph { color: #c8d1d6; }
.display .caret { width: .14rem; height: 2.4rem; background: var(--green); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.pad button { min-height: 5.6rem; border: 0; border-radius: 1.5rem; font: 300 2.3rem var(--display); color: var(--navy); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 0 0 0 .08rem var(--line), var(--shadow); }
.pad button:active { background: var(--green-50); box-shadow: inset 0 0 0 .12rem var(--green); }
.pad .k-fn { font: 700 1rem var(--sans); color: var(--muted); }
.found { display: flex; align-items: center; gap: 1.1rem; padding: 1.2rem 1.4rem; border-radius: 1.4rem; background: linear-gradient(90deg, var(--green-50), rgba(255,255,255,.8)); box-shadow: inset 0 0 0 1px rgba(0,166,81,.2); }
.found b { display: block; font: 600 1.3rem var(--display); color: #0d4a2c; }
.found small { color: var(--green-600); font-weight: 700; }
.found--new { background: linear-gradient(90deg, var(--amber-50), rgba(255,255,255,.8)); box-shadow: inset 0 0 0 1px rgba(183,121,31,.2); }
.found--new b { color: #6b4609; }
.found--new small { color: var(--amber); }
.demo-hint { font-size: .85rem; color: var(--muted); }
.demo-hint button { border: 0; background: none; color: var(--green-600); font-weight: 800; text-decoration: underline; text-underline-offset: .2rem; cursor: pointer; padding: .4rem; }

/* campos que abren el teclado en pantalla */
.field { position: relative; display: flex; flex-direction: column; gap: .45rem; text-align: left; cursor: pointer; border: 0; background: none; padding: 0; width: 100%; }
.field > span { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-left: .4rem; }
.field > b { display: flex; align-items: center; min-height: var(--touch); padding: 0 1.4rem; border-radius: 1.2rem; box-shadow: inset 0 0 0 .08rem var(--line-2), var(--shadow); font-size: 1.15rem; color: var(--navy); font-weight: 600; }
.field > b.ph { color: var(--faint); font-weight: 500; }
.field > b::after { content: ''; margin-left: auto; width: 1.2rem; height: 1.2rem; background: var(--green); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.toggle { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; min-height: var(--touch); padding: .9rem 1.3rem; border: 0; border-radius: 1.2rem; cursor: pointer; text-align: left; width: 100%; box-shadow: inset 0 0 0 .08rem var(--line-2), var(--shadow); }
.toggle .sw { width: 3.6rem; height: 2rem; border-radius: 2rem; background: #d6dee2; position: relative; flex-shrink: 0; transition: background .3s; }
.toggle .sw::after { content: ''; position: absolute; top: .22rem; left: .22rem; width: 1.56rem; height: 1.56rem; border-radius: 50%; background: #fff; box-shadow: 0 .15rem .4rem rgba(15,34,51,.25); transition: transform .3s var(--ease); }
.toggle.is-on .sw { background: var(--accent); }
.toggle.is-on .sw::after { transform: translateX(1.6rem); }
.toggle b { font-size: 1rem; color: var(--navy); }
.toggle small { display: block; font-size: .82rem; color: var(--muted); font-weight: 500; }

/* comprobante de confirmación */
.ticket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); border-radius: 2rem; overflow: hidden; background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), var(--shadow-lg); }
.ticket__left { position: relative; padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; background: linear-gradient(160deg, var(--green-50), #e1f6fa); }
.ticket__left::after { content: ''; position: absolute; right: -.8rem; top: 0; bottom: 0; width: 1.6rem; background: radial-gradient(circle at center, #fff .5rem, transparent .55rem) 0 0/1.6rem 1.6rem repeat-y; }
.ticket__left small { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green-600); font-weight: 800; }
.ticket__left b { font: 200 6.4rem/1 var(--display); letter-spacing: -.06em; background: linear-gradient(135deg, #00a651, #0fae9a 60%, #19b8d8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticket__left span { font-size: 1.05rem; font-weight: 600; color: var(--navy); }
.ticket__right { padding: 1.9rem 2.1rem; display: flex; flex-direction: column; gap: 1rem; }
.ticket ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.ticket li { display: flex; gap: 1rem; align-items: center; font-size: 1.05rem; }
.ticket li i { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; background: var(--green-50); color: var(--green); flex-shrink: 0; }
.ticket li .ico { width: 1.35rem; height: 1.35rem; }
.ticket li b { color: var(--navy); }
.ticket li small { display: block; color: var(--muted); font-size: .85rem; }
.ticket__tot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; padding-top: 1.1rem; border-top: 1px dashed var(--line-2); }
.ticket__tot small { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ticket__tot b { font: 600 2.4rem var(--display); letter-spacing: -.03em; color: var(--green-600); }

/* pago QR */
.pay { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.6rem; align-items: center; }
.qrcard { position: relative; padding: 1.8rem; border-radius: 2rem; text-align: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), var(--shadow-lg); }
.qrcard::before { content: ''; position: absolute; inset: -.5rem; border-radius: 2.4rem; padding: .12rem; background: conic-gradient(from var(--a, 0deg), transparent 0 70%, var(--green-400) 85%, var(--cyan) 95%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: barrido 3s linear infinite; }
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes barrido { to { --a: 360deg; } }
.qrcard svg { display: block; width: min(22rem, 38vmin); height: auto; }
.qrcard small { display: block; margin-top: .9rem; font-size: .82rem; color: var(--muted); letter-spacing: .04em; }
.timer { align-self: flex-start; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.2rem; border-radius: 99rem; background: var(--amber-50); color: var(--amber); font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(183,121,31,.18); }
.timer .ico { width: 1.2rem; height: 1.2rem; stroke-width: 2.2; }
.pay__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.pay__steps li { position: relative; display: flex; align-items: center; gap: 1rem; padding: .7rem 0; font-size: 1.08rem; color: var(--faint); }
.pay__steps li::before { content: ''; position: relative; z-index: 1; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .14rem var(--line-2); flex-shrink: 0; }
.pay__steps li + li::after { content: ''; position: absolute; left: .9rem; top: -.75rem; width: .12rem; height: 1.6rem; background: var(--line-2); }
.pay__steps li.done { color: var(--navy); font-weight: 700; }
.pay__steps li.done::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat, var(--accent); box-shadow: 0 0 .9rem rgba(0,166,81,.5); }
.pay__steps li.done + li::after, .pay__steps li.done + li.done::after { background: var(--green-400); }
.pay__steps li.now { color: var(--amber); font-weight: 800; }
.pay__steps li.now::before { background: conic-gradient(#e9b04f 0 30%, #f3e6cf 0); -webkit-mask: radial-gradient(circle, transparent .7rem, #000 .74rem); mask: radial-gradient(circle, transparent .7rem, #000 .74rem); box-shadow: none; animation: spin .9s linear infinite; }
.pay__how { padding: 1.1rem 1.3rem; border-radius: 1.2rem; box-shadow: inset 0 0 0 1px var(--line); font-size: .95rem; color: var(--muted); }
.pay__how b { color: var(--navy); }

/* reserva completada */
.fin { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding-top: 1rem; }
.fin__msg { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }
@media (orientation: landscape) and (min-width: 901px) { .fin { flex-direction: row; justify-content: center; align-items: center; gap: 4rem; min-height: 100%; padding-top: 0; } .fin__msg { max-width: 30rem; } }
.fin__check { position: relative; display: grid; place-items: center; width: 8.4rem; height: 8.4rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 4.2rem; font-weight: 300; box-shadow: 0 0 0 1rem rgba(0,166,81,.1), 0 0 0 2rem rgba(0,166,81,.05), 0 1.6rem 3rem -1rem rgba(0,166,81,.7); animation: pop .7s var(--ease) both; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.06); } }
.fin h2 { font: 300 3rem var(--display); letter-spacing: -.04em; }
.fin p { font-size: 1.12rem; color: var(--muted); max-width: 34ch; }
.slip { position: relative; width: min(26rem, 90%); padding: 1.8rem 1.6rem 2.2rem; background: #fff; box-shadow: var(--shadow-lg); border-radius: 1.2rem 1.2rem 0 0; text-align: center; animation: print 2.4s steps(24) both .4s; overflow: hidden; }
.slip::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: .8rem; background: linear-gradient(-45deg, #f6faf9 .4rem, transparent 0), linear-gradient(45deg, #f6faf9 .4rem, transparent 0); background-size: .8rem .8rem; }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.slip small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.slip b { display: block; font: 200 4.6rem/1 var(--display); letter-spacing: -.05em; color: var(--navy); margin: .4rem 0; }
.slip p { font-size: .95rem; color: var(--ink); max-width: none; margin: 0; }
.slip hr { border: 0; border-top: 1px dashed var(--line-2); margin: 1rem 0; }
.printing { display: flex; align-items: center; gap: .7rem; font-weight: 700; color: var(--green-600); }
.printing::before { content: ''; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: .18rem solid var(--green-200); border-top-color: var(--green); animation: spin 1s linear infinite; }
.printing.ok::before { animation: none; border-color: var(--green); background: var(--green); box-shadow: 0 0 .7rem rgba(0,166,81,.6); }
.restart { font-size: .95rem; color: var(--muted); }
.restart b { color: var(--navy); font-variant-numeric: tabular-nums; }

/* ---------- campos con el teclado del dispositivo ---------- */
input { user-select: text; -webkit-user-select: text; }
.search input { flex: 1; min-width: 0; height: 100%; min-height: calc(var(--touch) - .2rem); border: 0; background: transparent; outline: none; font: 600 1.05rem var(--sans); color: var(--navy); }
.search input::placeholder { color: var(--faint); font-weight: 500; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search:focus-within { box-shadow: inset 0 0 0 .14rem var(--green), var(--glow); }
.field__input { width: 100%; min-height: var(--touch); padding: 0 1.4rem; border: 0; border-radius: 1.2rem; background: var(--surface); box-shadow: inset 0 0 0 .08rem var(--line-2), var(--shadow); font: 600 1.15rem var(--sans); color: var(--navy); outline: none; transition: box-shadow .2s; }
.field__input::placeholder { color: var(--faint); font-weight: 500; }
.field__input:focus { box-shadow: inset 0 0 0 .14rem var(--green), var(--glow); }
.display--input { cursor: text; }
.display--input input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 300 2.7rem var(--display); letter-spacing: .1em; color: var(--navy); font-variant-numeric: tabular-nums; }
.display--input input::placeholder { color: #c8d1d6; }
.phone--nativo { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }

/* ---------- botón flotante para cambiar de teclado ---------- */
.screenwrap { position: relative; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.screen { padding-bottom: 5.4rem; }
.kbtoggle { position: absolute; z-index: 5; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .5rem .45rem .7rem; border: 0; border-radius: 99rem; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--muted); font: 700 .78rem var(--sans); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); opacity: .85; transition: opacity .2s, color .2s; }
.kbtoggle:hover, .kbtoggle:focus-visible { opacity: 1; }
.kbtoggle svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kbtoggle__sw { position: relative; width: 2.1rem; height: 1.2rem; border-radius: 1rem; background: #d6dee2; transition: background .25s; }
.kbtoggle__sw::after { content: ''; position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 50%; background: #fff; box-shadow: 0 .1rem .25rem rgba(15,34,51,.25); transition: transform .25s var(--ease); }
.kbtoggle[aria-pressed="true"] { color: var(--green-600); opacity: 1; }
.kbtoggle[aria-pressed="true"] .kbtoggle__sw { background: var(--accent); }
.kbtoggle[aria-pressed="true"] .kbtoggle__sw::after { transform: translateX(.9rem); }

/* =========================================================
   TECLADO EN PANTALLA (vidrio blanco)
   ========================================================= */
.kb { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: rgba(230,240,238,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .25s both; }
@keyframes fade { from { opacity: 0; } }
.kb__panel { width: 100%; padding: 1.4rem 1.6rem; padding-bottom: max(1.4rem, env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.9); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border-radius: 2rem 2rem 0 0; box-shadow: inset 0 1px 0 #fff, 0 -2rem 4rem -2rem rgba(15,34,51,.3); animation: up .35s var(--ease) both; }
@keyframes up { from { transform: translateY(100%); } }
.kb__head { max-width: 70rem; margin: 0 auto 1rem; }
.kb__head span { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-left: .4rem; }
.kb__value { display: flex; align-items: center; min-height: 4.6rem; margin-top: .45rem; padding: 0 1.5rem; border-radius: 1.3rem; background: #fff; box-shadow: inset 0 0 0 .14rem var(--green), var(--glow); font: 500 1.6rem var(--display); color: var(--navy); overflow: hidden; white-space: pre; }
.kb__value::after { content: ''; flex-shrink: 0; width: .12rem; height: 1.8rem; margin-left: .1rem; background: var(--green); animation: blink 1s steps(1) infinite; }
.kb__keys { max-width: 70rem; margin: 0 auto; display: flex; flex-direction: column; gap: .55rem; }
.kb__row { display: flex; gap: .55rem; justify-content: center; }
.kb__row button { flex: 1 1 0; max-width: 6rem; min-height: 4.6rem; border: 0; border-radius: 1.1rem; background: #fff; font: 500 1.5rem var(--display); color: var(--navy); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line), 0 .3rem .7rem -.3rem rgba(15,34,51,.18); }
.kb__row button:active { background: var(--green-50); box-shadow: inset 0 0 0 .12rem var(--green); }
.kb__row .w2 { flex-grow: 2; max-width: 12rem; font: 700 1rem var(--sans); }
.kb__row .w5 { flex-grow: 5; max-width: 30rem; font: 600 1rem var(--sans); color: var(--muted); }
.kb__row .ok { background: var(--accent); color: #fff; box-shadow: 0 .6rem 1.2rem -.5rem rgba(0,166,81,.7); }
.kb__row .ok:active { background: var(--green-600); }
.kb__row .fn:active { background: #e2eae7; }
.kb__row .fn { background: #eef3f2; color: var(--muted); }
.kb--num .kb__row button { max-width: 9rem; }

/* =========================================================
   AVISOS Y EXTRAS
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 2rem; background: rgba(230,240,238,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade .25s both; }
.modal__box { width: min(36rem, 100%); padding: 2.6rem; border-radius: 2.2rem; background: rgba(255,255,255,.95); text-align: center; box-shadow: inset 0 0 0 1px #fff, var(--shadow-lg); animation: pop .45s var(--ease) both; }
.modal__count { position: relative; isolation: isolate; display: grid; place-items: center; width: 6.4rem; height: 6.4rem; margin: 0 auto 1.3rem; border-radius: 50%; font: 300 2.8rem var(--display); color: var(--amber); background: conic-gradient(#e9b04f calc(var(--p, 1) * 360deg), #f6efe3 0); }
.modal__count::before { content: ''; position: absolute; inset: .45rem; border-radius: 50%; background: #fff; z-index: -1; }
.modal h2 { font: 600 1.9rem var(--display); }
.modal p { margin: .8rem 0 1.7rem; color: var(--muted); font-size: 1.05rem; }
.modal__btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; }

.toast { position: fixed; z-index: 60; left: 50%; bottom: 8rem; transform: translate(-50%, 2rem); opacity: 0; padding: 1rem 1.7rem; border-radius: 99rem; background: rgba(15,34,51,.92); backdrop-filter: blur(12px); color: #fff; font-weight: 600; box-shadow: var(--shadow-lg); transition: all .35s var(--ease); pointer-events: none; max-width: 90vw; text-align: center; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

.fs { position: fixed; z-index: 35; right: 1.4rem; bottom: 1.4rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.8); color: var(--muted); cursor: pointer; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); transition: color .2s; }
.fs:hover { color: var(--green); }
.fs svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.is-fullscreen .fs, body:not(.is-idle) .fs { display: none; }

/* =========================================================
   TÓTEM VERTICAL (lo más común) Y PANTALLAS ANGOSTAS
   ========================================================= */
@media (orientation: portrait), (max-width: 900px) {
    .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    /* resumen compacto: solo lo elegido, en texto completo, y el total entero a la derecha */
    .summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem 1rem; margin: 0 0 .9rem; padding: .8rem 1rem !important; border-radius: 1.4rem; overflow: hidden; }
    .summary h3 { display: none; }
    .sum__rows { flex-direction: row; flex-wrap: wrap; gap: .35rem 1.1rem; min-width: 0; }
    .sum__row { padding: 0; gap: .4rem; background: none !important; box-shadow: none !important; min-width: 0; }
    .sum__row:not(.is-set), .sum__row.opt { display: none; }
    .sum__row i { width: 1.6rem; height: 1.6rem; border-radius: .5rem; }
    .sum__row .ico { width: 1rem; height: 1rem; }
    .sum__row small { display: none; }
    .sum__row b { font-size: .88rem; line-height: 1.25; }
    .summary.is-empty { display: none; }
    .sum__total { position: static; margin: 0; padding: .45rem .9rem; border: 0; border-radius: 1rem; background: var(--green-50); text-align: right; }
    .sum__total small { font-size: .6rem; }
    .sum__total b { font-size: 1.35rem; white-space: nowrap; }
    .phone { grid-template-columns: minmax(0, 1fr); }
    .pay { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .ticket { grid-template-columns: minmax(0, 1fr); }
    .ticket__left { flex-direction: row; justify-content: center; gap: 1.4rem; padding: 1.4rem; }
    .ticket__left::after { display: none; }
    .ticket__left b { font-size: 4.4rem; }
    .days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .orb { width: 13rem; height: 13rem; }
}
@media (max-width: 700px) {
    html { font-size: 14px; }
    .top { margin: .6rem .6rem 0; padding: .6rem .7rem; gap: .8rem; border-radius: 1.2rem; }
    .top__logo { height: 2.2rem; }
    .top__title { padding-left: .8rem; gap: .6rem; }
        .top__title b { font-size: 1.1rem; }
    .top__clock, .top__home span { display: none; }
    .top__home { padding: 0 .9rem; }
    .steps { padding: .9rem 1rem .2rem; }
    .step span { display: none; }
    .stage { padding: 0 .6rem; }
    .screen { padding: 1.2rem .4rem 2rem; }
    .hero { flex-direction: column; align-items: flex-start; padding: 1.8rem; }
    .hero p { font-size: 1.9rem; }
    .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .choice, .grid2 { grid-template-columns: minmax(0, 1fr); }
    .actions { margin: 0 .6rem .6rem; }
    .actions .btn--primary { min-width: 0; flex: 1; }
    .actions__info { display: none; }
    .idle__status { display: none; }
    .kbtoggle { left: .6rem; bottom: .6rem; }
    .idle__foot { flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}