/* Colores personalizados para el tema - ACTUALIZADO A VERDES */
:root {
  --color-green-50: #f7faef;
  --color-green-100: #eef5de;
  --color-green-200: #e1ecbe;
  --color-green-300: #cce29e;
  --color-green-400: #b5d67e;
  --color-green-500: #9ebb30; /* Color corporativo principal */
  --color-green-600: #87a52c;
  --color-green-700: #708027;
  --color-green-800: #596622;
  --color-green-900: #424c1a;
}

.bg-green-50 { background-color: var(--color-green-50); }
.bg-green-100 { background-color: var(--color-green-100); }
.bg-green-200 { background-color: var(--color-green-200); }
.bg-green-300 { background-color: var(--color-green-300); }
.bg-green-400 { background-color: var(--color-green-400); }
.bg-green-500 { background-color: var(--color-green-500); }
.bg-green-600 { background-color: var(--color-green-600); }
.bg-green-700 { background-color: var(--color-green-700); }
.bg-green-800 { background-color: var(--color-green-800); }
.bg-green-900 { background-color: var(--color-green-900); }

.text-green-50 { color: var(--color-green-50); }
.text-green-100 { color: var(--color-green-100); }
.text-green-200 { color: var(--color-green-200); }
.text-green-300 { color: var(--color-green-300); }
.text-green-400 { color: var(--color-green-400); }
.text-green-500 { color: var(--color-green-500); }
.text-green-600 { color: var(--color-green-600); }
.text-green-700 { color: var(--color-green-700); }
.text-green-800 { color: var(--color-green-800); }
.text-green-900 { color: var(--color-green-900); }

.border-green-500 { border-color: var(--color-green-500); }
.focus\:ring-green-500:focus { --tw-ring-color: var(--color-green-500); }
.hover\:bg-green-100:hover { background-color: var(--color-green-100); }
.hover\:bg-green-700:hover { background-color: var(--color-green-700); }

/* Mantener las clases orange y brown para compatibilidad (ahora apuntan a los verdes) */
.bg-orange-50 { background-color: var(--color-green-50); }
.bg-orange-100 { background-color: var(--color-green-100); }
.bg-orange-200 { background-color: var(--color-green-200); }
.bg-orange-300 { background-color: var(--color-green-300); }
.bg-orange-400 { background-color: var(--color-green-400); }
.bg-orange-500 { background-color: var(--color-green-500); }
.bg-orange-600 { background-color: var(--color-green-600); }
.bg-orange-700 { background-color: var(--color-green-700); }
.bg-orange-800 { background-color: var(--color-green-800); }
.bg-orange-900 { background-color: var(--color-green-900); }

.text-orange-50 { color: var(--color-green-50); }
.text-orange-100 { color: var(--color-green-100); }
.text-orange-200 { color: var(--color-green-200); }
.text-orange-300 { color: var(--color-green-300); }
.text-orange-400 { color: var(--color-green-400); }
.text-orange-500 { color: var(--color-green-500); }
.text-orange-600 { color: var(--color-green-600); }
.text-orange-700 { color: var(--color-green-700); }
.text-orange-800 { color: var(--color-green-800); }
.text-orange-900 { color: var(--color-green-900); }

.border-orange-500 { border-color: var(--color-green-500); }
.focus\:ring-orange-500:focus { --tw-ring-color: var(--color-green-500); }
.hover\:bg-orange-100:hover { background-color: var(--color-green-100); }
.hover\:bg-orange-700:hover { background-color: var(--color-green-700); }

.bg-brown-50 { background-color: var(--color-green-50); }
.bg-brown-100 { background-color: var(--color-green-100); }
.bg-brown-200 { background-color: var(--color-green-200); }
.bg-brown-300 { background-color: var(--color-green-300); }
.bg-brown-400 { background-color: var(--color-green-400); }
.bg-brown-500 { background-color: var(--color-green-500); }
.bg-brown-600 { background-color: var(--color-green-600); }
.bg-brown-700 { background-color: var(--color-green-700); }
.bg-brown-800 { background-color: var(--color-green-800); }
.bg-brown-900 { background-color: var(--color-green-900); }

.text-brown-50 { color: var(--color-green-50); }
.text-brown-100 { color: var(--color-green-100); }
.text-brown-200 { color: var(--color-green-200); }
.text-brown-300 { color: var(--color-green-300); }
.text-brown-400 { color: var(--color-green-400); }
.text-brown-500 { color: var(--color-green-500); }
.text-brown-600 { color: var(--color-green-600); }
.text-brown-700 { color: var(--color-green-700); }
.text-brown-800 { color: var(--color-green-800); }
.text-brown-900 { color: var(--color-green-900); }

.border-brown-500 { border-color: var(--color-green-500); }
.focus\:ring-brown-500:focus { --tw-ring-color: var(--color-green-500); }
.hover\:bg-brown-100:hover { background-color: var(--color-green-100); }
.hover\:bg-brown-700:hover { background-color: var(--color-green-700); }

/* Animaciones y estilos específicos */
.chat-message {
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.3s forwards;
}

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

.user .bg-brown-50 {
  background-color: #f0f4f8;
}

.typing-indicator {
  display: inline-flex;
  align-items: center;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  margin-right: 3px;
  background-color: var(--color-green-400);
  border-radius: 50%;
  animation: typingBounce 1s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.1s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.2s; }

@keyframes typingBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Estilos responsivos */
@media (max-width: 640px) {
  .chat-message .ml-3 {
    max-width: 80%;
  }
}