* { box-sizing: border-box; }

.option-card {
  display: block;
  cursor: pointer;
}
.option-card .option-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  transition: all 0.15s;
  background: #fff;
}
.option-card input:checked + .option-content {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}
.option-card .option-content:hover {
  border-color: #93c5fd;
}

.option-card-small {
  display: block;
  cursor: pointer;
}
.option-card-small .option-content-small {
  padding: 8px 10px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  transition: all 0.15s;
  background: #fff;
  color: #6b7280;
}
.option-card-small input:checked + .option-content-small {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}
.option-card-small .option-content-small:hover {
  border-color: #93c5fd;
}

.risk-option {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.risk-option:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
}
.risk-option:hover {
  border-color: #93c5fd;
  background: #f8faff;
}

.step-content { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.semaforo-ok    { background: #dcfce7; border-color: #86efac; }
.semaforo-warn  { background: #fef9c3; border-color: #fde047; }
.semaforo-bad   { background: #fee2e2; border-color: #fca5a5; }

.product-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  transition: box-shadow 0.15s;
}
.product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }

.price-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}
.up   { color: #16a34a; }
.down { color: #dc2626; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { opacity: 1; }

.loader {
  width: 20px; height: 20px;
  border: 2px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Fast-track question screen slide-in */
.q-screen:not(.hidden) {
  animation: qSlideIn 0.22s ease-out;
}
@keyframes qSlideIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Dashboard card fade-up */
.dash-card {
  animation: dashFadeUp 0.3s ease-out;
}
@keyframes dashFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}