/* Plataforma Educativa - Governança e Segurança dos Dados */

/* Animações personalizadas */
@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-success {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
}

/* Classes utilitárias */
.animate-slideIn { animation: slideIn 0.5s ease-out; }
.animate-fadeIn { animation: fadeIn 0.6s ease-out; }
.animate-pulse-success { animation: pulse-success 1.5s infinite; }

/* Módulos de aprendizagem */
.module-card {
  @apply bg-white rounded-xl shadow-lg p-6 border border-gray-200 hover:shadow-xl transition-all duration-300 cursor-pointer;
}

.module-card:hover {
  transform: translateY(-2px);
}

.module-card.completed {
  @apply border-green-400 bg-green-50;
}

.module-card.current {
  @apply border-blue-400 bg-blue-50 ring-2 ring-blue-200;
}

.module-card.locked {
  @apply bg-gray-100 border-gray-300 cursor-not-allowed opacity-70;
}

/* Badges e gamificação */
.badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

.badge.gold { @apply bg-yellow-100 text-yellow-800 border border-yellow-300; }
.badge.silver { @apply bg-gray-100 text-gray-800 border border-gray-300; }
.badge.bronze { @apply bg-orange-100 text-orange-800 border border-orange-300; }
.badge.completed { @apply bg-green-100 text-green-800 border border-green-300; }

/* Barra de progresso */
.progress-bar {
  @apply w-full bg-gray-200 rounded-full h-3 overflow-hidden;
}

.progress-fill {
  @apply h-full bg-gradient-to-r from-blue-500 to-green-500 transition-all duration-500 ease-out;
}

/* Exercícios interativos */
.exercise-container {
  @apply bg-white rounded-lg border border-gray-200 p-6 space-y-4;
}

.question-card {
  @apply bg-blue-50 border border-blue-200 rounded-lg p-4;
}

.answer-option {
  @apply p-3 border border-gray-300 rounded-lg cursor-pointer transition-all duration-200 hover:border-blue-400 hover:bg-blue-50;
}

.answer-option.correct {
  @apply bg-green-100 border-green-400 text-green-800;
}

.answer-option.incorrect {
  @apply bg-red-100 border-red-400 text-red-800;
}

/* Simuladores */
.simulator-panel {
  @apply bg-gray-800 text-white rounded-lg p-6 font-mono text-sm;
}

.metric-card {
  @apply bg-white rounded-lg p-4 border border-gray-200 shadow-sm;
}

.metric-value {
  @apply text-2xl font-bold text-gray-900;
}

.metric-label {
  @apply text-sm text-gray-600 uppercase tracking-wide;
}

/* Navegação lateral */
.sidebar {
  @apply fixed left-0 top-0 h-full w-64 bg-white border-r border-gray-200 transform transition-transform duration-300 z-30;
}

.sidebar.hidden {
  transform: translateX(-100%);
}

/* Responsividade */
@media (max-width: 768px) {
  .sidebar {
    @apply w-full;
  }
  
  .module-card {
    @apply p-4;
  }
}

/* Estados de loading */
.loading-spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600;
}

.skeleton {
  @apply bg-gray-200 animate-pulse rounded;
}

/* Tooltips */
.tooltip {
  @apply absolute bg-gray-800 text-white text-xs rounded py-1 px-2 z-50 opacity-0 transition-opacity duration-200 pointer-events-none;
}

.tooltip.show {
  @apply opacity-100;
}

/* Notificações */
.notification {
  @apply fixed top-4 right-4 max-w-sm bg-white border border-gray-200 rounded-lg shadow-lg z-50 p-4;
}

.notification.success {
  @apply border-green-400 bg-green-50;
}

.notification.error {
  @apply border-red-400 bg-red-50;
}

.notification.info {
  @apply border-blue-400 bg-blue-50;
}

/* Print styles */
@media print {
  .no-print { display: none !important; }
  .sidebar { display: none !important; }
  body { font-size: 12pt; }
}