/* =====================================================
   ESTILOS DE APARÊNCIA E TEMA
   ===================================================== */

/* Variáveis CSS para cores do tema */
:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #3b82f6;
}

/* Tema Escuro */
body.dark-theme {
  background-color: #111827;
  color: #f3f4f6;
}

body.dark-theme .bg-white {
  background-color: #1f2937 !important;
}

body.dark-theme .text-gray-800 {
  color: #f3f4f6 !important;
}

body.dark-theme .text-gray-700 {
  color: #e5e7eb !important;
}

body.dark-theme .text-gray-600 {
  color: #d1d5db !important;
}

body.dark-theme .text-gray-500 {
  color: #9ca3af !important;
}

body.dark-theme .border-gray-200 {
  border-color: #374151 !important;
}

body.dark-theme .border-gray-300 {
  border-color: #4b5563 !important;
}

body.dark-theme .bg-gray-50 {
  background-color: #1f2937 !important;
}

body.dark-theme .bg-gray-100 {
  background-color: #374151 !important;
}

body.dark-theme .shadow-lg,
body.dark-theme .shadow-md,
body.dark-theme .shadow {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
}

/* Tamanhos de Fonte */
body.font-small {
  font-size: 14px;
}

body.font-medium {
  font-size: 16px;
}

body.font-large {
  font-size: 18px;
}

body.font-xlarge {
  font-size: 20px;
}

/* Ajustar títulos proporcionalmente */
body.font-small h1 { font-size: 1.5rem; }
body.font-small h2 { font-size: 1.25rem; }
body.font-small h3 { font-size: 1.1rem; }

body.font-medium h1 { font-size: 1.875rem; }
body.font-medium h2 { font-size: 1.5rem; }
body.font-medium h3 { font-size: 1.25rem; }

body.font-large h1 { font-size: 2.25rem; }
body.font-large h2 { font-size: 1.875rem; }
body.font-large h3 { font-size: 1.5rem; }

body.font-xlarge h1 { font-size: 2.5rem; }
body.font-xlarge h2 { font-size: 2rem; }
body.font-xlarge h3 { font-size: 1.75rem; }

/* Modo Compacto */
body.compact-mode {
  line-height: 1.4;
}

body.compact-mode .p-6 {
  padding: 1rem !important;
}

body.compact-mode .p-4 {
  padding: 0.75rem !important;
}

body.compact-mode .py-4 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

body.compact-mode .px-4 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

body.compact-mode .gap-6 {
  gap: 1rem !important;
}

body.compact-mode .gap-4 {
  gap: 0.75rem !important;
}

body.compact-mode .mb-6 {
  margin-bottom: 1rem !important;
}

body.compact-mode .mb-4 {
  margin-bottom: 0.75rem !important;
}

/* Sem Animações */
body.no-animations * {
  transition: none !important;
  animation: none !important;
}

/* Aplicar cor primária aos botões e elementos interativos */
.btn-primary,
button.bg-blue-600,
.bg-blue-600 {
  background-color: var(--color-primary) !important;
}

.btn-primary:hover,
button.bg-blue-600:hover,
.hover\:bg-blue-700:hover {
  background-color: var(--color-primary-hover) !important;
}

.text-blue-600 {
  color: var(--color-primary) !important;
}

.border-blue-600 {
  border-color: var(--color-primary) !important;
}

.from-blue-600 {
  --tw-gradient-from: var(--color-primary) !important;
}

.to-blue-700 {
  --tw-gradient-to: var(--color-primary-hover) !important;
}

/* Transições suaves */
.tema-option,
.cor-option {
  transition: all 0.3s ease;
}

.tema-option:hover,
.cor-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Preview de botões */
.preview-btn {
  transition: all 0.2s ease;
}

.preview-btn:hover {
  transform: scale(1.05);
}

.preview-btn-primary {
  transition: all 0.3s ease;
}

.preview-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.preview-btn-secondary {
  transition: all 0.3s ease;
}

.preview-btn-secondary:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.preview-card {
  transition: all 0.3s ease;
}

.preview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Animação de fade para elementos que aparecem */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}