/* ===== TESTES.CSS - Dark Mode Styles for PHQ-9 + GAD-7 ===== */

:root {
  --bg: #020617;
  --bg-card: #0f172a;
  --border: #1e293b;
  --text: #e2e8f0;
  --text-muted: #64748b;
  --accent: #f59e0b;
  --accent-hover: #fbbf24;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Focus visible */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseSoft { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.animate-slide-up { animation: slideUp 0.5s ease-out forwards; }
.btn-pulse { animation: pulseSoft 2s ease-in-out infinite; }

/* Card hover */
.card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.4); }

/* Progress bar */
.progress-bar { transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

/* Question cards */
.question-card { animation: slideUp 0.4s ease-out; }

/* Radio button styling */
.opcao-btn {
  transition: all 0.2s ease;
  background: #0f172a;
  border: 1px solid #1e293b;
}
.opcao-btn:hover {
  border-color: #334155;
  background: #111827;
}
.opcao-btn:has(input:checked) {
  border-color: var(--accent);
  background: rgba(245, 158, 11, 0.08);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Result cards */
.result-card { animation: fadeIn 0.5s ease-out; }

/* Crisis alert pulse */
@keyframes alertPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(251, 113, 133, 0); } }
.alert-crisis { animation: alertPulse 2s infinite; }

/* Mobile adjustments */
@media (max-width: 640px) {
  .opcao-btn { padding: 1rem; }
  .opcao-btn .flex { gap: 0.75rem; }
}