/* css/components/voucher.css
   Módulo de cupones/promociones — reutiliza los mismos tokens de
   css/tokens.css (--color-ink, --color-find, --shadow-card, etc.)
   para que combine visualmente con el resto del sitio. */

.voucher-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--color-paper);
  font-family: var(--font-body);
}

/* ---------- Tarjeta del cupón (lo que ve el cliente final) ---------- */
.voucher-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
  position: relative;
}

.voucher-card__negocio {
  font-family: var(--font-display);
  font-size: var(--step-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.voucher-card__descuento {
  font-family: var(--font-display);
  font-size: var(--step-display);
  color: var(--color-find);
  line-height: 1;
  margin: 0.5rem 0;
}

.voucher-card__promo {
  font-size: var(--step-body);
  color: var(--color-ink);
  margin-bottom: 1.25rem;
}

.voucher-card__condicion {
  display: inline-block;
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--color-find-dark);
  background: rgba(255, 90, 54, 0.08);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-card);
  margin-bottom: 1rem;
}

.voucher-card__horario {
  font-size: var(--step-small);
  color: var(--color-ink-soft);
  margin-top: -0.9rem;
  margin-bottom: 1.25rem;
}

.voucher-card__generado {
  font-size: var(--step-small);
  color: var(--color-ink-soft);
  opacity: 0.75;
  margin-top: -0.75rem;
  margin-bottom: 1rem;
}

.voucher-card__qr {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: var(--color-paper);
  border-radius: var(--radius-card);
  margin-bottom: 1rem;
}

.voucher-card__codigo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  color: var(--color-ink);
  padding: 0.5rem 1rem;
  border: 2px dashed var(--color-line);
  border-radius: var(--radius-card);
  margin-bottom: 1rem;
}

.voucher-card__estado {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: var(--step-small);
  font-weight: 600;
}
.voucher-card__estado--emitido {
  background: rgba(31, 174, 159, 0.12);
  color: var(--color-mint-dark);
}
.voucher-card__estado--canjeado {
  background: rgba(20, 22, 31, 0.08);
  color: var(--color-ink-soft);
}

.voucher-card__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0 1.5rem;
  margin-top: 1rem;
  background: var(--color-find);
  color: white;
  border: none;
  border-radius: var(--radius-card);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.voucher-card__boton:hover {
  background: var(--color-find-dark);
}

/* Badge de descuento en la tarjeta de listado (Hot/Promociones) */
.product-card__badge {
  display: block;
  font-weight: 700;
  font-size: var(--step-small);
  text-transform: uppercase;
  color: var(--color-find);
  margin-bottom: 0.2rem;
}

.product-card__condition {
  display: block;
  font-size: 0.75rem;
  color: var(--color-ink-soft);
  margin-bottom: 0.4rem;
}

/* ---------- Formularios (panel admin / verificación) ---------- */
.voucher-form {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  max-width: 420px;
  width: 100%;
}

.voucher-form h1 {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  color: var(--color-ink);
  margin-bottom: 1.5rem;
}

.voucher-form label {
  display: block;
  font-size: var(--step-small);
  color: var(--color-ink-soft);
  margin-bottom: 0.35rem;
}

.voucher-form input,
.voucher-form select {
  width: 100%;
  min-height: var(--touch-min);
  padding: 0 0.9rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  font-family: var(--font-body);
  font-size: var(--step-body);
  color: var(--color-ink);
}

.voucher-form input:focus,
.voucher-form select:focus {
  outline: 2px solid var(--color-mint);
  outline-offset: 1px;
}

.voucher-form button {
  width: 100%;
  min-height: var(--touch-min);
  background: var(--color-ink);
  color: white;
  border: none;
  border-radius: var(--radius-card);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-body);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.voucher-form button:hover {
  background: #2a2d3d;
}
.voucher-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Mensajes de resultado ---------- */
.voucher-mensaje {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: var(--radius-card);
  font-size: var(--step-body);
  text-align: center;
  font-weight: 600;
}
.voucher-mensaje--exito {
  background: rgba(31, 174, 159, 0.12);
  color: var(--color-mint-dark);
}
.voucher-mensaje--error {
  background: rgba(255, 90, 54, 0.1);
  color: var(--color-find-dark);
}
.voucher-mensaje--oculto {
  display: none;
}

/* Contador de la sesión en la página de verificación */
.voucher-contador {
  margin-top: 1rem;
  text-align: center;
  font-size: var(--step-small);
  color: var(--color-ink-soft);
}

/* ---------- Impresión: solo la tarjeta del cupón, nada más ---------- */
@media print {
  body * {
    visibility: hidden;
  }
  .voucher-card,
  .voucher-card * {
    visibility: visible;
  }
  .voucher-card {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: none;
    border: 1px solid var(--color-line);
  }
  .voucher-card__boton {
    display: none;
  }
}