/* Tarjeta del cliente — pensada para mostrarse en caja desde el celular */
.pagina-tarjeta { background: var(--papel); }
.contenedor {
  width: min(100%, 460px);
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) 1rem calc(2rem + env(safe-area-inset-bottom));
}

/* ---------- La tarjeta ---------- */
.tarjeta {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.586;
  border-radius: var(--r-grande);
  background: var(--navy);
  color: var(--blanco);
  padding: 1.15rem 1.25rem 1.1rem 2.1rem;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--sombra-tarjeta);
}
/* Franja celeste: los dos azules del logo, IMPO y HOGAR */
.tarjeta-banda { position: absolute; inset: 0 auto 0 0; width: .85rem; background: var(--celeste); }
.tarjeta-arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tarjeta-logo { width: 46%; height: auto; }
.tarjeta-socio { text-align: right; line-height: 1.15; }
.tarjeta-socio span { display: block; font-size: .8rem; color: #BFD3F2; }
.tarjeta-socio strong { font-family: var(--f-titulo); font-weight: 600; font-size: 1.15rem; letter-spacing: .04em; }
.tarjeta-nombre { font-family: var(--f-titulo); font-weight: 600; font-size: 1.3rem; line-height: 1.15; color: #DCE7F7; overflow-wrap: anywhere; }
.tarjeta-saldo { font-family: var(--f-titulo); font-weight: 700; line-height: .95; margin-top: .2rem; }
#t-saldo { font-size: clamp(3rem, 17vw, 4.4rem); letter-spacing: -.01em; }
.tarjeta-saldo-unidad { font-size: 1.35rem; font-weight: 600; color: var(--celeste); }

.tarjeta-fantasma { background: linear-gradient(100deg, #DDE5F0 30%, #EBF0F6 50%, #DDE5F0 70%); background-size: 300% 100%; animation: brillo 1.4s infinite linear; box-shadow: none; }
@keyframes brillo { to { background-position: -150% 0; } }

.nota-inactiva { margin-top: 1rem; padding: .75rem 1rem; border-radius: var(--r-medio); background: var(--alerta-suave); color: var(--alerta); font-weight: 600; }

/* ---------- QR ---------- */
.qr-bloque {
  margin-top: 1.25rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  padding: 1.25rem 1.25rem 1.1rem;
  text-align: center;
}
.qr-imagen { width: min(100%, 260px); margin: 0 auto; }
.qr-imagen svg { width: 100%; height: auto; }
.qr-bloque h2 { font-size: 1.35rem; margin-top: .6rem; color: var(--navy); }
.qr-ayuda { font-size: .9rem; color: var(--tinta-2); margin-top: .15rem; }

/* ---------- Secciones ---------- */
.seccion { margin-top: 1.75rem; }
.seccion h2 { font-size: 1.5rem; color: var(--tinta); margin-bottom: .6rem; }

.recompensas, .historial { list-style: none; margin: 0; padding: 0; }
.recompensa {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio);
  padding: .85rem 1rem; margin-bottom: .6rem;
}
.recompensa-fila { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.recompensa-nombre { font-weight: 600; }
.recompensa-costo { font-family: var(--f-titulo); font-weight: 600; font-size: 1.15rem; color: var(--navy); white-space: nowrap; }
.recompensa-desc { font-size: .92rem; color: var(--tinta-2); margin-top: .15rem; }
.progreso { height: 6px; border-radius: 3px; background: #E6ECF4; margin-top: .65rem; overflow: hidden; }
.progreso > span { display: block; height: 100%; background: var(--celeste); border-radius: 3px; }
.recompensa-estado { font-size: .88rem; margin-top: .35rem; color: var(--tinta-2); }
.recompensa.lista { border-color: var(--bien); }
.recompensa.lista .progreso > span { background: var(--bien); }
.recompensa.lista .recompensa-estado { color: var(--bien); font-weight: 600; }

.historial li {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--linea);
}
.historial li:last-child { border-bottom: 0; }
.hist-desc { font-weight: 500; overflow-wrap: anywhere; }
.hist-fecha { grid-column: 1; font-size: .85rem; color: var(--tinta-2); }
.hist-puntos { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--f-titulo); font-weight: 700; font-size: 1.3rem; }
.hist-puntos.suma { color: var(--bien); }
.hist-puntos.resta { color: var(--tinta-2); }
.vacio { color: var(--tinta-2); padding: .5rem 0; }

/* ---------- Guardar en inicio ---------- */
.guardar { margin-top: 1.75rem; background: var(--celeste-suave); border-radius: var(--r-medio); padding: .85rem 1rem; }
.guardar summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.guardar-pasos h3 { font-size: 1.1rem; margin-top: .9rem; }
.guardar-pasos p { font-size: .95rem; margin-top: .2rem; }
.guardar-nota { margin-top: .9rem !important; color: var(--tinta-2); }

.pie { margin-top: 1.5rem; font-size: .85rem; color: var(--tinta-2); text-align: center; display: flex; justify-content: center; align-items: center; gap: .75rem; flex-wrap: wrap; }
.btn-enlace { background: none; border: 0; padding: .25rem; color: var(--navy); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ---------- Estados de página ---------- */
.estado-pagina { text-align: center; padding-top: 1rem; }
.estado-pagina p { color: var(--tinta-2); margin-top: 1rem; }
.estado-pagina h1 { font-size: 2rem; margin-top: 2rem; color: var(--navy); }
.estado-pagina .btn { margin-top: 1.5rem; }
.logo-error { margin: 2rem auto 0; width: 200px; height: auto; }