body {
  background-color: #0f172a;
  color: #f8fafc;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.credit-btn {
  background-color: #1e293b;
  border: 2px solid rgba(148, 163, 184, 0.1);
  border-radius: 1.25rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.credit-btn:hover {
  border-color: #334155;
  transform: translateY(-2px);
}

.tarjeta-activa {
  border-color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.05) !important;
  transform: scale(1.02) !important;
}

.tarjeta-activa i {
  color: #10b981 !important;
}

.credit-btn i {
  transition: color 0.2s ease;
}

/* Clases utilitarias controladas por JS para los corazones */
.heart-active-yes {
  color: #10b981 !important;
  fill: rgba(16, 185, 129, 0.2) !important;
}

.heart-active-no {
  color: #f43f5e !important;
}

.satisfaction-btn i {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
}

.satisfaction-btn:hover i {
  transform: scale(1.2);
}

#modal-container:not(.hidden) > div {
  animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalPop {
  from {
    transform: scale(0.9) translateY(10px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}