/* Expendedor: tema claro y cálido, pensado para tablet en modo kiosco. */
body.expendedor {
  --bg: #f7f4ee;
  --surface: #ffffff;
  --surface-2: #efeae0;
  --line: #ddd5c6;
  --text: #241f18;
  --muted: #8b8272;
  background:
    radial-gradient(1200px 500px at 50% -10%, #fff5dd 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  /* Cabecera + pantalla en columna flexible: la pantalla ocupa exactamente el
     resto del viewport, mida lo que mida la cabecera (nada queda bajo el borde). */
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

#head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px 6px;
}
#head .store {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  font-weight: 800;
}
#store-logo { font-size: 2rem; }
#section-chip { font-size: 1.05rem; background: var(--surface); border: 1.5px solid var(--line); color: var(--text); }

#screen { flex: 1 1 auto; min-height: 0; padding: 0 28px 20px; }

/* ── Selección de sección (tablet multi-sección) ── */
.section-select {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.section-select h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0; }
.section-cards { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.section-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 14px 34px rgba(80, 60, 20, .12);
  padding: 34px 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 250px;
  transition: transform .12s ease, border-color .12s ease;
}
.section-card:active { transform: scale(.97); border-color: var(--accent); }
.section-card .icon { font-size: 4rem; }
.section-card .name { font-size: 1.7rem; font-weight: 800; }
.section-card .meta { color: var(--muted); font-weight: 600; }

/* ── Pantalla de teclado ── */
.kiosk {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  /* minmax(0,1fr): en pantallas muy bajas la fila no crece hasta el mínimo del
     teclado; la columna ticket+QR encoge su botón y nada queda bajo el borde. */
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px 26px;
}
.kiosk .back-row { grid-column: 1 / -1; min-height: 44px; display: flex; align-items: center; }

.prompt-zone { grid-column: 1 / -1; text-align: center; }
.prompt {
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  font-weight: 800;
  margin: 0;
}
.prompt.pulse { animation: prompt-pulse 1.1s ease infinite; }
@keyframes prompt-pulse { 50% { transform: scale(1.045); color: var(--accent-deep); } }

.name-display {
  margin: 10px auto 2px;
  min-height: 1.6em;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: .02em;
  border-bottom: 4px solid var(--line);
  max-width: 720px;
  padding: 0 12px 6px;
  white-space: nowrap;
  overflow: hidden;
}
.name-display .caret {
  display: inline-block;
  width: 3px;
  height: 1.05em;
  vertical-align: -0.15em;
  background: var(--accent-deep);
  margin-left: 3px;
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.name-warning {
  min-height: 1.5em;
  font-weight: 700;
  color: var(--danger);
  font-size: clamp(.95rem, 1.8vw, 1.25rem);
}

/* Teclado en pantalla */
.keyboard {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}
.krow { display: flex; gap: 10px; justify-content: center; }
.key {
  flex: 1;
  max-width: 96px;
  height: clamp(52px, 9vh, 84px);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 14px;
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  font-weight: 700;
  box-shadow: 0 3px 0 rgba(120, 100, 60, .08);
  transition: transform .05s ease, background .05s ease;
}
.key:active, .key.pressed { transform: translateY(3px) scale(.98); background: #ffedc2; border-color: var(--accent); }
.key.wide { max-width: none; flex: 3; }
.key.small-label { font-size: 1rem; color: var(--muted); }

/* Botón-ticket triangular de rollo de papel (P6) */
.ticket-zone { grid-row: 3; grid-column: 2; display: flex; align-items: center; justify-content: center; }
.ticket-btn {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 10 / 11;
  background: linear-gradient(160deg, #ffc23d, #f5a300);
  clip-path: polygon(0 8%, 50% 0, 100% 8%, 100% 78%, 50% 100%, 0 78%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #241500;
  filter: drop-shadow(0 12px 18px rgba(160, 105, 0, .35));
  transition: transform .1s ease, filter .2s ease;
}
.ticket-btn::before, .ticket-btn::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%;
  border-top: 3px dashed rgba(90, 55, 0, .35);
}
.ticket-btn::before { top: 13%; }
.ticket-btn::after { bottom: 24%; }
.ticket-btn:active { transform: scale(.96); }
.ticket-btn:disabled { filter: grayscale(.85) opacity(.5); }
.ticket-btn .lbl { font-size: clamp(1rem, 1.9vw, 1.35rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ticket-btn .num { font-size: clamp(3rem, 7vw, 5rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.ticket-btn .sub { font-size: .85rem; font-weight: 700; opacity: .75; }

/* ── QR de turno directo (P28), junto al botón-ticket ── */
.qr-card {
  display: none;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 8px 22px rgba(80, 60, 20, .1);
  max-width: 320px;
  flex-shrink: 0;
}
.qr-card.ready { display: flex; }
.qr-img {
  width: clamp(76px, 11vh, 108px);
  height: clamp(76px, 11vh, 108px);
  border-radius: 10px;
  background: #fff;
}
.qr-txt { text-align: left; min-width: 0; }
.qr-title { font-weight: 800; font-size: clamp(.9rem, 1.6vw, 1.1rem); }
.qr-hint { color: var(--muted); font-weight: 600; font-size: clamp(.78rem, 1.3vw, .92rem); margin-top: 2px; }

/* La columna ticket+QR nunca debe crecer más que su fila (el teclado manda):
   el botón-ticket se dimensiona por ALTURA disponible y el QR es compacto. */
.ticket-zone { flex-direction: column; gap: 12px; min-height: 0; }
/* El botón es el único elemento elástico de la columna: si ticket+QR no caben
   en la fila del grid, encoge él (el QR y el teclado nunca se recortan). */
.ticket-zone .ticket-btn {
  width: auto;
  height: clamp(170px, 33vh, 352px);
  max-width: 100%;
  flex: 0 1 auto;
  min-height: 120px;
}

/* Pantallas bajas (tablets 600-640 px de alto): rótulos compactos para que
   teclado, aviso, ticket y QR convivan sin solaparse. */
@media (max-height: 640px) {
  .prompt { font-size: 1.45rem; }
  .name-display { font-size: 1.7rem; margin: 4px auto 0; border-bottom-width: 3px; }
  .name-warning { min-height: 1.2em; }
  #head { padding: 10px 28px 4px; }
}

/* Overlay técnico web (P30): información del dispositivo sin APK kiosco. */
.tech-info-row {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.tech-info-row .k { color: var(--muted); font-weight: 700; font-size: .92rem; white-space: nowrap; }
.tech-info-row .v { font-weight: 800; text-align: right; overflow-wrap: anywhere; }

/* Dedo-guía de la animación en reposo */
#finger {
  position: fixed;
  z-index: 500;
  font-size: 3.2rem;
  pointer-events: none;
  transition: left .55s cubic-bezier(.5, 0, .3, 1), top .55s cubic-bezier(.5, 0, .3, 1);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25));
}

/* Popup del turno asignado (3 s, P5) */
#popup {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(20, 14, 2, .55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-card {
  background: #fffdf6;
  border-radius: 30px;
  padding: 40px 70px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
  animation: pop-in .3s cubic-bezier(.2, 1.4, .4, 1);
  color: #241f18;
}
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } }
.popup-card .lbl { font-size: 1.3rem; font-weight: 800; color: #8b8272; text-transform: uppercase; letter-spacing: .12em; }
.popup-card .num { font-size: clamp(5rem, 16vw, 9rem); font-weight: 900; line-height: 1.05; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.popup-card .who { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 800; text-transform: uppercase; }
.popup-card .note { margin-top: 10px; color: #8b8272; font-weight: 600; }

/* Vertical (tablet en retrato): ticket y QR en fila debajo del teclado,
   con altura contenida para no comerse el teclado. */
@media (max-aspect-ratio: 1/1) {
  .kiosk { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  .ticket-zone { grid-row: 4; grid-column: 1; flex-direction: row; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
  .ticket-zone .ticket-btn { height: clamp(140px, 22vh, 220px); }
  .keyboard { align-self: center; }
}