/* Animaciones suaves del sitio (reserva, comprobante, chat y portada).
   Reglas de diseño:
   - Sobrias y cortas (menos de 1 s): acompañan, no distraen. Nada parpadea ni se repite sin parar,
     salvo el indicador de "reservando" y el reloj de "pendiente".
   - Si el celular no las soporta, todo se ve igual: el estado final es el estado normal de cada elemento.
   - Si la persona pidió "reducir movimiento" en su celular, se apagan todas (bloque final del archivo). */

:root {
  --cpa-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --cpa-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 1. Entrada de las tarjetas al abrir la página ----------
   Sólo "backwards": al terminar, el elemento vuelve a su estilo normal (así no se pisan los efectos al pasar el mouse). */
@keyframes cpaFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cpaFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.motion-page .page-hero,
.motion-page .hero,
.motion-page #booking-success,
.motion-page .card-elev,
.motion-page .quick-action-card,
.motion-page .crisis-alert,
.motion-page .booking-side-card,
.motion-page #appointment-form > .form-card {
  animation: cpaFadeUp 0.55s var(--cpa-ease) backwards;
}

.motion-page .hero { animation-delay: 0.02s; }
.motion-page .page-hero { animation-delay: 0.02s; }
.motion-page #appointment-form > .form-card:nth-of-type(1) { animation-delay: 0.08s; }
.motion-page #appointment-form > .form-card:nth-of-type(2) { animation-delay: 0.16s; }
.motion-page #appointment-form > .form-card:nth-of-type(3) { animation-delay: 0.24s; }
.motion-page .booking-side-card:nth-of-type(1) { animation-delay: 0.14s; }
.motion-page .booking-side-card:nth-of-type(2) { animation-delay: 0.22s; }
.motion-page .booking-side-card:nth-of-type(3) { animation-delay: 0.3s; }
.motion-page .quick-action-card:nth-child(1) { animation-delay: 0.32s; }
.motion-page .quick-action-card:nth-child(2) { animation-delay: 0.4s; }
.motion-page .crisis-alert { animation-delay: 0.46s; }
.motion-page .card-elev { animation-delay: 0.12s; }

/* ---------- 2. Campos y botones con respuesta al tocarlos ---------- */
.motion-page .input {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.motion-page .btn:active,
.motion-page .btn-submit:active,
.motion-page .quick-action-card:active {
  transform: scale(0.985);
}

.motion-page .btn,
.motion-page .btn-submit {
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* "Reservando…": franja de luz que se mueve mientras se espera */
@keyframes cpaShimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.btn-submit:disabled {
  background-image: linear-gradient(110deg, var(--primary) 30%, #5d8a70 50%, var(--primary) 70%);
  background-size: 200% 100%;
  animation: cpaShimmer 1.6s linear infinite;
}

/* Casillas y desplegables: aparecen con suavidad en lugar de saltar */
#minor-fields {
  animation: cpaFadeUp 0.3s var(--cpa-ease) backwards;
}

/* ---------- 3. Íconos animados de estado (check, cruz, reloj) ---------- */
@keyframes cpaPop {
  0% { transform: scale(0.55); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes cpaDrawRing {
  from { stroke-dashoffset: 151; }
  to { stroke-dashoffset: 0; }
}

@keyframes cpaDrawMark {
  from { stroke-dashoffset: 44; }
  to { stroke-dashoffset: 0; }
}

@keyframes cpaHalo {
  0% { opacity: 0.45; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.75); }
}

@keyframes cpaTick {
  to { transform: rotate(360deg); }
}

.cpa-anim-wrap {
  --cpa-anim-color: var(--primary);
  --cpa-anim-fill: var(--primary-light);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: var(--cpa-anim-size, 56px);
  height: var(--cpa-anim-size, 56px);
  animation: cpaPop 0.55s var(--cpa-spring) backwards;
}

.cpa-anim-wrap[data-kind="cancel"] {
  --cpa-anim-color: var(--danger-fg, #991b1b);
  --cpa-anim-fill: var(--danger-light, #fee2e2);
}

.cpa-anim-wrap[data-kind="wait"] {
  --cpa-anim-color: #9a6a1e;
  --cpa-anim-fill: #fbf1e0;
}

.cpa-anim-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 2px solid var(--cpa-anim-color);
  opacity: 0;
  pointer-events: none;
  animation: cpaHalo 1.1s ease-out 0.6s 1;
}

.cpa-anim-wrap[data-kind="wait"]::after { display: none; }

.cpa-anim {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cpa-anim-disc { fill: var(--cpa-anim-fill); stroke: none; }

.cpa-anim-ring {
  fill: none;
  stroke: var(--cpa-anim-color);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 151;
  stroke-dashoffset: 0;
  transform-origin: 26px 26px;
  transform: rotate(-90deg);
  animation: cpaDrawRing 0.7s var(--cpa-ease) 0.05s backwards;
}

.cpa-anim-mark {
  fill: none;
  stroke: var(--cpa-anim-color);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 44;
  stroke-dashoffset: 0;
  animation: cpaDrawMark 0.45s var(--cpa-ease) 0.5s backwards;
}

.cpa-anim-mark.second { animation-delay: 0.7s; }

.cpa-anim-hand {
  transform-origin: 26px 26px;
  animation: cpaTick 9s linear infinite;
}

/* Chispas: unos puntos que salen del ícono una sola vez */
@keyframes cpaSpark {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}

.cpa-sparkles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cpa-sparkles i {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  background: var(--primary);
  animation: cpaSpark 1s var(--cpa-ease) 0.55s 1 backwards;
}

.cpa-sparkles i:nth-child(odd) { background: #C67F3E; }
.cpa-sparkles i:nth-child(3n) { background: #8fb59e; width: 5px; height: 5px; }
.cpa-sparkles i:nth-child(1) { --dx: -46px; --dy: -34px; }
.cpa-sparkles i:nth-child(2) { --dx: 4px;   --dy: -52px; }
.cpa-sparkles i:nth-child(3) { --dx: 46px;  --dy: -30px; }
.cpa-sparkles i:nth-child(4) { --dx: 54px;  --dy: 12px; }
.cpa-sparkles i:nth-child(5) { --dx: 34px;  --dy: 46px; }
.cpa-sparkles i:nth-child(6) { --dx: -12px; --dy: 54px; }
.cpa-sparkles i:nth-child(7) { --dx: -48px; --dy: 24px; }
.cpa-sparkles i:nth-child(8) { --dx: -56px; --dy: -8px; }

/* ---------- 4. Cartel de estado en el comprobante (Reservado / Confirmado / Cancelado) ---------- */
.status-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.1rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--card);
}

.status-hero[data-state="confirmed"] {
  border-color: var(--primary);
  background: var(--primary-light);
}

.status-hero[data-state="canceled"] {
  border-color: var(--danger-light, #fee2e2);
  background: var(--danger-light, #fee2e2);
  color: var(--danger-fg, #991b1b);
}

.status-hero[data-state="pending"] {
  border-color: #ecd9b6;
  background: #fbf3e4;
}

html.dark .status-hero[data-state="pending"] {
  border-color: #5b4a2a;
  background: rgba(198, 127, 62, 0.12);
}

html.dark .status-hero[data-state="canceled"] {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.status-hero-text {
  min-width: 0;
}

.status-hero-title {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
  color: inherit;
}

.status-hero-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}

.status-hero[data-state="canceled"] .status-hero-sub {
  color: inherit;
  opacity: 0.85;
}

.status-hero .cpa-anim-wrap { --cpa-anim-size: 52px; }

/* La etiqueta de estado de la tabla también "rebota" cuando cambia */
@keyframes cpaChipPop {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.chip.just-changed { animation: cpaChipPop 0.45s var(--cpa-spring); }

/* ---------- 5. Cartel de "turno reservado" (con ?nuevo=1) ---------- */
.booking-success-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.booking-success-head .cpa-anim-wrap { --cpa-anim-size: 64px; }

.booking-success-head h2 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.25;
}

/* ---------- 6. Portada: las secciones aparecen al llegar a ellas ----------
   Sólo si el navegador sabe observar el scroll (motion.js agrega la clase). Sin eso, todo se ve de entrada. */
.cpa-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--cpa-ease), transform 0.6s var(--cpa-ease);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

.cpa-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.cpa-reveal .step[data-reveal] .n {
  transform: scale(0.6);
  transition: transform 0.5s var(--cpa-spring) 0.2s;
}

.cpa-reveal .step[data-reveal].is-in .n { transform: scale(1); }

/* La portada entra con el encabezado ya visible: sólo un fundido corto */
.hero-copy,
.hero-facts {
  animation: cpaFadeUp 0.6s var(--cpa-ease) backwards;
}

.hero-facts { animation-delay: 0.12s; }

/* ---------- 7. Chat: los mensajes y el tilde de "reservado" ---------- */
.bubble .cpa-anim-wrap {
  --cpa-anim-size: 44px;
  display: block;
  margin: 2px auto 8px;
}

/* ---------- Si la persona pidió "reducir movimiento" ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion-page *,
  .motion-page *::before,
  .motion-page *::after,
  .cpa-anim-wrap,
  .cpa-anim-wrap *,
  .cpa-anim-wrap::after,
  .cpa-sparkles i,
  #minor-fields,
  .hero-copy,
  .hero-facts,
  .btn-submit:disabled {
    animation: none !important;
    transition: none !important;
  }

  .cpa-sparkles { display: none; }

  .cpa-reveal [data-reveal],
  .cpa-reveal [data-reveal].is-in,
  .cpa-reveal .step[data-reveal] .n {
    opacity: 1 !important;
    transform: none !important;
  }
}