/* Menú compacto en cuadrícula para que las acciones no tapen la agenda ni queden fuera de pantalla. */
:is(body[data-page="admin"], body[data-page="barbero"]) #app > .qf.qf--viewport { display: none !important; }
body[data-page="admin"] #app:has(#adminWorkspace:not([hidden])[data-view="dashboard"]) > #adminQuickFab.qf--viewport,
body[data-page="barbero"] #app:has(#barberoWorkspace:not([hidden])[data-view="dashboard"]) > #barberoQuickFab.qf--viewport { display: block !important; }
:is(body[data-page="admin"], body[data-page="barbero"]) .qf__menu {
  position: absolute !important;
  inset: auto 0 calc(100% + 12px) auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(284px, calc(100vw - 28px));
  max-height: min(60dvh, 420px);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 27, 51, .2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
:is(body[data-page="admin"], body[data-page="barbero"]) .qf.is-open .qf__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
:is(body[data-page="admin"], body[data-page="barbero"]) button.qf__item {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100% !important;
  min-width: 0;
  height: 54px !important;
  padding: 6px 8px !important;
  border: 1px solid #e6ebf3 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #1e3a8a;
  box-shadow: none !important;
  opacity: 1;
  pointer-events: auto;
  transform: none !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
:is(body[data-page="admin"], body[data-page="barbero"]) button.qf__item:hover,
:is(body[data-page="admin"], body[data-page="barbero"]) button.qf__item:focus-visible {
  border-color: #bfdbfe !important;
  background: #f8fbff !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
}
:is(body[data-page="admin"], body[data-page="barbero"]) .qf__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 11px;
  background: #eff6ff;
  box-shadow: none;
}
:is(body[data-page="admin"], body[data-page="barbero"]) .qf__icon svg { width: 19px; height: 19px; }
:is(body[data-page="admin"], body[data-page="barbero"]) .qf__tip {
  position: static !important;
  display: block;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #26364f !important;
  font: 650 .72rem/1.2 Inter, system-ui, sans-serif !important;
  text-align: left;
  white-space: normal;
  opacity: 1 !important;
  transform: none !important;
}
:is(body[data-page="admin"], body[data-page="barbero"]) .qf__tip::after { display: none !important; }
:is(body[data-page="admin"], body[data-page="barbero"]) .qf__item--amber .qf__icon { background: #fff7e6; }
:is(body[data-page="admin"], body[data-page="barbero"]) .qf__item--green .qf__icon { background: #ecfdf3; }
:is(body[data-page="admin"], body[data-page="barbero"]) .qf__item--red .qf__icon { background: #fff1f0; }
:is(body[data-page="admin"], body[data-page="barbero"]) .qf__item--sky .qf__icon { background: #eff6ff; }
:is(body[data-page="admin"], body[data-page="barbero"]) .qf__item[data-qf-action="salir"] { grid-column: 1 / -1; }
:is(body[data-page="admin"], body[data-page="barbero"]) .qf__item--sky { color: #1a56db; }
:is(body[data-page="admin"], body[data-page="barbero"]) .rv-badge--in-progress,
:is(body[data-page="admin"], body[data-page="barbero"]) .badge-in-progress { border-color: #93c5fd; background: #eff6ff; color: #1e40af; }
:is(body[data-page="admin"], body[data-page="barbero"]) .rv-row--in-progress .rv-row__main { box-shadow: inset 3px 0 #1a56db; }
:is(body[data-page="admin"], body[data-page="barbero"]) .ag-appt--in-progress { border-color: #3b82f6; box-shadow: inset 3px 0 #1a56db, 0 0 0 1px rgba(59,130,246,.16); }
:is(body[data-page="admin"], body[data-page="barbero"]) .ag-appt__tag--in-progress { color: #1e40af; background: #dbeafe; }

/* =========================================================
   Escáner QR · modal «Escanear cita» (diseño móvil)
   Todo cuelga de .checkin-overlay / .checkin-* para no afectar otras páginas.
   Paleta: azul #2458D8 · azul profundo #14233F · azul claro #8DBBFF
           fondo #F5F7FB · texto #182338 · secundario #64748B · error #B93838
   ========================================================= */
.checkin-overlay {
  --ci-blue: #2458d8;
  --ci-blue-hi: #2f6df0;
  --ci-navy: #14233f;
  --ci-sky: #8dbbff;
  --ci-bg: #f5f7fb;
  --ci-ink: #182338;
  --ci-muted: #64748b;
  --ci-line: #d6e1f2;
  --ci-danger: #b93838;
  position: fixed;
  z-index: 13000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(15, 23, 42, .66);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  font-family: Inter, system-ui, sans-serif;
}
.checkin-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
body.checkin-open { overflow: hidden; }
.checkin-overlay *,
.checkin-overlay *::before,
.checkin-overlay *::after { box-sizing: border-box; }

/* Reinicia estilos globales de botones, campos y etiquetas dentro del modal */
.checkin-overlay .checkin-card :is(button, input, label) {
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
}

.checkin-overlay .checkin-card {
  width: min(100%, 440px);
  max-height: min(94dvh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ci-line);
  border-radius: 24px;
  background: var(--ci-bg);
  color: var(--ci-ink);
  box-shadow: 0 24px 64px rgba(8, 20, 43, .34);
  font-family: inherit;
  transform: translateY(12px) scale(.99);
  transition: transform .2s ease;
}
.checkin-overlay.is-open .checkin-card { transform: translateY(0) scale(1); }

/* ---------- Encabezado (claro, sin adornos) ---------- */
.checkin-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 10px 16px 18px;
  border: 0;
  border-bottom: 1px solid #e1e9f5;
  background: #fff;
  color: var(--ci-ink);
}
.checkin-head__text { min-width: 0; flex: 1; }

/* Ícono sin caja: visor con esquinas, QR y línea de escaneo */
.checkin-head__icon { flex: 0 0 46px; width: 46px; height: 46px; color: var(--ci-blue); }
.checkin-head__icon svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.checkin-head__scan {
  stroke: #6ea8ff;
  stroke-width: 2;
  filter: drop-shadow(0 0 3px rgba(47, 109, 240, .55));
  transform-box: view-box;
  transform-origin: 50% 50%;
  will-change: transform;
}
/* Recorre el visor de arriba hacia abajo mientras el panel del escáner está abierto. */
.checkin-overlay.is-open .checkin-head__scan { animation: checkin-scan 1.6s ease-in-out infinite alternate; }
@keyframes checkin-scan {
  from { transform: translateY(-14px); opacity: .45; }
  to { transform: translateY(14px); opacity: 1; }
}

/* El h2 global del sitio fuerza fuente y mayúsculas con !important; aquí se anula solo para este título. */
.checkin-overlay .checkin-head h2 {
  margin: 0;
  color: var(--ci-navy);
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.28rem;
  font-weight: 750;
  letter-spacing: -.01em !important;
  line-height: 1.15;
  text-transform: none !important;
}
.checkin-overlay .checkin-subtitle {
  margin: 4px 0 0;
  max-width: 30ch;
  color: var(--ci-muted);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.4;
}

/* X sola, sin contenedor. Fondo/borde/sombra se fuerzan porque los botones globales del sitio los agregan. */
.checkin-overlay .checkin-close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  align-self: flex-start;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin: -8px 0 0 auto;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ci-muted);
  line-height: 0;
  cursor: pointer;
  appearance: none;
  transition: color .16s ease;
}
.checkin-overlay .checkin-close:hover { color: var(--ci-navy); }
.checkin-close svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- Contenido ---------- */
.checkin-content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-bottom: 24px;
}

/* ---------- Panel de cámara ---------- */
.checkin-camera-frame {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 200px;
  max-height: 42dvh;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #071127;
  box-shadow: none;
}
/* html5-qrcode usa directamente el elemento raíz como escenario de video. */
.checkin-camera-frame #checkinReader { position: absolute !important; inset: 0; width: 100%; height: 100%; min-height: 0; border: 0 !important; }
.checkin-camera-frame #checkinReader video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
  object-fit: cover;
  background: #0b1a38;
}
.checkin-camera-frame #checkinReader canvas { max-width: 100%; }

/* Estado «sin cámara»: ícono + texto; se oculta cuando la cámara real está activa */
.checkin-camera-off {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 28px;
  text-align: center;
  pointer-events: none;
}
.checkin-camera-off svg { width: 42px; height: 42px; margin-bottom: 8px; fill: none; stroke: #6ea8ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.checkin-camera-off strong { color: #fff; font-size: .95rem; font-weight: 650; line-height: 1.25; }
.checkin-camera-off span { color: #b9cbec; font-size: .8rem; line-height: 1.35; }
.checkin-overlay[data-camera="on"] .checkin-camera-off,
.checkin-overlay[data-camera="reading"] .checkin-camera-off { display: none; }

/* El cuadro visual coincide con el qrbox central: 78% del lado menor del visor. */
.checkin-corners {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: auto;
  height: 78%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(141, 187, 255, .58);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(15, 35, 63, .18), 0 0 24px rgba(47, 109, 240, .12);
  pointer-events: none;
}
.checkin-corners i { position: absolute; width: 22px; height: 22px; border: 3px solid #8dbbff; filter: drop-shadow(0 1px 4px rgba(7, 17, 39, .65)); }
.checkin-corners i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 7px; }
.checkin-corners i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 7px; }
.checkin-corners i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 7px; }
.checkin-corners i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 7px; }

/* ---------- Botones de cámara ---------- */
/* Reintentar, cambiar cámara, linterna y foto usan el mismo estilo compacto. */
.checkin-overlay .checkin-camera-actions {
  display: grid !important;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px !important;
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid #d6e2f5;
  border-radius: 14px;
  background: #fff;
}
.checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control {
  position: static !important;
  inset: auto !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: initial !important;
  grid-column: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 7px;
  min-width: 0;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  border: 1px solid #e1e9f5 !important;
  border-radius: 11px;
  background: #f8fafc !important;
  box-shadow: none !important;
  color: #334155 !important;
  filter: none !important;
  font: 650 .74rem/1.2 Inter, system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-transform: none !important;
  transform: none !important;
  white-space: normal;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control:hover:not(:disabled),
.checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control:active:not(:disabled) {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
  color: #1e40af !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
.checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control:focus-visible { outline: 3px solid rgba(43, 108, 209, .28); outline-offset: 2px; }
.checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control[hidden] { display: none !important; }
.checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control:disabled { opacity: .55; cursor: not-allowed; }
.checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control svg { flex: 0 0 17px; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control span { min-width: 0; }
.checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control--file {
  grid-column: auto !important;
  border-color: #d6e2f5 !important;
  background: #f8fafc !important;
  color: #24436f !important;
}
.checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control--file:hover:not(:disabled) {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
  color: #1e40af !important;
}
.checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control--retry { border-color: #c8d9f5 !important; background: #eff6ff !important; color: #1e40af !important; }
.checkin-file-input { display: none; }

/* ---------- Mensaje de estado / aviso ---------- */
/* Estado normal: texto discreto. Con .is-error o .is-warning se convierte en tarjeta de aviso. */
.checkin-overlay .checkin-message {
  margin: 0;
  color: var(--ci-muted);
  font-size: .8rem;
  line-height: 1.45;
  text-align: center;
}
.checkin-message__icon,
.checkin-message__chevron,
.checkin-message__title { display: none; }
.checkin-message__text { display: block; }
.checkin-message__title[hidden] { display: none; }
.checkin-overlay .checkin-message:is(.is-error, .is-warning) {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 4px 12px;
  padding: 13px 14px;
  border: 1px solid #f2c4c7;
  border-radius: 14px;
  background: linear-gradient(100deg, #fdeeee, #fbe6e9);
  color: var(--ci-ink);
  font-size: .85rem;
  text-align: left;
}
.checkin-message:is(.is-error, .is-warning) .checkin-message__icon { display: block; width: 24px; height: 24px; color: var(--ci-danger); }
.checkin-message__icon { fill: none; stroke: none; }
.checkin-message:is(.is-error, .is-warning) .checkin-message__title { display: block; color: #b52a2a; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.checkin-message:is(.is-error, .is-warning) .checkin-message__title[hidden] { display: none; }
.checkin-message.is-error:not(.has-title) .checkin-message__text { color: var(--ci-danger); font-weight: 600; }
.checkin-message.is-error.has-title { grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: start; }
.checkin-message.is-error.has-title .checkin-message__chevron { display: block; width: 16px; height: 16px; margin-top: 4px; fill: none; stroke: var(--ci-danger); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.checkin-overlay .checkin-message.is-warning { border-color: #f3c56b; background: #fff8e8; }
.checkin-message.is-warning .checkin-message__icon { color: #c98a1a; }
.checkin-message.is-warning .checkin-message__text { color: #8a4b12; font-weight: 600; }

/* ---------- Búsqueda manual ---------- */
.checkin-manual-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 2px;
  padding: 14px;
  border: 1px solid #d6e2f5;
  border-radius: 14px;
  background: #fff;
}
.checkin-manual-head { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 10px; }
.checkin-manual-icon svg { display: block; width: 24px; height: 24px; fill: none; stroke: var(--ci-navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.checkin-overlay .checkin-manual-title { display: block; color: var(--ci-ink); font-size: .95rem; font-weight: 700; line-height: 1.3; }
.checkin-overlay .checkin-manual-text { margin: 3px 0 0; color: var(--ci-muted); font-size: .8rem; line-height: 1.45; }
.checkin-manual-row { display: flex; gap: 8px; }
.checkin-overlay .checkin-manual-row input {
  min-width: 0;
  flex: 1;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #cfdaed;
  border-radius: 12px;
  background: #fff;
  color: var(--ci-ink);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.checkin-overlay .checkin-manual-row input::placeholder { color: #7d8ca6; font-weight: 500; letter-spacing: normal; text-transform: none; }
.checkin-overlay .checkin-manual-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ci-blue-hi), var(--ci-blue));
  box-shadow: 0 5px 12px rgba(36, 88, 216, .2);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease;
}
.checkin-overlay .checkin-manual-row button:hover { filter: brightness(1.06); }
.checkin-overlay .checkin-manual-row button:active { transform: scale(.985); }
.checkin-manual-row button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Resultado de la reserva ---------- */
.checkin-result {
  margin-top: 3px;
  padding: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 15px;
  background: linear-gradient(145deg, #eff6ff, #fff);
}
.checkin-result__title { color: #173b75; font: 750 .9rem/1.35 Inter, system-ui, sans-serif; }
.checkin-result--warning { border-color: #f3c56b; background: linear-gradient(145deg, #fff8e8, #fff); }
.checkin-result--warning .checkin-result__title { color: #8a4b12; }
.checkin-result--late { border-color: #f2a7a7; background: linear-gradient(145deg, #fff1f1, #fff); }
.checkin-result--late .checkin-result__title { color: #a52323; }
.checkin-result p { margin: 10px 0 0; color: #52627a; font: 500 .77rem/1.5 Inter, system-ui, sans-serif; }
.checkin-result__rebook {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid #2458d8;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f6df0, #2458d8);
  color: #fff;
  font: 700 .86rem/1.25 Inter, system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.checkin-result__rebook:hover { border-color: #1d4ed8; background: linear-gradient(135deg, #2458d8, #1d4ed8); box-shadow: 0 5px 14px rgba(36, 88, 216, .2); }
.checkin-result__rebook[aria-disabled="true"] { opacity: .65; pointer-events: none; }
.checkin-result__rebook:focus-visible { outline: 3px solid rgba(43, 108, 209, .38); outline-offset: 3px; }

/* ---------- Barra inferior ---------- */
.checkin-footer {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.8fr);
  gap: 10px;
  padding: 12px 18px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid #e1e9f5;
  background: #fff;
}
.checkin-footer[hidden] { display: none !important; }
.checkin-footer--single { grid-template-columns: minmax(0, 1fr); }
.checkin-overlay .checkin-footer button[hidden] { display: none !important; }
.checkin-overlay .checkin-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 10px;
  border-radius: 14px;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, filter .16s ease, transform .16s ease;
}
.checkin-overlay .checkin-footer button:active:not(:disabled) { transform: scale(.985); }
.checkin-overlay .checkin-cancel { border: 1px solid #d6e2f5; background: #fff; box-shadow: none; color: var(--ci-navy); }
.checkin-overlay .checkin-cancel:hover { border-color: #93b4eb; background: #f4f8ff; }
.checkin-overlay .checkin-start { border: 0; background: linear-gradient(135deg, var(--ci-blue-hi), var(--ci-blue)); box-shadow: 0 6px 14px rgba(36, 88, 216, .22); color: #fff; }
.checkin-overlay .checkin-start:hover:not(:disabled) { filter: brightness(1.06); }
.checkin-overlay .checkin-start:disabled { background: #8aaeef; box-shadow: none; color: rgba(255, 255, 255, .94); cursor: not-allowed; }
.checkin-start svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.checkin-has-reassign .checkin-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.checkin-has-reassign .checkin-footer button { min-height: 52px; }
.checkin-card button:focus-visible,
.checkin-card input:focus-visible { outline: 3px solid var(--ci-sky); outline-offset: 2px; }

/* ---------- Móvil: pantalla completa, respetando las áreas seguras ---------- */
@media (max-width: 520px) {
  /* El scrim conserva el alto del viewport grande en iOS cuando el teclado
     reduce el viewport visible; evita que se vea el Dashboard por debajo. */
  .checkin-overlay {
    min-height: 100vh;
    min-height: 100lvh;
    padding: 0;
    place-items: stretch;
    background: var(--ci-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .checkin-overlay .checkin-card { width: 100%; height: 100vh; max-height: 100vh; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .checkin-head { padding: calc(18px + env(safe-area-inset-top)) 6px 16px 16px; gap: 12px; }
  .checkin-content { padding: 14px 16px 10px; }
  /* Retrato y más alto en iPhone para que la vista real de cámara domine
     el panel; el contenido inferior permanece desplazable. */
  .checkin-camera-frame {
    aspect-ratio: auto;
    height: min(60vh, 520px);
    height: min(60dvh, 520px);
    min-height: min(300px, 45vh);
    max-height: 64vh;
    max-height: 64dvh;
  }
  .checkin-camera-frame #checkinReader video {
    object-fit: cover;
    object-position: center;
  }
  /* En vertical el lado menor del visor es su ancho; coincide con el qrbox. */
  .checkin-corners { display: block; width: 78%; height: auto; aspect-ratio: 1; }
  .checkin-footer { padding: 12px 16px max(14px, env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .checkin-result { padding: 11px; }
}
@media (max-width: 360px) {
  .checkin-head { gap: 10px; padding-right: 4px; padding-left: 12px; }
  .checkin-head__icon { flex-basis: 40px; width: 40px; height: 40px; }
  .checkin-overlay .checkin-head h2 { font-size: 1.15rem; }
  .checkin-content { padding-right: 12px; padding-left: 12px; }
  .checkin-overlay .checkin-camera-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px !important; padding: 8px; }
  .checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control { min-height: 40px !important; gap: 5px; padding: 6px 5px !important; font-size: .68rem !important; }
  .checkin-overlay .checkin-card .checkin-camera-actions > .checkin-control svg { flex-basis: 15px; width: 15px; height: 15px; }
  .checkin-manual-row { flex-direction: column; }
  .checkin-overlay .checkin-manual-row button { width: 100%; }
  .checkin-footer { padding-right: 12px; padding-left: 12px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .checkin-overlay.is-open .checkin-head__scan { animation-duration: 2.8s; }
}

/* Vista de detalle posterior a leer el QR o validar el código. */
.checkin-scan-view[hidden],
.checkin-detail-view[hidden] { display: none !important; }
.checkin-detail-view { width: 100%; max-width: 620px; margin: 0 auto; }
#checkinOverlay .checkin-detail-view .checkin-detail-back {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 36px;
  min-width: 0 !important;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0 3px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  color: #31547e;
  font: 700 .88rem/1.2 Inter, system-ui, sans-serif;
  text-transform: none !important;
  cursor: pointer;
  appearance: none;
  transition: color .16s ease;
}
#checkinOverlay .checkin-detail-view .checkin-detail-back:hover { border-color: transparent !important; background: transparent !important; color: #1a56db; }
#checkinOverlay .checkin-detail-view .checkin-detail-back:active { transform: none !important; }
#checkinOverlay .checkin-detail-view .checkin-detail-back svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.checkin-detail-title { margin: 0 0 12px; color: #14233f; font: 700 1.05rem/1.3 Inter, system-ui, sans-serif; }
.checkin-overlay .checkin-result {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.checkin-overlay .checkin-detail-view .checkin-result article.rv-ticket {
  display: block;
  overflow: hidden;
  border-radius: 22px;
  background: transparent;
  filter: drop-shadow(0 12px 22px rgba(29, 45, 69, .12));
}
.checkin-overlay .checkin-detail-view .checkin-result .rv-ticket__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  overflow: hidden;
  padding: 31px 24px 22px;
  border: 1px solid #e1e6ed;
  border-radius: 22px 22px 0 0;
  background: #f4f7fb;
  -webkit-mask: radial-gradient(circle 11px at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.checkin-overlay .checkin-detail-view .checkin-result .rv-ticket__head::before {
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: repeating-linear-gradient(-45deg, #2563eb 0 7px, #fff 7px 14px, #93c5fd 14px 21px, #fff 21px 28px);
  content: "";
}
.checkin-overlay .checkin-detail-view .checkin-result .rv-ticket__when { display: flex; min-width: 0; align-items: flex-end; gap: 12px; }
.checkin-overlay .checkin-detail-view .checkin-result .rv-ticket__day { color: #172b4d; font: 600 clamp(54px, 14vw, 76px)/.82 'Playfair Display', Georgia, serif; font-variant-numeric: lining-nums; }
.checkin-overlay .checkin-detail-view .checkin-result .rv-ticket__date { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding-bottom: 2px; }
.checkin-overlay .checkin-detail-view .checkin-result .rv-ticket__date strong { color: #172b4d; font: 700 15px/1.3 Inter, system-ui, sans-serif; text-transform: capitalize; }
.checkin-overlay .checkin-detail-view .checkin-result .rv-ticket__date small { color: #68778c; font: 500 13px/1.3 Inter, system-ui, sans-serif; text-transform: capitalize; }
.checkin-overlay .checkin-detail-view .checkin-result .rv-ticket__time { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 5px; }
.checkin-overlay .checkin-detail-view .checkin-result .rv-ticket__time span { color: #68778c; font: 700 11px/1.2 Inter, system-ui, sans-serif; letter-spacing: .8px; text-transform: uppercase; }
.checkin-overlay .checkin-detail-view .checkin-result .rv-ticket__time strong { color: #1a1a1a; font: 600 clamp(28px, 8vw, 38px)/.95 'Playfair Display', Georgia, serif; font-variant-numeric: tabular-nums; }
.checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body {
  display: block;
  position: relative;
  margin: 0;
  padding: 11px 24px 9px;
  border: 1px solid #e1e6ed;
  border-top: 0;
  border-radius: 0 0 22px 22px;
  background: #fff;
  -webkit-mask: radial-gradient(circle 11px at 0 0, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 0, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
}
.checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body::before {
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  border-top: 2px dashed #d9e0e9;
  content: "";
}
.checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row {
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  border-radius: 0;
  background: transparent;
}
.checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row:last-child { border-bottom: 0; }
.checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row dt {
  flex: 0 1 42%;
  min-width: 0;
  margin: 0;
  color: #68778c;
  font: 500 13px/1.4 Inter, system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row dd {
  flex: 1 1 58%;
  min-width: 0;
  margin: 0;
  color: #172b4d;
  font: 600 14px/1.4 Inter, system-ui, sans-serif;
  text-align: right;
  overflow-wrap: anywhere;
}
.checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row dd.rv-ticket__status {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eaf0f8;
  color: #344a68;
  font-size: 12px;
}
.checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row dd.rv-ticket__status--cancelled {
  background: #fee2e2;
  color: #991b1b;
}
.checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row dd.rv-ticket__status--finished {
  background: #dcfce7;
  color: #166534;
}
.checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row dd.rv-ticket__status--in-progress {
  background: #dbeafe;
  color: #1d4ed8;
}

.checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row dd.rv-ticket__status--no-show {
  background: #fee2e2;
  color: #991b1b;
}
.checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row dd.rv-ticket__checkin-code {
  color: #172b4d;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
}
.checkin-admin-assignment {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #d6e1f2;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f5f8fd);
}
.checkin-admin-assignment__copy { display: grid; gap: 4px; }
.checkin-admin-assignment__copy strong { color: #182338; font: 700 .88rem/1.35 Inter, system-ui, sans-serif; }
.checkin-admin-assignment__copy span { color: #64748b; font: 500 .78rem/1.45 Inter, system-ui, sans-serif; }
.checkin-admin-assignment > label { color: #31547e; font: 700 .72rem/1.3 Inter, system-ui, sans-serif; }
.checkin-overlay .checkin-admin-assignment select {
  width: 100%;
  min-height: 44px;
  padding: 0 38px 0 12px;
  border: 1px solid #c9d8ec;
  border-radius: 11px;
  background: #fff;
  color: #182338;
  font: 650 .86rem/1.2 Inter, system-ui, sans-serif;
}
.checkin-overlay .checkin-admin-assignment select:focus { border-color: #6b9cf0; outline: 3px solid rgba(43, 108, 209, .16); }
.checkin-admin-guide {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #d6e1f2;
  border-radius: 10px;
  background: #fff;
  color: #31547e;
  font: 650 .77rem/1.35 Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.checkin-admin-guide[hidden] { display: none !important; }
.checkin-admin-guide:hover { border-color: #93b4eb; background: #f4f8ff; color: #1e40af; }
.checkin-detail-notice { margin: 12px 0 0; padding: 14px 15px; border: 1px solid #d6e1f2; border-radius: 14px; background: #f5f8fd; color: #34445e; font: 600 .88rem/1.55 Inter, system-ui, sans-serif; }
.checkin-detail-notice.is-warning { border-color: #e8cb86; background: #fff8e8; color: #765012; }
.checkin-detail-notice.is-late { border-color: #fecaca; background: #fff1f2; color: #991b1b; }
.checkin-detail-action-status { display: grid; gap: 12px; margin: 10px 0 0; padding: 11px 13px; border: 1px solid #d6e2f5; border-radius: 12px; background: #f4f8ff; color: #334155; font: 600 .82rem/1.45 Inter, system-ui, sans-serif; }
.checkin-detail-action-status[hidden] { display: none !important; }
@media (max-width: 380px) {
  .checkin-overlay .checkin-detail-view .checkin-result .rv-ticket__head { padding: 27px 17px 19px; }
  .checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body { padding: 10px 17px 8px; }
  .checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row { gap: 10px; padding: 12px 0; }
  .checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row dt { font-size: 12px; }
  .checkin-overlay .checkin-detail-view .checkin-result dl.rv-ticket__body > .rv-ticket__row dd { font-size: 13px; }
}

.checkin-detail-action-status > p { margin: 0; }

/* These controls live in the scanner's blue/white detail view. Neutralize
   generic dashboard button shadows and hover movement here. */
#checkinOverlay .checkin-detail-view button {
  box-shadow: none !important;
  transform: none !important;
  font-family: Inter, system-ui, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
#checkinOverlay .checkin-detail-view button:hover:not(:disabled),
#checkinOverlay .checkin-detail-view button:active:not(:disabled) {
  box-shadow: none !important;
  transform: none !important;
}
#checkinOverlay .checkin-detail-view .checkin-admin-assignment,
#checkinOverlay .checkin-detail-view .checkin-move-panel {
  border-color: #d6e2f5;
  background: #f8fbff;
  color: #334155;
}
#checkinOverlay .checkin-detail-view .checkin-admin-guide,
#checkinOverlay .checkin-detail-view .checkin-move-panel__actions [data-checkin-keep],
#checkinOverlay .checkin-detail-view .checkin-conflict-actions__keep {
  border-color: #d6e2f5;
  background: #fff;
  color: #31547e;
}
#checkinOverlay .checkin-detail-view .checkin-result__rebook,
#checkinOverlay .checkin-detail-view .checkin-move-panel__actions [data-checkin-move],
#checkinOverlay .checkin-detail-view .checkin-conflict-actions__finish {
  border-color: #2458d8;
  background: #2458d8;
  color: #fff;
}
#checkinOverlay .checkin-detail-view .checkin-admin-guide:hover:not(:disabled),
#checkinOverlay .checkin-detail-view .checkin-move-panel__actions [data-checkin-keep]:hover:not(:disabled),
#checkinOverlay .checkin-detail-view .checkin-conflict-actions__keep:hover:not(:disabled) {
  border-color: #93b4eb;
  background: #f4f8ff;
  color: #1e40af;
}
#checkinOverlay .checkin-detail-view .checkin-result__rebook:hover:not(:disabled),
#checkinOverlay .checkin-detail-view .checkin-move-panel__actions [data-checkin-move]:hover:not(:disabled),
#checkinOverlay .checkin-detail-view .checkin-conflict-actions__finish:hover:not(:disabled) {
  border-color: #1d4ed8;
  background: #1d4ed8;
  color: #fff;
}

.checkin-conflict-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.checkin-conflict-actions button {
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 11px;
  font: 700 .83rem/1.35 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.checkin-conflict-actions__finish {
  border: 1px solid #2458d8;
  background: linear-gradient(135deg, #2f6df0, #2458d8);
  color: #fff;
  box-shadow: 0 5px 13px rgba(36, 88, 216, .18);
}
.checkin-conflict-actions__keep {
  border: 1px solid #d6e1f2;
  background: #fff;
  color: #31547e;
}
.checkin-conflict-actions button:focus-visible {
  outline: 3px solid rgba(43, 108, 209, .32);
  outline-offset: 2px;
}
@media (min-width: 480px) {
  .checkin-conflict-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.checkin-move-panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #d6e1f2;
  border-radius: 14px;
  background: #f5f8fd;
  color: #34445e;
}
.checkin-move-panel > p {
  margin: 0;
  font: 600 .84rem/1.5 Inter, system-ui, sans-serif;
}
.checkin-move-panel__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
.checkin-move-panel__actions button {
  min-height: 43px;
  padding: 10px 13px;
  border-radius: 11px;
  font: 700 .81rem/1.35 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.checkin-move-panel__actions [data-checkin-move] {
  border: 1px solid #2458d8;
  background: linear-gradient(135deg, #2f6df0, #2458d8);
  color: #fff;
}
.checkin-move-panel__actions [data-checkin-move]:disabled {
  opacity: .52;
  cursor: not-allowed;
}
.checkin-move-panel__actions [data-checkin-keep] {
  border: 1px solid #d6e1f2;
  background: #fff;
  color: #31547e;
}
@media (min-width: 480px) {
  .checkin-move-panel__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.checkin-move-panel__actions button:only-child { grid-column: 1 / -1; }
.checkin-image-reader {
  position: fixed !important;
  top: 0 !important;
  left: -10000px !important;
  width: 320px !important;
  height: 240px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  contain: strict !important;
}