.elementor-65 .elementor-element.elementor-element-2161f19a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-65 .elementor-element.elementor-element-3685a484{margin:-10px 10px calc(var(--kit-widget-spacing, 0px) + 0px) 10px;}}/* Start custom CSS for shortcode, class: .elementor-element-3685a484 *//* =============================================
   FIDELIZA V4.1 — CSS Validación QR
   Página operativa punto de venta
   V2: Agrega estado "regalo_disponible"
   ============================================= */

/* Encabezado de validación */
.pf-validation-header {
  max-width: 420px;
  margin: 24px auto 0;
  padding: 0 6px;
}

.pf-validation-header__eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8b949b;
  margin-bottom: 6px;
}

.pf-validation-header__title {
  font-size: 22px;
  font-weight: 700;
  color: #4e5254;
}

/* Contenedor general tarjeta Fideliza */
.pf-card.pf-card--fidelizacion {
  max-width: 420px;
  margin: 16px auto 24px;
  padding: 28px 24px 24px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Header */
.pf-card__header {
  margin-bottom: 20px;
}

.pf-card__title {
  font-size: 22px;
  font-weight: 700;
  color: #4e5254;
  margin-bottom: 4px;
}

.pf-card__subtitle {
  font-size: 20px;
  font-weight: 600;
  color: #4e5254;
}

.pf-card__email {
  font-size: 15px;
  color: #838385;
  text-decoration: underline;
  word-break: break-word;
}

/* MEMBER ID */
.pf-member-id-wrap {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f7fbfc;
  border: 1px solid #e6f1f4;
}

.pf-member-id-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8e9496;
  margin-bottom: 4px;
}

.pf-member-id-value {
  font-size: 14px;
  font-weight: 700;
  color: #075674;
  word-break: break-word;
}

/* Grid de datos */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  margin-bottom: 20px;
}

.pf-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a0a0a0;
  margin-bottom: 2px;
}

.pf-value {
  font-size: 14px;
  color: #4e5254;
}

.pf-value--big {
  font-size: 28px;
  font-weight: 700;
}

/* Barra de progreso */
.pf-progress {
  margin-top: 8px;
}

.pf-progress__label {
  font-size: 14px;
  color: #4e5254;
  margin-bottom: 6px;
}

.pf-progress__bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #eaf9ff;
  overflow: hidden;
  margin-bottom: 6px;
}

.pf-progress__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #45acb4, #e08147);
  transition: width 0.4s ease;
}

/* Colores por nivel */
.pf-progress__fill--explorador { background: linear-gradient(90deg, #3f8fd8, #45acb4); }
.pf-progress__fill--familiar   { background: linear-gradient(90deg, #45acb4, #f9ac3d); }
.pf-progress__fill--foodie     { background: linear-gradient(90deg, #f9ac3d, #e08147); }
.pf-progress__fill--leal       { background: linear-gradient(90deg, #075674, #45acb4); }
.pf-progress__fill--embajador  { background: linear-gradient(90deg, #075674, #e08147); }
.pf-progress__fill--superfan   { background: linear-gradient(90deg, #e08147, #f9ac3d); }
.pf-progress__fill--leyenda    { background: linear-gradient(90deg, #075674, #3f8fd8); }

.pf-progress__text {
  font-size: 12px;
  color: #4e5254;
}

.pf-progress__text--small {
  font-size: 14px;
  color: #838385;
  margin-top: 2px;
}

.pf-progress__badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eaf9ff;
  color: #075674;
  font-size: 13px;
  font-weight: 600;
}

/* Mensaje por nivel */
.pf-level-message {
  margin-top: 16px;
  font-size: 13px;
  color: #4e5254;
}

/* =========================
   ESTADOS DE VALIDACIÓN
   ========================= */

.pf-val-estado {
  padding: 18px 20px;
  border-radius: 18px;
  margin-top: 16px;
}

/* Estado: regalo disponible (gift card) — NUEVO */
.pf-val-estado--regalo {
  background: #fdf4ff;
  border: 1.5px solid #d8b4fe;
}

/* Estado: recompensa de nivel disponible */
.pf-val-estado--disponible {
  background: #f0fdfa;
  border: 1px solid #5eead4;
}

/* Estado: registro incompleto */
.pf-val-estado--sin-registro {
  background: #fef9c3;
  border: 1px solid #fde047;
}

/* Estado: entregado en esta sesión */
.pf-val-estado--canjeada {
  background: #ecfdf5;
  border: 1px solid #86efac;
}

/* Estado: recompensa expirada */
.pf-val-estado--expirada {
  background: #fff7ed;
  border: 1px solid #fdba74;
}

/* Estado: sin recompensa */
.pf-val-estado--vacia {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

/* Etiqueta de estado */
.pf-val-estado__label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Nombre de la recompensa */
.pf-val-estado__reward {
  font-size: 22px;
  font-weight: 700;
  color: #0f766e;
  margin-bottom: 16px;
}

/* Nombre del regalo — color morado diferenciado */
.pf-val-estado--regalo .pf-val-estado__reward {
  color: #7c3aed;
}

/* Mensaje descriptivo */
.pf-val-estado__msg {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
}

/* =========================
   BOTONES DE ACCIÓN
   ========================= */

/* Botón entregar recompensa de nivel — verde */
.pf-val-btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  background: #0f766e;
  color: #ffffff;
  font-family: inherit;
  transition: background 0.2s;
}

.pf-val-btn:hover {
  background: #0d6460;
}

/* Botón entregar regalo gift card — morado */
.pf-val-btn--regalo {
  background: #7c3aed;
  margin-top: 14px;
}

.pf-val-btn--regalo:hover {
  background: #6d28d9;
}

/* =========================
   ALERTAS DE RESULTADO
   ========================= */

.pf-val-alert {
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.pf-val-alert--success {
  background: #ecfdf5;
  color: #166534;
  border: 1px solid #86efac;
}

.pf-val-alert--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* =========================
   ESTADOS VACÍOS / ERROR
   ========================= */

.pf-card--empty,
.pf-card--error {
  max-width: 420px;
  margin: 24px auto;
  padding: 18px 16px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
  font-size: 14px;
  color: #4e5254;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 480px) {
  .pf-validation-header {
    margin: 16px 12px 0;
    padding: 0;
  }

  .pf-card.pf-card--fidelizacion {
    margin: 16px 12px;
    padding: 22px 18px 18px;
  }

  .pf-grid {
    gap: 12px 16px;
  }

  .pf-value--big {
    font-size: 24px;
  }

  .pf-val-btn,
  .pf-val-btn--regalo {
    font-size: 16px;
    padding: 14px 16px;
  }
}/* End custom CSS */