/* =============================================================
   TapUp · Página de activación (activar.html)

   Va aparte de styles.css a propósito: la landing se va a rediseñar
   y esta página no debe irse con ella. De styles.css toma solo lo
   estable —los tokens de marca, .container, .btn y los .field— y
   todo lo demás vive aquí con el prefijo .act-.

   Índice
   01. Base de la página
   02. Encabezado
   03. Bienvenida y barra de pasos
   04. Tarjetas
   05. La ficha encontrada
   06. Avisos y badges
   07. Guía desplegable
   08. Formulario y estado final
   09. Pie
   ============================================================= */


/* =============================================================
   01. BASE
   ============================================================= */
.act-body {
  background: var(--gray-50);
}


/* =============================================================
   02. ENCABEZADO
   ============================================================= */
.act-header {
  background: var(--white);
  border-bottom: var(--border);
}
.act-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.act-header__help {
  font-size: .9rem;
  font-weight: 600;
  color: var(--blue);
}


/* =============================================================
   03. BIENVENIDA Y BARRA DE PASOS
   ============================================================= */
.act-hero {
  padding-block: 40px 28px;
  text-align: left;
}

/* La referencia del pedido. Aparece solo si la URL la trae. */
.act-pedido {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 14px;
  background: #ECFDF5;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  color: #065F46;
}

.act-hero__title {
  font-size: clamp(1.55rem, 5.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-strong);
}
.act-hero__lead {
  margin-top: 14px;
  font-size: 1.02rem;
  color: var(--text-muted);
}

/* Tres pasos. En móvil se apilan los números en una sola fila para
   que no se coma media pantalla antes de llegar al campo. */
.act-pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}
.act-pasos__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--gray-500);
}
.act-pasos__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: .8rem;
}
.act-pasos__item.is-actual { color: var(--text-strong); }
.act-pasos__item.is-actual span {
  background: var(--blue);
  color: var(--white);
}
.act-pasos__item.is-hecho span {
  background: #D1FAE5;
  color: #065F46;
}

/* Modo prellenado: mientras se busca su negocio no hay campo que
   llenar, así que hay que decirle que algo está pasando. */
.act-cargando {
  margin-top: 22px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--blue);
}
.act-cargando::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid var(--blue-tint);
  border-top-color: var(--blue);
  border-radius: 50%;
  vertical-align: -1px;
  animation: act-giro .7s linear infinite;
}
@keyframes act-giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .act-cargando::after { animation: none; }
}


/* =============================================================
   04. TARJETAS
   ============================================================= */
.act-section { padding-block: 12px 28px; }
.act-section--tint { background: transparent; }
.act-section--ok   { background: transparent; }

.act-card {
  padding: 22px 20px 26px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
}
.act-card + .act-card { margin-top: 16px; }

.act-card__title {
  margin-bottom: 18px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-strong);
}

.act-card--resultado { border-color: var(--gray-300); }
.act-card--error     { border-color: #FCA5A5; }
.act-card--ok        { border-color: #6EE7B7; }

/* El campo del enlace es largo y se pega, no se teclea: fuente
   monoespaciada para que se note si viene cortado. */
.act-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
}

.act-nota {
  margin-top: 14px;
  font-size: .84rem;
  color: var(--text-muted);
  text-align: center;
}

.act-enlace {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}


/* =============================================================
   05. LA FICHA ENCONTRADA
   ============================================================= */
.act-ficha__nombre {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-strong);
}
.act-ficha__direccion {
  margin-top: 6px;
  font-size: .95rem;
  color: var(--text-muted);
}
.act-ficha__estrellas {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-strong);
}
.act-ficha__dia0 {
  margin-top: 6px;
  font-size: .86rem;
  color: var(--text-muted);
}
.act-ficha__declarado {
  margin-top: 12px;
  font-size: .88rem;
  color: var(--text-muted);
}

/* Atajo a su ficha de Maps cuando sabemos cómo se llama el negocio. */
.act-atajo {
  margin: -8px 0 20px;
  font-size: .9rem;
  font-weight: 600;
}
.act-ficha__abrir {
  margin-top: 16px;
  font-size: .92rem;
  font-weight: 600;
}

.act-acciones {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
@media (min-width: 560px) {
  .act-acciones { grid-template-columns: 1fr auto; }
}

.act-confirmado {
  margin-top: 20px;
  font-size: .92rem;
  font-weight: 600;
  color: #065F46;
}


/* =============================================================
   06. AVISOS Y BADGES
   ============================================================= */
.act-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.act-badge--verde { background: #ECFDF5; color: #065F46; }
.act-badge--ambar { background: #FFFBEB; color: #92400E; }
.act-badge--rojo  { background: #FEF2F2; color: #B91C1C; }

.act-aviso {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.55;
}
.act-aviso--ambar {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #78350F;
}
.act-aviso--azul {
  background: var(--blue-tint);
  border: 1px solid #C7DAFF;
  color: var(--indigo);
}

.act-error__texto {
  font-size: .96rem;
  color: var(--text-body);
}
.act-error__pistas {
  margin: 16px 0 20px;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: .9rem;
  color: var(--text-muted);
}


/* =============================================================
   07. GUÍA DESPLEGABLE
   Cerrada por omisión: quien ya sabe copiar su enlace no tiene por
   qué leer cuatro pasos, y quien no sabe los encuentra a un toque.
   ============================================================= */
.act-guia {
  margin: 4px 0 22px;
  padding: 14px 16px;
  background: var(--gray-50);
  border: var(--border);
  border-radius: var(--radius);
}
.act-guia summary {
  font-size: .92rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
}
.act-guia__lista {
  margin: 14px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: .92rem;
  color: var(--text-body);
}
.act-guia__nota {
  margin-top: 14px;
  font-size: .86rem;
  color: var(--text-muted);
}


/* =============================================================
   08. FORMULARIO Y ESTADO FINAL
   ============================================================= */
.act-form { border: var(--border); }
.act-form__lead {
  margin: -10px 0 20px;
  font-size: .92rem;
  color: var(--text-muted);
}

.act-ok__lead {
  margin: -6px 0 22px;
  font-size: .98rem;
  color: var(--text-body);
}

/* Campo + botón de copiar. En móvil el botón se va abajo, porque a
   380 px un botón al lado deja el campo en tres caracteres. */
.act-copiar { display: grid; gap: 8px; }
@media (min-width: 480px) {
  .act-copiar { grid-template-columns: 1fr auto; }
}
.act-copiar .field__input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
}


/* =============================================================
   09. PIE
   ============================================================= */
.act-footer {
  margin-top: 24px;
  padding-block: 24px;
  border-top: var(--border);
  background: var(--white);
}
.act-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--text-muted);
}
.act-footer a { color: var(--text-muted); text-decoration: underline; }
.act-footer a:hover { color: var(--blue); }


/* Quien pidió menos movimiento, menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}