/* Estilos con alta especificidad para sobrescribir cualquier otro estilo */
textarea,
textarea.form-control,
textarea.w-full,
textarea[rows],
textarea.bg-\[\#222222\],
textarea.bg-\[\#333333\],
#general_prompt,
[id^="textarea-"],
[class*="textarea"] {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
    border-color: #404040 !important;
    border-radius: 0.5rem !important;
}

/* Estado de foco con alta especificidad */
textarea:focus,
textarea.form-control:focus,
textarea.w-full:focus,
textarea[rows]:focus,
textarea.bg-\[\#222222\]:focus,
textarea.bg-\[\#333333\]:focus,
#general_prompt:focus,
[id^="textarea-"]:focus,
[class*="textarea"]:focus {
    border-color: #fa930a !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
    outline: none !important;
}

/* Sobrescribir específicamente las clases de Tailwind */
.focus\:ring-1:focus,
.focus\:ring-2:focus,
.focus\:ring-\[\#fa930a\]:focus,
.focus\:border-gray-700:focus,
.focus\:border-transparent:focus {
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: none !important;
    --tw-ring-offset-shadow: none !important;
}

/* Aplicar nuestros estilos personalizados a los elementos con clases de Tailwind */
textarea.focus\:ring-1:focus,
textarea.focus\:ring-2:focus,
textarea.focus\:ring-\[\#fa930a\]:focus,
textarea.focus\:border-gray-700:focus,
textarea.focus\:border-transparent:focus {
    border-color: #fa930a !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
}

/* Asegurar que los bordes sean completamente visibles */
textarea.border-opacity-30,
textarea.border-opacity-50,
textarea.border-opacity-70 {
    border: 1px solid #404040 !important;
}

/* Estilos específicos para el textarea de general_prompt */
#general_prompt {
    border: 1px solid #404040 !important;
    border-color: #404040 !important;
}

#general_prompt:focus {
    border-color: #fa930a !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
}