/*
 * Vista de confirmación de reservas.
 * Las reglas están aisladas en #successCard y sus elementos existentes.
 * No cambia clases, datos, navegación ni comportamiento de calendario.js.
 */

html body[data-page="reservas"]:has(#successCard.show) {
  min-height: 100%;
  padding: 0 !important;
  background: #ffffff !important;
  color: #111111 !important;
}

html body[data-page="reservas"]:has(#successCard.show) #app {
  min-height: 100svh;
  background: #ffffff;
}

html body[data-page="reservas"] .page.reservas-page:has(> #successCard.show) {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: max(24px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #ffffff;
}

html body[data-page="reservas"] #app #successCard.success-card {
  display: none;
  width: min(100%, 460px);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex: none;
  min-height: 0;
  margin: auto;
  padding: 0;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: none !important;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

html body[data-page="reservas"] #app #successCard.success-card.show {
  display: flex !important;
  opacity: 1;
  transform: translateY(0);
}

html body[data-page="reservas"] #app #successCard #btnBackHome.btn-back-home {
  display: inline-flex;
  order: 7;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  min-height: 32px;
  margin: 16px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #666666 !important;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  text-shadow: none;
  transition: color 0.2s ease;
}

html body[data-page="reservas"] #app #successCard #btnBackHome.btn-back-home:hover {
  color: #111111 !important;
}

html body[data-page="reservas"] #app #successCard #btnBackHome svg {
  width: 22px;
  height: 22px;
  color: currentColor;
  stroke: currentColor;
}

html body[data-page="reservas"] #app #successCard .success-icon {
  order: 1;
  display: grid;
  width: 92px;
  height: 92px;
  margin: 0 auto 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #ecfdf5;
}

html body[data-page="reservas"] #app #successCard .success-icon svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: #16a34a;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8;
}

html body[data-page="reservas"] #app #successCard.success-card.show .success-icon {
  animation: success-badge-arrive .42s cubic-bezier(.2, .9, .25, 1.15) .05s both;
}

html body[data-page="reservas"] #app #successCard.success-card.show .success-icon svg polyline {
  stroke: #16a34a;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: success-check-draw .38s cubic-bezier(.25, .8, .25, 1) .3s forwards;
}

@keyframes success-badge-arrive {
  0% { opacity: 0; transform: scale(.72); }
  72% { opacity: 1; transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes success-check-draw {
  to { stroke-dashoffset: 0; }
}

html body[data-page="reservas"] #app #successCard h3 {
  order: 2;
  margin: 0 0 14px;
  color: #111111 !important;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.8rem, 4.8vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-shadow: none;
}

html body[data-page="reservas"] #app #successCard > p {
  order: 3;
  max-width: 38ch;
  margin: 0 auto clamp(30px, 5vh, 46px);
  color: #777777 !important;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(1rem, 2.7vw, 1.2rem);
  font-weight: 400;
  line-height: 1.55;
}

html body[data-page="reservas"] #app #successCard #successDetails.success-details {
  order: 4;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 0 28px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none;
}

html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__when,
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__date {
  min-width: 0;
}

html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row dt {
  flex: 0 0 auto;
}

html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

html body[data-page="reservas"] #app #successCard #btnSaveProof.btn-save-proof {
  order: 5;
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex: 0 1 auto;
  align-self: stretch;
  min-height: 62px;
  margin: 0 0 14px;
  padding: 14px 20px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #1a1a1a;
  border-radius: 16px;
  background: #1a1a1a !important;
  color: #ffffff !important;
  box-shadow: none;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

html body[data-page="reservas"] #app #successCard #btnSaveProof.btn-save-proof:hover {
  background: #333333 !important;
  transform: translateY(-1px);
}

html body[data-page="reservas"] #app #successCard #btnSaveProof svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: currentColor;
  stroke: currentColor;
}

html body[data-page="reservas"] #app #successCard #btnCancel.btn-cancel {
  order: 6;
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex: 0 1 auto;
  align-self: stretch;
  min-height: 60px;
  margin: 0;
  padding: 14px 20px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fecaca;
  border-radius: 16px;
  background: #ffffff !important;
  color: #d63d3d !important;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

html body[data-page="reservas"] #app #successCard #btnCancel.btn-cancel:hover {
  border-color: #f2a5a5;
  background: #fffafa !important;
}

@media (max-width: 480px) {
  html body[data-page="reservas"] .page.reservas-page:has(> #successCard.show) {
    padding: max(32px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    justify-content: flex-start;
  }

  html body[data-page="reservas"] #app #successCard.success-card.show {
    width: min(100%, 360px);
    margin: 0 auto;
    gap: 0;
  }

  html body[data-page="reservas"] #app #successCard #btnBackHome.btn-back-home {
    min-height: 32px;
    margin: 13px auto 0;
    align-self: center !important;
    justify-content: center;
    font-size: .88rem;
  }

  html body[data-page="reservas"] #app #successCard .success-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
  }

  html body[data-page="reservas"] #app #successCard .success-icon svg {
    width: 28px;
    height: 28px;
  }

  html body[data-page="reservas"] #app #successCard h3 {
    margin-bottom: 5px;
    font-size: clamp(1.3rem, 5.3vw, 1.55rem);
    line-height: 1.16;
    letter-spacing: -.02em;
  }

  html body[data-page="reservas"] #app #successCard > p {
    max-width: 34ch;
    margin-bottom: 12px;
    font-size: .86rem;
    line-height: 1.35;
  }

  html body[data-page="reservas"] #app #successCard #successDetails.success-details {
    margin-bottom: 11px;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket {
    border-radius: 17px;
    filter: drop-shadow(0 6px 12px rgba(29, 45, 69, .09));
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__head {
    min-height: 62px;
    gap: 7px;
    padding: 15px 12px 11px;
    border-radius: 17px 17px 0 0;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__head::before {
    height: 5px;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__day {
    font-size: 39px;
    line-height: .85;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__date {
    gap: 2px;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__date strong {
    font-size: 11px;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__date small {
    font-size: 9px;
    text-transform: none;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__time {
    gap: 3px;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__time span {
    font-size: 9px;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__time strong {
    font-size: 21px;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__body {
    padding: 3px 12px 2px;
    border-radius: 0 0 17px 17px;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__body::before {
    left: 14px;
    right: 14px;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row {
    gap: 7px;
    padding: 5px 0;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row dt {
    font-size: 10px;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row dd {
    font-size: 11px;
  }

  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row dd.rv-ticket__status {
    padding: 3px 8px;
    font-size: 10px;
  }

  html body[data-page="reservas"] #app #successCard #btnSaveProof.btn-save-proof,
  html body[data-page="reservas"] #app #successCard #btnCancel.btn-cancel {
    width: 90%;
    max-width: 320px;
    min-height: 44px;
    margin-right: auto;
    margin-left: auto;
    padding: 9px 12px;
    font-size: .86rem;
    align-self: center;
  }

  html body[data-page="reservas"] #app #successCard #btnSaveProof.btn-save-proof {
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) and (max-height: 740px) {
  html body[data-page="reservas"] #app #successCard #btnBackHome.btn-back-home { margin-top: 9px; }
  html body[data-page="reservas"] #app #successCard .success-icon { width: 46px; height: 46px; margin-bottom: 10px; }
  html body[data-page="reservas"] #app #successCard .success-icon svg { width: 26px; height: 26px; }
  html body[data-page="reservas"] #app #successCard > p { margin-bottom: 9px; }
  html body[data-page="reservas"] #app #successCard #successDetails.success-details { margin-bottom: 8px; }
  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row { padding-top: 4px; padding-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-page="reservas"] #app #successCard,
  html body[data-page="reservas"] #app #successCard * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  html body[data-page="reservas"] #app #successCard.success-card.show .success-icon svg polyline {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   Ajuste: secuencia de entrada + posición más baja + efecto "impresora"
   Orden: badge → check → título/texto → ranura de impresora → ticket que
          sale de la ranura → botones.
   Solo CSS: no cambia HTML, JS ni tamaños del comprobante ni de los botones.
   ========================================================================== */

/* --- 1. Badge + check --------------------------------------------------- */
@keyframes success-badge-arrive {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { opacity: 1; transform: scale(1.09); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes success-ring {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.28); }
  100% { box-shadow: 0 0 0 20px rgba(22,163,74,0); }
}
html body[data-page="reservas"] #app #successCard.success-card.show .success-icon {
  animation:
    success-badge-arrive .5s cubic-bezier(.2,.9,.25,1.12) .08s both,
    success-ring .9s ease-out .35s backwards;
}
html body[data-page="reservas"] #app #successCard.success-card.show .success-icon svg polyline {
  animation: success-check-draw .45s cubic-bezier(.45,.05,.25,1) .7s forwards;
}
/* pequeño "pop" del check cuando termina de dibujarse */
@keyframes success-check-pop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
html body[data-page="reservas"] #app #successCard.success-card.show .success-icon svg {
  transform-origin: 50% 50%;
  animation: success-check-pop .32s ease-out 1.12s backwards;
}

/* --- 2. Título y texto: aparecen cuando el check termina (~0.95 s) ------- */
@keyframes success-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
html body[data-page="reservas"] #app #successCard.success-card.show h3 {
  animation: success-rise .55s cubic-bezier(.16,1,.3,1) 1.15s backwards;
}
html body[data-page="reservas"] #app #successCard.success-card.show > p {
  animation: success-rise .55s cubic-bezier(.16,1,.3,1) 1.28s backwards;
}

/* --- 4. Botones: entran cuando el ticket termina de salir ----------------
   Mientras esperan (invisibles) no reciben toques, así nadie puede pulsar
   "cancelar" o "guardar" sin verlos. */
@keyframes success-rise-btn {
  from { opacity: 0; transform: translateY(10px); pointer-events: none; }
  to   { opacity: 1; transform: translateY(0);    pointer-events: auto; }
}
html body[data-page="reservas"] #app #successCard.success-card.show #btnSaveProof { animation: success-rise-btn .6s cubic-bezier(.16,1,.3,1) 5.3s backwards; }
html body[data-page="reservas"] #app #successCard.success-card.show #btnCancel    { animation: success-rise-btn .6s cubic-bezier(.16,1,.3,1) 5.4s backwards; }
html body[data-page="reservas"] #app #successCard.success-card.show #btnBackHome  { animation: success-rise-btn .6s cubic-bezier(.16,1,.3,1) 5.5s backwards; }

/* --- 5. Posición más baja (móvil) -----------------------------------------
   El padding-superior se adapta al alto de la pantalla, así baja más en
   teléfonos altos y casi nada en los bajitos. Tamaños intactos. */
@media (max-width: 480px) {
  html body[data-page="reservas"] .page.reservas-page:has(> #successCard.show) {
    padding-top: max(clamp(62px, 9svh, 84px), calc(env(safe-area-inset-top) + 40px));
  }
  html body[data-page="reservas"] #app #successCard .success-icon { width: 64px; height: 64px; margin-bottom: 16px; }
  html body[data-page="reservas"] #app #successCard .success-icon svg { width: 34px; height: 34px; }
  html body[data-page="reservas"] #app #successCard h3 { margin-bottom: 7px; }
  html body[data-page="reservas"] #app #successCard > p { margin-bottom: 18px; }
  html body[data-page="reservas"] #app #successCard #successDetails.success-details { margin-bottom: 14px; }
  /* botones alineados al mismo ancho del comprobante */
  html body[data-page="reservas"] #app #successCard #btnSaveProof.btn-save-proof,
  html body[data-page="reservas"] #app #successCard #btnCancel.btn-cancel {
    width: 100%;
    max-width: none;
    min-height: 48px;
  }
}
@media (max-width: 480px) and (max-height: 740px) {
  html body[data-page="reservas"] .page.reservas-page:has(> #successCard.show) { padding-top: max(clamp(44px, 6.5svh, 56px), calc(env(safe-area-inset-top) + 28px)); }
  html body[data-page="reservas"] #app #successCard .success-icon { width: 56px; height: 56px; margin-bottom: 12px; }
  html body[data-page="reservas"] #app #successCard .success-icon svg { width: 30px; height: 30px; }
  html body[data-page="reservas"] #app #successCard > p { margin-bottom: 12px; }
  html body[data-page="reservas"] #app #successCard #successDetails.success-details { margin-bottom: 10px; }
}

/* --- 6. Bajar el contenedor completo (#successCard) -----------------------
   El empuje va en el propio contenedor, con !important, para que gane sobre
   cualquier otra regla del sitio y funcione en cualquier ancho de teléfono.
   El padding NO cambia el ancho del comprobante ni de los botones. */
@media (max-width: 600px) {
  html body[data-page="reservas"] #app #successCard.success-card.show {
    padding-top: clamp(40px, 8svh, 76px) !important;
  }
}
@media (max-width: 600px) and (max-height: 740px) {
  html body[data-page="reservas"] #app #successCard.success-card.show {
    padding-top: clamp(26px, 5svh, 38px) !important;
  }
}

/* ==========================================================================
   7. Impresora térmica + recibo que sale de la ranura
   Solo CSS sobre el HTML existente (#successDetails y .rv-ticket generados
   por calendario.js). La impresora se dibuja con ::before (carcasa) y
   ::after (ranura). El papel queda anclado a la ranura y su altura visible
   crece, con el borde dentado viajando en el extremo inferior.
   Estado final (sin animación) = recibo completo: así movimiento reducido,
   navegadores sin soporte de máscaras animadas y recargas siempre terminan
   mostrando el comprobante.
   ========================================================================== */
html body[data-page="reservas"] #app #successCard #successDetails.success-details {
  --pH: 94px;        /* alto de la impresora */
  --slotY: 64px;     /* distancia del borde superior de la impresora a la ranura */
  --tooth: 4px;      /* alto del diente del borde inferior */
  position: relative;
  width: 72%;
  margin-top: var(--slotY);
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 24px;
  filter: drop-shadow(0 6px 8px rgba(24, 28, 40, .11));
  transform: translateZ(0);
  isolation: isolate;
}
html body[data-page="reservas"] #app #successCard.success-card.show #successDetails.success-details {
  animation: success-rise .55s cubic-bezier(.16, 1, .3, 1) 1.3s backwards;
}

/* carcasa de la impresora (detrás del papel): gris carbón mate */
html body[data-page="reservas"] #app #successCard #successDetails.success-details::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -14%;
  right: -14%;
  top: calc(var(--slotY) * -1);
  height: var(--pH);
  border-radius: 26px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f5' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M21 3 3 10.5l7 3 3 7z'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #424247 0%, #3a3a3f 55%, #343439 100%);
  background-size: 23px 23px, 100% 100%;
  background-position: 22px 18px, 0 0;
  box-shadow:
    0 20px 24px -14px rgba(20, 20, 28, .45),
    0 3px 6px rgba(20, 20, 28, .18),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -3px 0 rgba(0, 0, 0, .22);
}

/* la impresora vibra muy poquito mientras imprime (mismo tiempo que el papel)
   y se queda quieta cuando termina */
@keyframes success-printer-hum {
  0% { transform: translate3d(0px, 0px, 0); }
  1.25% { transform: translate3d(0.02px, 0.28px, 0); }
  2.5% { transform: translate3d(-0.02px, -0.69px, 0); }
  3.75% { transform: translate3d(0.08px, 0.81px, 0); }
  5% { transform: translate3d(0.01px, -0.84px, 0); }
  6.25% { transform: translate3d(0.39px, 1.2px, 0); }
  7.5% { transform: translate3d(-0.27px, -0.95px, 0); }
  8.75% { transform: translate3d(0.43px, 0.95px, 0); }
  10% { transform: translate3d(-0.64px, 2.4px, 0); }
  11.25% { transform: translate3d(0.65px, 1.49px, 0); }
  12.5% { transform: translate3d(0.16px, -1.29px, 0); }
  13.75% { transform: translate3d(-0.68px, 0.99px, 0); }
  15% { transform: translate3d(-0.62px, -1.22px, 0); }
  16.25% { transform: translate3d(-0.36px, 1.01px, 0); }
  17.5% { transform: translate3d(-0.05px, -0.92px, 0); }
  18.75% { transform: translate3d(0.48px, 1.16px, 0); }
  20% { transform: translate3d(0.2px, 2.4px, 0); }
  21.25% { transform: translate3d(0.23px, 1.2px, 0); }
  22.5% { transform: translate3d(-0.31px, -1.17px, 0); }
  23.75% { transform: translate3d(0.69px, 1.5px, 0); }
  25% { transform: translate3d(0.29px, -1.4px, 0); }
  26.25% { transform: translate3d(-0.38px, 1.09px, 0); }
  27.5% { transform: translate3d(-0.6px, -1.07px, 0); }
  28.75% { transform: translate3d(-0.14px, 1.36px, 0); }
  30% { transform: translate3d(-0.16px, 2.4px, 0); }
  31.25% { transform: translate3d(0.49px, 1.47px, 0); }
  32.5% { transform: translate3d(-0.41px, -0.9px, 0); }
  33.75% { transform: translate3d(-0.04px, 1.45px, 0); }
  35% { transform: translate3d(-0.14px, -1.49px, 0); }
  36.25% { transform: translate3d(0.18px, 0.94px, 0); }
  37.5% { transform: translate3d(-0.32px, -1.37px, 0); }
  38.75% { transform: translate3d(-0.23px, 0.95px, 0); }
  40% { transform: translate3d(0.36px, 2.4px, 0); }
  41.25% { transform: translate3d(-0.36px, 0.97px, 0); }
  42.5% { transform: translate3d(-0.62px, -0.96px, 0); }
  43.75% { transform: translate3d(-0.45px, 1.38px, 0); }
  45% { transform: translate3d(-0.07px, -1.24px, 0); }
  46.25% { transform: translate3d(0.32px, 1.01px, 0); }
  47.5% { transform: translate3d(0.2px, -0.98px, 0); }
  48.75% { transform: translate3d(-0.11px, 0.97px, 0); }
  50% { transform: translate3d(-0.32px, 2.4px, 0); }
  51.25% { transform: translate3d(0.42px, 1.48px, 0); }
  52.5% { transform: translate3d(0.54px, -1.08px, 0); }
  53.75% { transform: translate3d(-0.15px, 1.03px, 0); }
  55% { transform: translate3d(0.2px, -1.41px, 0); }
  56.25% { transform: translate3d(0.69px, 0.96px, 0); }
  57.5% { transform: translate3d(-0.34px, -1.03px, 0); }
  58.75% { transform: translate3d(-0.24px, 1.36px, 0); }
  60% { transform: translate3d(-0.6px, 2.4px, 0); }
  61.25% { transform: translate3d(0.12px, 0.95px, 0); }
  62.5% { transform: translate3d(0.14px, -1.05px, 0); }
  63.75% { transform: translate3d(-0.07px, 1.12px, 0); }
  65% { transform: translate3d(-0.02px, -1.48px, 0); }
  66.25% { transform: translate3d(0.51px, 1.24px, 0); }
  67.5% { transform: translate3d(-0.48px, -1.01px, 0); }
  68.75% { transform: translate3d(0.44px, 1.45px, 0); }
  70% { transform: translate3d(-0.43px, 2.4px, 0); }
  71.25% { transform: translate3d(0.62px, 1.34px, 0); }
  72.5% { transform: translate3d(0.63px, -1.02px, 0); }
  73.75% { transform: translate3d(0.14px, 1.43px, 0); }
  75% { transform: translate3d(-0.55px, -1.15px, 0); }
  76.25% { transform: translate3d(0.65px, 0.92px, 0); }
  77.5% { transform: translate3d(0.29px, -1.04px, 0); }
  78.75% { transform: translate3d(0.45px, 1.05px, 0); }
  80% { transform: translate3d(-0.29px, 2.4px, 0); }
  81.25% { transform: translate3d(0.31px, 1.01px, 0); }
  82.5% { transform: translate3d(-0.38px, -0.94px, 0); }
  83.75% { transform: translate3d(0.49px, 1.24px, 0); }
  85% { transform: translate3d(-0.31px, -1.27px, 0); }
  86.25% { transform: translate3d(-0.41px, 1.45px, 0); }
  87.5% { transform: translate3d(-0.32px, -0.91px, 0); }
  88.75% { transform: translate3d(-0.61px, 1.16px, 0); }
  90% { transform: translate3d(-0.18px, 2.32px, 0); }
  91.25% { transform: translate3d(-0.47px, 1.13px, 0); }
  92.5% { transform: translate3d(0.46px, -0.93px, 0); }
  93.75% { transform: translate3d(0.16px, 1.09px, 0); }
  95% { transform: translate3d(0.07px, -0.8px, 0); }
  96.25% { transform: translate3d(-0.31px, 0.46px, 0); }
  97.5% { transform: translate3d(0.18px, -0.29px, 0); }
  98.75% { transform: translate3d(0.11px, 0.22px, 0); }
  100% { transform: translate3d(0px, 0px, 0); }
}
html body[data-page="reservas"] #app #successCard.success-card.show #successDetails.success-details::before {
  animation: success-printer-hum 3.6s linear 2s backwards !important;
  will-change: transform;
}

/* ranura: surco redondeado donde nace el papel (delante del papel) */
html body[data-page="reservas"] #app #successCard #successDetails.success-details::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: -3.5%;
  right: -3.5%;
  top: -5px;
  height: 10px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(180deg, #08080a 0%, #131316 70%, #26262a 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .10), inset 0 1px 2px rgba(0, 0, 0, .8);
}

/* papel térmico */
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 15px 14px 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  overflow: visible;
  text-align: left;
  color: #1b1b1b;
  background-color: #fffefb;
  background-image:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .014) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #ffffff 0%, #faf9f5 100%);
  /* Estado final: papel completo con borde dentado abajo */
  -webkit-mask-image: linear-gradient(#000 0 0), conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0);
          mask-image: linear-gradient(#000 0 0), conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0);
  -webkit-mask-size: 100% calc(100% - 3px), 8px var(--tooth);
          mask-size: 100% calc(100% - 3px), 8px var(--tooth);
  -webkit-mask-position: 0 0, 0 100%;
          mask-position: 0 0, 0 100%;
  -webkit-mask-repeat: no-repeat, repeat-x;
          mask-repeat: no-repeat, repeat-x;
}
html body[data-page="reservas"] #app #successCard.success-card.show #successDetails .rv-ticket {
  /* el papel baja desde la ranura: arranque suave, velocidad pareja, frenada suave */
  animation: success-print-feed 3.6s cubic-bezier(.4, 0, .22, 1) 2s backwards;
  will-change: transform, clip-path;
  backface-visibility: hidden;
}

/* El papel sale de la ranura deslizándose hacia abajo (solo transform + clip-path,
   sin repintar la máscara). Empieza 100% oculto: nada aparece "a la mitad".
   El clip-path recorta lo que aún está "dentro" de la impresora, justo en la ranura. */
@keyframes success-print-feed {
  0% {
    transform: translate3d(0, -100%, 0);
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

/* se anulan adornos del estilo anterior del ticket para que no se dupliquen */
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket::after,
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__head::before,
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__head::after,
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__body::before,
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__body::after {
  content: none !important;
  display: none !important;
}

/* encabezado: fecha y hora */
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__head {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 11px 0 10px;
  border: 0;
  border-top: 1px dashed rgba(17, 17, 17, .22);
  border-bottom: 1px dashed rgba(17, 17, 17, .22);
  border-radius: 0;
  background: transparent;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__when {
  display: flex;
  align-items: center;
  gap: 9px;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__day {
  color: #111111;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 37px;
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.02em;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__date strong {
  color: #161616;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__date small {
  color: #8a8a8a;
  font-family: Inter, system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__time span {
  color: #8a8a8a;
  font-family: Inter, system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__time strong {
  color: #111111;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* filas de datos */
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__body {
  margin: 0;
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: transparent;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row + .rv-ticket__row {
  border-top: 1px solid rgba(17, 17, 17, .07);
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row dt {
  color: #8c8c8c;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row dd {
  margin: 0;
  color: #1b1b1b;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row dd.rv-ticket__status {
  padding: 2px 9px;
  border-radius: 999px;
  background: #e8eaef;
  color: #3c4250;
  font-size: 10px;
  font-weight: 600;
}

/* logo del recibo (mismo símbolo de la impresora) */
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket::before {
  content: "" !important;
  display: block !important;
  width: 30px;
  height: 30px;
  margin: 0 auto 13px;
  border-radius: 3px;
  background-color: #1c1c1f;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M21 3 3 10.5l7 3 3 7z'/%3E%3C/svg%3E");
}

/* separación entre grupos de datos (como la referencia) */
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row:nth-child(5) {
  margin-bottom: 5px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(17, 17, 17, .16);
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row:nth-child(6) {
  border-top: 0;
}

/* QR de check-in (lo inserta calendario.js con el código real; el hueco ya está reservado) */
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 12px 0 2px;
  padding-top: 12px;
  border-top: 1px dashed rgba(17, 17, 17, .16);
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__qr-box {
  box-sizing: border-box;
  width: min(100%, 124px);
  aspect-ratio: 1;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .06);
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__qr-box img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: contain;
}
html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__qr span {
  color: #6f6f6f;
  font-family: Inter, system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
}

@media (min-width: 481px) {
  html body[data-page="reservas"] #app #successCard #successDetails.success-details { --pH: 104px; --slotY: 72px; margin-bottom: 30px; }
  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket { padding: 17px 18px 14px; }
  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__day { font-size: 42px; }
  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__date strong { font-size: 13px; }
  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__date small { font-size: 10.5px; }
  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__time strong { font-size: 23px; }
  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row { padding: 7px 0; }
  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__qr-box { width: min(100%, 140px); }
  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__qr span { font-size: 9.5px; }
  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row dt { font-size: 12px; }
  html body[data-page="reservas"] #app #successCard #successDetails .rv-ticket__row dd { font-size: 12.5px; }
}

/* --- Reduce motion: todo aparece al instante, sin ranura ----------------- */
@media (prefers-reduced-motion: reduce) {
  html body[data-page="reservas"] #app #successCard,
  html body[data-page="reservas"] #app #successCard *,
  html body[data-page="reservas"] #app #successCard *::before,
  html body[data-page="reservas"] #app #successCard *::after {
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }
}